Development

The RemoteUI App Framework

With the RemoteUI App Framework you develop your own RemoteUI Applications. To get an idea of the development process, you can have a look at the Getting Started tutorial below or the Calculator showcase video at the end of the page.

If you are interested in more information about the RemoteUI App Framework, please contact us.

Getting Started

Hello World screen

Starting with one of RemoteUI's App templates, you typically follow a simple two-step process to add new functionality to your app.

Let's say, you want to implement the very simple screen shown here. When the Say Hello button is pressed, a TextView shall show a Hello World message. To implement this, you would follow the next steps:

1. Create a Layout

<?xml version="1.0" encoding="UTF-8"?>
<RemoteUILayout xmlns="urn:remoteui:org:layout">
  <LinearLayout orientation="vertical" width="fill_parent">
    <Button width="fill_parent" text="Say Hello" onClick="#{sayHello()}" />
    <TextView text="#{message}" />
  </LinearLayout>
</RemoteUILayout>

You create your layout in an XML syntax that is similar to that of the Android operating system. However you have several benefits: The RemoteUI layout language knows dynamic action and data bindings, CSS, can display SVG images, comes with many useful defaults and uses a template engine to dynamically adapt to different devices.

As you can see, the Button's click event (onClick attribute) is bound to the sayHello() method. You will implement this method in a moment. The text displayed by the TextView is bound to the message property.

Besides these simple expressions shown here, you can use every MVEL-2.0 expression you like. So e.g. you could use parameters in the action bindings or use an expression to localize the message. MVEL is dynamicly typed and blazing fast. There is no need for complicated type references.

Back to top

2. Implement the Logic

@Activity(layout="hello.layout.xml", main=true)
public class HelloActivity extends org.remoteui.webapp.WebActivity {

  public String message;

  public void sayHello() {
      message = "Hello World!";
  }
}

You implement the logic of a screen in Java by creating a sub-class of WebActivity. The HelloActivity in this app implements the aforementioned sayHello() method and the message property.

The RemoteUI App Framework uses Spring to configure RemoteUI applications. By using the @Activity annotation you trigger the auto-configuration of your app. With the layout property you wire the layout to the logic. By annotating the activity with main=true you define the entry point to your app. Alternatively you can use Spring's XML- or Java-configuration options to configure your app.

This code runs on the server. By default a WebActivity is session-scoped.

Now you are done. When you start the server and connect to it with one of the RemoteUI Clients, you have your first RemoteUI app up and running.

Back to top


Calculator showcase

In this video we show, how easy it is to develop a RemoteUI web application with the RemoteUI App Framework. In this showcase Daniel creates a simple calculator application, explaining the process of laying out and connecting the UI with business logic.