EDT:Create a login page
- 1 Overview
- 2 Brief introduction
- 3 Create a login page with Rich UI: step by step
- 3.1 Create RUI project & handlers
- 3.2 Change the properties of GridLayout
- 3.3 Drag and drop widgets from the palette to the Design tab
- 3.4 Update the login handler with EGL Data Wizard
- 3.5 Generate widgets with Insert Data Wizard
- 3.6 New Event Handler in Properties View
- 3.7 Test the page in Preview Tab
- 3.8 Other useful tools in the Rich UI Editor
- 4 Conclusion
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.
There are five parts of EDT you may need to use when building web 2.0 applications with Rich UI technology.
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.
After created, the “login” Rich UI handler will be opened automatically with the Rich UI editor.
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.
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.
When you drop the widget, a dialog appears asking for a name for the widget. Enter ‘CaptionLabel’ and click OK.
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.
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:
Now go back to Design Tab, and click the EGL Data view. Select New > EGL Variable to open the EGL Rich UI Data Wizard.
Select the User record and click Finish. The wizard will automatically generate a variable of User record type in the page.
Now you can find that the User record variable is listed in the EGL Data View and under the login Rich UI handler.
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.
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:
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: ”.
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.
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.
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.
- 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.
With the help of the Rich UI editor, you can easily and quickly write web 2.0 web applications. Enjoy!