Oorian web applications are built and deployed just like normal Java web applications, except they include the Oorian library which provides the UI components and the translation engine for converting the pure Java UI into the HTML, CSS, and Javascript that is served to the client's browser.  

Oorian web applications consist of mutliple pages like traditional web applications; however, the web pages are coded in Java and not HTML.  The code for the simplest Oorian web page looks like this:

@Page("/helloworld")
public class HelloWorldPage extends HtmlPage
{    
    @Override
    protected void createHead(Head head)    
    {        
        head.setTitle("My Hello World Page");
    } 
    @Override
    protected void createBody(Body body)
    {
        Span span = new Span();
        span.setText("Hello World");
        body.addElement(span);
     }
 }

The basic building blocks of an Oorian web applications are HTML element classes.  Oorian contains a class for every HTML 5 element available. Additionally, the API for the element classes support all CSS3 style attributes. Here is a slightly more elaborate page showing some of the API and CSS styling.

@Page("/helloworld")
public class HelloWorldPage extends HtmlPage
{    
    @Override
    protected void createHead(Head head)    
    {        
        // The Head class supports all the HTML elements and attributes.
        head.setTitle("This Is My Page");
        head.setDescription("This is a very simple Oorian web page");
        head.setKeywords("Do keyword even matter anymore?");
        head.addMeta("twitter:title", "My Page");
    }
    @Override
    protected void createBody(Body body)
    {
        body.setPadding(50);
        Div div = new Div();
        div.setId("MyDiv");
        div.setText("Hello World");
        div.setTextAlign(TextAlign.CENTER);
        div.setBackgroundColor("#00ff00");
        body.addElement(div);
    }
}

At this point you may be saying, "So what.  How is this any better than creating regular HTML / CSS web pages?"  Here's my answer.

Extensibility and Reusability

For sophisticated UI's, your page code won't consist of hundreds of basic HTML elements.  You'll most likely be using more sophisticated components you have built such as menus, grids, dialogs, etc.  And that is one of the benefits of Oorian.  Unlike HTML where resusability means copying and pasting code or creating UI components in Javscript,  you can build a library of sophisticated controls that can be easily used throughout your web application leveraging the benefits of object-oriented programming such as inheritance and polymorphism.  With a control library layered on top of the Oorian Core library, your web application code will begin to resemble the code of traditional GUI application.

Seamless Client-Server Communication

The second major benefit of Oorian is the seamless communication that occurs between your web app and the user's browser.  Any event that is generated in the user's browser can be easily handled in your web app running on the server simply by registering to receive the event.  It appears as if your server-side app is actually running on the client-side. 

Oorian implements an event / listener model similar to the JDK for familiarity.  In the code sample below, the HelloWordPage implements the MouseClickListener interface, then registers to receive the MouseClickedEvent from the Div.  When the user clicks on the Div in the browser, the onMouseEvent method will be called on the HelloWorldPage class.  

Any updates to the UI that occur as a result of a UI event are automatically sent back to the client, which updates the loaded web page accordingly.  

In the code sample below, we change the text displayed by the Div and its background color.

@Page("/helloworld")
public class HelloWorldPage extends HtmlPage implements MouseClickListener
{    
    @Override
    protected void createHead(Head head)    
    {        
        // The Head class supports all the HTML elements and attributes.
        head.setTitle("This Is My Page");
    }
    @Override
    protected void createBody(Body body)
    {
        Div div = new Div();
        div.setId("MyDiv");
        div.setText("Hello World");
        div.setTextAlign(TextAlign.CENTER);
        div.setBackgroundColor("#00ff00");
        div.registerForEvent(this, MouseClickedEvent.class);
        body.addElement(div);
    }
    @Override
    public void onEvent(MouseClickedEvent mce)
    {
        if (mce.getSource().getId().equals("MyDiv"))
        {
            Div div = (Div)mce.getSource();
            div.setText("I've Been Clicked");
            div.setBackgroundColor(Color.RED);
        }
    }
}

In addition to updating the UI by responding to events generated by the UI, Oorian web apps can also send updates to the browser unsolicited, which allows you to update the UI periodically based on data changes without having to setup client-side polling.  

Normal HTML, CSS, and Javascript

While Oorian provides an alternative to HTML, CSS, and Javascript, it doesn't prevent you from using those technologies.  

CSS 

If you prefer or need to use CSS files with your web application, you can do so just as you would with normal HTML pages.  You simply add a tag to your page Head like this:

@Override
protected void createHead(Head head)
{        
    head.addCssLink("styles.css");
}

And you can set the CSS class names on any elements like this:

Div div = new Div();
div.setClass("BlueBox");

Javascript

Javascript can be included if necessary in the same manner as a normal webpage:

@Override
protected void createHead(Head head)
{        
    head.addJavascript("mycode.js");
}

And your webapp can send javascript to the browser to execute on the fly:

executeJs("somefunction();");

And you can override the built-in HTML element handlers from within your webapp: 

Div div = new Div();
div.setOnClick("somefunction()");

Third Party Javascript Controls

iGradePlus makes use of several commerical advanced controls such as an HTML editor, a PDF viewer, and video conferencing control.  Controls like this can be incorporated into your Oorian webapp by creating a custom component that creates any elements required by the control and executes  the necessary javascript to initialize the control.  

HTML Templates

If you're building an interactive, dynamic website as opposed to a web application and are using a professionally designed template or having a web designer create it for you, you can still use Oorian to manage the site.  Oorian provides a special page class, HtmlTemplatePage that can be used to publish a page from an HTML file while still using all the features of Oorian to interact with page.  

For instance, this website is built using Oorian and a modified version of this template.   The code for this page is shown below.  The entire page is loaded from an HTML file, but the forms on the page are managed by the Oorian page.

public class OorianHomePage extends HtmlTemplatePage implements FormListener
{
    public OorianHomePage()
    {
        // Specify the HTML page to load
        super("index.html");
    }
    @Override
    protected void createBody(Body body)    
    {
        // Get each form from the DOM and register as a listener
        Form contactForm = (Form)body.getElementById("contactform");
        contactForm.registerListener(this);
        Form subscribeForm = (Form)body.getElementById("subscribeform");
        subscribeForm.registerListener(this);        
    }
    @Override
    public void onEvent(FormEvent event)
    {
        // When the submit button is pushed on either form, a FormEvent is generated.
        // We determine which form was submitted by getting the source element's id
        // and then pass the form parameters to the appropriate method for processing.
        if (event.getSource().getId().equals("contactform"))
        {
            processContactForm(event.getParameters());
        }
        else if (event.getSource().getId().equals("subscribeform"))
        {
            processSubscribeForm(event.getParameters());
        }
    }
    private void processContactForm(Parameters formParams)
    {
        // Process the contact form parameters and do something.
    }
    private void processSubscribeForm(Parameters formParams)
    {
        // Process the subscribe form parameters and do something.
    }
}

Hopefully these code snippets give you a decent idea of how Oorian works and what you can do with it.  We will be working to put together some demo apps and the accompanying source in the near future.