In this tutorial, you will learn how to
plan a simple Rich UI page and create the page by using the EGL editor.
You will start by drawing sketches and progress through
all of the stages of developing a simple interface page. In addition
to planning ways to lay out the design, you will create a "family
tree" that shows the hierarchy of the elements on the page. You will
then implement two versions of the design.
Learning objectives
In
this tutorial, you will learn how to complete these tasks:
- Design a Web page for Rich UI
- Create an organization chart for the elements on the page
- Understand widgets
- Understand the Rich UI Handler
- Create an EGL project
- Create a Rich UI Handler
- Structure a page by using box widgets
- Structure a page by using columns only
- Format the elements on the page by using EGL properties
- Format the elements on the page by using cascading style sheets
(CSS)
- Add widgets to the page by writing EGL code rather than by using
the graphical interface
- Trigger a function by clicking a button
Time required
This tutorial should take
approximately 60 minutes to finish. If you explore other concepts
related to this tutorial, it might take longer to complete.
Skill level
Introductory
Audience
This tutorial is designed for
people who know the basic concepts of programming, but are unfamiliar
with EGL. It is intended for people who work with Rich UI and generate
JavaScript.
System requirements
To complete
this tutorial, you must have the following tools and components installed
on your computer:
- IBM® Rational® EGL
Community Edition
Prerequisites
You do not need any previous
experience with EGL to take this tutorial.
Expected results
You will create a
simple logon screen that displays a message when you click the
Submit button.