Basics Tutorial

Introduction

The RemoteUI App Framework is a Java Library enabling you to build mobile apps that run on a server.

We at RemoteUI dislike boilerplate code, repeated implementation and coding complex stuff just to get small things done. Nonetheless, we dig beautiful and rich UIs with high performance and optimal user experience. That’s why we have invented the RemoteUI System.

Within the RemoteUI System the user interface of a server-side app is sent as description to the RemoteUI Client for rendering - quite similar to HTML. The description however is binary, compressed, incrementally transferred and therefore ultra-compact. The client renders the UI by utilising the powerful and fast native UI toolkit on every OS, giving your users the best experience on all supported platforms. RemoteUI Client and Server are connected via a WebSocket connection, talking the highly efficient RemoteUI Protocol on top of it.

As a developer you don’t have to step down to the details of the RemoteUI Protocol or any async Websocket APIs. You can focus on the look and feel and the logic of your app and leave the rest of the work to the RemoteUI Framework. Our mantra is:

Code smarter - not harder!

The Components of a RemoteUI App

If you have created your first RemoteUI app by following our Getting Started guide, you have already created a simple RemoteUI App. Let’s have a look at the project structure.

Project Structure

The directory layout of the project follows the Standard Maven Directory Layout, which was also adopted by Gradle’s Java Plugin. Nothing new, if you have been developing with Java before. You find your classes in src/main/java, src/main/groovy or src/main/kotlin and your RemoteUI layout files in src/main/resources having the extension .layout.xml or .layout.mv.

The Application Class

The RemoteUI Starter generates two class files. The first class’s name is derived from your artifactId and contains a main method that starts a Spring Boot Application as shown in the following listing.

Java
Groovy
Kotlin
package my.remoteuiapp;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class GreatAppApplication {
	public static void main(String[] args) { 
                SpringApplication.run(GreatAppApplication.class, args);
	}
}
package my.remoteuiapp

import org.springframework.boot.SpringApplication
import org.springframework.boot.autoconfigure.SpringBootApplication

@SpringBootApplication
class GreatAppApplication {
	static void main(String[] args) {
		SpringApplication.run GreatAppApplication, args
	}
}
package my.remoteuiapp

import org.springframework.boot.SpringApplication
import org.springframework.boot.autoconfigure.SpringBootApplication

@SpringBootApplication
open class GreatAppApplication

fun main(args: Array<String>) {
    SpringApplication.run(GreatAppApplication::class.java, *args)
}
The @SpringBootApplication annotation enables Spring’s component scan in the given and subordinate packages. This means, all classes in these packages annotated with @Component (including sub types like RemoteUI’s @Activity) are automatically considered Spring Beans. Also, it enables auto configuration and marks the class as Java configuration. If you are not yet familiar with Spring Boot, don’t worry. You’ll get some basics within this and other RemoteUI tutorials. If you want to dive deeper into the topic, you should consult the Spring Boot Documentation. When you start this Spring application, a Tomcat Web Server is started on port 8080. The RemoteUI Framework configures a WebSocket Servlet therein to serve your app.

App Logic with Activities

You implement the logic of your app in one or more Activities. This approach is very similar to Android’s Activity model. However, with RemoteUI it is much simpler to wire view, model and controller together. The following listing shows the typical approach for declaring an activity:

Java
Groovy
Kotlin
package my.remoteuiapp;

import org.remoteui.webapp.WebActivity;
import org.remoteui.annotation.Activity;

@Activity(id="main", main=true, layout="main.layout.xml")
public class MainActivity extends WebActivity {
}
package my.remoteuiapp

import org.remoteui.webapp.WebActivity
import org.remoteui.annotation.Activity

@Activity(id="main", main=true, layout="main.layout.xml")
class MainActivity extends WebActivity {
}
package my.remoteuiapp

import org.remoteui.webapp.WebActivity
import org.remoteui.annotation.Activity

@Activity(id="main", main=true, layout="main.layout.xml")
class MainActivity : WebActivity()
By creating a sub class of org.remoteui.webapp.WebActivity you inherit a lot of necessary methods and the ability to overwrite different lifecycle methods, which are described later on. The @Activity annotation allows configuring the activity. With its optional id property, you define its application-global identifier. You can later on start the activity by this id. By setting the property main to true, you mark the activity as the first to be started and displayed.
With the layout property you link to a layout file containing the user interface description that shall be bound to and displayed with the activity. The RemoteUI Framework resolves the path of the layout resource relative to your class file. In this case, it expects the layout to be in the same package as the MainActivity.

User Interface via XML

The UI of your app is defined with the RemoteUI markup language (RuiML), which is XML-compliant and defined by a distinct XML Schema. If you know Android’s layout syntax, RemoteUI layouts will be easy to understand for you. We are using very very similar syntax and semantics for our widgets as you can see in the following listing:

main.layout.xml
<?xml version="1.0" encoding="UTF-8"?>
<RemoteUILayout xmlns="urn:remoteui:org:layout">
    <LinearLayout height="fill_parent" width="fill_parent" 
             orientation="vertical" backgroundColor="white">
        <ToolBar backgroundColor="#00a" width="fill_parent">
            <TextView text="Great App" />
        </ToolBar>
	<TextView text="RemoteUI with Spring Boot"
		padding="16dp" fontSize="20" fontWeight="bold" />
	<TextView
		text="Congratulations, you have successfully started your RemoteUI App!"
		padding="16dp" />
	<TextView text="The RemoteUI Team wishes Happy Hacking!"
		padding="16dp" fontWeight="bold" />
    </LinearLayout>
</RemoteUILayout>
This is a simplified version of the layout file generated by the RemoteUI Starter (leaving out CSS and Drawers for now). Every RemoteUI Layout has a single root element RemoteUILayout and all elements and attributes are in the urn:remoteui:org:layout namespace. All attributes can be used in their unqualified form so that you don’t need a prefix like on Android (android:…​).
The shown LinearLayout with orientation="vertical" layouts its children in vertical order. By defining the width and height with fill_parent, a widget takes up all available space in its parent element. As an alternative you can use concrete sizes (e.g. mm, cm, dp or px) or the second "automatic" size wrap_content, which lets the widget adapt to its content. The latter is the default, so that width and height are optional attributes.

results matching ""

    No results matching ""