Lesson 3: Create an EGL framework

Use the graphical interface in the EGL editor to familiarize yourself with the components you need to create a Web page.
First, create an EGL project where you can use the EGL editor. Next, create a Rich UI Handler for the project. When you open the Rich UI Handler in the editor, you can drag widgets onto the virtual page and bind them to functions.

Create an EGL project

You can use projects:
  • To organize your EGL source files.
  • To provide shortcuts and defaults tailored to a particular type of work.
When you create a project, EGL sets up the folders and source files that you need to create a Rich UI application.

The following demonstration shows the steps involved in this task:

To create an EGL project:

  1. Click File > New > EGL Project.
  2. In the New EGL Project wizard, in the Project name field, type the following name:
    PasswordWindow
    The EGL New Project wizard with the Project name of PasswordWindow.
  3. Click Finish.
EGL creates a new project named PasswordWindow. There are two folders inside the directory: one for EGL source code and one for the Web content that you will create.
The Project Explorer view shows the new project and folders.

Create a Rich UI Handler

Now that you have a project that will hold your files, create a source file for your Rich UI application.

The following demonstration shows the steps involved in this task:

To create a Rich UI Handler:

  1. Right-click the PasswordWindow project, then click New > Other. Expand EGL and double-click Rich UI Handler.
  2. In the New Rich UI Handler part wizard, enter the following information:
    1. Make sure the Source folder field specifies PasswordWindow\EGLSource.
    2. For the package name, enter ruihandlers. EGL will create a folder that has this name in the EGL source folder.
    3. For the file name, enter logon1. EGL will create a source file that has this name and the .egl extension.
    4. Click Finish.
EGL displays the new Rich UI Handler in the Design view of the EGL editor. In the Design view, you can use visual tools to edit the page. Note the tabs at the lower left of the display:
Tabs for Design, Source, and Preview are available below the editor pane.
Later you will use the Source tab to create functions to bind to the widgets. Before that, you will create two different page layouts, one that uses columns and another that uses boxes.

Lesson checkpoint

You created a project that will hold your source files, and a source file for your logon screen.
You learned how to perform the following tasks:
  • How to create an EGL project
  • How to create an EGL Rich UI Handler; Rich UI Handlers are described in Lesson 2; see The Rich UI Handler.

Feedback