Starting to work with EGL Rich UI

This topic tells how to start developing applications with EGL Rich UI.

Setting the Rich UI editor as the default for EGL files

If you create a new project, EGL automatically selects the correct editor for the type of file you open. This means a Rich UI handler opens in the EGL Rich UI editor. However, if you import a project into your workspace, EGL opens all .egl files with the standard EGL source editor. You can force EGL to always use the EGL Rich UI editor for files with the .egl extension:
  1. Click Window > Preferences . The Preferences dialog box is displayed.
  2. Expand General and Editors and click File Associations. The File Associations dialog is displayed.
  3. In the File types section, click .egl
  4. In the Associated editors section, click EGL Rich UI Editor and, at the right, click Default
  5. Click OK

Accessing the Rich UI samples

Use the Rich UI samples to explore the technology:
  1. Click Help -> Samples. The Help dialog box is displayed.
  2. Expand Samples, Technology samples.
  3. Click Rich UI technical sample.
  4. If your workbench does not already have the com.ibm.egl.rui project, click the entry to it.
  5. Click the entry to import the samples.
  6. In the workbench Project Explorer, expand the project com.ibm.egl.rui.samples, file EGL Source, package contents.
  7. If you previously set the Rich UI editor to be the default for EGL files, double-click contents.egl. Otherwise, right-click contents.egl and select Open with > EGL Rich UI Editor .
  8. Select the Preview tab at the bottom of the editor.
  9. Follow the on-screen directions and try out the alternatives presented there.

Setting the initial Rich UI preferences

To avoid confusion as to which versions of your handlers and libraries are available during debugging sessions, you can ensure that those EGL parts are generated whenever they are saved. Alternatively, you may want to avoid the time spent on repeated generations, especially if the EGL parts include many lines of code.

If you are going to work primarily with Rich UI, begin your work by ensuring that handlers and libraries are always generated:
  1. Click Window > Preferences . The Preferences dialog is displayed.
  2. Expand EGL and click Generation. The Generation pane is displayed.
  3. Ensure that the following check boxes are selected:
    • If necessary, invoke a build before generating output
    • Handler
    • Library
    • Deployment Descriptor
  4. Click OK

For additional details on preferences, see Rich UI Preferences.

Rich UI has several preferences, which you can see as follows:
  • Click Window > Preferences -> .
  • At the Preferences dialog, expand EGL and click Rich UI.

Two Rich UI Preview preferences are available:

  • The first preference (Automatically refresh when source is modified) is the auto-refresh preference that affects the behavior of the Link Preview with Editor button, as described earlier
  • The second (Show browser version warning) prevents the development environment from checking whether you are using Internet Explorer version 7, which has greater support for Rich UI than does earlier versions of the same software. If checking occurs and you are using Internet Explorer version 6, for example, you will repeatedly get a warning message. You can stop the message from reappearing either by clicking a checkbox when responding to that message or by deselecting a checkbox at the preference page.
Two Application Generation preferences are available:
  • First, you select one of two generation modes:
    • Development mode is appropriate as you create your application. The generated output includes debugging information. The output can include multiple files unless you specify otherwise in the next preference.
    • Deployment mode is appropriate when you are ready to deploy your application. The generated output is a single HTML file that is as efficient as possible.
  • The second preference (Deploy application as a single file) causes generation of a single file even when you are generating in development mode.
A set of Proxy Settings preferences are appropriate if you access the Internet by way of a proxy server. To see whether you need to set the preference, check whether your browser is accessing the Internet by way of a proxy server; and if so, copy the address:
  • If you are using Internet Explorer, click Tools -> Internet Options -> Connections -> LAN Settings, and (if the checkbox is selected for a proxy server) copy the address and port.
  • If you are using Mozilla Firefox, click Tools -> Options -> Advanced -> Settings. The detail of interest is at the Connection Settings dialog. If the checkbox is selected for manual proxy configuration, copy the HTTP proxy address and related port number, as well as the address specified for no proxy.

If your browser includes no proxy information but can access websites that are external to your organization, ignore the preferences for Proxy Settings.

To set a proxy, specify values for Proxy and Port. Also, you will probably want to avoid using a proxy when accessing web pages served from your own machine. The default address specified in the field Do not use a proxy for ( address localhost, 127.0.0.1) is appropriate in most cases. For further details on proxy settings, contact your system administrator.

Creating your first Rich UI project

When you want to work outside of the Rich UI samples project, do as follows:
  1. Click File > New > Project. The New Project wizard is displayed.
  2. Expand EGL, click EGL Project and then Next. The New EGL Project page is displayed.
  3. Type a project name and select Rich UI Project. In most cases, complete the task by clicking Finish, However, if you want to consider additional options, continue here:
    1. Click Next so that the EGL Project page is displayed.
    2. To include the project in the directory that stores the current workspace, select the check box for Use the default location for the project; otherwise, specify a different directory by clearing the check box and using the Browse mechanism.
    3. An EGL deployment descriptor lets your application access remote services in a flexible way, so that at configuration time, an installer can change the details of service access. The overhead of including the descriptor is small, and we recommend that you select the check box for Create an EGL deployment descriptor regardless of your intent. Click Next. The EGL Settings page is displayed.
    4. The Projects tab lists all other projects in your workspace. Click the check box beside each project that you want to add to the project's EGL build path.
    5. To put the projects in a different order or to export any of them, click the Order and Export tab and do as follows: (i) To change the position of a project in the build-path order, select the project and click the Up and Down buttons; (ii) to export a project, select the related check box; and (iii) to handle all the projects at once, click the Select All or Deselect All button.
    6. Click Finish.

Reviewing compatibility issues

Here are the major compatibility issues: