Jump to: navigation, search

EDT:Create a login page

Revision as of 12:36, 29 January 2012 by Margolis.us.ibm.com (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Overview

EGL makes development of web 2.0 application fast and easy with the help of the Rich UI editor. This article introduces that editor and related views and gives a step-by-step example to show how to make a login page.

Brief introduction

There are five parts of EDT you may need to use when building web 2.0 applications with Rich UI technology.

VE Overview.jpg
1. Rich UI Editor: The Rich UI editor provides the WYSIWYG capability to develop Web 2.0 applications, also named a Rich UI application in EGL. It has three tabs:

  • Design tab - drag and drop widgets from the Palette onto the Rich UI editor to design the page. Select a widget to edit the properties, etc.
  • Source tab - EGL source code editor, write EGL code.
  • Preview tab - preview and interact with the page before deploying the application to a web server.

2. Palette View: The Palette displays widgets that can be used for EGL Rich UI applications. You can drag and drop the widgets from Palette onto the Rich UI editor. You can also extend or write your own widgets, which will be automatically resolved and displayed in the Palette view.
3. Properties View: You can change the properties of a selected widget in this view, and also attach event functions to the selected widget.
4. Outline View: The widgets that the page contains are listed with a hierarchy in this view. You can also select the widget in this view instead of selecting in design page of the Rich UI editor. Right-click for actions to take on the widgets.
5. EGL Data View: The EGL Data view provides a wizard that allows developers to create variables for this page. Drag and drop data records from the view to the Design view to use a wizard to automatically create the user interface by specifying information to be displayed.


Create a login page with Rich UI: step by step

Create RUI project & handlers

If you don’t have Rich UI project in the workspace, create one by selecting File > New > EGL Project, and select Web 2.0 client application. (For more information on creating EGL projects see New Project Wizard)

Right-click the client package of the project and select New > Handler to create an Rich UI Handler. In this screenshot, an RUI handler named login is created in the client package of Sample project.

Snap7.jpg


After created, the “login” Rich UI handler will be opened automatically with the Rich UI editor.

VE2.JPG

Change the properties of GridLayout

A GridLayout widget is provided in the default template for a Rich UI handler. Right-click the GridLayout (ui) widget in the Outline view and select Properties. Notice: You can also select widget by clicking in the design tab of VE. In the General tab of Properties view, change the rows to 3, and column to 1.

VE3.jpg

Drag and drop widgets from the palette to the Design tab

Drag and drop a TextLabel from the Palette view to the first row of the GridLayout.

VE0.jpg

When you drop the widget, a dialog appears asking for a name for the widget. Enter ‘CaptionLabel’ and click OK.

VE5.jpg

Right-click on the CaptionLabel in the Rich UI editor and select Properties. Change the fontSize to 50, and fontWeight to bold.
Press Ctrl + s to save the RUI handler.

VE6.jpg

Update the login handler with EGL Data Wizard

EDT also provides another way to design the page by generating the widgets from variables, such as records, defined in the Rich UI handler.
First, let's go to Source tab to declare a simple record named “User” to your handler.

record User
   username string;
   password string;
end

So your source code should look like this:

VE7.jpg

Now go back to Design Tab, and click the EGL Data view. Select New > EGL Variable to open the EGL Rich UI Data Wizard.

VE8.jpg

Select the User record and click Finish. The wizard will automatically generate a variable of User record type in the page.

VE9.jpg

Now you can find that the User record variable is listed in the EGL Data View and under the login Rich UI handler.

VE10.jpg

Generate widgets with Insert Data Wizard

Drag and drop the ‘myUser’ variable in EGL Data view on to the Rich UI editor to open the Insert Data Wizard.

VE11.jpg

The wizard lets you configure the widgets to show for the record fields. You can create widgets that are read-only (non-editable), editable, and a combination. The default widget type is based on the field type and if it's editable or not. For example, strings will default to a read-only text field if you select the Read-only option.

In this case, create Editable data and change the widget type for password field to PasswordTextField (so when typing the field appears as asterisks), then click Finish button. Press Ctrl + s to save your handler. Now your page should look like the following:

VE12.JPG

Drag-and-drop a Dojo Button to the second row of the GridLayout and change its text to “login” in the Properties View. Also, drag-and-drop a Text Label to the third row of the grid and change its text to “welcome: ”.

VE13.JPG

New Event Handler in Properties View

Select the login button. In the Event Tab of the Properties View, select the onClick event and click the add function button. Enter a name for the function (or just accept the default name in this case) and click OK.

VE14.JPG

The source code view displays within a function stub so you can finish creating the function. Change the function code to:

function Button_onClick(event Event in)
    myUser_form_Submit(event);
    if(myUser.username == "Forest" and myUser.password == "123")
        TextLabel.setText("Hello Forest!");
    else
        TextLabel.setText("Please login again");
    end
end 

Test the page in Preview Tab

Now the design work of the page is finished, you can go to Preview tab to test the page.

VE15.JPG

Other useful tools in the Rich UI Editor

There are also some useful tools in on the Rich UI editor. Hover over each item to display a tooltip.

VE16.JPG


- Refresh Web Page : use to refresh the browser which Rich UI editor uses.

- Refresh Palette: when you add a new widget, it will not auto displayed in the Palette View, you need to use Refresh Palette to add it in the Palette.

- Configure Preferences Tool: use to open the Rich UI Preferences. In the Appearance Preference page, you can choose which browser the Rich UI editor uses. Tip: Use WebKit browser for better performance.

VE17.JPG

Conclusion

With the help of the Rich UI editor, you can easily and quickly write web 2.0 web applications. Enjoy!