Difference between revisions of "RAP/RWT"

Latest revision as of 10:04, 16 April 2014

Technical Overview

This document describes the technical concepts behind RAP and RWT, the RAP Widget Toolkit. RAP enables the development of Rich Internet Applications using the same programming paradigms that developers know from RCP. It consists of the following components:

• Server side OSGi and runtime bundles (Equinox):
  One OSGi instance per web application runs in application scope. Different than RCP, RAP has to deal with user sessions. Running an OSGi instance per user-session is not feasible in a scalable way, since the memory consumption in the permanent object space would be beyond any real world resource availability. Therefore bundles are shared between user-sessions.

• RWT (RAP Widget Toolkit):
  A Widget Library similar to SWT. RWT provides a server-side programming model for a Rich-Web-Client development. Therefore RWT uses an efficient JavaScript Widget Toolkit (a fork of Qooxdoo) that provides rich components on the client site. However, RWT-applications remain Thin Clients (opposed to Fat-Client), since all computations implemented by the application developer are done on the server-side. There is no data model on the client. The request handling is done via AJaX, which leads to a good usability and performance.

• JFace (RAP version):
  The RAP JFace version is as closely based on the RCP Jface implementation. It provides:
  
  • Viewers
  • Dialogs and Wizards
  • Actions and Contributions
  • Image Registry

• Workbench (RAP version):
  The RAP Workbench is based on the RCP Workbench implementation, but taking multi-user and memory constraints into account. It provides:
  
  • Workbench Windows
    
  • Perspectives
  • Workbench Parts
  • Selection Service

The RAP Widget Toolkit

RWT (RAP Widget Toolkit) is a GUI widget set that is as similar to SWT as possible. SWT is easy to learn, and anybody who knows SWT should have no problems to build web-front-ends using RWT. Nevertheless there are unavoidable differences between the two libraries - partially caused by the distributed nature of web applications, partially by the strengths and weaknesses of html/css, and limitations of specific browser.

To learn more about the differences between SWT and RWT from an application developer point of view, read the RAP Developers Guide .

At runtime, all RWT widgets consist of a server-side Java object, and a client-side JavaScript object presented to the user in HTML/CSS. The application code only interacts with the Java instance, while the user only interacts with the client instance. Like SWT, RWT provides an event model to enable the application programmer to react on user actions like pushing a button. This is different to SWT, as the action has to be submitted to the server, where a action handler will be executed. The communication with the server is done by an AJaX-Request. Beyond the distributed nature of event processing, RWT has to synchronize the widgets client state and server state. This needs to be performed before and after action handlers are executed.

LifeCycle

To meet this requirements RWT divides a http-request into different phases that are executed sequentially. Each phase has its special purpose and creates the prerequisites needed by the following phases for proper execution. The control mechanism behind this is the RWTLifeCycle. Note that most of the time an application developer do not have to care about the lifecycle phases, since they work behind the scenes. The lifecycle phases are named Prepare UI Root,Read Data,Process Action and Render.

• Prepare UI Root: Currently responsible for invoking entry points. Implementations of IEntryPoint represent the UI creation entry points (these take over the functionality of a main function used to start a SWT-applictations).

• Read Data: Request parameters that contain status information belonging to certain Widgets will be applied to those widgets. If an user has entered some characters into an input-type text field that represents a server-side Text control, these characters are transmitted to the text-attribute of the Text instance in this phase.

• Process Action: This is the phase where the requested user-action takes place. User actions are triggered for example by clicking a push-button. Application programmers implement and register listeners at the corresponding widget (e.g. a SelectionListener for a Button), to react to such events.

• Render: This is when the javascript code (as of RAP 1.5, JSON) is created, which will be sent to the browser. During the actual rendering no changes of the widget-tree will happen - neither creation or addition of new widgets nor changing of attributes of existing ones. The AJaX-rendering-mode only creates assignments of those widget-attributes that were changed during the request-processing. This results in a minimal amount of information that needs to be exchanged between server and client.

Widgets

Considering the already said, RWT-Widgets must meet the following objective: They have to provide a well known API but deal transparently with the lifecycle mechanism. To achieve this the RWT-Runtime creates adapters for each widget. Therefore each widget is composed of three server-side parts at runtime:

• The widget instance, contains status information set by the programmer via the widget's API.
• A widget adapter instance, contains additional status information used by the runtime (e.g. information needed to decide whether a widget attribute has changed during the request processing and whether the new value must be sent to the client or not)
• A shared instance of an lifecycle adapter. Each widget type has an own type of LCA. The LCA is a stateless callback handler used by the RWTLifeCycle to synchronize the widgets state with the client changes, call events etc.

Layouts and Text Size Determination

RWT reuses the original SWT layout manager implementations and therefore layouting takes place on the server-side. Despite the well working layout algorithms, it is sometimes unavoidable to do size calculations depending on a certain text. Unfortunately this can't be done on server side, only the specific client is able to determine the actual size of a text depicted using a certain font. Therefore RWT had to come up with a workaround for that problem. The idea is to let the system learn about text sizes.

If the system encounters an unknown text, it does a rough size calculation and sends the text to the client, where the real size is calculated. This is done with all unknown texts per request at once to avoid unnecessary traffic. The texts sent to the client have hints to controls they belong to. So the system can decide which control sizes were not accurate.

The accurate text sizes are submitted via an AJaX-Request to the server, which triggers a re-layouting of the controls now using the correct sizes. The sizes are stored in a map which uses a hash of text, font-family, -size and style as key. The next time the text size is needed a simple hash-lookup provides the correct size.

To enable the system to reuse the calculated text-sizes over multiple sessions, probe texts with known font-family, -size and -style are sent to the client at the beginning of each session. The hash of of the computed sizes of the texts can be used as a key for storing the map mentioned in the previous step. Simply put, clients that return the same sizes for the same probes are assumed to also return the same sizes for other identical texts.

The algorithm is working behind the scenes and is transparent to the application developer. The only noticeable effect is a little flicker of texts with unknown sizes while the recalculation takes place. This algorithm is only needed for texts where the preferred size has to be determined to layout the control – not for all texts that are displayed in the application.

Asynchronous execution of long running tasks

Similar to SWT, the RWT-UI blocks on user actions. (In RWT its not completely bocked, but the effect is similar. Therefore only short running tasks should be executed during server-side turnarounds. Long running tasks should be running in background threads. The problem is that HTTP is a one-way request/answer protocol (the client request and get the answer). That makes it impossible for the server to inform the client that some background task has been finished and that the UI should be refreshed. The solve this problem, RAP introduced the UI Callback.