Overview of EGL Rich UI

EGL Rich UI is a technology for writing applications that will be deployed on application servers. The technology builds on an idea central to EGL: write simple code, which is converted automatically to output that is useful for running a business. The output in this case is client-side JavaScript, called client-side because the JavaScript runs in the browser, not on the remote machine that serves the web page. Client-side JavaScript is important because it makes the web page more responsive, providing greater flexibility so that the user's experience can go beyond receiving and submitting a page. After the user clicks a radio button, for example, the logic might respond by changing the content of a text box. The change occurs quickly because the JavaScript runs locally and, in most cases, redraws only one area of the page.

An extension of client-side JavaScript is Ajax, a technology that permits the runtime invocation of remote code and the subsequent update of a portion of a web page, even as the user continues working elsewhere on the page. After the user selects a purchase order from a list box, for example, the JavaScript logic might request transmission of order-item details from the remote web server and then place those details in a table displayed to the user. In this way, the application can access content from the server but can save time by selecting, at run time, which content is transmitted.

A developer writes Rich UI applications using EGL syntax. For advanced purposes, however, a developer can write custom JavaScript or use external JavaScript libraries instead of relying on the default behavior provided by EGL. For example, you can use Rich UI to access the following software:

The Dojo Toolkit (http://dojotoolkit.org/)
Microsoft Silverlight (http://silverlight.net/)

A Rich UI application can act as the front end for services that access databases and do other complex processing. You can access the following kinds of services, as noted in “EGL support for SOA”:

SOAP web services.
REST web services that are provided by third parties such as Yahoo and Google.
EGL REST-RPC services.
EGL dedicated services.

You deploy the output of a Rich UI application to an EGL web project or to a non-EGL dynamic web project. The project might be configured for an application server such as WebSphere® Application Server, which is fully compliant with Java™ EE, or for an application server such as Apache Tomcat, which is partially compliant with Java EE.

Outline of development tasks

As a Rich UI developer, you do the following tasks:

Create a Rich UI project
Create an EGL Rich UI handler, which is a kind of Handler part.
Open the handler in the EGL Rich UI editor and add content to the Rich UI handler in the following ways:
- By dragging on-screen controls called widgets onto a web page surface. In this situation, you can set widget properties by typing values into dialogs that are part of the Rich UI editor.
- By coding widget details directly into the Rich UI handler.
- By writing the following kinds of logic directly into the Rich UI handler:
  - Startup logic, which runs when the browser first receives the application from a web server
  - Event logic, which runs in response to user actions such as a button click
- By accessing libraries, services, and other Rich UI handlers.
Revise and test your source code. For details on debugging, see “Rich UI debugging.” Also, be aware of an issue described in "Rich UI memory management."
When you are ready to generate and deploy your code, use the process described in “Introduction to EGL generation and deployment” and “Overview of Rich UI deployment.”
When you store your applications in a corporate repository, keep the specific EGL widget projects that were used during development. This practice ensures that you can update your applications over time without having to make changes in response to changes in the system widgets.

When you create a new Rich UI project in a workspace, you can request that the workbench import one or both of the following sets of widget projects:

com.ibm.egl.rui_version, for the native EGL widgets.
com.ibm.egl.rui.dojo.widgets_version, for the EGL Dojo widgets, and com.ibm.egl.rui.dojo.runtime.local_version, for the Dojo Toolkit project, which is a local installation of the Dojo runtime code.

In each case, version is a revision level of the widget project.

Outline of widget-upgrade tasks

If you are working on a Rich UI project and want to access widgets that you did not request when you created the Rich UI project, or if you want to upgrade your code to use the latest widget versions, do as follows:

Import the projects of interest, as noted in "Importing product-supplied projects." Alternatively, you can get all the projects you need by creating a new Rich UI project and then deleting that project.
For each of your Rich UI projects, ensure that the EGL build path points to the new EGL (non-Dojo) widgets and, if appropriate, to the new Dojo runtime code. For keystroke details, see “Editing the EGL build path.”
In relation to the EGL Dojo widgets, access the Toolkit or provider project that makes available a particular version of the EGL Dojo widgets. Do not change the EGL build path in a Toolkit or provider project, and do not change the build paths in your own projects to refer directly to the EGL Dojo widgets.

Please note that when you upgrade, you need to upgrade both the EGL widgets and the EGL Dojo projects to the most recent versions.

The EGL Rich UI Editor

You can use the EGL Rich UI editor to modify a Rich UI handler and to preview the handler's runtime behavior. The editor includes the following views:

The Design view is a graphical design area that shows the displayable content of the Rich UI handler. You can drag-and-drop widgets from a palette into the display and then customize those widgets in the Properties view.
The Source view provides the EGL editor, where you update logic and add or update widgets. The Design view and Source view are integrated: changes to the Design view are reflected in the Source view; and, if possible, changes to the Source view are reflected in the Design view.
The Preview view is a browser, internal to the Workbench, where you can run your logic. You can easily switch to an external browser if you prefer.

Here is the Workbench with the Rich UI editor at the center: