® IBM Software Group Rational Business Developer EGL Rich UI Development © 2009 IBM Corporation.
Download ReportTranscript ® IBM Software Group Rational Business Developer EGL Rich UI Development © 2009 IBM Corporation.
®
IBM Software Group
Rational Business Developer
EGL Rich UI Development
© 2009 IBM Corporation
IBM Trademarks and Copyrights
© Copyright IBM Corporation 2007,2008. All rights reserved.
The information contained in these materials is provided for informational purposes
only, and is provided AS IS without warranty of any kind, express or implied. IBM
shall not be responsible for any damages arising out of the use of, or otherwise
related to, these materials. Nothing contained in these materials is intended to, nor
shall have the effect of, creating any warranties or representations from IBM or its
suppliers or licensors, or altering the terms and conditions of the applicable license
agreement governing the use of IBM software. References in these materials to IBM
products, programs, or services do not imply that they will be available in all countries
in which IBM operates.
This information is based on current IBM product plans and strategy, which are
subject to change by IBM without notice. Product release dates and/or capabilities
referenced in these materials may change at any time at IBM’s sole discretion based
on market opportunities or other factors, and are not intended to be a commitment to
future product or feature availability in any way.
IBM, the IBM logo, the on-demand business logo, Rational, the Rational logo, and
other IBM Rational products and services are trademarks or registered trademarks of
the International Business Machines Corporation, in the United States, other
countries or both. Other company, product, or service names may be trademarks or
service marks of others.
© 2009 IBM Corporation
2
Contributing Authors
Scott Pecnik, Chris Laffra and Jon Sayles – primary content and courseware
developers
Ancillary contributors:
William Smythe/IBM, Brian Svihovec/IBM, Michael Virga/IBM, Yann Lerouzic/Morpheus
Consulting, U.K., Mike Brouwers of ASIST, Kendall Coolidge, Nick Leonessa,
Oleg Arsky/Synchrony Systems, Daniel Beauregard, CCB Associates, Inc.,
Arco van der Velden/Synobsys Nederland B.V., Ulf Buchner/Synobsys Nederland B.V.,
© 2009 IBM Corporation
3
Course Details
Audience
This course is designed for application developers who have programmed in a
3rd or 4th generation language – and who need to build Web 2.0/Rich User
Interface applications using EGL.
Prerequisites
Basic PC and mouse-driven development skills are assumed.
It is assumed that you have taken the EGL Foundation Class, and have a
comfortable understanding of eclipse, the EGL language, SQL, services
(including Web Services) and web technology
Alternatively, if you have the equivalent EGL work experience doing production
dynamic content web application development using Eclipse, EGL and web
applications that should be sufficient
An understanding of basic HTML is helpful
HTML syntax
HTML tables
HTML components such as input fields, radio buttons, etc.
© 2009 IBM Corporation
4
Course
RBD/EGL Development
Units:
What is Web 2.0?
© 2009 IBM Corporation
Programming in EGL Rich UI
Learn EGL Rich UI
Appendix
5
History of Web 2.0
The term “Web 2.0” was first coined by
O’Reilly Media in 2003.
It was then popularized by the first Web 2.0
conference in 2004.
The term implies a new version of the internet,
but that is not the case
According to Tim O'Reilly,
"Web 2.0 is the business revolution in the
computer industry caused by the move to the
internet as platform, and an attempt to
understand the rules for success on that new
platform.“
Moral: Web 2.0 is not really all that new
© 2009 IBM Corporation
6
Web 2.0 - Google Definition
Web 2.0 is a term often applied to a perceived ongoing
transition of the World Wide Web from a collection of
websites to a full-fledged computing platform serving
web applications to end users.
Source:
http://alexzelder.files.wordpress.com/2007/04/google_l
ogo1.jpg
Ultimately Web 2.0 services are expected to replace
desktop computing applications for many purposes.
Web 2.0 is becoming synonymous with RIA (Rich Internet
Application)
Expectations
© 2009 IBM Corporation
7
Web 2.0 – Unofficial IBM “Business Oriented Definition”
An important trend in delivering software applications
An enabler for richer web applications
New business models
Peer-to-peer user participation
New technologies
Interactive filtering, presentation, data entry
A combination of core technology components
Rich user experience (maps, grids, animation, D&D, etc)
Loose-coupling, composite applications via reuse and “mash-ups”
Standards (SOAP, REST, JSON, Atom, etc)
© 2009 IBM Corporation
8
Web 2.0 and the Pendulum Swing – between Client and Server Computing
Web 2.0 technologies highlight the next pendulum swing between client and server
function.
Client
Server
Mainframe computing
“Dumb” little green screen clients
Omnipotent big mainframe servers
TUI
Client-server computing
“Smart” Personal Computer clients
Simple file and database servers
CUI
Web (1.0) computing
Light Web Browser clients
Rich application and database servers
JSF
Web 2.0 computing
Rich Internet Application clients
Lighter application and database servers
Rich
UI
© 2009 IBM Corporation
9
Web 2.0 Application Characteristics
Rich user experience
Minimal page transitions
Dynamic content
Data asynchronously retrieved
via REST or SOAP service calls
Client-side validation
User encouraged to add value
Simplified user interface
Integration of relevant data from
multiple sources – “mash-up”
© 2009 IBM Corporation
10
“Mashups” – 1 of 2
Refers to the design and development pattern of combining and
custom “widgets” in a web application.
The rendered web application mashes-up (contains) relevant and
related views of data on-screen for effective presentation
Google Map
Hotel information —
separate database
Directions — come
from somewhere
else
Send to a phone —
Additional
functionality
Why?
Rapid application development
Reuse existing services
Avoid reinventing the wheel
Empowers users
© 2009 IBM Corporation
11
“Mashups”
– 2 of 2
Mash-ups can
also be loosely
related views
Think of a
“Portal”
consisting of
many combined
mini-pages,
instead of a
single-purpose
web page like:
Login
Registration
etc.
© 2009 IBM Corporation
12
Technology Attributes of Web 2.0/Rich Internet Applications
Rich User
Experience
Lightweight
Programming
Model
Info-ware
AJAX incorporating: XHTML and CSS, DOM, XML and XSLT,
XMLHttpRequest and JavaScript allowing information to be
mashed up into new interactive portals."
XML or JSON data over HTTP, in a lightweight approach
sometimes referred to as REST (Representational State
Transfer) as an alternative to SOAP.
“DATA is the new HTML." Database management is a core
competency of Web 2.0 companies.
Feeds
RSS/ATOM allows someone to link not just to a page, but to
subscribe to it, with notification every time that page changes.
Perpetual Beta
Users must be treated as co-developers, in a reflection of open
source development practices. The open source dictum,
"release early and release often”
© 2009 IBM Corporation
13
Web 2.0 and Community
Web 2.0 websites are often based on community
Some examples of Web 2.0 sites are: Facebook,
Digg, Yelp, and Twitter (see slide ***Notes for url’s)
All of the above web sites rely on the community to
submit content.
A Web 2.0 community-based site you are probably
familiar with
http://www-949.ibm.com/software/rational/cafe/community/egl
© 2009 IBM Corporation
14
Web 2.0 and Rich Internet Applications – Enhanced User Experience
With Rich UI, your business applications can have the unmatched speed and usability of client side (browserbased) applications, while still being served and managed from centralized, dynamic content server
applications: http://www.visualthesaurus.com/index.jsp
Additional examples include:
http://www.adobe.com/resources/business/rich_internet_apps/examples/
http://www.visokio.com/demos/camerafinder
http://www.smartmoney.com/map-of-the-market/
© 2009 IBM Corporation
15
Benefits of Web 2.0 – Modular Development and Component Reuse
Because of the RBD tooling, programming-model and loose-coupling in the
EGL implementation of Rich UI – Software Reuse is not only easy:
EGL Rich UI application design tends towards reuse – as all interfaces are formally declared
EGL Rich UI encourages functional decomposition:
From high-level (through differentiated file types) …to…low-level (“everything is a function that takes parameters”) –
making it next to impossible to write in a monolithic programming style
Developers will choose reuse over re-write, as the tools and language accommodate this
Software projects will benefit – as over time the R.O.I. for reuse will make it difficult to justify
writing “brand-spanking-new”
Rich UI
Application
Existing
RUIHandler
Existing
Widget
© 2009 IBM Corporation
RUIHandler
Elements
New
RUIHandler
Existing
Widget
New
Widget
16
External RIA
Application
New and
Existing
RUIWidgets
External
JavaScript
What Web 2.0 Developers are Saying About EGL Rich UI
EGL Rich UI is a really simple and powerful way to quickly implement a Web 2.0 application. Here are the main advantages:
No need to know Java, Java Script or HTML: everything can be written in pure EGL language. This language has a simple and clear
syntax, independent from any other existing language and can be learnt in one or two weeks (may be a bit longer to be able to master
the Rich UI-specific parts).
If needed, JavaScript and HTML can still be used to extend the EGL Rich UI features: for example, I wrote some JavaScript functions
to manage character strings in a more complex manner than the basic EGL string library does. New JavaScript code has to be wrapped
into an EGL object to be reused, which means that a JavaScript developer can write a whole new library of functions for an EGL
developer who does not need to know anything about JavaScript.
Writing a Web 2.0 application is usually a daunting task, since you have to write HTML parts, manipulate a lot of JavaScript functions
to make them interact, and these parts are not managed as a whole: you have to cope with every little bit of HTML to make the
application work. Instead, EGL Rich UI is all about working with components, or widgets, that you just have to assemble in a simple
way to build an application, such as you would for a traditional client application (basically, you work with EGL Rich UI in the same
manner as you work with Java Swing).
Each component can be graphically designed and tested, which is a lot faster than creating HTML code and testing it with JavaScript events.
Each component can be reused without having to design it again: we use CSS stylesheets to define the style and presentation of a widget. Furthermore, the
newly created components can be integrated into the EGL Widgets palette so that other people can reuse them graphically into their own application. IBM
provides its own basic EGL components from which more complex components can be built.
The components are totally independent: they communicate by an "InfoBus", which is a central component of an EGL Rich UI application. Widgets publish
events to the InfoBus (e.g. a click on a button) and any other component in the application can subscribe to these events to retrieve and process them.
EGL Rich UI can easily be extended by wrapping Dojo or Silverlight AJAX objects into EGL objects: for example, this can be interesting to reuse already
developed AJAX widgets that a customer would like to see in his new application
An MVC framework is provided in order to be able to quickly generate validating forms (which is the case in the Fulfillment application for the address
asked to the customer when he wants to checkout)
An EGL Rich UI can easily interact and exchange data with other web applications: every needed feature is provided to access SOAP
or REST web services. Accessing a web service basically just consists in writing a line declaring the web service in a configuration
file. From there, the web service can be accessed in EGL just as you would access a function in a local library.
Finally, an EGL Rich UI applications is just one full web page: there are no interactions between the server and the client, except when
calling web services. Every update in the GUI is done locally, whereas in traditional Web applications (Java/JSP, ASP.NET, ...) there
are a lot of data exchanges. The server can then serve much more clients.
All these advantages together form a major improvement on how we can write Web 2.0 applications. I developed a number of components
that we'll be able to reuse in future developments to drastically reduce development time.
© 2009 IBM Corporation
17
Web 2.0 – Section Review
Rich Internet Application technology is an element of (in fact, the enabler of the)
Web 2.0 experience
RIA technology promises to raise the standard of internet use, providing customers
with a more “human or interactive” experience, and including large-grain (new)
functional capabilities such as:
Running software applications entirely on the browser
“Social networking” and web-”participation” – through interactive technologies such as
“wikis” and collaborative forums
The ability to combine and merge content from diverse (client and server-side) sources
(these are known as “mash-ups”)
For additional reading on Web 2.0, RIA and underlying languages and technologies
– please visit these URLs:
http://en.wikipedia.org/wiki/Web_2
http://en.wikipedia.org/wiki/Rich_Internet_application
http://en.wikipedia.org/wiki/AJAX
http://en.wikipedia.org/wiki/JavaScript
http://en.wikipedia.org/wiki/Event-driven_programming
http://www.quirksmode.org/dom/intro.html
© 2009 IBM Corporation
18
Course
Web 2.0 and Rich UI
Units:
EGL Rich UI – Terms and Concepts
© 2009 IBM Corporation
Programming in EGL Rich UI
Learn EGL Rich UI
Appendix
19
What is Rich UI?
Rich UI stands for Rich User Interface.
This is a phrase commonly used when talking about an interface that provides dynamic
rendering of its individual parts – notably, on the client-browser, as opposed to server-side
processing
It is a technology that will allow developers of any background to create rich web
pages like one would see on a leading-edge, Web 2.0 sites:
www.digg.com
www.hulu.com
…others discussed in the previous section…
Rich Internet Application (RIA) – is often used synonymously with Rich UI
The benefits of Rich UI have a lot to do with Web 2.0 benefits, and include:
Improved user-responsiveness
The most successful Rich UI implementations can achieve almost a “Windows-desktop” look and feel
to users
“Rich-er” functionality – beyond the simple rendering of HTML, to include dynamic widgets
and components
Improved browser/server load-balancing – as more of the business functionality can be
distributed to the desktop (browsers)
© 2009 IBM Corporation
20
Rich UI and EGL
Rich UI leverages the generation capabilities of EGL to generate JavaScript
JavaScript is a language that runs in a browser, (FireFox, Internet Explorer,
Opera, etc.) – not on the server like EGL-generated COBOL or Java
It is JavaScript that renders your page in the browser and manipulates
labels, data, graphics and controls the page’s behavior
No static HTML is created
EGL generated JavaScript does all the work
Rich UI supports all the base EGL language constructs like libraries and
records, while hiding the complexity of Web 2.0 functionality
Much of the U.I. is implemented using leading-edge internet technologies
such as (all terms we will be defining shortly):
AJAX
DOJO
JSON
FLEX
Web Services
© 2009 IBM Corporation
21
EGL: Shielding Complexity – Across the Development Lifecycle
Business
Developers
Business
Developers
Widget Writer
UI
IBM
ISVs
EGL
Widget
Library
JavaScript
AJAX
Dojo
Google
© 2009 IBM Corporation
Produce
Data + Logic
Consume
REST XML
SOAP JSON
22
SOAP
XML
REST
PHP
COBOL
Java RPG
SQL
EGL
Rich UI Resources
On the EGL Café – in the EGL Rich UI hub: http://www-949.ibm.com/software/rational/cafe/community/egl/rui
…IBM is providing a wealth of:
Examples
Focused documentation
Commentary
Links
© 2009 IBM Corporation
23
Terms and Concepts – Rich UI and SOA
Rich UI makes extensive use of services, and SOA – Service
Oriented Architecture, which is a way to modularize and
deploy code so that it can be consumed anywhere in the
world using any language.
There are two types of Web Service calls used by Rich UI
1. RESTful service calls – A call made through the HTTP service-interface.
Once the call is made, a result is passed back to the requestor in XML or JSON
format.
2. SOAP service calls - A type of service call that is more popular in
enterprise. It requires the exchange of XML messages between the client and
host system.
Server-Side
Enterprise
Computing
Assets
JDBC
Calls
…or…
Services
EGL
Server-Side
Application
Resources
Service
Calls
…and…
Results
By utilizing web services you build modular, scalable systems.
© 2009 IBM Corporation
24
Rich UI
Application
More Terms and Concepts – AJAX, Widget, DOJO
AJAX – Stands for Asynchronous JavaScript and XML. Rich UI makes extensive
(almost wholesale) use of AJAX, utilizing it whenever it makes a service call.
Rich UI never executes a traditional HTML or .JSP page “Form Submit”.
Widget – A widget is a generic term for a graphical element in a GUI or Internet
style interface. Most widgets allow for the interaction and manipulation of data in the
browser.
EGL Widget
DOJO Widget
DOJO – An open source JavaScript toolkit. The DOJO project sets out to create
widgets using only JavaScript. Rich UI is able to interface with DOJO code in order
to pull in some of their widgets. http://dojotoolkit.org/
© 2009 IBM Corporation
25
Still More Terms and Concepts – JSON, Silverlight
JSON – JavaScript Object Notation is lightweight format used by JavaScript to
exchange data. JSON is able to serialize structured data, such as arrays, and
exchange it among host and client machines.
Silverlight – is a new technology developed by Microsoft that is similar to
Macromedia’s Flash. Rich UI is able to interact with, and integrate with Silverlight
widgets in your application:
© 2009 IBM Corporation
26
Cascading Style Sheet (.CSS file)
Found under \WebContent\
Widget Properties: class
A Cascading Style Sheet is a file composed of one to many “classes”
which are labeled declarations of related HTML tags
A .css class is defined for a widget (like a TextLabel) in it class property
.CSS tags are applied in the browser (at run-time)
Cascading Style Sheets are used to make web pages U.I.:
Consistent
Easy to develop
Easy to maintain (a change definition propagates to all widgets that refer to the tag
© 2009 IBM Corporation
27
Classes inside of a
Cascading Style Sheet
OPTIONAL Topic – The Internet 101
Request/Response Lifecycle:
Uniform Resource Locator
Connect to a TCP/IP network:
Through your ISP - internet
Through an intranet/extranet
Enter a logical URL/URI address –
press “GO” in the browser to make
a request:
www.amazon.com
A global-database receives the
request
And resolves the logical address
into a physical address of a server
that can respond to the request by
either:
Serving a page
Passing the request to an application
that can respond (dynamic data
content web application)
If a dynamic content application,
your EGL JSFHandler eventually
gets control of the request (through
a JSF framework), and processes it
And returns data (bound to JSF
components) which end up
processed by the JSF framework
(Java) classes – which emits HTML
and sends a response (reply) back
to the user’s PC
© 2009 IBM Corporation
28
OPTIONAL Topic – What’s in a URL (Uniform Resource Locator)
Uniform Resource Locator (URL) is a technical, internet-term used as a synonym for Uniform
Resource Identifier (URI) – which is used by your browser to access and retrieve:
Documents, Pages, Graphics
…from a unique address of a network-based application or web server connected to the internet
Here is a sample URI dissected:
http://www.ibm.com
“http://” tells the web browser to make a request on port 80 of type HTTP.
“www” tells the browser to connect to a DNS (Domain Name Server) on the world wide web.
Once connected to the DNS server, the hypertext, or “ibm.com” is resolved to an IP address. This IP
address is returned to the client browser which then makes a direct connection to the web server.
Here is a more interesting URI:
http://localhost:5590/EGLRichUI/mysamples/ruiPropertySample.html?contextKey=5
• localhost:5590 = “this computer” listens on port 5590 (default for RUI development/Preview)
• /EGLRICHUI/ = “the root directory of the application” - \WebContent\
• /mySamples/ = “launch the RUIHandler named: ruiPropertySample.html – found in the
\mySamples\ folder (directory) under \WebContent\
• contextKey=5
© 2009 IBM Corporation
= “pass this RUIHandler the value 5, in a variable named: contextKey
29
OPTIONAL Topic – the Browser
The browser (Internet Explorer, Firefox, Netscape, Mozilla, etc.).
Browser software:
Understands and can
render HTML on the
user’s PC
Understands and can
execute the JavaScript
generated by Rich UI –
on the user’s machine
(called “client/side”
processing)
© 2009 IBM Corporation
30
OPTIONAL Topic – Browser Wars
There are documented operational and layout differences between
the two most common browsers (IE and Firefox) – across:
o Basic U.I. properties (HTML rendering and tag references)
o JavaScript interpretation
I.E. 6 Browser rendering
© 2009 IBM Corporation
31
Course
Rich UI – First Steps
Units:
Create and Configure Rich UI project
The Rich UI Environment
Hello World
InitialUI and Children
Deep Dive into Box’s
Event Driven Development
Input Controls
Data Tables
Login Page
Calling a Service
© 2009 IBM Corporation
32
Create a new project
Let’s start the tutorials by creating our very own EGL Rich UI project
Select File New Project
In the new project wizard, select EGL Project, and then click Next
© 2009 IBM Corporation
33
Create a new project
The wizard should then ask you to provide a name for your project
Type (all one word) EGLRichUI
Next make sure to select Rich UI Project as your project type
Click Finish
The IDE will take a minute or two to create your project and set up the environment in your
workspace
© 2009 IBM Corporation
34
The Rich UI Environment
Your workspace should now look as
follows:
The default Rich UI project was created
along with your new project.
Your newly created Rich UI project
The com.ibm.egl.rui_1.0.0 is
essentially the core of RUI. This project
contains:
RUIWidget definitions (more on these
later)
Core language functionality
EGL Data Types
Service Call API’s
A Publish/Subscribe Framework called the
“InfoBus”
A Framework for working with standard
data and event management, known as:
MVC
Event handling logic
© 2009 IBM Corporation
35
Import a Custom Widget Project
We will be using a # of custom widgets in this training course. These custom widgets comprise
learning examples and reusable components for your follow on Rich UI applications. You will
need to import them from your setup folder on the desktop.
Steps:
File (menu)
Import
Other
Project Interchange
Select the widgets.zip file
you downloaded for this class
A new project will be added to your workspace
© 2009 IBM Corporation
36
Setup Your Workspace for Cross-Project Source Reference
In order for your Rich UI project to reference source parts
in other projects in your workspace, you will need to add
your other projects to the EGL Build Path
Steps:
From Project Explorer:
Right-click over EGLRichUI
Select Properties
From Properties > EGL Build Path
Check the boxes for:
– EGLWeb
– com.ibm.egl.education.widgets
Click OK
© 2009 IBM Corporation
37
Copy the Images Folder From the EGLWeb Project to the EGLRichUI Project
In order for your projects to access images in your project, you will want some graphics files.
We’ll use the ones you have in your EGLWeb project.
But (for expediency’s sake) you’ll need to copy these into your EGLRichUI project:
Steps:
From Project Explorer:
Open the EGLWeb project
Expand \WebContent\
Select and Copy the entire \images\ sub-folder under \WebContent\
From your EGLRichUI folder
Expand \WebContent\
Paste the \images\ sub-folder under \WebContent\
© 2009 IBM Corporation
38
Configure Preferences
You may have already done
this, but from
Window > Preferences
From Generation
UN-check
Deployment
Descriptor
Note that optionally you
could check (on):
Library
Program
Service
Click OK
© 2009 IBM Corporation
39
Developing in Rich UI
Let’s learn a little about what it’s like to develop using EGL Rich UI
The workbench view you’ll be using is the EGL Rich UI Editor
The Rich UI Editor provides: Design, Source, and Preview modes
These three view modes are organized as sub tabs in the EGL Rich UI Editor
The Design tab is the visual editor for Rich UI
The Source tab is where you will go to directly edit EGL Rich UI source code
The Preview tab is essentially a browser. This is where you will go to see what you’re
pages will look like to your customers or users
These three views are where you will spend a large majority of your time as a Rich UI
developer.
The views are organized inside the workbench in the EGL Rich UI perspective
Recall from your previous EGL learning, that a “perspective” organizes related
workbench views along the lines of developer roles and/or tasks.
An annotated snapshot of the Rich UI perspective is shown on the next slide
© 2009 IBM Corporation
40
Rich UI Perspective
Similar to Web Perspective – but with different workbench views related to Web 2.0 development
Project Explorer
Content Area
Where you design your Web 2.0 applications
Code EGL Rich UI statements
Test (Preview) your work
Palette
Outline,
Properties
and Events
Views
© 2009 IBM Corporation
Problems
&
Generation Results
Views
41
Rich UI Projects
RUI projects consist of three default packages: EGLSource, JavaScript, WebContent
Within each of these three packages there are:
Sub-Packages – to organize your project, containing:
EGL source files and other source files:
– Cascading Style Sheet files
– Graphics (images)
A project .eglbld file
A project .egldd file
EGL Rich UI project source file Part types can be:
Libraries
externalTypes – which can be used to call native or external
JavaScript functionality
Handlers
The EGL Part type used specifically for Rich UI programming – is an
EGL Handler
EGL Rich UI Handlers come in two sub-type parts:
RUIHandler
What we’ll call a “View” in this course
RUIHandler of sub-type RUIWidget
What we’ll refer to simply as a “Widget”
© 2009 IBM Corporation
42
Course
Rich UI – First Steps
Units:
The Rich UI Environment
Create a new project
Rich UI Programming Fundamentals
Web Application Layout and Design
Event Driven Development
Input Controls
Data Tables
Login Page
Calling a Service
© 2009 IBM Corporation
43
RUIHandlers – aka “Views”
RUIHandlers are used to create Rich UI applications that are composed of one-to-many onscreen RUIWidgets. These widgets can be IBM-provided widgets, or custom widgets that
you’ve created
RUIHandler type RUIHandler…
Cascading Style Sheet (optional property)
initialUI (initial U.I. rendering in the browser)
onConstructionFunction (initial EGL Function)
EGL Rich UI
Elements
Elementary Widget (ex. textbox, button HTML, etc.)
ExternalType (provides access to native JavaScript)
…
Custom Widget – can embed reuse existing Widgets
onConstructionFunction
Elementary Widget
Elementary Widget
EGL Function…
EGL Function(s)
…
RUIHandlers are referred to as “views” because they represent the visual or
“view-able” elements of your Rich UI application
© 2009 IBM Corporation
44
RUIHandlers – Code-Level Example
From the above, note the following:
initialUI=[Box] this Box being a RUIWidget of type box – that contains three
additional RUIWidgets:
– TextLabel (which has some initial text)
– TextField
– Button – which has an onClick function that fires populateFields(…)
onConstructionFunction = initialization (which in this case does nothing but
could!)
populateFields(…) EGL function – which just initializes text in the TextField RUIWidget
Additional properties:
backgroundColor, width, height, columns=1
© 2009 IBM Corporation
45
RUIHandler – Containing a RUIWidget of type Grid
From the above, note the following:
initialUI=[grid] – declares a grid RUIWidget inside the RUIHandler
This grid widget contains a number of properties, all of which contribute to its look and
feel:
headerBehaviors
margin
data (the individual rows)
© 2009 IBM Corporation
46
Basics of Rich UI Programming – RUIWidgets
RUIHandlers contain one-to-many RUIWidgets
RUIWidgets can be thought of, or categorized as:
Simple:
TextLabel
Box
Button
Complex:
IBM provided
RUIWidgets
mortgage Calculator
a sort-able, select-able list of customers
IBM provided:
see the palette list on the right
Custom:
you create the widget
A “container” widget for organizing U.I. elements:
Box
Div
Tab folder
A “content widget” – for data and labels, behaviors, etc.
Most of the other widgets in the palette
Complex RUIWidgets typically consist of both container and content widgets
All U.I. elements in a RUIHandler are RUIWidgets
Example: To put a basic input field onto a page, you will declare a variable of type TextField – either
using the Visual Editor, or coding it using Content Assist in the EGL editor.
lNameInputField TextField {text=“LastName”};
© 2009 IBM Corporation
47
Basics of Rich UI Programming – Custom Widgets
You can add your own Custom Widgets to the Palette
Custom widgets often contain elementary widgets or other custom widgets
– which can contain other custom widgets, etc.
Among other benefits, this allows you to reuse code, and to scale – or
grow the U.I. in response to requirements that increase in complexity over
time
Note: Don’t worry too much about the syntax in this example
We’ll be covering all these language concepts in a bit
© 2009 IBM Corporation
48
RUIWidget Properties
RUIWidget. <property>
In EGL Rich UI, RUIWidget properties (specified within
the {} following the variable declaration…a short list of which is
shown here displayed through Content Assist)
…play a huge role in the look and feel and behavior of
the Widget in your application
U.I.
There are an extraordinary number of properties you Properties
can customize to enable your RUI application for
whatever business and U.I. requirements come at you.
In fact – it’s not much of a stretch to say that this
(virtually) unlimited programmatic access to the
underlying deep-dive mechanics of each widget:
1. Allows you to create “un-compromising U.I.” designs –
with EGL
2. Is a major difference between Rich UI and JSF (which is
a Java-based framework that “hides” some of the
properties you may need access to)
Note that there are two categories of Widget
properties:
Browser
Event handling
Properties
1. U.I. properties – Widget layout and display
2. Event-handling properties – that respond to Widget
run-time behavior in the browser
© 2009 IBM Corporation
49
RUIWidget Properties – EGL Coding Example
To specify a RUIWidget property or event is very simple:
U.I. property example – Set the text value and background color of a TextField
widget inside of the initial EGL function of RUIWidget or RUIHandler:
Just code: variableName.property = value
Browser event property example – After the user enters data in a field and tabs
out, execute a function to validate the data value entered:
Just code a reference
to an EGL function
The function in the RUIHandler must be
declared with an input Event as a parameter.
After that? It’s all stock EGL syntax
© 2009 IBM Corporation
50
Simple RUIHandler/Elementary Widget – Document – 100 Foot View
Is figuratively represented by…
© 2009 IBM Corporation
51
Simple RUIHandler/Elementary Widget – Code – 10 Foot View
myTopBox
myBox02
myBox03
//NOTE references to myTopBox Box
//NOTE: Properties – including what function to invoke: “onClick”
//NOTE: Properties of U.I. field
//NOTE references to U.I. elements
//NOTE: container for myBox02, myBox03
//NOTE: When clicked? Assign value
© 2009 IBM Corporation
52
RUIWidget Properties and the Visual Editor
When you create a new RUIHandler with the Visual Editor
you can specify properties in the Properties view.
The property values available depend on the kind of widget
(i.e. A “Box” can have columns, A TextField can be “read only”, can have a
custom font, fontSize, fontWeight, etc.)
Some properties apply to all widgets:
Color – for text color
Alignment – Right/Left/Center
Note that (none) defaults to the parent container’s alignment
backgroundColor – for the widget’s “fill (background) color”
id – a unique identifier for the widget
Class – the .css file’s unique class tag
Note that in order to pick up custom .css tags, you will need to code:
cssFile = “relative/fileSpec.fileName.css” – as a property of the RUIHandler
Besides the major (common to all widget) properties, there are five additional categories of
Widget properties available from the Visual Editor for widgets:
Border – to change the widget’s border line size and style
Spacing – to add pixels of space between widgets
Position – to precisely (or relatively) place a control in the browser
Appearance – to change the color – including transparency of a widget, and to modify the cursor styling
Accessibility – to specify user tab-key order and work with different devices
(for the handicapped)
© 2009 IBM Corporation
53
Event-Driven Programming and Event Handling
Programming in Rich UI utilizes what is called event driven development. Most run-time behavior
is based on user-directed events that occur on a web page. Some of these events include:
onClick
- mouse events
onChange
onKeyDown
- keyboard events
onKeyUp
onFocusGained
onFocusLost
onMouseMove
Every widget on a web page can have events defined for it
Widgets can even have multiple events defined:
An input TextField can have both onMouseOver (for context sensitive help)
… and onFocusLost (to validate data entry before moving to the next field)
You specify defined events through EGL code, and from the Visual Editor
At run-time (in the browser), widgets listen for specific user-events, which can trigger calls to
your EGL functions. You code “responses” to these events inside the functions:
Data validation
Data access
The responses to the events are in the form of standard EGL functions that contain EGL
business logic and procedural statements (to do the data validation, data access, etc.)
There are additional types of events you’ll learn about later in this course that are not
programmatic, and not tied to user-browser interaction
© 2009 IBM Corporation
54
Event Handling and the Rich UI “Event Record”
While the Web 2.0 event-driven programming model permits multiple events on
any/every widget in a web page, in practice you will define specific event-handlers to
trap specific events when they occur.
This means that:
When an event occurs in the browser (A User clicks a button – which fires an
onClick event)
If you have defined an EGL event-handler for that event
And you have coded an EGL function for that event-handler
The Rich UI framework automatically invokes the EGL function you specify to
handle the event you declare
The framework also gives you access to an Event Record, which provides a number
of properties and values that can be used in your U.I. business logic
To do things such as:
Detect which button was clicked: e.widget.id
Set focus to a widget: e.widget.focus();
Change the x/y coordinates of the widget in the browser (used for run-time
Drag & Drop operations)
© 2009 IBM Corporation
55
HTML + JavaScript
Clicking the Multiply button
fires an onClick event in
the browser.
If you have an eventhandler defined for onClick
the JavaScript code
(generated from your EGL)
tied to the onClick event is
automatically run in the
browser
How Can I See All These Events and My EGL Code? (Use the Debugger!)
The EGL Debugger works exactly the same
for Rich UI as it does for batch EGL, and
EGL/JSF functionality
Steps:
1. Set your break-points (in the EGL editor’s
left-hand border):
2. From Project Explorer,
Debug your EGL Rich UI Application
© 2009 IBM Corporation
56
EGL Rich UI Debugging
When you Debug a Rich UI Application.
1. Your RUIHandler will open in an external browser
2. Upon a defined event, the EGL function declared as that event-handler will be
fired off and loaded in the Debugger for you to step-through
You will also get to see/Debug
through the EGL Widget framework
code (or you can Zoom through the
code, if you’re not interested)
© 2009 IBM Corporation
57
Basics of Rich UI Programming – ExternalTypes – access to JavaScript
Rich UI allows you to use (or
reuse) existing native
JavaScript functionality
Example – call a JavaScript
function defined through an EGL
ExternalType to “Google map” an
address
Fires onClick event
Calls JavaScript function
© 2009 IBM Corporation
58
A Small Sample Rich UI Application
Let’s take a look at a sample application and see what it comprises:
The above application is designed using 3 box RUIWidgets
The outer-most box has one row and one column.
outerBox Box {marginLeft = 45, children = [ mainContent ] };
Inside of the outer box is an inner box with three rows and one column, the top row holds
the image, the second row holds another table, and the last row holds the login button
mainContent Box {columns = 1, backgroundColor = "#C3D9FF", width = 270, roundedCorners =
yes, ALIGN_CENTER = Box.ALIGN_CENTER, children = [ image, loginBox, login ] };
Finally, inside of the middle row is another box holding the labels and fields
loginBox Box { columns = 2, paddingLeft = 100, marginTop = 20, width = 270,
children = [userNameLabel, userNameField, passwordLabel, passwordField] };
© 2009 IBM Corporation
59
Basics of RUI Programming – Design-Time Flexibility
Web pages created with Rich UI are extremely flexible to build and maintain
For example, by simply changing the order in which children are assigned, a web page can
be completely turned upside down
On the previous slide, we showed that our mainContent VBox had children
[image, loginBox, login]
Changing the order of our children can render the following
[loginBox, login, image]
– Note that each child is an individual widget declared just like EGL variables somewhere else in the RUIHandler
So all it takes to create a widget is a simple variable declaration?
Yes, and you can structure where they are displayed on the page through VBox’s and
HBox’s!
© 2009 IBM Corporation
60
How do you Invoke a Rich UI Application from a Browser or External Application?
A deployed RUI applications URL is:
"http://<domainName>:<port>/<web project name>/<DeployedRUIHandlerName>.html
Where domain name, port, and web project name are the same as you would specify
for a web page, or .JSP page being run on an application server.
To define the deployedRUIHandlerName value - this is the name of the 'Main View',
which is really what you are deploying, and represents the root of your application
Example Rich UI application deployed to Tomcat:
http://www.ibm.com:8080/EGLRichUI/myHelloWorld.html
Example Rich UI application being developed in RBD:
http://localhost:5590/EGLRichUI/mysamples/ruiPropertySample.html?contextKey=5
Note that you can invoke an external browser from Preview
© 2009 IBM Corporation
61
Course
Rich UI – First Steps
Units:
Rich UI Programming “101” Workshops
Creating packages and RUIHandlers
Hello World
The Visual Editor
Rich UI Widget Properties
Rich UI Widget Events
© 2009 IBM Corporation
62
Workshop Section
Let’s learn about what it’s like to develop using EGL Rich UI
Exploring Rich UI via Sample Code
Creating your own RUIHandlers and RUIWidgets from scratch
HelloWorld
Visual Editor Workshops (learning to use the Rich UI tools)
–
–
–
–
Standard mode editing
Split Screen
Experimenting with common widget functions
EGL Rich UI Debug
Additional Workshop
– Calculator
– Temperature Converter
– Login
© 2009 IBM Corporation
63
Workshop – Exploring Rich UI Using Sample Code
In this workshop, you will:
Create a new Package in your EGL Rich UI Project
Create a new RUIHandler inside the Package
Copy/Paste some sample code
Preview the web application
Customize some of the EGL Rich UI properties
© 2009 IBM Corporation
64
Workshop – Create mySamples Package
So now that we’ve got a new project, let’s create our first EGL Rich UI page.
First we’ll create a package to house this simple application.
Right-click over EGLSource and select New EGL Package
In the wizard that pops up, name the Package: mySamples, and then click Finish
© 2009 IBM Corporation
65
Workshop – Create sample1 in mySamples Package
Now let’s create a RUIHandler in the package. Right-click over the mySamples
package and select: New > EGL Rich UI Handler
Name the EGL source file: sample1
© 2009 IBM Corporation
66
Workshop – Replace sample1 “Boilerplate” code
From the slide ***Notes, copy and paste the RUIHandler code for sample1
From the RBD Source view: Select all of the boilerplate statements and replace them with the
slide notes code.
Save (Ctrl/S)
© 2009 IBM Corporation
67
Workshop – Test and Play with sample1
Select the Preview mode – click the Button
Return to the Source mode, and modify some of the EGL code.
Return to Preview mode to test (to view) your work
© 2009 IBM Corporation
68
Workshop – Create Your First RUIHandler (From Scratch)
In this workshop, you will:
Create another new Package in your EGL Rich UI Project
Create a new RUIHandler inside the Package
Use the Rich UI Visual Editor to do initial web application layout
Customize some of the RUIHandler properties in EGL
Preview the web application
© 2009 IBM Corporation
69
Hello World – Create Package
Let’s create (from scratch) our first EGL Rich UI page – and learn about the Rich UI
Visual Editor in the process
First we’ll create another new package:
Right-click over EGLSource and select New EGL Package
In the wizard that pops up, name the package helloworld, and then click Finish
© 2009 IBM Corporation
70
Hello World – Create RUIHandler – 1 of 2
Your project should now look
as follows:
Now let’s create a new RUIHandler
Right-click over the helloworld package and select new EGL Rich UI Handler
© 2009 IBM Corporation
71
Hello World – Create RUIHandler – 2 of 2
In the wizard that pops up, name the handler Hello, and then click finish
Hello.egl should now be opened in the Content Area by the EGL Rich UI Editor
Let’s take a tour of the Rich UI Editor!
You should initially be in the editor sub tab of the editor
This is much like the visual editor used for JSF
© 2009 IBM Corporation
72
The Visual Editor - Palette
Notice the palette on the right side of
the editor
Think of the palette as what you would
see in a JSF environment. From the
palette we will drag and drop widgets
onto our page
New Concepts:
The palette is built into the design editor
instead of existing as its own eclipse
view.
You may think that the list of widgets in
the palette is quite sparse. This is
because Rich UI allows you to define
your own custom widgets!!
The Refresh palette button exists so that
newly created widgets can appear on the
palette and later dragged onto a page.
Initially, only the RUIWidgets are shown
in the palette.
© 2009 IBM Corporation
73
Rich UI Application Design – RUIWidget – Box
The concepts behind designing pages with Rich UI are similar to what you would see
when designing pages with basic HTML.
In essence, a designer can still think in terms of laying out HTML tables on a page.
The fundamental Rich UI widget is a Box.
A Box is just an HTML Table (a container, used to hold other controls, text and data)
The first step in creating any type of web page is most often the creation of an HTML
table to give the page some structure.
The first and notably the last step to adding a component onto a page, is through the
use of the children or initialUI variable property.
The above code creates an HTML table, then adds the input field as its child.
In a Box, all children are given a new column in the HTML table (so, each child will
be added to the right of the child before it).
If you would like children to be added vertically, you will need to tell the box how
many columns you would like.
© 2009 IBM Corporation
74
Hello World – Add a Box RUIWidget
A RUI Widget is essentially a definition of an HTML tag.
There exists a RUI Widget for almost every HTML tag (table, h1, h2, etc.).
However, if a RUI Widget is not available for a particular HTML tag, you can always
implement one yourself!
Now let’s get on with our Hello World page!
We’ll be placing a TextLabel, TextField, and Button onto the page.
From the palette drag, a Box onto the page
Click on the Box and drop it anywhere on the page
The editor will turn green indicating the location the Box (HTML Table) will be dropped.
© 2009 IBM Corporation
75
Hello World – Box Widget Properties
Once you drop the Box onto the page, you will be greeted with a pop-up asking what
you would like to name your variable of type Box
At this juncture, let’s just take the default (more on this later)
You should now see the outline of a Box in the
visual editor!
The next step is to adjust some of the properties
for the Box (make sure the Box is selected)
In the bottom left corner of the IDE, notice the
Properties view
From there specify “2” for the columns property
Press Ctrl/S to save the page.
© 2009 IBM Corporation
76
Hello World – Add a TextLabel Widget to the Box
Now is a good time to re-explain the columns property for the Box
By telling our Box that we only want it to have 2 columns, we are limiting the table to having
only 2 columns. As we put widgets inside of the Box, every 3rd widget will cause a new row
to be created in the Box, and will be inserted into that row.
Let’s add a TextLabel to the Box
From the palette, drag a TextLabel widget into the Box
© 2009 IBM Corporation
77
Hello World – TextLabel Widget Properties
When you have dropped the TextLabel into the Box, name it myFirstTextLabel in
the pop-up that greets you.
The TextLabel should now be placed inside of the Box
With the label selected in the visual editor, focus on the Properties View and change
the text to be “Hello World: ”, then press Enter
© 2009 IBM Corporation
78
Hello World – Add a TextField to the Box
Next, drag a TextField onto the page, and inside of the Box
Once you’ve dropped the TextField into the Box, name it’s corresponding variable
myFirstTextField
© 2009 IBM Corporation
79
Hello World – Add a Button to the Box
Finally, let’s drag a button onto the page!
Remember that even though the visual editor may show the green bar as being to the
right of the TextField, we specified that the Box has only two columns
This will cause the button to actually be placed into the first column of a new row
When asked to give the Button a variable name, simply take the default by clicking
OK
Your page should now look as follows!
© 2009 IBM Corporation
80
Hello World – Add an onClick Event to the Button
With the newly created Button selected on the page, turn your attention to the
Properties view.
Select the Events tab
Click on the onClick event
Click Add Event Handler
Name the function populateTextField
Next, go back to the Rich
Source View
© 2009 IBM Corporation
UI Editor and at the bottom of the view, switch to the
81
Hello World – EGL Code (Source) View
You should now see the code for the page
You should see three variables: a Button, a TextField, a TextLabel, and a Box
Inside of the function on the page, code the following line of EGL Source
Remember to use Content Assist!
More on event handling later!
© 2009 IBM Corporation
82
Hello World – Preview (Run Hello World)
What did we just do?
First, we created an event handler that would fire whenever the button was clicked
Second, inside of this event handler, we set the text property of our input field to a literal
string
We are done with our first web application
Switch to the Preview tab of the EGL Rich UI Editor
Notice the page finally running in a real browser
Click the button and see what happens
© 2009 IBM Corporation
83
Rich UI Box - Examples
Let’s take a look at the code for the HelloWorld page we just created!
Notice that we are using the columns = 2 property
This means that every 3rd child will go on it’s own row in the table
© 2009 IBM Corporation
84
Rich UI Boxes
In the code, change the columns property to equal 1
Now return to the Preview tab of the EGL Rich UI Editor and notice the change in the
page when it renders
© 2009 IBM Corporation
85
Workshop – Split Screen Editing, Widget Functions, Rich UI Debug
In this workshop, you will:
Create another new Package in your EGL Rich UI Project
Create a new RUIHandler inside the Package
Use the Rich UI Visual Editor to do initial web application layout
Use the Rich UI Editor in Split-Screen mode
Use some of the common widget functions***
Widget.Fadein()
Widget.Focus()
Widget.select()
Widget.reSize()
Use the EGL Rich UI Debug facility
Preview the web application
*** These functions are common to all widgets and widget types
© 2009 IBM Corporation
86
Create the Package and RUIHandler
First, right-click over the EGLSource folder and create a new package
Name it sandbox
Next, right click over the
sandbox package and
create a new
EGL Rich UI Handler
Name it: wksp2
© 2009 IBM Corporation
87
Add a Box and some Widgets to wksp2
Using the Visual Editor, add the
following widgets to wksp2
box
Name: boxOuter
columns: 2
alignment: CENTER
backgroundColor: AliceBlue
width: 400
height: 300
Four TextFields
Named: TextField1 TextField4
Add a 2nd box and a Button inside the box
Keep all of the defaults for both widgets
© 2009 IBM Corporation
88
Add an Event and an EGL Event-Handling Function
Using the Visual Editor:
Select the Button
From the Events sub-tab
Click: Add Event Handler
Name the event: buttonClickEvent
From the onClick Event
Open the Function comboBox
Select: buttonClickEvent
Switch to EGL Source editing mode
Using Content Assist (Ctrl+Spacebar) add the following code in the buttonClickEvent(…)
function:
Save your code
© 2009 IBM Corporation
89
Preview the View – Add Some New Functions
From Preview
Click the button
Note that the text is truncated in the widget’s U.I.
(let’s fix this)
From Source editing mode, add the following additional EGL statements to the RUIHandler:
(again, use Content Assist to create)
Save, and from Preview, Click the button – note the effects of the new functions
Experiment with different values for the fadein/fadeout, width and select/focus
functions
© 2009 IBM Corporation
90
Debug Rich UI Logic*** (See Slide Notes before beginning this Workshop)
Recall from your previous EGL learning that to Debug you:
Set breakpoints at the lines in the EGL source you wish to begin line-byline debugging
By Double-clicking in the gray border
next to an operational line
(not a declaration) – an executable statement
You Debug from Project Explorer
So go ahead!
From within wksp.egl
- Set a breakpoint in the buttonClickEvent
From Project Explorer:
- Right-click over wksp2.egl
- Debug EGL Rich UI Application
© 2009 IBM Corporation
91
Debug Rich UI Logic – Test Your Rich UI Logic
Note that Debug will launch your view in the browser
Enter values in some of the TextFields
Click the button (and confirm the Perspective switch)
Besides viewing the code execution line by line, be sure to
explore all of the widget properties and their values.
When finished?
Terminate and close
the Debugger.
Then return to the
Rich UI Perspective
© 2009 IBM Corporation
92
Split Screen Mode in the Workbench – 1 of 3*** Slide Notes
One very nice way to understand the “cause and effect” between editing EGL code and using the
Visual Editor to design your Rich UI applications is to work in split screen mode. To do this:
With wksp2.egl already opened in the EGL Rich UI editor
From Project Explorer:
Right-click over wksp2.egl
Open with EGL Editor
With both editors open in the Content Area:
Select the EGL Editor copy of the source
Left-Click the tab (as shown)
Hold and drag towards the bottom
When the folder-pointer becomes a
downward-pointer release the mouse
© 2009 IBM Corporation
93
Split Screen Mode in the Workbench – 2 of 3
So now you can:
Use the Visual Editor
Drag & Drop Widgets from
the Palette
Set Properties
Move with mouse-based
development
And see the new EGL
statements and properties
in the code
…or you can …
Develop your Rich UI
application from the EGL
code-level
And immediately see the
effect of your work in the
Visual Editor
Let’s experiment with this a little (next slide)
© 2009 IBM Corporation
94
Edit in Split Screen Mode – 3 of 3
From the Visual Editor, add a new Button to the RUIHandler (take all of the defaults)
Note the effect in the EGL source code (a new Button variable is added)
Make some changes to the view by editing the EGL source and note the Visual Editor effect
Preview
In order to
synch-up the
source copies in
both editors you
will have to save
changes (on either
side of the
split-screen)
© 2009 IBM Corporation
95
Additional Optional Workshop – an Online Calculator
In this workshop, you will:
Review Rich UI Events
Create another new Package in your EGL Rich UI Project
Create a new RUIHandler inside the Package
Use the Rich UI Visual Editor to do initial web application layout
Customize some of the RUIHandler properties in EGL
Add event-handling functions in the RUIHandler that
Preview the web application and test your work
Optionally
Create additional calculator buttons and functions in the RUIHandler for subtraction, multiplication,
division, etc.
Debug your calculator as an EGL Rich UI Application
© 2009 IBM Corporation
96
Create the Calculator’s Package and RUIHandler
First, right-click over the EGLSource folder and create a new package
Name it calculator
Next, right click over the
calculator package and
create a new
EGL Rich UI Handler
Name it: Calc
© 2009 IBM Corporation
97
Add a Box to the Calculator, Editing in EGL Source Mode
Let’s switch gears on this workshop, instead of using the visual editor, let’s code our
presentation logic using EGL source code editor.
Once the Calc RUI Handler is opened in the EGL Rich UI Editor, switch to the Source mode
Now, let’s create an HTML table to lay out our UI Components:
Code a new Box (like below), and give it the property shown in the screen capture.
Remember to use Content Assist when specifying a type of widget or widget properties!
{ columns = 2 };
Once the Box is created, add it to the initialUI property of the RUIHandler
This will ensure that onLoad, the table is rendered in the page.
© 2009 IBM Corporation
98
Add labels and fields to the calculator
Add (code) labels and field widgets, then add them to the Box via the children=
property
Once the labels and fields are coded, add them to the Box as children.
The web application should Preview similar to
© 2009 IBM Corporation
99
Add a RUIWidget Button
Now that we have our UI Components on the page, we’ll add a Button to trigger an
event when the user clicks it, in the browser.
Create a new Button in the RUIHandler source code below the resultValue variable
Next add the Button as a child to the Box
The web application should now preview as follows
Now let’s add an event listener to the button
© 2009 IBM Corporation
100
Add an onClick Event Listener to the Button
Add a comma after the text property of the calcButton variable.
Press Ctrl+Spacebar (Content Assist)
Select the onClick-Button event.
From there we will give the onClick event a function name: addValues
Initially you will see an error because the addValues function does not exist.
Next, code the following function below the calcButton variable (use Content Assist)
Press Ctrl + Shift + O to bring in the import statement for Event
© 2009 IBM Corporation
101
Calculator – in Preview
Note that all of the data in a web application is eventually of type string
For this reason we must cast the values in the input fields to int before we do math
Save the RUIHandler and try it out!
You have now been introduced to coding with Event driven development.
Re-examine the RUIHandler if you don’t understand what we just did
For sure production applications will be more complicated than this
Note that as event listeners as you want can be applied to Widgets
A widget could have an onClick property as well as onMouseOver and so on…
© 2009 IBM Corporation
102
Calculator – Optional Labs and Workshops
If time permits, add three additional buttons to
the web application, bound to three functions for:
Subtraction
Multiplication
Division
You may want to work with other styling elements as you’ve learned in these
sections:
Background color for your Calc widget
backgroundColor – or just color (which is text color) for
your resultValue
Also, if time permits:
From the EGL Source Code Editor – add several
break-points inside your Calculator functions
From Project Explorer: Debug your work
© 2009 IBM Corporation
103
Optional Workshop – Simple Login Page
Now that we’ve got a very nice Web 2.0 Calculator, let’s make a login page.
First right-click over the EGLSource folder and select New Package
Name the package authenticate
Next right-click over the authenticate package and create a new Rich UI Handler.
Name the file: login
© 2009 IBM Corporation
104
Login Page
Drag a box onto the page from the visual editor
Just take the default for the variable name.
Next add the following properties to the box using the visual editor
© 2009 IBM Corporation
105
Login Page
Now that we’ve got a Box to lay out our
components, let’s go ahead and create some
components to allow for username
and password input!
Once the following components have been created, modify the Box declaration
accordingly!
Save the page and compare your results
to the following
Now that we have our UI laid out, let’s create some presentation logic that will
authenticate a user and switch to the Calc view (continued on the next slide)
© 2009 IBM Corporation
106
Login Page
Modify Calc.egl:
From Calc.egl (the source is in the \calculator\ package:
Add a box widget variable, named: layoutBox (columns=2, etc. for properties)
– Also, put all of the current calculator widgets inside of layoutBox’s children=[…] property
Code the following logic in the RUIHandler
Note we are giving the RUIHandler two different events to listen for.
loginFunc (bound to the button) and resetUI (which you will bind to onFocusLost for the Password field)
Also note that we are creating a variable of type Calc and setting it as the child to our login
box
Note that this technique
assumes the main box in
Calc is named: layoutBox
Remember to press Ctrl + Shift + O to bring in import statements
Bind the resetUI function to the onFocusLost event for the Password field
Save the file and Preview the web application (and test your coding)
© 2009 IBM Corporation
107
Additional Simple OPTIONAL Workshop – an Online Temperature Converter
In this workshop, you will:
Create another new Package in your EGL Rich UI Project
Create a new RUIHandler inside the Package
Use the Rich UI Visual Editor to do initial web application layout
Customize some of the RUIHandler properties in EGL
Add event-handling functions in the RUIHandler that
Preview the web application and test your work
Optionally add a function that converts Celsius to Fahrenheit and revise the U.I. accordingly
© 2009 IBM Corporation
108
Temperature Converter “High-Level” Steps
Now that you’ve created a number of RUIHandlers you should be able to recall the steps to
create a new RUIHandler from scratch (if not feel free to scroll back through these slides and
revisit them). So perhaps it’s time to see what you can do with only the final objective – instead
all the detail click-for-click instructions.
Create a simple Fahrenheit to Celsius conversion web application on your own
Use the visual editor - or manually code the EGL presentation logic
Whichever you feel more comfortable with
You could GOOGLE the algebra for the temp-conversion, but we’ll be generous, and give that to
you
© 2009 IBM Corporation
109
Temperature Converter - Enhancements
If time permits, you can upgrade the Converter to convert both from Fahrenheit to Celsius and
vice versa.
Here’s the new formula
You will need to modify a number of places in the RUIHandler source code.
You could either work on this yourself, or use the code in the ***Notes section of this
slide as a model
© 2009 IBM Corporation
110
Course
RBD/EGL Development
Units:
Rich UI Properties and Event Handling
© 2009 IBM Corporation
111
Working With RUIWidget Properties and Events
In this comprehensive workshop, you will:
Create a new RUIHandler inside the mySamples package
Use the Rich UI Visual Editor to do initial web application layout
Add several different types of RUIWidgets
Work with (customize) the essential U.I. Properties and Events for the RUIWidgets
Using the Visual Editor
Using EGL source code editing
Preview the web application – and verify “cause and effect”
Note – this is simply a learn by trial-and-error workshop, that asks that you
experiment with different widget properties and events.
Do not try too hard to match the PowerPoint screen captures exactly.
And feel free to specify other settings for properties – just as long as you can tie the
eventual (Previewed) result with a specified property value
© 2009 IBM Corporation
112
RUIWidget Properties – Setting Basic Properties from the Visual Editor
From your \mySamples\ package, create a new RUIHandler named:
ruiPropertySample
Using the Visual Editor, drag in
a box – give the box the
following properties:
name: Box
Alignment: CENTER
Columns: 2
Color: Gray
BackgroundColor: Wheat
Font: Verdana
fontSize: 10pt
fontWeight: bold
Using the Visual Editor, drag a TextLabel into the Box
Name: TextLabel
Preview
Note the colors, alignment, font styling, etc.
© 2009 IBM Corporation
113
RUIWidget Properties – Modify Properties from the Visual Editor
From the Properties view, modify the following for Box
name: Box – Note you can not change the name from the Properties view
Alignment: LEFT
Columns: 2
Color: Moccasin
BackgroundColor: SteelBlue
Font: Courier
fontSize: 14pt
fontWeight: normal
Preview
Customize the individual properties for the TextLabel
Preview
Note that the individual RUIWidget’s properties over-ride the Box
(container widget) properties, when both are set for the same attribute
© 2009 IBM Corporation
114
RUIWidget Properties – Set Border Properties
From Properties, modify the Border values for Box
borderColor: GoldenRod
borderStyle: groove
borderWidth: 8
Preview
Customize the individual Border properties for the TextLabel
Preview
Try a few different settings for border color and style
Preview after each customization
© 2009 IBM Corporation
115
RUIWidget Properties – Set Padding Properties
Using the Visual Editor, drag in three additional
TextLabels
Be sure to add them inside of the Box
Preview (with Padding: 8 for the Box)
From Properties, set the Box’s Padding to
22
Preview
2
Preview
Set one of the TextLabel’s padding to: 22
Preview
Padding adds space
between the container
(parent) component and
its children
TextLabel
with padding: 22
© 2009 IBM Corporation
116
RUIWidget Properties –
Set Position Properties
From Properties, select
another TextLabel, and
set these Properties
backgroundColor: Gray
Position:
relative
X: 22
Y: 33
Width: 255
Height: 44
Preview
Change the same
TextLabel’s position to
Select, hold and drag the
TextLabel inside the Box
Drag the TextLabel
anywhere, the x/y will
change accordingly
If you set x to -3 with relative
positioning, the object moves 3 pixels
to the left of where it would normally
appear.
Relative positioning moves an
element RELATIVE to its original
position.
absolute
With absolute positioning, an element
can be placed anywhere on a page by
setting its x and y properties.
Preview … and press
the Refresh button
© 2009 IBM Corporation
117
RUIWidget Properties – Appearance Properties
From Properties, select the TextLabel with the absolute position – and set the following
Properties:
Position:
X: 8
Y: 8
Appearance
Opacity: .6
Cursor: hand
TextLabel with
hidden property
Opacity is a float ranged between 0 (zero, opaque) and 1.0 (one, completely transparent).
Select another TextLabel, and from Appearance, specify:
Visibility: hidden
Select another TextLabel, and from Appearance specify:
Cursor: wait
Note: 3D – effect with transparent (opaque) TextLabel
in the foreground
Preview
http://www.w3.org/TR/css3-color/#transparency
Note also the hidden property … working
© 2009 IBM Corporation
118
Course
RBD/EGL Development
Units:
Cascading Style Sheets and Rich UI
© 2009 IBM Corporation
119
What is CSS?
It’s an axiom of the web development world that, CSS is very important in
professional layout, consistency, and many aspects of U.I. So it should
come as no surprise that the same is true for Rich UI and Web 2.0
development.
In recent years, free flow web designs have become the standard for all
web pages. This means that HTML tables are no longer used for base UI
layout. Instead, floating Divs are the preferred method.
These floating Divs are simply containers. Containers that are styled by
CSS tags and classes.
By designing a web page with floating Divs and CSS, you end up getting a
very flexible design. The entire look and feel of the web page can be
changed by simply editing the CSS file, and never touching a single line of
HTML.
This one of the benefits of using CSS over HTML tables.
© 2009 IBM Corporation
120
CSS Syntax
Since this is a Rich UI specific course, we can’t teach the intricacies of – or deep-dive
into CSS. We can however give quick overview – and teach you “about” CSS.
To start off, there are two types of CSS groupings: classes and IDs
A class can be referenced as many times as you want inside of an HTML file.
An id, on the other hand, can only be referenced once – as it is also used by JavaScript
as the unique identifier for the Rich UI element it is assigned to
(and can be returned by calling: document.getElementById(“…”) in native JavaScript
The two also have a slightly different syntax…see below
Note the differences in syntax between IDs and classes:
.<cssClassName>
© 2009 IBM Corporation
…instead of…
#<cssClassName>
121
CSS – Workshop – 1 of 3
Lets now step into a simple but quick workshop that will demonstrate some of
what you can do with CSS.
Create a new package under the EGLRichUI project called css.
Next, create a new Rich UI Handler called CSSDemo
Often pages are constructed with the following general layout and structure
Container
Header
Navigation
Content
CSS is then used to position and style these elements
Each of the above elements are divs. Note that the content div may contain
many more divs inside of it.
© 2009 IBM Corporation
122
CSS – Workshop – 2 of 3
Copy/Paste the following code in the notes, and replace the boiler plate code with it.
Note that we have created a standard layout using Divs.
A container has been created to hold all of the free form Divs.
Inside of it is a header div, a nav div, and a content div.
The content div in itself then contains several other divs
Also note that we chose to use the CSS “id” property for things that would only appear on
the page once, and “class” property for things that could appear on the page multiple times!
© 2009 IBM Corporation
123
CSS – Workshop – 3 of 3
Now that we have created a simple
layout using HTML (or in our case Rich
UI), lets add the CSS to style it.
Copy/paste the code in the notes
section of the slide and append it to the
EGLRichUI.css file – which is under
\WebContent\ in your EGLRichUI
project
Note the use of two properties:
Position: relative
Float: left
These are the key properties for
designing free flow web pages
Study the code, edit it, and examine
the changes, then go to the following
URL to learn more about CSS topics:
http://www.w3schools.com/css/
© 2009 IBM Corporation
124
RUIWidget Properties – .CSS Classes –
1 of 3
As you’ve seen, U.I. characteristics can be
set manually – and explicitly and directly for
each RUIWidget (and RUIWidget elements)
However, it’s likely that the look & feel of
your application will be controlled by the
entries in your .CSS (Cascading Style
Sheet)
Your Rich UI project will have a Cascading
Style (or more than one, it depends on your
shop web standards) in the
\WebContent\css\ directory.
This file has to be in the \WebContent\
directory, but not necessarily under \css\ that’s your call
The format of a .css class is as follows:
•
•
•
•
A .css file contains two entities:
•
•
classes – which begin with a period
See .outputTextSmallBoldRed
Period (or dot)
Unique className (unique within the file)
Open curly brace
A set of HTML properties as value pairs – ending with
a semi-colon
A closing curly brace
A closing semi-colon
In order for your RUIHandler to use the classes
and ids within a .CSS file, you will add a property
to the handler statement as follows:
ids – which begin with a pound sign
See .boxStyle
cssFile=“folder/CSSFileName.css”
And you will reference the specific .CSS class
in the class property of your widget
© 2009 IBM Corporation
125
RUIWidget Properties – .CSS Classes – 2 of 3
From Project Explorer, open your project’s
.css file and add a new class as shown
Note that Content Assist (Ctrl+Spacebar) can
be used to help you build the entries shown
here
Save the file and your changes
From the Visual Editor – with
ruiPropertySample in the Content Area:
Select the outer Box (simply named “Box”)
and from Properties, erase the font property
Add the following .css class to
your project’s .css file:
Select one ore more of the TextLabels, and
specify a class property as follows:
.outputTextSmallBoldRed {
font: Verdana;
font-size: 12pt;
color: red;
font-weight: bold;
};
Note that .css class names
are cAsE SenSItivE
© 2009 IBM Corporation
126
RUIWidget Properties – .CSS Classes – 3 of 3 – and Styling Hierarchy
From the EGL Editor (in Source mode)
In the handler statement, notice the property just after the open curly
brace: cssFile = "css/EGLRichUI.css"
Preview
Hierarchy of Style Elements
Individual
RUIHandler
Properties
The run-time view will reflect your
styling design elements
as follows:
.css Classes and IDs
HTML element defaults
© 2009 IBM Corporation
127
Order
Of
Precedence
Optional Lab - RUIWidget Alignment Properties
This is a simple, copy/paste RUIHandler that allows you
to see how to use:
Box Alignment
Box Padding
Dynamic Widget declarations (using new – inside the
code)
Steps:
From the mySamples package, create a new RUIHandler
named: Alignment
From the Slide ***Notes
Copy all of the code
Completely replace the existing
RUIHandler boilerplate statements
Save
Preview
Study the coding solution, and note
cause & effect
© 2009 IBM Corporation
128
“What was it about those browser events?” – Review
EGL Rich UI utilizes what is called event driven development. Much of the run-time behavior is
based on user-directed events that occur on a web page. Some of these events include:
onClick
onChange
onKeyDown
onKeyUp
onFocusGained
onFocusLost
onMouseMove
Every widget or “thing” on a web page can have events tied to it.
At run-time (in the browser), widgets listen for specific user-events, which can trigger calls to
your EGL functions. You code “responses” to these events inside the functions:
Data validation
Data access
Etc.
Understanding the event driven development model is important – and it’s possibly quite
different from the kind of software programming you have done before. We’ll dedicate a few
extra slides to it…okay?
© 2009 IBM Corporation
129
Concepts – Event-Driven, Preemptive Programming Model
RUIwidgets (buttons, listboxes, textfields, etc.) respond to events that are:
Event-Driven – They happen when they happen arbitrarily not as a result of:
Sequence, Selection and Repetition
Preemptive – events can (and will) fire off calls to EGL functions when they occur –
concurrently, but not “multi-threaded”
Terms and Concepts – Deep Dive
An event is:
An external occurrence of some user action in the browser (like a user mouse-click, or button-click,
or ListBox selection, or mouse-over (“hover-help”), etc.
A non-visual occurrence of something like a return from a Service call or return from a call to an
external JavaScript or some other RUIWidget
The EGL Functions that respond to events are called: event handlers
Events require an event dispatcher to call your EGL event handlers (Functions)
In the Rich UI world, the event dispatcher is provided by the framework and system code
(i.e. you don’t write such things – at least not in EGL)
Your development (EGL Rich UI logic) will thus largely consist of:
Coding EGL statements inside of functions that respond to the various external and nonvisual events you wish to handle, so that the event dispatcher will know which ones to call:
There are essentially two types of EGL Functions:
Initial U.I. presentation or “set-up code” – that is executed before the application
A collection of EGL functions that respond to visual and non-visual events
© 2009 IBM Corporation
130
Concepts – Browser Events and Actions
In Rich UI, browser events are generated based on user input:
Mouse clicks, mouse movement, mouse button release
Key presses, Key releases
Etc.
Each widget gets to define what constitutes an event for it, and
which EGL Function will be associated with it:
button.onClick
listControl.onChange
Any given widget may allow multiple kinds of EGL Functions to
be associated with its events:
inputText.onKeyUp
inputText.onFocusLost
inputText.onChange
Example – in this Grid control, when the
user “clicks” a row, the values in that row
are loaded into the detail Widget above
it in the browser.
Conversely – if the user modifies a value
and clicks the Update button?
The corresponding value in the Grid control
is modified.
© 2009 IBM Corporation
131
RUI Programming Functionality
Event-Driven Programming Model
The event dispatcher (Remember?
You don’t code this) calls your EGL
Function when the appropriate
combination of user inputs occurs
at run-time.
This is based on your development
specifications, which include:
A defined event handler
The EGL function code in your
RUIWidget / RUIHandler
Besides calling your eventhandling EGL code, the event
dispatcher also passes an
event argument to your code:
(e event in)
The argument contains details
about the event which you can use
programmatically to solve dynamic
U.I. requirements such as:
Drag & Drop
Determining which button was
clicked, etc.
© 2009 IBM Corporation
132
Comparison: Synchronous vs. Event-Driven Programming Models
Do processing
…
Do processing
…
Call a service
Call a service
(Specify a “Callback” Function)
Wait
Wait
Wait
Wait
…
…
…
…
…
Do more processing
…
Service call returns!
…
Service call returns!
(“Callback” Function
is automatically invoked)
Do more processing
…
…
Synchronous
Do more processing
Traditional Run-time model
…
(Next Sequential Instruction
programming idiom)
Event-Driven
Rich UI Run-time model
(Modular, independent functions)
© 2009 IBM Corporation
133
Event Handlers/Event Dispatchers as an “Event Pipeline”
Events in the
Browser
Do InitialProcessing
Render RUI artifacts in browser
Event - onClick captured in
RUIHandler, handled
as an EGL Function
User clicks a
button
Call a service (note that calling a
service does NOT pre-req. a
browser/user event)
Control immediately
returns to the browser
Event -
Database
Service call returns
(EGL “Callback” Function
automatically invoked)
Enterprise Data
© 2009 IBM Corporation
Event
Pipeline
RUI Handler (EGL) code
134
RUIWidget Events
So now, let’s do some work with events and RUIWidgets. From the Palette, add two TextFields,
a Button and another TextLabel into the Box
(Review/Practice) Customize some of the properties.
Don’t try to replicate the screen capture
exactly, just be sure you understand cause & effect for the properties when you Preview
Some Properties you might want to experiment with include:
Color
BackgroundColor
Width
Font
FontSize
FontWeight
Opacity
Border:
Color
Style
Preview
© 2009 IBM Corporation
135
RUIWidget Events – onFocusLost/onFocusGained
onFocusLost happens when a user tabs or clicks out of a field
onFocusGained happens when a user tabs or clicks into a field
To understand how this works:
Add the following two functions to your
RUIHandler’s source code
Save your code
From the Design view:
Select TextField1, and from Properties/Events:
open the onFocusLost Function combo-box
select focusLostFunc
Select TextField2, and from Properties/Events:
open the onFocusGained Function combo-box
select focusGainedFunc
Preview
Type a value into TextField1 and hit the Tab key on your PC so that the FocusLost and FocusGained events fire off.
You can also type into TextField1 and mouse-click into TextField2
© 2009 IBM Corporation
136
Back to Properties (for just one slide)
So – you probably noticed that when you tabbed out of TextField1 (at Preview time) the box
“tightened up” (resized itself) proportionately to the # of characters of content in your TextField.
My bet? This is not a behavior you want – at least not a default.
To make the boxes fixed-width - from the Design view:
Select each of the TextFields (one at a time), and from Properties/Position
Specify a fixed-width:
Preview
© 2009 IBM Corporation
137
RUIWidget Events – onClick
onClick happens when a user clicks a Widget with their mouse – typically a button,
radio-button, check-box, etc.
To see how this works:
Add the following new function
to your RUIHandler’s source code:
Save your code
From the Design view:
Select the Button, and from Properties/Events,
open the onClick Function combo-box
select buttonClickedFunc
Preview
Click the Submit Button
Check out the text value of TextLabel2
© 2009 IBM Corporation
138
RUIWidget Events – onMouseOver/onMouseOut
onMouseOver happens when a user hovers their mouse over a widget. This is typically used
for:
Context-sensitive (hover) help
Rolling images over – i.e. making the images bigger, etc.
onMouseOut happens when a previously hovering mouse over a widget leaves the widget’s
area
To see how this works:
Add the following new functions to your
RUIHandler’s source code:
Save your code
From the Design view:
Select one of the TextLabels, and from
Properties/Events,
Select onMouseOut and
…onMouseOver functions
Preview
Hover your mouse over the TextLabel … … then move your mouse away from the TextLabel
© 2009 IBM Corporation
139
RUIWidget Events – onContextMenu
onContextMenu happens when a user RIGHT-clicks over a Widget with their mouse
To see how this works:
Add the following new function to your
RUIHandler’s source code:
Save your code
From the Design view:
Select TextField1, and from Properties/Events,
- open the onContextMenu Function combo-box
- select onContextMenuFunc
Preview
First Left-click over TextField1 (nothing, correct?)
Then Right-click over TextField1
© 2009 IBM Corporation
140
RUIWidget Events – EGL Rich UI Code-Events
There is much more on Event Handling we’ll cover later in this section. For now, it is
enough to understand that:
All of the events you just specified through the Visual Editor tooling may be specified in EGL
There are other events you have access to – available as:
Properties of the widgets
Properties of the Event Record (which is passed in to each function as an input parameter)
To see how this works:
Modify the buttonClickedFunc()
……… as shown here
Add the following new function to your
RUIHandler’s source code
Save your code
Preview and click the button. Note the effect of the U.I. programming techniques
on: TextField2 (selection, setting focus, dynamic width), and on the Button
From the Help system, search on: fadein
© 2009 IBM Corporation
141
RUIWidget Events – onKeyPress/onKeyUp/onKeyDown
The onKeyxxx events happen as a user types into a control (typically an input field). These events are
commonly used for:
Trapping (determining) which key was pressed – and subsequently doing something meaningful based on this
Doing Letter-by-Letter data entry processing – example: firing off database access reads as each letter of some code is
typed in to the browser)
To see how this works:
Add the following new function to your
RUIHandler’s source code
Note – these two functions are in the
***Notes section of this slide
Save your code
From the Design view:
Select TextField1, and from
Properties/Events,
Select onKeyUp and
…onKeyUpFunc
Select TextField2, and from
Properties/Events,
Select onKeyDown and
…onKeyDownFunc
Preview
Type values into TextField1
Press a function key over/into TextField2
© 2009 IBM Corporation
142
Open-ended Workshop – Registration Page
In this workshop, you will:
Create another new Package in your EGL Rich UI Project
Create a new RUIHandler inside the Package
Use the Rich UI Visual Editor to do initial web application layout
Customize some of the RUIHandler properties in EGL
Add event-handling functions in the RUIHandler that
Preview the web application and test your work
Optionally add additional calculator buttons and functions in the RUIHandler
© 2009 IBM Corporation
143
Events - Summary
onChange
onChange occurs when the user changes a widget and moves the on-screen focus from that widget, even if the
user has reversed the change.
onClick
onClick occurs when the user clicks on the widget.
onFocusGained
onFocusGained occurs when the widget gains the focus.
onFocusLost
onFocusLost occurs when the widget loses the focus. The equivalent event in JavaScript is onBlur
onKeyDown
onKeyPress
onKeyUp
On many browsers, the event occurs repeatedly for as long as the user is pressing the key. Each occurrence of
onKeyDown is followed by an occurrence of onKeyPress.
onMouseDown
onMouseDown occurs when the user presses any mouse button.
onMouseMove
onMouseMove occurs repeatedly when the user moves the mouse while the on-screen cursor is within the
boundary of the widget.
onMouseOver
onMouseOver is an event that JavaScript could have named onMouseIn. The event occurs when the user moves
the mouse, just as the on-screen cursor moves into the widget. You can use this event, for example, to change the
cursor symbol for a particular part of the page.
onMouseIn
The event occurs when the user moves the mouse, just as the on-screen cursor moves into the widget. You can use
this event, for example, to change the cursor symbol for a particular part of the page.
onSelect
onSelect occurs when text is selected in a textArea or textField widget.
onMouseUp
onMouseUp occurs when the user (having pressed a mouse button) releases it.
© 2009 IBM Corporation
144
Course
Rich UI Widgets – Deep Dive
Units:
Rich UI Programming Widget Workshops
Text Widgets
Selection Widgets
Container Widgets
HTML Widgets
IBM-Supplied Widgets
Dojo Widgets
© 2009 IBM Corporation
145
Rich UI Widgets
There are a number of EGL Widgets supplied by:
IBM
3rd Party Vendors (i.e. Dojo Widgets)
You (Custom Widgets)
In this section, we’ll deep-dive on all of the EGL widgets in the
Palette:
Their essential properties – beyond the properties we’ve just finished
studying
Standard (common) events – ditto
We’ll categorize the widgets into:
EGL Widgets:
Text Widgets
Selection Widgets
Container Widgets
Miscellaneous EGL Widgets
HTML Widgets
Other IBM-supplied Widgets
Dojo Widgets
For each group we’ll:
Create a custom RUIHandler
Work with the properties and events
© 2009 IBM Corporation
146
Course
Rich UI Widgets
Units:
Text Widgets
Selection Widgets
Container Widgets and View Layout
HTML Widgets
IBM Widgets
© 2009 IBM Corporation
147
Workshop – Work With Rich UI Text Widgets
In this workshop, you will:
Create a new RUIHandler inside the mySamples package
Use the Rich UI Visual Editor to do initial web application layout
Add several different types of Rich UI Text Widgets:
TextLabel
TextField
TextArea
PassWordTextFeld
Work with (customize) the essential U.I. Properties and Events for the RUIWidgets
Using the Visual Editor
Using EGL source code editing
Preview the web application – and verify “cause and effect”
Note – this is simply a learn by trial-and-error workshop, that asks that you
experiment with different widget properties and events.
Do not try too hard to match the PowerPoint screen captures exactly.
And feel free to specify (experiment with) other settings for properties – just as long as:
You can tie the eventual (Previewed) result with a specified property value
Time permits
© 2009 IBM Corporation
148
Rich UI Text Widgets
The text widgets are used for input/output text values. There are four of them:
TextLabel – output (read-only) text
TextField – input or input/output text
TextArea – input or input/output text in a scroll-able box (area)
PassWordTextField – input text displaying asterisks for security
Workshop:
Create a new RUIHandler in: \mySamples\ - named: textFields
Add a 1-column Box
Into (inside) the Box, add the following EGL Widgets
TextLabel
TextField
TextArea
PassWordTextField
Take all of the defaults for Properties for the Widget names
Add Text to match the Widget names
Preview
© 2009 IBM Corporation
149
TextLabel Widgets – Common Properties and Events
Add the following common TextLabel tags to a new class in EGLRichUI.css:
font-family: Verdana;
font-size: 10pt;
color: red;
font-weight: bold;
text-align: right;
width: 123;
Assign this .css class to the TextLabel
Add the following line to the textFields handler statement for cssFile:
Preview:
Feel free to experiment with other properties and/or events that you’ve already
learned about:
Border
BackGroundColor, etc.
© 2009 IBM Corporation
150
TextField Widgets – Common Properties and Events
Add the following common TextField tags
to new classes in EGLRichUI.css:
Code for the .css entries is in the ***Notes section of this slide
Add the following function to your RUIHandler
Assign this .css class to the TextField:
Bind the validateText function to the onFocusLost event:
Preview
Type values in the field
Tab – or click out of the field
Note the U.I. behavior
Feel free to experiment with other properties and/or events that you’ve already learned:
Border
Font
Color
BackGroundColor, etc.
© 2009 IBM Corporation
151
TextArea Widgets – Common Properties and Events
Add the following common TextArea tags to a new class in
EGLRichUI.css:
Add the following function to your RUIHandler
Add the following assignment statement to your RUIHandler’s initialization() function
Assign this .css class to the TextArea:
Bind the processTextArea function to the onFocusLost event:
Preview
Type values in the TextArea
Tab – or click out of the field
Note the U.I. behavior
Feel free to experiment with other properties and/or events that you’ve already learned
© 2009 IBM Corporation
152
TextPassWord Widgets – Common Properties and Events
Add the following two new variables, and modify your RUIHandler’s initialization() function
Use Content Assist!
Add the following function to your RUIHandler
Code is in the
slide ***Notes
Bind the validatePassWord function to the onFocusLost event:
Preview and test both the login functionality and tooltip (mouse-over). There is one bug you
might want to clean up (can you find it? It’s a U.I. bug) and you might want to add a button that fires off the
validatePassWord function, rather than having it occur onFocusLost
© 2009 IBM Corporation
153
TextPassWord Widgets – Uncommon Properties
EGL Rich UI allows you accessibility to the entire HTML syntax range, for input text fields
(actually for all HTML tags) through the setAttribute(xxx,yyy) function.
You could use this to do things like:
Dynamically modify TextField UI characteristics
Add in any currently un-supported tooling features, such as:
maxLength
Learn more about HTML input attributes: http://www.htmlcodetutorial.com/forms/_INPUT.html
Workshop:
Add the following
code to textFields:
Preview
Try to type in more than three characters in the txtFld TextField in the view
© 2009 IBM Corporation
154
Course
Rich UI Widgets
Units:
Text Widgets
Selection Widgets
Container Widgets and View Layout
HTML Widgets
IBM Widgets
© 2009 IBM Corporation
155
Workshop – Work With Rich UI Selection Widgets
In this workshop, you will:
Create a new RUIHandler inside the mySamples package
Use the Rich UI Visual Editor to do initial web application layout
Add several different types of Rich UI Text Widgets:
Checkbox & CheckBox Group
ComboBox
Single-selection List box
Multiple-selection List box
Work with (customize) the essential U.I. Properties and Events for the RUIWidgets
Using the Visual Editor
Using EGL source code editing
Preview the web application – and verify “cause and effect”
Note – this is simply a learn by trial-and-error workshop, that asks that you
experiment with different widget properties and events.
Do not try too hard to match the PowerPoint screen captures exactly.
And feel free to specify (experiment with) other settings for properties – just as long as:
You can tie the eventual (Previewed) result with a specified property value
Time permits
© 2009 IBM Corporation
156
Rich UI Selection Widgets
The text widgets are used for input/output text values.
There are five of them:
CheckBox – For single or multiple selection (true/false) values
Combo – For single-selection values in a drop-down list
List – For zeroone selected value in a scroll-able list
ListMulti – For zero many selected values in a scroll-able list
RadioGroup – For mutually-exclusive value selection
Workshop:
Create a new RUIHandler in: \mySamples\ - named: selectionWidgets
Add a 1-column Box
Into (inside) the Box, add the following EGL Widgets:
CheckBox
Combo
List
ListMulti
RadioGroup
TextLabel
Take all of the defaults for Properties - and for the Widget names
Preview
© 2009 IBM Corporation
157
CheckBox Widgets – Common Properties and Events
Add the following function to your RUIHandler
Bind checkBoxFunction to the onClick event:
Preview and test by clicking the checkbox
Optional workshops for checkboxes:
Customize the CheckBox text
Customize the TextLabel’s properties
Create a “Check Box Group” – inside a new box
© 2009 IBM Corporation
158
OPTIONAL – CheckBox Widgets – Extended Dynamic Properties
What if you wanted to hide a particular CheckBox within a group, programmatically?
Answer:
In the RUIHandler, set the CheckBox’s visibility attribute to “hidden”
What if I want a CheckBox Group, but do not know at run-time, how many CheckBoxes will be
in it?
Answer – there are two solutions:
1. Dynamic Widget run-time creation using the new widget syntax
2. Create an array of CheckBoxes
Add this function to your RUIHandler code:
Preview
Question: why are the CheckBoxes vertically oriented? How would you make the check box
group orient horizontally?
Hint – put cbArray into its own box without a columns= property
© 2009 IBM Corporation
159
ComboBox Widgets – Common Properties
and Events
Most of the time, you will want to load and
manipulate comboBoxes programmatically.
To load comboBoxes you will:
Create and load a dynamic array of strings (most
likely through a service call)
Calling a service will be covered later in the course
Invoke this function from your RUIHandler’s
initialization() routine
To pre-select a specific row in the comboBox, you
will use the widget.selection=“n” property
To test which comboBox value was selected, by
the user, you will code conditional logic against
the widget.selection property
Use the modified RUIHandler code shown here
in your RUIHandler (Most of this code is in the
slide ***Notes)
Add the following function to your RUIHandle
Bind comboBoxFunction to the onChange event:
Preview and test by selecting a comboBox
value
Optional – The above case statement assumes there are 4 (or less) values in the array.
Change the logic to be able to associate the comboBox selection, with the array entry.
© 2009 IBM Corporation
160
ListBox Widgets – Common Properties and
Events
Single-selection listboxes are very much like
comboBoxes
To load listBoxes you will:
Create and load a dynamic array of strings (most
likely through a service call)
Invoke this function from your RUIHandler’s
initialization() routine
To pre-select a specific row in the listBox, you will
use the widget.selection=“n” property
To test which listBox value was selected, by the
user, you will code conditional logic against the
widget.selection property
Use the modified RUIHandler code shown here
in your RUIHandler (Most of this code is in the
slide ***Notes)
Add the following function to your RUIHandler
Bind listBoxFunction to the onClick event:
Preview and test by selecting (clicking) a
listBox value
Optional – The above case statement assumes there are 4 (or less) values in the array.
Change the logic to be able to associate the listBox selection, with the array entry.
© 2009 IBM Corporation
161
RadioButton Widgets – Common
Properties and Events
RadioButtons are similar to the comboboxes
and listbox Widgets
As you did in the past few workshop steps:
Modify the initialization() function to:
Load the RadioButton Group dynamically
Pre-select a specific radio-button (note that in the
case of a radio-button, widget.selected must be
assigned the plain-text value to be selected)
Add the loadRadioButtons() function code
(two new functions)
(In the Slide ***Notes)
Bind RadioGroupFunction to the onClick event
Preview and test by clicking a radioGroup
button
© 2009 IBM Corporation
162
ListBox Multiple Select Widgets
– Common Properties and Events –
1 of 2
ListMulti Widgets are
similar to single-select list
boxes, except that users
can – by pressing the Ctrl
or Shift keys + clicking,
select multiple rows in the
box at runtime.
There’s no difference in
loading and initializing
ListMulti and single-select
list widgets. However, in
processing the selection,
you will need to bind the
widget’s selection property
to an array as the user
may select: 0, 1 or many
rows
As you did in the past few workshop steps:
Modify the initialization() function to:
Load the ListMulti Widget dynamically
Pre-select a specific ListMulti values (note that in the case of a ListBox multiple, widget.selection
must be assigned to an integer array, valued with the rows to be pre-selected)
Add the loadListMulti() function code (two new functions (In the Slide ***Notes)
© 2009 IBM Corporation
163
ListBox Multi Widgets – 2 of 2 – Also name/value pairs in Selection Components
Add a Button to the RUIHandler (at the bottom of the box)
Add the new Button here
Assign the Button’s onClick event to: ListMultiFunction
Preview:
Note the pre-selected rows in the ListBox Multi widget
Select a few other rows, and press the Button
See Slide ***Notes on manipulating name/value pairs in selection
components
© 2009 IBM Corporation
164
Course
Rich UI Widgets
Units:
Text Widgets
Selection Widgets
Container Widgets and View Layout
HTML Widgets
IBM Widgets
© 2009 IBM Corporation
165
Container Widgets
You will need strong Rich UI design skills, using container widgets (Box and Div
widgets) in order to realize a complex design with EGL Rich UI
This section aims at providing you with enough guided practice for you to use Box
and Div widgets to realize any complex U.I. design
We will start with the Box widget – as this is an IBM/EGL-supplied widget, with a
lower-barrier to entry in using and learning
In order to understand how to use Boxes, you will also need to learn about the
concepts of:
Container controls
Children properties
…All of which are based on the notion of a document model – that forms the underlying
generated-JavaScript source
© 2009 IBM Corporation
166
Concept Slides – initialUI, children, Document Model and Box Widget
Either following your instructor’s discussion, or on your own (reading) please be sure
you understand the materials on the following slides, before continuing with the
workshops:
InitialUI, Children and relationships among container and children widgets –
essentially, the EGL Rich UI language elements that render your widgets according to your
design and coding specifications
The Document “model” of an EGL Rich UI Application’s visual layout
Rich UI “Boxes” – Container widgets you will use to organize the visual elements in your
web application
© 2009 IBM Corporation
167
InitialUI and children
So far we have been introduced to a few simple EGL Rich UI concepts.
Others we have seen in passing, but have not looked at in-depth - In
particular, the initialUI and children properties, which are very important
Rich UI language features
initialUI – A list (in EGL, an array) of things*** to be rendered on the page
during it’s initial load.
initialUI is a property that can only be specified at the RUIHandler level
This property can only be specified in the declaration of the RUIHandler
children – A list (another array) of things*** to be rendered and attached to
their respective parents
Most Widgets will obtain the ability to have children
A Box for example can have children. As children are added to a box, they are
rendered as new table columns or rows.
The children property can be changed at run time. Any changes will be simultaneously
reflected on the page.
Note that, using initialUI and children we can create the kinds of hierarchically nested visual
control-sets that effectively render data graphically in the browser – in a sort of “inverted tree”
structure
© 2009 IBM Corporation
168
Rich UI and Inverted Tree-structured Web “Documents”
At it’s most basic, the elements of a web page are structured like an inverted tree
The page itself is considered a web document***
All subsequent widgets are added to the document – in the parent/child dependent
relationship shown below. Each widget itself can have child widgets added to it
Below is an illustration of a sample tree-based document. Note that the lower “branches” of
the tree are widgets that are:
Document
Related …and…
Dependent
DIV
Table
TR (Row)
TD (Column)
DIV
© 2009 IBM Corporation
TD (Column)
Table
TD (Column)
Input Field
169
TD (Column)
Literal Text
InitialUI and Children and Container/Widget Relationships – Code View
Let’s take a look at the HelloWorld page we just created and see if we can find
initialUI and children.
Both the children and initialUI properties are arrays ( hence the [ … ] )
Implying that both of these properties may contain more than one RUIWidget
If you declare multiple children/initialUI RUIwidgets, separate their names with a comma (see above)
The handler contains an initialUI property which contains the Box we created
This means that the Box will be initially shown on the page
The Box itself contains the other widgets on our page (TextField, TextLabel, Button)
If the Box is displayed on the page, it will of course contain its children
© 2009 IBM Corporation
170
InitialUI and Children – A More Complex Example
Note the following:
initalUI is a box
No border/No color
1 “column”
Three “controls”:
– isModal Checkbox
– Text TextLabel
– Button – with an onClick event
that fires off:
OKDialog
–
–
–
–
© 2009 IBM Corporation
A RUIWidget
Positioned (x/y) in the browser
Defined elsewhere in the project
Contains a child RUIWidget
named: “content”
171
Rich UI Boxes
In web design, there are two fundamental HTML tags for laying out pages.
Div
Table
We’ll start with the Table, which is more prominent in business applications with lots
of data entry.
So, how do we utilize HTML Tables from Rich UI?
Rich UI provides tables as a simple RUIWidget called a Box
A box can be created like so
Variable Name
Variable Type Properties (within curly braces)
Hopefully by now you are seeing the pattern
All UI Components (RUIWidgets) are declared just like any other EGL Variable
Ex. myString String;
© 2009 IBM Corporation
172
Rich UI Box Widgets
A box widget defines a rectangular-container-control that embeds and
organizes other widgets.
You can indicate how many columns are in the box.
If the number of columns is three, for example, the first three embedded widgets are on the
first row in the box, the fourth through sixth are on the second row, and so forth.
If the number of columns is one, all the embedded widgets are arranged vertically.
The width of a column equals the width of the largest widget in the column
You can indicate whether the embedded widgets in a given column are aligned at
the column’s center, right, or left.
Vertical and horizontal scroll bars appear if necessary to give the user access to
widgets that scale outside of the browser/screen dimensions
The following properties are supported for box widgets:
alignment, which holds an integer value that indicates how the content is aligned in each
column:
0 for left-justify
1 for center
2 for right-justify
children, which holds an array of widgets, as described in Widget properties and functions
columns, which holds an integer that identifies the number of columns in the box
© 2009 IBM Corporation
173
Work With Rich UI Container Widgets
In this workshop, you will:
Create a new RUIHandler inside the mySamples package
Use the Rich UI Visual Editor to do initial web application layout
Add several different types of Rich UI Text Widgets:
Box
– Different layout options
– Using the Visual Editor to design your layout and doing your work from the EGL source code level
– Using many or most of the box properties
Div
Shadow
Work with (customize) the essential U.I. Properties and Events for the RUIWidgets
Using the Visual Editor
Using EGL source code editing
Preview the web application – and verify “cause and effect”
Note – this is simply a learn by trial-and-error workshop, that asks that you
experiment with different widget properties and events.
Do not try too hard to match the PowerPoint screen captures exactly.
And feel free to specify (experiment with) other settings for properties – just as long as:
You can tie the eventual (Previewed) result with a specified property value
Time permits
© 2009 IBM Corporation
174
RUIHandlers with More Complex Boxes – and using the Visual Editor
In this upcoming workshop, you will:
Deepen skills using the Visual Editor
Learn more about controlling form layout with RUIWidget boxes
Embed boxes within boxes, to realize a more complex design
There will be 3 related workshops:
boxSample1 – with one set of columns
boxSample1 – with two sets of columns
boxSample1 – with additional box layout styling
© 2009 IBM Corporation
175
Preparation – Analyze the Layout
Before you start working on a web application, you will analyze the U.I. elements in
terms of:
Layout – tables structure, etc.
Types of components
Component properties, size, dimensions, etc.
Here is boxSample1. From the snapshot
note the following:
Box widget – color, border and Alignment
Box inside of box
Aligned TextLabels and TextFields
Design Notes
You will use the RUIWidget boxes
to:
• Organize the labels and fields
(treat them as a unit)
• Align the labels and fields
• Provide:
• Dimension
• Background color
• Padding (space between)
TextFields
TextLabels
The Outer Box is used to center the inner
U.I. elements in the browser
The inner Box contains the two-column
Label:Field pairs
Inner Box
This is a typical U.I. pattern for an input
single-record display, in vertically-aligned,
rows/columns
Outer Box
© 2009 IBM Corporation
176
The Completed Workshop Viewed as an Inverted Tree Through the Outline View
Note the nesting of the Boxes, labels and fields in the Outline view
The Outline view documents the inverted tree structure of an EGL Rich UI web application
You can also select (set focus to) an element by clicking on the element in the Outline view
© 2009 IBM Corporation
177
Using the Visual Editor - Review
Like the Outline View, the Visual
Editor shows the outline
hierarchy (inverted tree view) of
your web application.
You can drag & drop U.I.
elements
Into the box container
controls
Below or above controls
Next to controls
Drag & Drop a Palette control ABOVE the top box
Drag & Drop a Palette control inside of
BoxOuter, between BoxNew and BoxMiddle
Placement ultimately depends
on:
Drag & Drop a Palette control
inside of BoxNew, next to
Where in the tree you
TextField10 (note that if BoxNew
drag & drop
allows two columns the new control
The alignment
will be placed on the next vertical line
specification
down)
The columns
specification (for a box)
Drag & Drop a Palette control inside of
BoxRight, between TextLabel7 and TextField6
© 2009 IBM Corporation
178
boxSample1 – Create the
RUIHandler and Initial Box
From your \mySamples\
package, create a new
RUIHandler named:
boxSample1
Using the Visual Editor,
drag in a box – give it the
following properties:
name: BoxOuter
Alignment: CENTER
Columns: 1
BackgroundColor: Beige
borderColor: LightSteelBlue
borderStyle: groove
Width: 400
Height: 300
© 2009 IBM Corporation
179
boxSample1 – Add a TextLabel and an Inner Box
From the Palette, add a TextLabel inside
BoxOuter
Use these attributes
From the Palette, drag a 2nd (inner) box into
BoxOuter – placed below the TextLabel
Name: BoxInner
Columns: 2
Alignment: Center
Width: 300
Height: 250
Note – If you end up mis-spelling any of the
RUIWidget names, you can make corrections in
the Source view.
You will have to correct all references to the widget
(the declaration, and any references in the
children=[ … ] array)
© 2009 IBM Corporation
180
boxSample1 – Add a Series of TextLabels and TextFields to the InnerBox
Using the Visual Editor, drag
and drop a series (five each) of
TextLabels and TextFields
inside of the InnerBox
Do not specify any custom
properties
Preview
© 2009 IBM Corporation
181
boxSample1 – Customize the Labels and TextFields with Padding
Enter Source mode on the RUIHandler.
Add a colon: suffix and unique number to each TextLabel’s Text property
Add padding=4 to the TextLabel properties
Add padding=2 to the TextField properties
You could of course, have done the above using the Visual Editor.
But some things can be done faster
in Source mode. With EGL Rich UI – as with most development activities it’s good to learn how to use
the best tool for a given job
Preview
© 2009 IBM Corporation
182
boxSample1 – Customize BoxOuter – and Add Another Inner Box
Return to Design mode
From Outline view, select: BoxOuter
Select its Properties tab
Change BoxOuter’s:
Width: 600
Height: 400
From the Palette, Drag and Drop
another Box into BoxOuter (below
the TextLabel and above BoxInner)
Name: BoxMiddle
Columns: 2
© 2009 IBM Corporation
183
boxSample1 – Drag BoxInner Inside of BoxMiddle
Select - hold – drag & drop BoxInner into
BoxMiddle
From the Palette, Drag and Drop another Box
into BoxMiddle. Below (actually, next to)
BoxInner
Name: BoxRight
Columns: 2
© 2009 IBM Corporation
184
boxSample1 – Drag BoxInner Inside of BoxMiddle
As you did before, drag and
drop a series (five more each)
of TextLabels and TextFields
inside of BoxRight
Do not specify custom
properties
Preview
© 2009 IBM Corporation
185
boxSample1 – Customize the TextLabels, Padding and other Properties
As you did before, enter Source mode on the RUIHandler.
Add a colon: suffix and unique number to each of the new TextLabel’s Text property
Add padding=4 to the TextLabel properties
Add padding=2 to the TextField properties
Remove the height and width specification for BoxInner (note that this has the effect of
centering BoxInner + BoxRight inside of BoxOuter)
Preview
© 2009 IBM Corporation
186
boxSample1 – Customize BoxOuter (again) – and add yet another Inner Box
Return to Design mode
From the Palette, Drag and Drop another Box into BoxOuter (below the TextLabel
and above BoxMiddle)
Name: BoxNew
From the Palette, add a new TextLabel and a new TextField to BoxNew
© 2009 IBM Corporation
187
boxSample1 – Add a Submit Button to the Web Application
From the Palette, Drag & Drop a
Button into BoxOuter (below
BoxMiddle)
From the Button’s Properties,
specify:
Text: Add New Record
Preview
© 2009 IBM Corporation
188
boxSample1 – Customize U.I. Properties
From the Properties of the new
TextLabel, specify:
text: Search Field:
paddingRight: 8
From the Properties of the new
BoxNew, specify:
paddingTop: 33
Preview
© 2009 IBM Corporation
189
boxSample1 – Add a New Event and Bind it to the Button
With the Button selected - From Events
Click: Add Event Handler
Name the Function: onClick
(Still with the Button selected) from the onClick Event, select the onClick Function
© 2009 IBM Corporation
190
boxSample1 – Add onClick Code
and New TextLabel
Enter Source mode on the
RUIHandler.
Add (code) a new TextLabel
named: msgField
Add msgField to the children
array of BoxOuter
Add this if statement (you
can either code it, or
copy/paste from the slide
notes)
Preview
© 2009 IBM Corporation
191
boxSample1 – Are We Done?
Almost
With the current design, if your search doesn’t return anything and the msgField.text
reminds the users of that, the message is not cleared out upon a subsequent good search.
Also – using the Visual Editor tooling, please make the following enhancements to
msgField
Preview
© 2009 IBM Corporation
192
*** See Notes for code
to clear the TextFields
and msgField
Workshop – Layout and Boxes with Irregular Horizontal Widths
In this workshop, you will:
Learn how to realize a standard web application layout, where the boxes contain elements
of differing lengths
Learn how to use field styling to align individual text and field widgets
Concept: When your U.I. elements are of differing sizes, you will not be able to
utilize the block boxes as in the previous workshop. Instead, you will need to layout
each individual row as a separate box:
Containing elements
And vertically-aligned using explicit RUIWidget widths
See the above snapshot – then turn to the next slide for more analysis
© 2009 IBM Corporation
193
Understanding the Layout and Design Pattern
From the snapshot of the Outline and Design views, note that you will nest individual
boxes containing labels and fields within each row of an outer box.
I
N
D
I
V
I
D
U
A
L
B
O
X
E
S
F
O
R
E
A
C
H
Outer Box
By nesting the individual row boxes, you have complete
control over each element’s placement
Because there is no vertical box alignment across
disparate boxes, you will need to align the columns via
the width attribute
You’ll also have to use a style-attribute to right-justify
text, when you can’t align the entire box due to
conflicting U.I. alignment requirements (see the Directions
and Phone/eMail Address rows above)
R
O
W
© 2009 IBM Corporation
194
Workshop – Create a new RUIHandler – Add in the Top Elements
From \mySamples\, create a new RUIHandler, named: customerSearch
Add a box, named: BoxOuter
Properties:
Columns: 1
Font-size: 10 PT
Add a second box – inside of BoxOuter named BoxSearch
Add a TextLabel named TextLabelSearch inside of BoxSearch
Property:
Text: Search Text:
Width: 88
Add a TextField named: TextFieldSearch next to TextLabelSearch, inside of BoxSearch
Add an HTML Widget inside of BoxOuter
Property:
Text: <HR>
Preview
© 2009 IBM Corporation
195
Workshop – Add in the Row 1 Elements
Add another box – inside of BoxOuter named BoxRow1
– under the HTML tag
Properties:
Columns: 6
Align: RIGHT
Inside of BoxRow1
shown below:
add the TextLabels and TextFields
Notes:
TextLabelCustid and TextLabelLastName - width: 88
TextLabelFirstName - width: 111
© 2009 IBM Corporation
196
Workshop – Add in the Row 2 Elements
Add another box – inside of BoxOuter – below BoxRow1 –
named BoxRow2
Property:
Columns: 4
Inside of BoxRow2 add the TextLabels and TextFields shown
below:
Notes:
TextLabelPhone - width: 88
TextLabelMailAddress - width: 111
TextFieldMailAddress - width: 288
© 2009 IBM Corporation
197
Workshop – Add in the Row 3 Elements
Add another box – inside of BoxOuter named BoxRow3
– under BoxRow2
Properties:
Columns: 6
Align: RIGHT
Inside of BoxRow3 add the TextLabels and TextFields shown
below:
Notes:
TextLabelCity and TextLabelzip - width: 88
TextLabelState - width: 111
© 2009 IBM Corporation
198
Workshop – Add in the Row 4 Elements
Add another box – inside of BoxOuter – below BoxRow3 –
named BoxRow4
Property:
Columns: 2
Inside of BoxRow4 add the TextLabels and TextFields shown
below:
Notes:
TextLabelDirections - width: 88
TextFieldDirections - width: 555
© 2009 IBM Corporation
199
Workshop – Add the EGL Source Styling Elements
From Source view:
Change all padding=8 padding=3
Add the following style tag: style = "text-align:right"
to:
TextLabelDirections
TextLabeleMail
TextLabelPhone
© 2009 IBM Corporation
200
Workshop – Finis!
Preview!
© 2009 IBM Corporation
201
Workshop – Another Login Page?
Yes – another login page. But this one will allow you to utilize your newly-acquired
EGL Rich UI property and event-handling development skills.
Also? This is more of an open-ended workshop – meaning that it lacks the detailed click-for-click
instructions you’ve gotten used to/dependent on
In this workshop, you will:
Create another new Package in your EGL Rich UI Project
Create a new RUIHandler inside the Package
Use the Rich UI Visual Editor to do initial web application layout
Customize some of the RUIHandler properties in EGL
Add event-handling functions in the RUIHandler that
Preview the web application and test your work
Optionally add:
Styling elements – to enhance the U.I.
Event handlers – to provide for immediate feedback to the user
Finished View
© 2009 IBM Corporation
202
Login Web Application
Create a new package under \EGLSource\ named: businessApp
Inside of the \businessApp\ package, create a new RUIHandler, named: loginPage
You can style the colors and fonts as you like
Add the IBM-supplied RUIWidgets as shown below:
Note the widget types, text properties, their nested placement and relationships, and the widget
names (in parenthesis within the Outline view)
Hints:
Box1 has columns=1, width = 333, height = 222, borderXXXStyle=groove
Box2 has columns=2
The Password field is a
© 2009 IBM Corporation
203
Login Web Application
For the Button, add an onClick event handler to a function named: checkFields
See the screen capture of this code for some ideas of how to create
Note that
There are other import statements (folded)
The code for this version of the loginPage is in the ***Notes for this slide
© 2009 IBM Corporation
204
OPTIONAL Workshop – Check For UserID onFocusLost
As a “warm-up” for the real event-driven programming you’ll be doing later in this
course, try the following:
Add this function inside your RUIHandler:
Add this eventHandler to the User ID: TextField
Preview loginPage
Enter a User ID
Tab or click out
© 2009 IBM Corporation
205
Miscellaneous Widgets – Introduction and Beginning of Workshop
There are a number of relatively easy-to-learn and use EGL Widgets
left in the Palette that are useful:
Button
Hyperlink
Image
Note that we will cover HTML and Grid widgets separately
Workshop:
Create a new RUIHandler in: \mySamples\ - named: miscWidgets
Add a 1-column Box
Into (inside) the Box, add the following EGL Widgets:
Button
Hyperlink
Image
Take all of the defaults for Properties for the Widget names
Add Text to match the Widget names
Preview
Not very impressive, eh? Let’s jazz this up a little
© 2009 IBM Corporation
206
Button Widgets – Common Properties and
Events
Add the following common Button tags to
EGLRichUI.css:
See ***Notes for source
Assign the .simpleRuiButton class to the Button
Preview
Enhance as follows:
Assign the .searchButton class to the Button’s
class property
Delete the text entry
Specify a fixed width and height
Preview
© 2009 IBM Corporation
207
Hyperlink Widgets – Common Properties and Events
Specify the following custom properties for the Hyperlink:
Preview
And click the hyper-link
Optionally – change the URL or some of the
Hyperlink references in the EGL source,
and re-test
© 2009 IBM Corporation
208
Graphic Widgets – Common Properties and Events
Specify the following custom properties for the Hyperlink:
Preview
And mouse-over the image
Add the following functions to your RUIHandler source:
Add the following Events to the Image widget:
Preview
And mouse-over the image to see the rollover effect
Optional (for supreme uber-techies):
Work with the Span widget – by adding it in to this RUIHandler, and experimenting with
its properties (note, use Content Assist to explore salient properties)
© 2009 IBM Corporation
209
Course
Rich UI Widgets
Units:
Text Widgets
Selection Widgets
© 2009 IBM Corporation
Container Widgets
HTML Widgets
IBM Widgets
210
<html>
HTML Widgets – Concepts
You may have existing HTML or HTML “code snippets” you wish to reuse </html>
or re-purpose” in Rich UI applications. This is very straightforward to do, as follows:
Create “inline HTML” – where you type the tags directly inside your RUI Widget (or
RUIHandler)
Create “static” HTML – possibly your existing HTML, or new HTML you create using some
dedicated HTML editor (FrontPage, DreamWeaver, etc.) – then import the HTML into project
and include it in your Rich UI page
The next few workshops will show examples of both
Where to learn HTML?
Just about anywhere – but..
Especially – through free info on the web
http://www.w3schools.com/html/default.asp
http://www.html.net/tutorials/html/
There’s no shortage of books either
In this section we will cover a few basic HTML tags:
HR – Horizontal Ruler
H1 – Heading tag
Lists – Ordered and unordered
DIV – a tag used to contain other content
Table – a tag used to organize content
Inline Frame
© 2009 IBM Corporation
Note – you will not use HTML to
create Web Pages
But you may want to use HTML
tags to embellish your Rich UI
applications – and/or to reuse
pre-existing HTML resources.
211
So – essentially, you will want to
know “about” HTML – and how to
use HTML – but you won’t have to
become an HTML programmer
HTML Widgets – Workshop
Workshop:
Create a new RUIHandler in: \mySamples\ - named: htmlWidgets
Go immediately into Source view and add the source code in the Slide *** Notes
<HR> tag
<H1> tag
List tags
• Unordered
• Ordered
Div Widget
<Table> tag
<iframe> tag
© 2009 IBM Corporation
212
HTML Widgets – inline HTML
Preview
List tags
• Unordered
Click the Change HTML in EGL button
<H1> tag
Using GOOGLE or some other search
engine, if you don’t know these HTML
tags, look-up their definitions on the web
<HR> tag
Div Widget
<Table> tag
The next slide contains a quick study
guide to the HTML tags shown here
© 2009 IBM Corporation
List tags
• Ordered
<iframe> tag
213
HTML – QuickStart and “Survival Chart”
Rules of the road:
Most HTML consists of matching “tags” in the form of:
<startTag> … content … </endTag>
– Example: <LI> My bulleted list </LI>
Specific examples from the htmlWidgets view:
<H1> - a text heading tag – largest font size, default font (there exist <h1> <h6>, largest to smallest)
<HR> - creates a horizontal ruler (line) in the web page
<UL> - an “un-ordered” (un-numbered) list that consists of one-to-many:
<LI> - List (or bulleted list entries)
<OL> - same as <UL> except creates numbered lists
<DIV> - a container – consisting of one column and one row (like a one-column Box widget)
<TABLE> - a complex tag that organizes things like a two-dim table. Consists of:
<TR> - rows
<TD> - cells
<IFRAME> - an inline frame. iFrames allow you to embed another RUIHandler (or another HTML or .JSP
page for that matter) inline (inside) of an existing RUIHandler view
Notes - All of the above HTML tags and statements:
Can be created statically (at design time) or dynamically using EGL RUI statements
HTML tags have sub-properties, which are fully customize-able
© 2009 IBM Corporation
214
HTML Widgets – inline HTML
Make the following modifications to the source:
Change one of the <H1> to an <H5> tag – and change some of the text
Change one of the <HR> tags as shown below
Change some of the text in the OLhtml widget
Add an extra list: <li>…your text … </li> tag-set inside the OLhtml widget
Add a new textarea widget:
Add this new textArea widget as the final child in the DIV1 widget
Completely replace the existing tbl widget code with that found in the slide notes
Make the following changes to the iFrame widget:
Save – check for syntax errors
Preview
Note – be sure to use Content Assist (Ctrl/Spacebar) to create new widgets
© 2009 IBM Corporation
215
HTML Widgets – inline HTML
Note the cause and effect revisions
Blue, right-justified, no-shadow, thick line
Your changes to the lists and headers
Note cell color and text-color mods
New View loaded into the <iframe>
New TextArea
© 2009 IBM Corporation
216
OPTIONAL – Static HTML Served as a LocalHTML Widget
If you have completely static (no need to dynamically build) HTML stream – or streams – it might
make sense to organize it as a set of HTML files, dynamically added to your View, but
organized in your project as separate files (and not inline). This will allow you to create this
HTML using an intelligent editor (like FrontPage or DreamWeaver).
Try the following:
1. From Project Explorer, create a new Folder under \WebContent\ named: HTML
2. In this folder, create a new HTML file, named: colSpan
Note – you’ll find HTML files under the Web folder category
3. Replace the boilerplate HTML with the source found in the ***Slide Notes – at the top (it’s a
single line)
4. In your \EGLSource\ folder, create a new EGL package named: utilities
5. In the utilities package, create a new RUIHandler, named: localHTML
6. Replace the “boiler plate” statements with the code also found in this ***Slide Notes
7. In your HTMLWidgets RUIHandler, add a new widget for local HTML:
8. Add this widget as the bottom (final) child under the DIV1 widget
9. Preview
© 2009 IBM Corporation
217
Course
Rich UI Widgets
Units:
IBM Widgets
Grouping
TabFolder
Simple Menu
DataGrid
Tree Control
Drag & Drop
Popup Pages
Complex Layout UIs
© 2009 IBM Corporation
218
Grouping Widgets – Common Properties and Events
– 1 of 2
Grouping Widgets are similar to fieldsets in HTML
You can look up a fieldset tag online
Add the following new tag to EGLRichUI.css
Create a new RUIHandler in: \mySamples\ - named: groupingSample
Go immediately into Source view and completely replace the boiler-plate source code with
the code in the Slide *** Notes
Preview
If time permits, follow the steps on the next slide to enhance the View
© 2009 IBM Corporation
219
Grouping Widgets – Common Properties and Events – 2 of 2
Select, copy & paste the grouping widget, the box and all of the textlabels and
text fields (as shown below) in the source. Make the following modifications
Change the text= and children= properties
Change the box widget name – and change its children= identifier(s)
Modify the TextLabel and TextField widgets (name and text properties)
Add groupAddr to the children property of box:
Also add columns=1 as a property of box
Preview
Optional – add a button, that onClick, changes
the grouping.Text value
© 2009 IBM Corporation
220
Optional Workshop - Grouping Widgets – Example View
The Grouping widget actually has a number of additional properties you may
want to utilize:
Legend font styling
Legend block styling
Thicker Grouping borders
Create a new RUIHandler in \mySamples\ named: groupingSampleExpanded
Replace the boiler-plate code in this file with the copy & paste the grouping RUIhandler code in
the Slide ***Notes.
Preview (see results below)
Feel free to experiment with different Rich UI properties and events.
© 2009 IBM Corporation
221
TabFolder Widget – Concepts
Tabs are common widgets
for organizing dependent
or related business data
and functional views
The steps in creating a Tab widget will include:
Create the RUIHandler
Add a widget of type tabFolder to your RUIHandler
Use Content Assist (Ctrl+Spacebar) to allow the tooling to add any imports
Add the tabFolder inside a box widget
For each tab, use the tabFolderVar.addTab(“tab heading”,tabContent); API
Preview
Let’s check things out…but before we start? We’ll learn how to make RUIWidgets
out of RUIHandlers for component reuse
© 2009 IBM Corporation
222
Creating RUIWidgets from RUIHandlers
So – while you’ve been creating RUIHandlers all along, in order to learn the Rich UI editor and the language
terms & concepts, in reality (with your production projects), you will be creating more RUIWidgets than
RUIHandlers – as RUIWidgets are the primary component of reuse within RUI technology
If you’re starting from scratch, it will probably make sense to create:
A RUIHandler who’s only purpose is to act as a testing container for a single RUIWidget
The RUIWidget – which you will be able to reuse
… and you’ll work within this process framework, during the final workshops for this course
But since you’ve got a # of useful widgets already (in the form of existing RUIHandlers) let’s see how to
modify them and make them into RUIWidgets:
Open the file – in Source mode
Copy and paste the entire RUIHandler statement
Comment out the original statement
Modify the following lines:
1. Change: type RUIHandler type RUIWidget
2. Add a new Div widget (use content assist) – with a children = property that is the same as the
original initialUI = property
3. Change initialUI to targetWidget = (reference your new Div widget)
1.
3.
2.
© 2009 IBM Corporation
223
Workshop – Creating RUIWidgets out of RUIHandlers
Following these steps (repeated below for your convenience) – create RUIWidgets out of the
following RUIHandlers:
groupingSample
htmlWidgets
miscWidgets
textFields
Steps:
Open the file – in Source mode
Copy and paste the entire RUIHandler statement
Comment out the original statement
Modify the following lines:
1. Change: type RUIHandler type RUIWidget
2. Add a new Div widget (use content assist) – with a children = property that is the same as the
original initialUI = property
3. Change initialUI to targetWidget=ui //(reference your new Div widget)
1.
3.
2.
© 2009 IBM Corporation
224
Tab Widgets – Common Properties and Events
Workshop:
Create a new RUIHandler in: \mySamples\ - named: tabSample
Go immediately into Source view and (using Content Assist) add the source code shown
here
Or…you can pick
these source
statements from the
Slide ***Notes
Notes:
The TabFolder widget is an IBM-supplied custom widget that takes as a parameter a
TabFolderPage. The TabFolderPage widget allows you to define:
– The Tab label (name=)
– The widget loaded in to the tab (widget=)
The TabFolder also has a number of useful properties for customizing its behavior and UI. We’ll
see these in an upcoming workshop
Save and Preview
© 2009 IBM Corporation
225
TabFolder Widget Workshop –
Extending the Base Functionality
Click each tab
Ensure that the widgets
embedded in the
tabFolderPages still work
as before
There may be additional functionality you’d want to see in tabFolders in order to handle
common dynamic U.I. requirements, such as:
Pre-selecting a given tab:
Upon loading the view
Explicitly (as per the specifications in your business requirements – for example, if each tab represents a step in a
work-flow, opening a given tab programmatically, etc.)
Knowing (programmatically – from within your RUIHandler) what tab a user is on when an event
occurs – and taking appropriate business logic action
Adding graphics to the tab itself
Changing (customizing) the default style properties
Explicitly sizing the tab control
Forwarding (selecting “next tab”) with a button
© 2009 IBM Corporation
226
Tab Widgets –
Extended Functionality
Here’s a screen capture
of our TabFolder view
with a number of the
desired techniques
implemented:
Show the currentlyselected tab
Graphics in the tabs
Pre-select a tab
Explicit size
To implement this yourself:
From the slide ***Notes, copy/paste all of the code
Replace your existing tabSample.egl code with the ***Notes EGL statements
Preview
On the next slide we annotate some of the more important language constructs
© 2009 IBM Corporation
227
Tab Widgets – Extended Sample – Optional Workshops
Read the annotated comments carefully – noting the operational language constructs
Optional Workshops:
Pre-select a different tab, upon initial view rendering in the browser
Add a different graphic – to a different tab
Add a different Rich UI Widget – to a different tab (suggestion, use a small simple widget)
© 2009 IBM Corporation
228
Simple Menu Widgets – Common Properties and Events
Most business applications will drive their
functionality from a common menu
Standard (rich) Menu Widget
Rich UI apps will be no different
There are several menu widget options available:
Standard (rich) menu widget – which:
Is recursive (allowing for multiple levels of sub-menu)
Allows for embedding different widgets in-line
simple Menu Widget
Simple menu widget – which:
Allows for one level of sub-menu
Is populated from string variables in a dynamic array
In this workshop, you’ll learn how to use the simple menu widget, and how to
populate it from dynamic (server-side) data. Steps include:
Creating a new RUIHandler that:
Calls a service (in our case, this will be a Library function) to populate the dynamic array of strings
Assigns the strings to the simple menu widget
Customize the .css for the menu
© 2009 IBM Corporation
229
Simple Menu Widgets – Coding Constructs
Create a new RUIHandler in
\mySamples\ named:
SimpleMenuDemo
Using Content Assist, edit the
source code, and add the
statements shown here
Note the following:
Call to ServiceLibrary to load
the array
Assignment to a dynamic
array of type any
Defining a custom event
listener
Preview
© 2009 IBM Corporation
230
Optional – Simple Menu Widgets
Modify: \WebContent\css\EGLRichUI.css
Under: .SimpleMenuTitle {
Add:
– color: white;
Under: .SimpleMenuItem {
Add: color: white;
– Background-color: #5a9bd1;
– color: white;
Modify: SimpleMenuDemo
Change the case statement shown below
Preview and try out the techniques
Optionally add another when clause, to hit your companies web site on-select of
some other menu option
© 2009 IBM Corporation
231
Tree Widgets – Concepts
Tree Widgets are common and useful components for displaying
hierarchical information:
Menus and links
Related application data:
Customers > Orders > OrderItems, etc
Plain text …or…
Text + Graphics (icons)
Rich UI’s Tree widget is composed of:
Tree Nodes – which contain the text and/or graphics
Behaviors – which respond to user events
In our example, we’ll supply event-handlers for: onClick, onMouseOver, onMouseOut
The steps in creating a Tree widget include:
Create the RUIHandler
Add a widget of type Tree to your RUIHandler
Use Content Assist (Ctrl+Spacebar) to allow the tooling to add any imports
Add the Tree inside a box widget
Add code that:
Loads the Tree dynamically, from an external source
Responds to user/browser events
– Collapse/Expand a tree category
– Click a node
Preview
© 2009 IBM Corporation
232
Tree Control Workshop
First create a new package under the EGLSource package named treeControl
Next right-click over the \treeControl\ package and create a new RUIHandler
named: TreeHandler
Copy & Paste everything in the Slide ***Notes over the boiler-plate EGL
statements
Preview
Note that the values in the tree come from
the ServiceLibrary
These values would more typically be
assigned via calls to back-end services
But in this case, the Library call will do
(We’ll learn how to call back-end services in an
upcoming section)
Now, let’s break down the code to create a
tree widget
© 2009 IBM Corporation
233
Tree Control – EGL Rich UI Code – 1 of 3
In the RUIHandler code for treeControl.egl there are quite a few new EGL Rich UI coding constructs. We have annotated them
in the source, but will attempt to amplify our explanations in these slides
Declarations:
Widget variables and properties
Of note the Tree widget:
- Width, Padding
- backgroundColor, behaviors
The event-behaviors consist of:
User click and user mouse-over
(which generates a toolTip
TreeTooltip – a widget that allows
Mouse-over help text
ToolTipResponse is a box widget
Tr TreeValues(0) is a standard EGL
Dynamic array of strings that is
Used to populate the Tree widget
EGL Business Logic:
In this initial function, the code:
Retrieves the values into the
dynamic array
Iterates over the array, and
creates the initial (highest level –
categories) tree nodes
Assigns the treeNodes to the
Tree widget
© 2009 IBM Corporation
234
Tree Control – EGL Rich UI Code – 2 of 3
Here are all of the EGL
functions bound to
browser/events (except for
onClick – which get’s its
own slide)
Declarations:
showTooltip – returns an inline
HTML formatted response to the
user’s mouse-over. This function is
activated by the Tree widget’s
setToolTips property
The click function tests for which
browser/user event occurred (that
you have handled in this RUI code) –
and invokes an EGL function based
on the event
showFeedback and hideFeedback
simply set a background color to a
node of a tree, when you mouseover it.
© 2009 IBM Corporation
235
Tree Control – EGL Rich UI Code – 3 of 3
The
handleNode
Click
function:
Note:
Colors the
clicked
TreeNode
Changes the
image (to the
clicked
TreeNode)
Changes the
msg.text
Determines
which
TreeNode was
clicked – and
passes its
array index to
the
expandedNode
function
Read the inline comments very carefully – as they
document the Rich UI language features used to
implement a Tree Widget’s onClick functionality
The
expandNode
function:
Iterates over
the dependent
array items
For the clicked
TreeNode – a
new set of
widgets are
dynamically
created
Then the
categories are
re-built as
treenodes and
the nodes are
assigned to the
tree widget
© 2009 IBM Corporation
236
A Frameset-Style Web Page Template Layout – using .css
Along with learning how to design your Views with boxes, you will want to develop a number of
U.I. templates, that act as the framework for your RUIHandler:
Organization
Layout
Static text and graphics – common to most or all web pages
In this workshop, you will learn
one approach to this –
using DIV layouts and
custom .css definitions
Using this sample, you can
customize to your
specific U.I. templatized
requirements
© 2009 IBM Corporation
237
Workshop – Create a Custom .css in your Project
From Project Explorer:
Open the com.ibm.egl.education.widgets project
Expand \WebContent\ then expand \css\
Copy floatLayout.css - and paste it into the \WebContent\css\ package in your
EGLRichUI project
© 2009 IBM Corporation
238
Workshop – A Standard Frameset-Style Template Layout Using .css
Inside of the \mySamples\ package, create a new RUIHandler, named: frameSetLayout
From the Slide ***Notes – copy and paste all of the replacement code
From the EGL source editor, completely replace all of the boiler-plate code
Review the code briefly, noting the following elements:
Reference to the custom .css in the RUIHandler
The various DIV widgets
The child widgets inside the DIV widgets
Save and Preview
Run in an external browser
Resize the browser
© 2009 IBM Corporation
239
Try running the page in an external browser
Workshop – Add Your Own Customized Widgets to the View
In this workshop, you’ll use the frameSetLayout RUIHandler to contain some of the other
widgets – including their functionality. Eventually you’ll produce the view shown below
© 2009 IBM Corporation
240
Workshop – Create Widgets From RUIHandlers
Recall from the TabFolder workshop how to create RUIWidgets from RUIHandlers
Change the type to RUIWidget
Change initialUI to targetWidget (and move all elements into a single box, if necessary, as targetWidget can – at
most – refer to a single widget, not an array)
Start by making RUIWidgets out of: SimpleMenuDemo, and TreeHandler
Make the following
modifications to the
frameSetLayout
RUIHandler:
Add two new boxes to the
header
Add the Tree widget in to
the lefDiv
Add a center-aligned
graphic (see code)
into the footerDiv
Add a # of boxes with
children as shown
here
Add image widgets, with
src= properties as
shown here
Add the TreeHandler and
SimpleMenuDemo
widgets
© 2009 IBM Corporation
241
Workshop – Preview the frameSetLayout RUIHandler
Feel free to experiment with: U.I. properties of the existing widgets; add other widgets into the
layout divs; add browser/user event-behaviors you’ve learned
© 2009 IBM Corporation
242
(Run-time) Drag & Drop Programming Techniques
Run-time Drag & Drop operations refer to Rich UI applications that allow users to pick up (select
– drag) and drop a piece of data or an image – on top or inside of some other some other field or
control in the browser. Upon drop some event is fired off, such as:
A value is changed in a target input text field
A total is updated – say, as a result of adding a retail item to a shopping cart
A row (or rows) are moved from one table to another
Etc.
This kind of live simulation (similar to the control board in “Minority Report”) is very appealing to users
– as it simplifies their workflow.
As you can imagine, programming this in JavaScript/HTML is no walk-in-the-park. However
EGL Rich UI provides language constructs to simplify the effort.
They include:
Events for selecting, dragging and dropping
A means of creating a temporary container with the dragged control inside
All the rest of the Rich UI coding structures for advanced dynamic user interface work
In this workshop, you will create a RUIHandler
like this – that allows browser/ruin-time
Drag & Drop behavior for:
- Text values
- Graphics
© 2009 IBM Corporation
243
Workshop – A Run-Time Drag & Drop RUIHandler
Inside of the \mySamples\ package, create a new RUIHandler, named: dnd
From the Slide ***Notes – copy and paste all of the replacement code
From the EGL source editor, completely replace all of the boiler-plate code
Review the code briefly (really briefly – a detailed walk-through follows starting on the next slide)
Save and Preview. Drag & Drop the text field
Drag and Drop some of the graphic items onto the Shopping Cart
© 2009 IBM Corporation
244
DND RUIHandler –
Fields and Properties
Of note:
The “to-be-dragged” widget must
have three required
eventHandlers that reference
EGL functions:
onStartDrag
onDrag
onDropOnTarget
An absolute-positioned shadow
container widget will be used to
contain the dragged widget.
What this implies, is that:
When you start dragging
the onStartDrag function is
invoked (this code is
shown on the next slide)
The function in your code
will “copy” the dragged
widget inside a Shadow
container that is used to
show what’s being
dragged on-screen
It looks like you’re
dragging the widget but
you’ve made a
temporary copy of the
widget and are
dragging the copy
around inside a new,
dynamically created
container
We have defined a separate
group of functions for dragging
the image widget. This is not
technically necessary, but will
make understanding the example
easier.
© 2009 IBM Corporation
245
DND RUIHandler – Functions for Dragging & Dropping the Text Widget
Of note:
The valueItems() function simply
fills in a dynamic record array of:
Graphic URL strings
Item price and description
strings
The start function is invoked for the
widget with the onStartDrag event
handler. This function creates the
new, temporary (shadow) container,
and in it, creates a new TextLabel
and assigns it the text value from
the dragged widget
It makes the shadow container
visible
The drag function is invoked for
each mouse movement. It places
the shadow container at absolute
x/y coordinates +4 from the cursor.
If the widget you’re hovering over is
the text2 (our target) widget, it
shows you this, by highlighting the
background
The drop function sets the text2
widget’s value equal to the dragged
widget’s.text value. It also hides the
shadow container and returns the
text2 widget’s background to the
original (white) color
© 2009 IBM Corporation
246
DND RUIHandler – Functions for Dragging & Dropping the Image Widget
Of note:
Like the previous start function, this
function is invoked for the widget
with the onStartDrag event handler.
This function creates the new,
temporary (shadow) container, and
in it, creates a new image widget
and assigns it the src value from the
dragged widget. It also makes the
image widget opaque
It makes the shadow container
widget visible
The drag function is invoked for
each mouse movement. It places
the shadow container at absolute
x/y coordinates +4 from the cursor.
If the widget you’re hovering over is
the cartImage (our target) widget, it
shows you this by creating a thin
gray border around the image.
The drop function updates a
number of internal values with the
value from the associated (current)
image from the dragged widget
It also hides the shadow container
and returns the boxCart’s widget’s
borderWidth back to zero.
© 2009 IBM Corporation
247
Optional Workshop Your Very Own Drag and Drop-Able Top 5 List – 1 of 3
Assume that you were to create a Drag & Drop widget as follows:
There are five TextField widgets – that are initially valued as
You need to allow users to:
Enter new values (these are after all, TextFields)
Drag and drop individual TextField widgets on top of other
TextField widgets – swapping the contents of both the dragged
and dropped widgets
Process:
Create a new RUIHandler
Copy/Paste the following artifacts from the DND RUIHandler into your new RUIHandler:
Shadow
myTextField
The start(), drag() and drop() functions
Then, make the following code additions/modifications to the widget declarations
If you’re pressed for time, check the Slide ***Notes
© 2009 IBM Corporation
248
Optional Workshop Your Very Own Drag and Drop-Able Top 5 List – 2 of 3
Changes to the start() function
Add this function:
Changes to the drag() function
© 2009 IBM Corporation
249
Optional Workshop Your Very Own Drag and Drop-Able Top 5 List – 3 of 3
Changes to the drop() function
A complete sample solution is in the Slide ***Notes (you’re welcome)
© 2009 IBM Corporation
250
Data Table Widget
Data Tables are a very popular and common way to organize and display data in
business applications.
EGL Rich UI ships with a powerful and flexible widget that allows the programmer to
display data and manipulate it in many ways. It’s called the Grid widget.
When we are done with this workshop having learned how to use the Grid widget, we
will have created a view similar to this…
Sort-able
Column Headers
Alternate
Row
Colors
© 2009 IBM Corporation
251
Data Table Workshop – Create New Package and Library
In order to complete this exercise, we will need some data to work with
For learning purposes, we will provide you with some hard coded data
Let’s first create a package for our data.
Right-click over the EGLSource source folder and select New EGL Package
At the screen that pops-up, name the package customerData
Next right-click over the customerData package and create a new EGL Library
Name the file CustomerInfo
© 2009 IBM Corporation
252
Create customerInfo Library Records and Data
Delete everything in the customerInfo file.
You should now have a file with nothing in it
Copy the code in the notes section of this slide and Paste it into the customerInfo
file.
You should have no errors and see something like the following!
This file contains a record definition, which uses data items declared above the
record.
The library then declares an array variable of the record type and assigns it values
Now that we have data to work with, let’s move on to creating a Data Table
© 2009 IBM Corporation
253
Create New Package and RUIHandler
First let’s create a new package
Right-click over the EGLSource source folder and select New EGL Package
At the screen that pops-up, name the package dataGrid
Next right-click over the dataGrid package and create a new EGL Rich UI Handler
Name the file DataTableBasics
Click Finish
© 2009 IBM Corporation
254
Create Your First Grid Widget
Now, let’s drag a Grid widget onto the RUIHandler
Make sure to drag the Grid from under EGL Widgets and not Dojo
When asked for a variable name of your Grid, name it myFirstGrid
Now switch to the source view of the Rich UI Editor
Don’t be intimidated by the code!
We will make sense of it
© 2009 IBM Corporation
255
Customize the Grid Widget Properties
First let’s experiment with the columns property
The columns property takes an array of GridColumn RUIWidgets
The GridColumn RUIWidget itself has several properties including
– Name – The actual name of the field in the record to be displayed (case sensitive)
– DisplayName – The name to be used as the column header when the Grid is rendered on the page
– Width – The width of the column
Adjust the variable declaration so it looks as follows
Next, delete the data property from the myFirstGrid variable declaration (and don’t
forget to delete the trailing comma after the close square bracket – see screen capture)
Add the following line of code in the initialization function
Note that .data is the property of the Grid RUIWidget that corresponds to the
detail rows displayed in the grid at run-time. The actual values can be sourced from
a service or library call, but what’s significant here, is that a grid widget’s .data
property must be assigned to a dynamic array of type: any[];
© 2009 IBM Corporation
256
Preview Grid Widget (so far)
Save the page and then go to the
Preview view of the EGL Rich UI
Editor
Currently only two columns are being
displayed, even though each array
record of data passed to the Grid widget
contains nine fields (we’ll get to the
other seven fields later)
Note the alternating row colors
Note the gray header cells
© 2009 IBM Corporation
257
Add Additional Grid Columns
Go ahead and add the following new GridColumns to the Grid variable’s columns
property
You should now see a data table on the page with five columns and 14 rows. You should also
understand the relationship between dynamically declaring new grid columns, and the columns
displayed in a dataGrid widget
Let’s take a further look into some of the other Grid properties
Behaviors – The ability to add behaviors to the Grid as a whole
HeaderBehaviors – The ability to add behaviors to just the column headers of the data
table
© 2009 IBM Corporation
258
Add New Behaviors
Edit the grid variable declaration again to add the following behaviors property.
The behaviors property accepts an array of behaviors.
Add the behavior outlined in red below
Save the page, Preview and examine the results.
Notice how the cells (except for Customer ID) have almost no padding now
Why not the Customer ID column?
How would you change the grid code
so that Customer ID does not have a
fixed-width?
What is a “Behavior”?
An EGL Rich UI widget behavior is a defined event handler that is invoked
when certain elements in a widget are created.
Behaviors typically do things like change presentation characteristics, add
extra widgets, or add extra event handlers.
For Grid, behaviors can be specified on both header cells and data cells. For
Menu, behaviors exist on menu items.
For Tree widgets, a behavior is invoked for each tree node being created.
© 2009 IBM Corporation
259
Add a GridSelector
Next, let’s create a variable of type GridSelector
Do so anywhere inside of the RUIHandler (and outside of the initialization function)
Now return to the behaviors property of the Grid and add the following property (don’t
forget the trailing comma after GridBehaviors.tightCells,)
Save the page and Preview. Notice the results:
Clicking inside of a row will fire off the GridSelector event and turn the row green
Holding down the Ctrl key will allow you to click and select multiple rows
© 2009 IBM Corporation
260
Add a Column Sorter
How about another behavior?
Go ahead and create a new variable of type GridSorter inside of your RUIHandler
Now add gridSorter.columnSorter property to the headerBehaviors array
Save the page and view the results. Click the column headers to re-sort the rows
© 2009 IBM Corporation
261
Add a Column Header Tooltip
Another very popular feature in many applications is what’s called a ToolTip. A tool
tip is a message that will pop-up when a user mouses (hovers) over something.
Create the following variable of type ToolTip, and the function called
headerTooltips.
Copy/Paste code available in the notes
Now return to the headerBehaviors property of the Grid and add the following tool
tip as a grid column header behavior.
Notice that you are referencing the function (headerToolTips) and not the Tooltip variable
© 2009 IBM Corporation
262
Drag & Drop – Add 2nd Grid
Save the RUIHandler code, and note the new functionality
Now that we have explored many of the functions that the Grid Widget offers, let’s
take a look at two final use cases:
Row Drag & Drop
Table data cell Drag & Drop
In the same RUIHandler (DataTableBasics.egl) create the following new Grid
This Grid will serve as the empty Grid that data is dropped into
You may get errors because of missing import statements, press Ctrl+Shift+O to fix these errors
© 2009 IBM Corporation
263
Add Drag & Drop Support
Next, let’s add some code onto the RUIHandler that will give us the browser/run-time
Drag & Drop support we learned about earlier in this section of the course. For this
part of the lab, Copy/Paste code is provided in the slide ***Notes.
Steps:
Copy the Slide *** Notes code now.
Place this code anywhere within the EGL functions section of the RUIHandler
Press Ctrl+Shift+O – to resolve missing imports for these new statements
By doing this you have:
Created a second grid and given it no data
Placed code that will allow for drag and drop between the two grids onto the RUIHandler
Now that we’ve got two grids, let’s put them into Rich UI box, in order to get them
next to each other. Add the following code to the RUIHandler (Preferably at the top – and
don’t forget to press Ctrl+Shift+O to add referenced widget imports)
Note that we are creating a box and giving it three children. The first two children are Box’s
themselves created implicitly (and given our Grids as children). The last child is a Widget
which will appear during drag and drop (it is initially set to visibility = hidden)
© 2009 IBM Corporation
264
Drag & Drop – Event-Handler Bindings for Drag & Drop Operations
Now that we’ve created a new Box to house our Grid’s, let’s go ahead and adjust our
RUIHandler’s initialUI property to take the new Box instead of our first Grid
Finally, we need to add some more properties to myFirstGrid
Note that the functions referenced by these properties were defined inside the copy/paste
code on the previous slide
Save and Preview
Click and select one or more rows as you did before, from myFirstGrid (on the left).
Then, drag them to mySecondGrid (on the right), dropping them on the grid column header
to add the rows.
Check out all the other grid behaviors to verify that they have been unaffected by adding
your new functionality
© 2009 IBM Corporation
265
Data Table – With Row Drag & Drop: Preview
Optional workshop: From inside the myFirstGrid’s behaviors and
headerBehaviors, copy/paste properties, and enable mySecondGrid for:
Alternate row colors
Column sort
Tight cells
© 2009 IBM Corporation
266
Data Table – Drag & Drop of Individual DataTable Cells
Drag & Drop is so popular with Web 2.0 applications, that we’re going to cover one
final use case – which is cell-by-cell Drag & Drop (see the screen capture below).
As we’ve done in previous workshops, we will annotate and walk through the important
aspects of the EGL code
Note – the code in this Drag & Drop sample is in the: com.ibm.egl.education.widgets
project:
Feel free to open and Preview before continuing
on with these slides.
© 2009 IBM Corporation
267
Drag & Drop of Individual DataTable Cells – Annotated Code – 1 of 2
Recall from your previous Drag & Drop examples that you need to define: 1. behaviors for enabling the Drag & Drop (in this
example the behavior is: enableCellDragging. 2. A Shadow widget – which is an HTML <DIV> tag, that will be dynamically
created at run-time, to contain the value of what is selected and dragged (in this case, a dataGrid cell value).
This is
what’s
being
dragged
© 2009 IBM Corporation
268
Drag & Drop of Individual DataTable Cells – Annotated Code – 2 of 2
Compare this with the previous Drag & Drop example. Note that the only difference between the two is that in this example,
you’re dragging a table cell - In actuality? An HTML: <TD> value </TD>. Study the code below. You should recognize the
EGL Rich UI coding elements annotated for here and more importantly, the coding pattern to do cell Drag & Drop.
© 2009 IBM Corporation
269
Another Data Table Use Case – a Paging Grid – 1 of 3
You will definitely need to create a page-able dataGrid for your Rich UI applications. To help
you with this, IBM has pre-defined just such a widget, that allows you to customize things such as # of rows
displayed, etc.
Create a new EGL Rich UI Handler called PagingGridBasics under the dataGrid package
In your new RUIHandler, code the following PagingGrid (or grab the Copy/Paste code for this snippet
from the Slide ***Notes, and replace your entire boiler-plate code).
Note the new widget features:
PagingGrid widget
visibleRows property
Preview
© 2009 IBM Corporation
270
Another Data Table Use Case – a Paging Grid – 2 of 3
Try changing the following properties of the PagingGrid view – and enhance it as follows:
Add additional columns (note – get the specifics by looking at customerInfo.Customers)
Change the visibleRows
Change the PagingGrid’s general properties:
BackgroundColor, Height, Width, Color, borderColor/BorderStyle/BorderWidth
OPTIONAL workshop:
From the dataTableBasics.egl, copy the code in to do:
Grid.behaviors:
– Alternate row colors
– Tight cells
– Row selection
Grid.headerBehaviors
– Column sorting
– Gray cells
– Tooltips
See next slide for a screen capture of the code needed to the optional lab
© 2009 IBM Corporation
271
Another Data Table Use Case – a Paging Grid – 3 of 3
When all else fails, use this… Code what’s below, or hit the Slide ***Notes for a copy/paste solution
Also – remember that you will need to add in the imports (Ctrl/Shift/O)
© 2009 IBM Corporation
272
One more OPTIONAL Use
Case
(Just ‘cause we knew you’d ask)
How would you get this
Paging buttons relocated:
Bottom
Right-justified
Give up? Not so fast…
From PagingGridBasics.egl, double-click on: pagingGrid
Press F3 – enough times to open the pagingGrid.egl source code in the Editor
Find the targetWidget= property … what widget does it point to?
Right: ui - a plain old box, with two children. Okay, so how would we switch the button and
grid order?
Right. Switch their order inside the box properties
Now (the $64,000 question) – “How would you right-justify the buttons in the button box”?
RIGHT! Add: alignment=1, to the grid properties
Moral:
“It’s all just EGL”, Chris Laffra, Rich UI Language Architect, February 7th, 2009
© 2009 IBM Corporation
273
Another Use Case – How to Reference the “Selected Row”
One question that probably will come to mind sooner – rather than later – is the question of, “how do I select a
row in a dataGrid – and take some action based on the row selected?”
We’ve already seen that you can automatically (calling the gridSelector behavior widget) turn the selected row
a different color – but how about actually doing something tangible with the row selected?
Like opening another dataGrid with rows dependent upon the row selected, etc
It’s actually very easy to do this – as it’s already built-in to the gridSelector’s functionality. From the
PagingGridBasics’ code: modify + add the following:
Change to gridSelect properties. Ad a behavior to run on row click:
onClick of a dataTable row, use the first occurrence in the selection[…] array (which references the row selected)
© 2009 IBM Corporation
274
Do We Have Time For One More Use Case? (Substituting Other Widget Types in dataGrid Rows)
Another typical Use Case revolves around substituting complex widgets into dataGrid Rows (in
place of the default TextLabels). This is relatively easy to do, but involves using a new IBMsupplied widget, called the EditableGrid.
Assume you had to
create the following view:
Where:
All of the fields are editable
Checkboxes are used for boolean datatypes
ComboBoxes can be used for selection controls
The RUIHandler responds to each update ‘event’ – allowing you to save or persist changes
Let’s see how to pull this together
© 2009 IBM Corporation
275
Substituting Other Widget Types in dataGrid Rows – 1 of 4
In the \dataGrid\ package, create a new RUIHandler, named: rowWidgetSub
Copy and paste the code from the Slide ***Notes, over the boiler-plate statements
Save and Preview.
Note the run-time behavior:
Sorting
Row mouse-over
Row selection
Modify a value:
A text field
A check box
Select a different state
Move to (select) a new row
Note that the RUIHandler
is “aware” of what row
(and what value)
has been updated
Let’s look at the EGL language and coding patterns to do this…
© 2009 IBM Corporation
276
Substituting Other Widget Types in dataGrid Rows – 2 of 4
From the EGL statements note the following:
Standard RUIHandler declaration – although the code to implement the Editable Grid columns is in the
start function (next slide)
Standard Grid widget functionality for: Sorting, Selection
New widget type – Editable grid – that’s been included in the: com.ibm.rui.widgets.education project
In this new widget, we are mixing implementations of:
Behaviors defined in this RUIHandler
Behaviors defined in the standard gridSelector and gridSorter widgets
An array of string values (that will ultimately end up as a combo-box)
© 2009 IBM Corporation
277
Substituting Other Widget Types in dataGrid Rows – 3 of 4
In the start() function we:
Invoke a widget function to define individual columns for the grid – setting custom properties and
specifying validators and/or validValues:
Note that by default:
- Boolean fields Checkboxes
- Other types Edit-able Input fields
- validValues comboBoxes
In the grid.setData, we assign an
any[] array – as usual
© 2009 IBM Corporation
278
Substituting Other Widget Types in dataGrid Rows – 4 of 4
In the remaining EGL functions, we’re exposing the Rich UI coding techniques used to do things
such as:
Mouse-over and Cell-hover
Alternating rows
Grid value-changed event-listener (defined)
These could be embedded in the Editable grid, but are shown here to illustrate the nature of the
coding patterns
© 2009 IBM Corporation
279
EGL Rich UI Programming – Popup Dialogs
Popup pages or dialogs are ubiquitous requirements for business applications. And
even have been for decades. We’d better learn how to implement them in Rich UI.
They relate to some parent widget’s information typically contain:
Dependent or expansion information on data in some parent widget
Capturing or selecting information in a display that would simplify data entry
Showing some exceptional condition or information in an eye-catching manner
The curious thing? You already have the tools. (No way? Yes way.) Steps:
Design the popup page (nothing new here) – except
Code the properties to:
Hide/Show the box that contains whatever widgets (or just a widget) you wish to pop up
(If placing the Popup relative to another widget on-screen) capture and utilize the x/y coordinates
of the parent widget – see example
Code the necessary event-handlers for the processing in the Popup
In the workshop, we’ll create a RUIHandler which contains a Popup that displays a
list of states for selection
You will activate the Popup by
double-clicking in a field
© 2009 IBM Corporation
280
Create Popup RUIHandler – Code Explanation 1 of 2
In the \mySamples\ folder create a new RUIHandler named: dialogHandler
From the Slide ***Notes – copy and paste the code therein, over the boiler-plate
statements
Save
Preview – Click in the State textField
Now let’s break the Rich UI code constructs down…
Consider the following…
In fieldState – we define an onClick event
The states string array is just that. You would populate it typically using a call to a Web
Service (next section of this Tutorial)
The stateValues widget is our popup. It needs its own onClick event-handler (function).
It also needs to be initially hidden and its position must be absolute, in order to dynamically
assign it to the x/y coordinates of fieldState
© 2009 IBM Corporation
281
Create Popup RUIHandler – Code Explanation 2 of 2
From initialization, we invoke the function (populateStates) to create the internal array
selectState is the function that:
Assigns the x/y coordinates of stateField to the popup list widget
And unhides the widget
singleSelFunc assigns the selected value of list widget to fieldState.text, and re-hides the widget
© 2009 IBM Corporation
282
OPTIONAL – Create Your Own Popup
On your own (or using the screen-shot given
below) – create a popup like the one shown
here to capture a comment and re-display it
© 2009 IBM Corporation
283
Course
Rich UI and Services
Units:
Web Services and Rich UI Architecture
Calling a Service - Process Flow (steps)
Rich UI Service Calls Language Constructs
Service Calls and the Rich UI Event-Driven
Programming Model
Workshops and Examples
Calling a 3rd Party Service
Calling a Mainframe CICS/COBOL Service
Creating and calling an EGL Web Services
© 2009 IBM Corporation
284
Separation of Server-Side and Rich UI Elements – 10,000 Foot View
While RUIWidgets and RUIHandlers are the main focus for creating pages and
widgets they are able to call out to EGL Programs, Libraries, and Services.
However, unlike EGL/JSF – where the vast majority of the work occurred on the
server, in the Rich UI environment all EGL parts are generated to JavaScript.
This helps reinforce a clean separation between:
Server-Side (business logic/data access)
Client-Side (U.I. elements)
Business Logic deployed as Web Services
EGL Generated RUI JavaScript running in a browser
Service calls tie the UI
Logic to the server side
business logic
© 2009 IBM Corporation
285
EGL/JSF – Run-Time Model – 1,000 Foot View
In Server/Side EGL/JSF applications
Your business logic accesses and processes data
Which is bound to .JSF components and their underlying Java Classes
Which – at run-time, emit (generate) HTML tags + data
Which is sent back to the browser
Emits
Data
Store
HTML tags
Dynamic
Content
Rendered
in
the
browser
Form
Submit
Java
Classes
Server-Side
Client-Side
Using EGL/JSF, almost everything results in Server-Side Run-Time cycles (relatively little
happens in a standalone browser environment)
© 2009 IBM Corporation
286
EGL/Rich UI – Run-Time Model – 1,000 Foot View
In EGL/Rich UI applications
Your Rich UI application – which runs in the browser, makes service calls to EGL (or nonEGL) Server-Side functionality which access enterprise data or enterprise applications
Service
Calls
Data
Store
JSON
String
Data
RUIHandler
Application
Generated
JavaScript +
HTML
Rendered
in
the
browser
Server-Side
Application(s)
Server-Side
Client-Side
Users interact with your Rich UI application. Server-side components are cleanly de-coupled from
Client/Side (Rich UI) application functionality. And because a RUIHandler consists of JavaScript running in
the browser, there promises to be significant improvements in:
Server-based application performance – due to functionality/cycles offloaded to the RUIHandler
Browser-based dynamic processing capabilities and functionality – ummm, simply due to Rich UI
© 2009 IBM Corporation
287
Rich UI Service Functionality – 500 Foot View
So, your Rich UI applications depend on web services for their business data I/O.
There are two categories of service:
SOAP Web Services – data is transmitted through a standard WSDL (Web Service
Description Langue) file: http://en.wikipedia.org/wiki/Web_Services_Description_Language
You access the WSDL through an EGL interface
– Recall that you learned how to do this in your previous EGL classes or work.
Note that these Web Services can be:
–
–
–
–
EGL Java Web Services
CICS Web Services – System z
RPG Web Services – System i
3rd Party Web Services – any language, any computing platform
REST Web Services – data is typically transmitted in JSON (JavaScript Object
Notation) strings: http://en.wikipedia.org/wiki/Representational_State_Transfer
In this section we will focus on accessing SOAP Web Services through WSDL files
We will cover REST services and JSON string handling in an appendix to this course
© 2009 IBM Corporation
288
Rich UI Service Functionality – 100 Foot View
What you will have to do before calling services from your EGL Rich UI applications:
1. Create or access the WSDL
If using EGL/Java, follow the steps in the EGL Foundation Tutorial to:
–
–
–
–
Ensure that your web (not Rich UI, web server) project’s build file descriptor has the proper options set.
Create or code a Service part
Define the Service part to the Services Descriptor
Generate the WSDL
If using CICS there are tools in RDz, and Service Flow Modeler to create WSDL files
If using RPG there are automated facilities in RDi-SOA for creating EGL services (specifically, an
EGL Web Services Wizard)
If using a 3rd Party Web Service:
– Access the WSDL
– Ensure that all elements of the WSDL are supported by both the target platform and by EGL
–
The toolset will produce validation warnings and diagnostics if there are problems at Generate time
2. Import the WSDL into your Rich UI project and create the EGL Client Interface
3. (Optionally) Test the WSDL using the Web Services Explorer facility
4. Create the service calls from your EGL RUIWidget(s) – next slide
© 2009 IBM Corporation
289
Rich UI Service Statements – 10 Foot View
There are four elements in the statement construction pattern to call a Web Service
from an EGL Rich UI view:
1. Declare the service variable
2. Code the service call – which can be broken down further:
1. Call to the service.function(…)
2. The parameter list
3. The service callback reference
4. The service exception handling function reference
3. Code the Web Service Callback Function
4. Code the Web Service exception-handling function
Note these elements in this simple example
1.
2.1.
2.3.
2.4.
Dude…what’s a “Callback
Function”?
Hang on –we’ll be getting to
that shortly.
© 2009 IBM Corporation
2.2.
3.
4.
290
Rich UI Service Call Statement – 1 Foot View
call serviceName.operationName(argumentList)
returning to myCallbackFunction
onException myExceptionHandler {timeOut = milliseconds};
•
serviceName
• Name of a variable based on an Interface part (see previous section on
creating an EGL interface from a WSDL
•operationName
• Name of the Interface part’s function
•
argumentList
• List of arguments, each separated from the next by a comma.
•
myCallbackFunction
• Name of a callback function that is available to the call statement. In most
cases, the function is in the same Rich UI handler or in a library.
•
myExceptionHandlerFunction
(Optional)
• Name of a exception handler that is available to the call statement. In most
cases, the exception handler is in the same Rich UI handler or in a library.
Most of the above does not represent “new learning stuff”, except for possibly the
“callback function”. So let’s dig into that a little more…
© 2009 IBM Corporation
291
Callback and onException Functions – Code (still 1 foot view)
function callBackFunc(Positional Parameter List)
//assign data returned from service call to Rich UI fields
//(optionally) do other processing
end
• Positional Parameter List
• You will need to define one argument for each out or inout parameter in the Web Service
function call associated with the Callback
• Including one for the return argument
• These parameters must “datatype match” – positionally with the Call statements arguments
to the Web Service
call WebService.Function (arg1, arg2, arg3) returning to callBackFunction…
Function callBackFunction (arg1Type, arg2Type, arg3Type, returnType)
//assuming the Web Service has a returns(dataType) argument
function serviceExceptionFunc(excp anyException in)
//Parse the excp fields
//Take action depending on the what has happened
end
Example
(Code in Slide ***Notes)
© 2009 IBM Corporation
292
RUI Programming Model – “Callback” Functions
EGL functions that respond to asynchronous and preemptive browser or system events (a system event example
might be the return of control from a Service call to a RUIHandler) are self-contained – that is, they are
modular and independent or isolated packets of code. The antithesis of monolithic programs.
This event-driven software model requires that you manage – programmatically direct – the return of control
from an event to the appropriate EGL Function that will handle the event. Such a function might:
Move data from a service-based data access call to an array that populates a Grid
Validate user data entry – returning appropriate error messages
Redirect to some other functionality, inside or out of your RUIHandler, etc.
The common name for this kind of function is: “Callback” Function
You can think of a Callback Function simply as an event handler that is called
by the event dispatcher in response to an asynchronous event
When a browser event invokes one of your EGL functions you
specify (associate) the Callback function to your EGL logic
Function through the through the Events tab
When a system event (i.e. a return from a Service call) invokes
one of your EGL Functions, in order for it to do so you must have
specified the name of the EGL Function in the returning to
modifier of the Service call statement
© 2009 IBM Corporation
293
Traditional vs. Event-Driven Programming Models
Do processing
…
Do processing
…
Call a service
Call a service
Wait
Wait
Wait
Wait
(Specify a “Callback” Function)
…
…
…
…
…
Do more processing
…
Service call returns!
…
Service call returns!
(“Callback” Function
is automatically invoked)
Do more processing
…
Traditional
…
Do more processing
Procedural Run-time model
…
(Next Sequential Instruction
programming idiom)
Event-Driven
What does the above have to do with events?
(Modular, independent functions)
See next slide for yet more details…
© 2009 IBM Corporation
Rich UI Run-time model
294
Service Calls (and Callbacks) on the “Event Pipeline”
Events in the
Browser
Do InitialProcessing
Render RUI view in the browser
Event - onClick captured in
RUIHandler, handled
as an EGL Function
User clicks a
button
Call a service (note that calling a
service does NOT pre-req. a
browser/user event)
Control immediately
returns to the browser
Event -
Service call returns
(EGL “Callback” Function
automatically invoked)
Database
Enterprise Data
© 2009 IBM Corporation
Do something with data from
the service call
Event
Pipeline
RUI Handler (EGL) code
295
Your First Rich UI Service Call Workshop
Time for a lab! Let’s see how much of the previous material sunk in. The only way to find out?
Develop a Service Call from scratch, and run it from a Rich UI application.
You will use an existing WSDL – so at the risk or repeating ourselves, the steps are:
1. Access the WSDL
2. Import the WSDL into your Rich UI project and create the EGL Client Interface
3. (Optionally) Test the WSDL using the Web Services Explorer facility
Well no … we will skip this step for now
4. Create the service calls from your EGL RUIHandler and Preview (test)
Return Current
Weather
information
In an XML string
© 2009 IBM Corporation
onClick Event
Rich UI
Call Service
Passing:
- City Name
- Country
CallBack Function
text returned
296
Access the 3rd Party WSDL
Open a browser and go to www.xmethods.net
When the page loads, click View the Full List
When the Full List is done loading, do a search for Global Weather
Find and click on the following result:
© 2009 IBM Corporation
297
Save the 3rd Party .WSDL File to Your Project
At the next page, right-click over the WSDL file and select Save Link As…
From there, change the file type to All Files and add the .wsdl extension to the
File Name. Hint: Make sure to save the WSDL in a location where you can find it.
Return to the EGL Rich UI editor and Right-click over the EGLSource folder.
Create a new package called wsdl
Find © the globalWeather.wsdl file you just saved, and paste it into the
package
© 2009 IBM Corporation
298
wsdl
Generate the EGL Client Interface for the Service
Your project should now look as follows!
Right-click over the WSDL file and select EGL Services Create EGL Client
Interface…
© 2009 IBM Corporation
299
Review the Generated Interface Code
A wizard will pop-up. Click Finish
You should now have a new package and EGL File automatically created for you.
The file should look like this… (note the functions and string parameters)
At this point, from Project Explorer:
Select your EGLRichUI project
Right-click and select Generate
© 2009 IBM Corporation
300
Create the RUIHandler to Call the Service
Now, right click over the NET.weberviceX.www package and create a new EGL
Rich UI Handler File.
Name the file Weather
Next, code the following UI Components!
Copy/paste code available in the notes
© 2009 IBM Corporation
301
Layout the UI for the RUIHandler (to call the Service)
Next, add the layoutBox and resultString to the RUIHandler’s initialUI property.
Save the file, you should now have the following output.
Next, let’s add an onClick event to the Button
This event will call the service and store the result in resultString
To call the service, we will simply create a variable of the Service Interface (take a
look at the code that was generated for us if you’re confused)
From there we can use a basic call statement to call the service function, and then specify a
callback.
The callback is a function that will execute when a result is returned from the service call.
The input parameter for the callback function must match what the service returns
© 2009 IBM Corporation
302
Code the Calling, Callback and onException Functions
Code (or use Copy/Paste code from the Slide ***Notes) the following three functions
in the RUIHandler
The function fired off by the onClick event
This function will make the actual service call to the weather service
The Callback function for the service
That assigns the value returned (if any)
The onException function – that uses some advanced EGL string “casting” (redefining the
excp record on the fly) to format and display run-time error messages
© 2009 IBM Corporation
303
Preview and Test
Give the page a shot (note that only major international cities are available – i.e. Paris, London, NY, Pittsburgh,
Raleigh, etc. Missing are places like Glen Rock, Wake Forest, Coventry, etc.)
As you shall see, this particular service returns an XML string into the .text property of the
resultString RUIWidget
© 2009 IBM Corporation
304
Your Second Rich UI Service Call Workshop
So now, we’ll really find out how much of the previous material sunk in. It’s time for you to develop a Web
Services call from a Rich UI application without being given all the explicit steps.
Again, from the www.xmethods.net site:
Select the Full List and do a find on: Amortization
Copy down the Amortization Calculator’s wsdl (save it in your \wsdl\ folder as a .wsdl file
Use the tooling to generate an interface to the WSDL and call the service:
Generate the EGL Services > Create EGL Client Interface –
and note the code produced takes parameters all of type: float
Create a new RUIHandler named: amortizationCalc
And either on your own – or using the EGL RUIHandler code in the notes page, define variables and
functionality for calling the Web Service
© 2009 IBM Corporation
305
Call a Mainframe CICS/Web Service
So – if we’re to believe the hype surrounding Web Services then how different
or how much harder) would it be to call a mainframe, CICS/COBOL web service?
Answer: Not hard/not different. Skeptical? (fair enough…let’s see try one on for size)
In the com.ibm.egl.education.widgets project, there’s a WSDL file named: EPSCSMR.wsdl
This WSDL was created by Regi Barosa/IBM using RDz tooling. It calls a CICS/COBOL subroutine to
(yes, once again!) calculate mortgage rates. This services runs on an IBM mainframe in Dallas, TX
From the above, what are the inputs ? How could you figure out the data types (hint – use the
WSDL editor’s Source mode)
© 2009 IBM Corporation
306
Call a Mainframe CICS/Web Service – 1 of 5
Copy the EPSCSMR.wsdl file, from the education project to your EGLRichUI project – and put it in the
\WebContent\wsdl\ folder.
- As you’ve done twice now, use the tooling to create the EGL Interfaces for the EPSCSMR.wsdl file.
- Note that you will get two separate source files:
* EPSCSMRTIInterace – the inputs needed to call the CICS Web Service on the host
* EPSCSMRTOInterface – essentially the output or returned data from the CICS/COBOL program
The EGL Rich UI coding pattern will be:
Call the CICS/COBOL Service with the inputs
Return to the Callback Function from the CICS/COBOL Service receiving the outputs as parameters
© 2009 IBM Corporation
307
Call a Mainframe CICS/Web Service – 2 of 5
Using your prodigious EGL Rich UI programming skills, create the
following simple U.I. in your \sandbox\ package:
We named ours: regisService – but you can pick any name you like
And … well…okay (you twisted our arms)
Since there’s really nothing new in the U.I. use the Copy/Paste code
in the Slide ***Notes
© 2009 IBM Corporation
308
Call a Mainframe CICS/Web Service – 3 of 5
Here’s what the onClick function should look like.
As before, you can develop this by hand, or use the Copy/Paste code in the Slide ***Notes
Is there anything new in these statements? Not really. A useful technique though, is to change
the button text and disable it while the Web Service is off being accessed.
Also the Input variable of type: DFHCOMMAREA has an import for it (see prior Slide ***Notes)
© 2009 IBM Corporation
309
Call a Mainframe CICS/Web Service – 4 of 5
Here is the CallBack and onException function. The only new coding construct herein is the
fully-qualified parameter type on: displayResults_cics
This coding pattern is necessary because there’s already a record named: DFHCOMMAREA that’s being
referenced through an import statement
You can copy this code from the Slide ***Notes (it’s probably easier than typing it all in)
© 2009 IBM Corporation
310
Call a Mainframe CICS/Web Service – 5 of 5
Preview the RUIHandler
Enter values such as those shown in this screen capture
And click the button.
The actual functionality is running on an IBM mainframe in Dallas, TX
Try passing different values in to the Web Service for:
Amount
Rate
Term
Note the response time and speedy performance
(not bad for an old mainframe)
Now it’s time to move on, and work with EGL-generated Web Services. We’ll start by reviewing
the steps needed to create a Web Service then generate the WSDL, then we’ll discuss using
the WSDL in your Rich UI project.
© 2009 IBM Corporation
311
Review of EGL Services – Steps for Creating and Consuming Web Services
Here are the steps you will take to create a Web Service – from your Web or Application
server project:
1.
2.
3.
4.
5.
6.
Start Tomcat – or WebSphere (see ***Notes)
Customize your project’s Build File
Create and generate a Web Service
Code the service
Generate the service
Generate the WSDL for your Service – may need to customize the service port (end point)
Test the WSDL Using Web Services Explorer
Consume the Web Service
(If using a 3rd Party WSDL) Import or copy the EGL-generated WSDL to your Client/Project
Generate or create the EGL Client Interface(s) from the WSDL
In the EGL Rich UI process - code a variable of <serviceName> type
Code the call to the ServiceVar.function – passing parameters and returning to a Callback function
(From the Servers Tab in the Web Perspective)
Start Tomcat or start WebSphere
Note that if you don’t have a server yet defined for your project, create one
before continuing
© 2009 IBM Corporation
312
(Review) Customize Your Project’s Build-File – and Generate Your Project
You need to select the serverType you will be publishing the Web
Server to
Open EGLWeb.eglbld
Un-check Show only specified options
Scroll down to find the serverType option
Use the combo-box to select the serverType for your
project
WEBSPHERE
TOMCAT
Select the serverType
© 2009 IBM Corporation
313
(Review) Create a new EGL Web Service
In your server-side project (i.e. NOT in your Rich UI project) you will create your custom EGL
Web Services - typically (although not necessarily) in a package named something like
\services\ under \EGLSource\
1. Create a New
> Service
See
***Notes
2. Check: Create as web service
© 2009 IBM Corporation
314
(Review) Create a new EGL Web Service – continued
Recall that EGL Services are simply EGL business logic parts.
As such they allow full programming access to the complete EGL language.
From EGL Services you can:
Access data:
DB2, Informix, DL/I, VSAM/QSAM, MQ, CSV (Excel spreadsheet) files – and other sequential files
Access existing EGL applications and business logic
Access mainframe functionality:
System z – COBOL/CICS, IMS TM (MPP/QBMP) programs
System i – RPG, CL or COBOL programs
–
The above COBOL programs can be native (hand-coded) or EGL-generated
Access Java applications an frameworks
Access C/C++ .DLLs and applications
…etc…
Here’s a sample Service
After ensuring that your project settings are complete:
(From Project Explorer)
© 2009 IBM Corporation
Generate your EGLWeb Project
315
(Review) Generate the WSDL for Your Web Service
You will then Generate the Web service - From Project Explorer
After successfully generating the WSDL, you can open it in the Content Area – it’s
located under: \WebContent\WEB-INF\wsdl\
Optionally, you can test the Web Service
But before continuing, you may need to customize the WSDL “end-points” – the
port# for the WSDL address.
Note: An “end-point” is the URL (ping-able web address) of where your application server
is “listening” for incoming calls to your Web Service.
© 2009 IBM Corporation
316
***Notes
(Review) Test the Web Service – Interactively – 1 of 2
RBD contains an interactive
Web Services test facility called
the Web Services Explorer.
You can use this tool to test your
Web Service functionality
effectively, before embedding
calls to it from your service client.
You invoke the Web Services Explorer
by:
Right-Clicking over the generated
.wsdl file
Selecting: Test with Web Services
Explorer
© 2009 IBM Corporation
317
(Review) Test the Web Service – Interactively – 2 of 2
This opens the Web
Services Explorer – and
opens your Service in
the Navigator
All of the services
functions are exposed as
Actions for you to test.
You will fill in parameter
values, press Go and
view the results in the
Status view
*** Your Application
Server must be
still be started
© 2009 IBM Corporation
318
(From your Rich UI Project) Create an EGL Client Interface to the WSDL
From Project Explorer in your EGL Rich UI project you will:
Right-click over the WSDL
Select: EGL Services > Create EGL Client Interface…
© 2009 IBM Corporation
319
(Review) Create an EGL Client Interface to the WSDL
If a duplicate EGL part name exists, you will need to rename the EGL source and interface files
The EGL source file name
The Interface name
Note – that this will be the exception, not the rule in
calling services from EGL Rich UI
© 2009 IBM Corporation
320
Create the Web Service
Time to roll up the sleeves and create
some of our own services:
From your EGLWeb project:
Start your web or application server
Create a new Service part in the
\EGLSource\services\ folder, named:
RUIServices
Be sure to check:
Create as WEB (SOAP) service
If you’re prompted to
Deploy the EGL Service?
Allow the tooling to
generate and deploy the
Service to your application
server before continuing
© 2009 IBM Corporation
321
Create the EGL Login Function in the Service
Here is the code for Logging in
We’re using the old Siteuser table
that has USER_ID and Pass_Word
columns
You can either code this from
scratch, using explicit SQL, or
copy/paste this function from the
Slide ***Notes
When you’ve saved and all syntax
errors are cleaned up:
From Project Explorer,
Generate the entire EGLWeb
project
This will create a wsdl folder under
\WebContent\WEB-INF\
With your new RUIServices.wsdl
file in it
© 2009 IBM Corporation
322
(OPTIONAL) Test the Web Service using Web Services Explorer
Before proceeding with additional UI work (and potentially complicating your testing process) –
From Project Explorer:
Right-click over the RUIServices.wsdl
Select Web Services > Test with WebServices Explorer
Select loginService – and type values for: uid and pwd - click Go
In the Status area, verify a (true) return code from the service call
Note that you may need to restart your application server, in order to publish and run
© 2009 IBM Corporation
323
Create the EGL Client Interface
So, now we’re ready to do unto the EGL Web Service, as we did unto the 3rd Party Services.
From Project Explorer
Copy the wsdl file: from EGLWeb project to the EGLRichUI project. Put it in a \WebContent\wsdl\ folder
Note that you may have to create the new \wsdl\ folder under \WebContent\
Right-click over the wsdl and select:
EGL Services >
Create EGL Client Interface…
Generate the EGLRichUI project
© 2009 IBM Corporation
324
Call the Web Service from your Login View
So – let’s see how we did?
Open your loginPage.egl, and modify the existing business logic. It’s probably best at this
point, to copy/paste the code in from the Slide ***Notes
Here’s the finished product. What’s new?
The USERID field
Answer:
Nothing
Which rocks.
How about one more?
© 2009 IBM Corporation
325
The PASSWORD field
Create a Web Service to Populate a Rich UI dataGrid
So, let’s combine the dataGrid you’ve been learning about with Services. This workshop will
show you an end-to-end process where you:
Create a Web Service that returns an array of customer records, based on a search argument
Create a RUIHandler that:
Calls the service – passing a user-entered-partial string
Returning (in the Callback function) all of the rows found into the dataGrid
The visual representation of the run-time architecture is shown in this picture…
onClick
Event
RUIHandler
RUIHandler
Call Service
Function
Callback
Function
EGLWeb Project
Service
WebSphere
Tomcat
Service
© 2009 IBM Corporation
EGLDerbyR7
326
Create the Web Service
Same steps as before
From your EGLWeb project:
Make sure that your web or application server is started
Create a new Service part in the \EGLSource\services\ folder, named:
customerServices
Be sure to check:
Create as WEB (SOAP) service
Here
is the code for accessing customer
table data
You can either code this from scratch, using
explicit SQL, or copy/paste this function from
the Slide ***Notes
When you’ve saved and all syntax errors are
cleaned up:
From Project Explorer,
Generate the entire EGLWeb project
This will create a wsdl folder under
\WebContent\WEB-INF\
containing your new customerServices.wsdl file
© 2009 IBM Corporation
327
(OPTIONAL) Test the Web Service using Web Services Explorer
As before, you may want to test with the Web Services Explorer
From Project Explorer:
Right-click over the customerServices.wsdl
Select Web Services > Test with WebServices Explorer
Select getCustomerSearch – and type values for
custString: S
Click Go
In the Status area, verify a (true) return code from the
service call
Note that you may need to restart your application server, in
order to publish and run
Optionally – you might want to test getOneCustomerSearch
© 2009 IBM Corporation
328
Create the EGL Client Interface
Copy the wsdl file: from EGLWeb to EGLRich UI – and put it in the \WebContent\wsdl\ folder
Right-click over the wsdl and select: EGL Services > Create EGL Client Interface…
Generate the EGLRichUI project
© 2009 IBM Corporation
329
Call the Web Service from your Login View
So – it’s time to call customerServices from a RUIHandler
In the \mySamples\ folder, Create a new RUIHandler named: customerSearchGrid
Copy/paste the code in from the Slide ***Notes – and overlay the boilerplate EGL source
- Note the various widgets
- Note especially the
code that calls the
Web Service
Save and run
© 2009 IBM Corporation
330
OPTIONAL LABS – dataGrids and Web Services
1. In customerSearchGrid:
Uncomment processGrid – note that this is a custom behavior, for grid widgets. It allows you to substitute
widgets for the defaults in rows. Note the reference to this in the widget declaration
2. Calling the getOneCustomerSearch Web Service, populate
a RUIHandler like this
Notes:
The UI is not that important …but…
Copy/Paste code is found in the next slide
You will need to make sure that you import the correct version
of the customer record – to match the type referenced
© 2009 IBM Corporation
331
OPTIONAL LABS – dataGrids and Web Services
The solution Copy/Paste code is in the slide
notes. Note the following run-time elements
and events…
onClick
Event
RUIHandler
RUIHandler
Call Service
Function
Callback
Function
EGLWeb Project
Service
WebSphere
Tomcat
Service
© 2009 IBM Corporation
EGLDerbyR7
332
OPTIONAL LABS – Code Free Workshop – Get Orders for a Customer – 1 of 6
Copy/Paste code is in the slide notes
elements and events…
(function name mis-spelling and all).
Note the following run-time
Create a new Web Service in your EGLWeb project
This service should have a function that takes in an integer – representing a customer_ID and
returns an array of order records for that customer
Be sure to:
Generate your EGLWeb project
Restart your app-server
© 2009 IBM Corporation
333
OPTIONAL LABS – Code Free Workshop – Get Orders for a Customer – 2 of 6
Test your new Web Service with the Web Services Explorer facility
© 2009 IBM Corporation
334
OPTIONAL LABS – Code Free Workshop – Get Orders for a Customer – 3 of 6
Copy the WSDL from your EGLWeb to your EGLRichUI project, and generate an EGL Client
Interface…. Then – from Project Explorer, Generate your EGLRich UI Project
© 2009 IBM Corporation
335
OPTIONAL LABS – Code Free Workshop – Get Orders for a Customer – 4 of 6
From PagingGridBasics.egl:
Copy the existing myPagingGrid pagingGrid specifications and paste them inside the
file
Make the modifications to the: columns and gridSelector shown below
Note: Type VERY VERY carefully
© 2009 IBM Corporation
336
OPTIONAL LABS – Code Free Workshop – Get Orders for a Customer – 5 of 6
Still from PagingGridBasics.egl:
Add the functions, and make the modifications shown below
Once again,
type VERY
carefully
VERY
Okay, okay – you win. This slide contains the finished code in the ***Notes
© 2009 IBM Corporation
337
OPTIONAL LABS – Code Free Workshop – Get Orders for a Customer – 6 of 6
Preview and test the RUIHandler
© 2009 IBM Corporation
338
®
IBM Software Group
Creating an end-to-end RESTful Service
Chris Laffra
© 2009 IBM Corporation
Create an End-to-end EGL
Web Service using REST only
From your EGLWeb project:
Create a new Service part in the
\EGLSource\services\ folder,
named: RUIRestServices
Be sure to check:
Create as WEB (REST) service
Here is the service code
You can either code this from
scratch, or copy/paste this function
from the Slide ***Notes
When you’ve saved and all syntax
errors are cleaned up:
From Project Explorer,
Generate the entire EGLWeb
project
If you have not deployed your service
yet, do it now by running it on the
Tomcat server you selected before:
© 2009 IBM Corporation
340
Consume an End-to-end EGL
Web Service using REST only
In the Project Explorer, right-mouse click your service and say:
EGL Services
Extract Interface…
In the wizard, select the EGLSource
folder in the RUI Project
Copy the RUI code from
the Slide ***Notes
All EGL REST services use this pattern:
http://<Server>:<PortNumber>/<ProjectName>/restservices/<ServiceName>
Note: If you are seeing errors, make sure to
Generate your service project
Run your service on Tomcat
Verify that Tomcat is using port 8080
You have 2 projects:
A service project that is deployed on TOMCAT
A RUI project that invokes the service using an interface
© 2009 IBM Corporation
341
Course
Rich UI Inter-Program
Communication
Units:
Inter-Program Communication
Invoking functions in other Widgets and
RUIHandlers
InfoBus
Comprehensive Workshop
The Web 2.0 Development Process with Rich UI
The workshop
Appendix
© 2009 IBM Corporation
342
RUI Application Run-Time Architecture – 10,000 Foot View
Independent entities
JSF Application
RUI “Application”
Forwards to
Invokes
Composed of
RUI Handler
RUI Handler
Invokes
Composed of
RUI Handler
Composed of
RUIWidget
RUIWidget
“embedded part”
(RUIHandler)
(RUIHandler)
Calls function in
Invokes
ExternalType
Invoke existing JavaScript
Calls function in
RUI Library
RUI Library
UI Logic, Service Calls
UI Logic, Service Calls
Accesses Server Side Data
Java
…or…
RPG
…or…
COBOL
Enterprise Applications
© 2009 IBM Corporation
EGL Server Side
Processes
MQ
Databases
External Files
Services
Libraries Programs
343
DL/I
SQL or other
File I/O
Rich UI Application = RUIHandler + RUIWidgets – Review
A scaled-down model of an EGL Rich UI application might be a single RUIHandler –
composed of several RUIWidgets.
Each RUIWidget is composed of one-tomany elementary widgets (similar to a
record / group fields and elementary fields)
Both RUIHandlers and RUIWidgets
have:
Properties
Behaviors
All of the properties and behaviors:
Are exposed in EGL Rich UI model
Can be specified (programmed) according
to the requirements of your application
From this example – can you find the
following elements
– RUIHandler, which is composed of:
A text field (an elementary) RUI Widget as header text (in blue)
RUIWidget #1 – which is composed of:
Eight input fields, Eight Text fields, Two buttons,
RUIWidget #2 – a Tab Control RUIWidget which is composed of:
© 2009 IBM Corporation
An Employee List RUIWidget
Three other tabs – which contain additional RUIWidgets (within the tabs)
344
RUIHandler + RUIWidgets – Properties/Function Reference-ability
From any RUIHandler:
You can add any RUIWidget or RUIHandler to the main/parent RUIHandler as a variable
You can access and manipulate the variable RUIWidget’s/RUIHandler’s public properties with carte’
blanche. And you can also invoke the added RUIWidget’s/RUIHandler’s public functions through either:
Direct calls, Delegates or using a Rich UI messaging system known as the InfoBus
Best
Practice
Advice
You would use Direct Calls when the functionality in question was tightly-coupled
You would use the InfoBus when the functionality in question was loosely-coupled (i.e. when for example
you were creating Web 2.0 “mash-up” applications)
myRUIHandler
WidgetVariable {Declared access to Properties}
…
Can manipulate non-private WidgetVariable properties and can invoke non-private
WidgetVariable functions using EGL Rich UI statements
…
Can use either the InfoBus or direct calls to invoke
a function in SomeOtherRuiHandler
SomeOtherRUIHandler
//Functions
…
Can manipulate non-private WidgetVariable properties and can invoke non-private
WidgetVariable functions using EGL Rich UI statements
…
© 2009 IBM Corporation
345
Workshop – RUIHandler/RUIWidgets Properties Reference-ability
To understand how easy it is to access and manipulate Widget properties from a
RUIhandler do the following:
From: \mySamples\ create a new, RUIHandler named: embeddedRUIWidget
Replace the boiler-plate EGL code, with the Slide ***Notes statements
Study the statements – and note the use of the .dot syntax to reference widget variable
properties
Save
Preview
Click the button
So – that’s how easy it is to extend RUIWidgets and their properties through their
use (and reuse) in custom RUIHandlers. Now let’s look at calling functions in
RUIWidgets.
© 2009 IBM Corporation
346
Workshop – RUIHandler/RUIWidgets Invoking Functions
To understand how easy it is to invoke functions in a Widget variable from a RUIhandler
do the following:
Edit the EGL source in: embeddedRUIWidget
Add the code shown here in the screen capture:
Note that
some of the
functions
have been
collapsed
in the
source view
Save
Preview
Click the button
So – that’s how easy it is to extend RUIWidgets, setting their properties and calling
their functions from custom RUIHandlers. Now let’s look at calling functions using
the InfoBus
© 2009 IBM Corporation
347
Hop on the InfoBus – Calling From one RUIHandler or RUIWidget to Another
RUIHandlers and RUIWidgets – like the EGL Functions they contain – are independent
programming units. As such when you wish to invoke an EGL function in RUIHandlerB – from
an EGL function in RUIHandlerA you will actually post a message (fire an event) on an EGLsupplied run-time system called the “InfoBus”.
This is how it works.
“Called” RUIHandler – typically in a “start-up” function subscribes to (registers a listener for) an
InfoBus message identified by a string parameter value. This string is the event name.
EGL Function to invoke
…named in subscribe
EGL event handling Function. Note two Parameters
InfoBus Message Identifier (event)
The “Calling” RUIHandler – in the EGL function that will be used to invoke the function in RUIHandlerB
“publishes” a message to the InfoBus – with two parameters:
InfoBus Message (event) Identifier
(spelled exactly the same as the subscribe parameter)
See ***Notes
© 2009 IBM Corporation
348
Parameter value passed in as the 2nd variable
InfoBus – One RUIHandler Invoking Functionality in Another
“Called” RUIHandler or RUIWidget
…
Subscribe to (listen for)
any event named:
Startup EGL Function
eventID
InfoBus.subscribe(“eventID”, functionName);
…
EGL Function named in subscribe(parm1, parm2)
…
User clicks a
button
InfoBus
“Calling” RUIHandler or RUIWidget
…
EGL Function invoked by some event that should
call/invoke the other RUIHandler
InfoBus.publish(“eventID”, variableValue);
…
… other functionality
…
© 2009 IBM Corporation
349
Publish a message for an event
named:
eventID
The InfoBus will find the named
listener: “eventID” and will invoke
the EGL function in the subscribe
statement
Workshop – InfoBus – Simple Example – 1 of 3
To understand how easy it is to publish and subscribe on the InfoBus in order to call
a Widget function from a RUIhandler (or in this case, another RUIHandler’s function
from a RUIHanlder) do the following:
From: \sandbox\ create a new, RUIHandler named: embeddedHandler
Replace the boiler-plate EGL code, with the Slide ***Notes statements
Study the statements – and note the use of the .dot syntax to reference widget variable
properties
Save
embeddedHandler
is now
listening for an
InfoBus message
mamed:
“myInfoBusMsg”
© 2009 IBM Corporation
And when a
message with that
name arrives, the
function:
showPublish is
invoked
automatically
350
Workshop – InfoBus – Simple Example – 2 of 3
To understand how easy it is to publish and subscribe on the InfoBus in order to call a
Widget function from a RUIhandler (or in this case, another RUIHandler’s function
from a RUIHanlder) do the following:
From: \sandbox\ create a new, RUIHandler named: InfoBusTest
Replace the boiler-plate EGL code, with the Slide ***Notes statements
Study the statements – and note the use of the .dot syntax to reference widget variable
properties
Save
Preview
Click the button
embeddedHandler
is now
listening for an
InfoBus message
mamed:
“myInfoBusMsg”
© 2009 IBM Corporation
351
Workshop – InfoBus – Simple Example – 3 of 3
Preview InfoBusTest
… and click the button
Create widget instance
InfoBus
System
Library
© 2009 IBM Corporation
352
Workshop – RUIHandler/RUIWidget Interoperability – Another Example – 1 of 4
Let’s apply our new Rich UI coding skills used to demonstrate the interoperability of
Widgets to a more interesting use case – our tabFolder.
We will demonstrate the following:
RUIHandler calling RUIWidget (variable):
Properties
Function
RUIWidget calling back to a RUIHandler (parent) using the InfoBus
Note this is a somewhat complicated use case. If you have any questions on the reasons
for any of the coding constructs behind the lab steps, ask your instructor to explain
Steps:
Open the following files into the Content Area:
tabSample.egl, groupingSample.egl, htmlWidgets.egl, miscWidgets.egl, textFields.egl
Make the following changes to the existing code:
In groupingSample.egl – modify the changeLabel(…) function
By doing this, you are publishing an event to the InfoBus that will be picked up in tabSample,
and used to open a different tab based on clicking the button in the RUIWidget
> Save your changes to groupingSample.egl
© 2009 IBM Corporation
353
Workshop – RUIHandler/RUIWidget Interoperability – Another Example – 2 of 4
In tabSample:
Modify the initialization() function – as shown below
Add the callBackFunction(…) as shown here
© 2009 IBM Corporation
354
Workshop – RUIHandler/RUIWidget Interoperability – Another Example – 3 of 4
Still in tabSample:
Modify the tabSelected(…) function – as shown below
Save your coding changes to all the .egl files
© 2009 IBM Corporation
355
Workshop – RUIHandler/RUIWidget Interoperability – Another Example – 4 of 4
Preview. Test the functionality by following this script:
When the view loads, click Grouping Sample – note the following:
– tabSample changed the top box’s color to Moccasin
– And it changed the bottom fieldset’s label
Click the button in Grouping Sample
– Text Fields will open – via an InfoBus message published in groupingSample that is subscribed in
tabSample, and used to specify: tab.selected();
– It also changed the rollover graphic in Miscellaneous widget
Click the Miscellaneous Widgets tab (to verify this)
Then click HTML Widgets (which changes the rollover graphic in Miscellaneous Widgets)
So click the Miscellaneous Widgets tab again (to verify this)
© 2009 IBM Corporation
356
EGL Rich UI – Application Development “Best Practices”
You will design your Rich UI applications as a collection of:
RUIHandlers – which are reusable components and contain:
RUIWidgets – which represent widgets
Custom – may or may not be reusable
IBM Supplied – example: Textarea, ListBox, Grid, DIV, etc.
3rd Party (Silverlight, Dojo, etc.)
Calls to external JavaScript functionality
You will put multiple widgets together in a container widget:
DIV, Box, floatLeft/floatRight, etc.
RUIHandlers and RUIWidgets may be:
Visual
Non-visual (i.e. calls to the business functionality in your system)
Both
You will start the initial U.I. layout, by creating and testing your visual elements as
RUIHandlers.
Then change the RUIHandlers to become RUIWidgets, if you wish to use them in
mash-ups or in the dynamic layout of your application in the browser
Example – hide/show U.I. elements based on business functional processes and rules
© 2009 IBM Corporation
357
Course
RBD/EGL Development
Units:
EGL Rich UI – Model View Controller (MVC)
© 2009 IBM Corporation
358
Model/View/Controller – Development Pattern
The programming paradigm or pattern of Model-View-Controller has
become somewhat mainstream in recent years.
A design utilizing this concept will be readable, maintainable, and scalable.
The concept however is most heavily centered on the JEE programming
model. The roles of each are as follows:
Model – Encapsulates the information (data) and the methods to operate on that
information (business logic).
View – Presents the model (most often a dynamic web page such as a JSP).
Controller – Processes user events and drives model and view updates.
To whit:
Requests by the user are handled by the view and processed by the controller.
The controller then accesses the business logic contained within the model.
The model then passes data back to the view which dynamically builds a new UI
for the user.
The process is repeated over again (that’s why this is called a pattern)
© 2009 IBM Corporation
359
Model/View/Controller – Rich UI Implementation
In the realm of Rich UI, this particular use
case doesn’t strictly apply. After all, Rich UI
is strictly used to build dynamic UI’s!
You can think of Rich UI as building both
the view and controller, which can access
the model by making service calls.
However, the idea of Model-View-Controller
is so good that we’ve enabled its concepts
when programming in RUI.
So what do we do?
We provide a framework that utilizes the
concept of MVC to simulate a traditional
HTML form.
Note that support for some of the standard
DataItem properties (like dateFormatting, and
money types) is also done through Rich UI’s
MVC
© 2009 IBM Corporation
360
Model/View/Controller
Perhaps this is one thing you have been missing when programming in Rich UI?
Wouldn’t you like the ability to submit an entire form which automatically validates
itself!
Look no further than the MVC framework shipped with Rich UI
The roles of each are as follows:
Model – The underlying data accessed from within Rich UI (ex. could be a record or EGL
variable)
View – The widget displaying the data (ex. A TextField, CheckBox, etc)
Controller – The bridge between displaying the data from the model, in the view. The
controller also provides a simple interface for validating the input.
Last but not least, the framework allows us to encompass all of this into a single form.
That form can then be submitted and everything validated at once. Of course,
different logic will be implemented by you for each case.
© 2009 IBM Corporation
361
Model/View/Controller
Let’s take a look at this functionality by doing a workshop.
Create a new package under the EGLRichUI project called mvc
Next, right-click over the mvc package and create a new Rich UI Library called
ValidationMessages
© 2009 IBM Corporation
362
Model/View/Controller
Inside of the ValidationMessages library, copy/paste the code in the notes and
replace any existing text in the file.
For now lets just skip the explanation of this file and come back to it
Next, create a new file under WebContent properties called
ValidationMessages-en_US.properties
© 2009 IBM Corporation
363
Model/View/Controller
Now copy the text from the notes and paste it into the properties file we just created.
Next, create a new RUI Handler called EmployeeInfo under the mvc package.
© 2009 IBM Corporation
364
Model/View/Controller
Inside of the EmployeeInfo file, copy/paste the record in the notes below the RUI
Handler
This record will function as
the Model, or the data for
our Rich UI Handler.
Notice how the model correlates
with the ValidationMessages
record we just created
© 2009 IBM Corporation
365
Model/View/Controller
So now that we have our model defined, lets go ahead and create the view portion of
the implementation (reminder: a view is what will display the data)
It is only fitting that we create a widget to display each piece of data in the model. In
doing so, you will add the following code to the RUI Handler.
Copy/Paste code is provided in the notes.
Press: Ctrl/Shift/O – to bring in the missing import statements
© 2009 IBM Corporation
366
Model/View/Controller
We have now completed both the model and view portions of the MVC architecture.
You may be wondering how the model and view are tied together, if so read-on!
But first, lets create a variable of the Employee record in our RUI Handler
*** Important – be sure to select the MVC record for the import.
Now we will code the controller, which in turn will tie the model to the view
Don’t worry, the syntax is the same as if we were creating a variable of a normal widget!
To the right is a sample implementation of a controller
Notice that we are simply creating
a variable of type Controller
The controller takes an
annotated property “@MVC”
This property accepts a model and a view as parameters
Notice that the model is simply the data variable, and the view is simply the UI widget variable.
Once again, press Ctrl/Shift/O
© 2009 IBM Corporation
367
Model/View/Controller
Creating a controller isn’t so bad is it?
Now lets create controllers for each field on our page. Copy/paste code is provided
in the notes. Since there really is no better way to teach this, the code provided is
heavily commented. We will rely on these comments and simple intuition to teach
the remaining controller concepts not explained.
The code in the notes should simply be pasted below the view widgets.
© 2009 IBM Corporation
368
Model/View/Controller
Note the additional functions we utilize in certain controllers, such as validators
Remember that the code is heavily commented. Utilize those comments and
examine the Controller widget itself in order to understand the remaining functionality
available.
So, now that we have implemented the entire MVC spectrum, what’s left? Well, as
we discussed on previous slides, forms are often used to group models, views, and
controllers together.
© 2009 IBM Corporation
369
Model/View/Controller
Grouping all of this data so that a single submit can be issued is the ultimate goal of
the framework. Doing so will introduce a couple of new widgets!
Returning to our code, lets create an array of form fields. These are essentially the
items we want inside of our form. The syntax consists of a String you would like
displayed on the page and which controller it conforms to.
Add the following code to your RUI Handler above the view code
Copy/paste code provided in the notes
© 2009 IBM Corporation
370
Model/View/Controller
Now that we’ve got our form fields, lets create a form!
Add the following lines of code to your RUI Handler
Don’t forget to press Ctrl/Shift/O
Note that this is simply a declaration of a new widget that encompasses the form
fields.
By now you should be realizing that this form is actually a UI widget, meaning it
generates and displays components and data on the page.
© 2009 IBM Corporation
371
Model/View/Controller
Finally, we have one last step! We need to create a event that will trigger the
submission of the form!
Let’s add a button to the page that will do just that
Add the following code…
Note that we are also adding the button to the initialUI property of the RUIHandler
Finally, go to the next slide to add the submit logic
© 2009 IBM Corporation
372
Model/View/Controller
Copy the code in the notes section of the slide and paste it into the RUIHandler (for
readability’s sake, paste it below the existing functions in the RUIHandler)
Note that the code is commented sufficiently so that understanding the logic should be
intuitive.
Finally, let’s preview the page…
© 2009 IBM Corporation
373
Course
RBD/EGL Development
Units:
JavaScript ExternalType
© 2009 IBM Corporation
374
Calling custom JavaScript from Rich UI
So what happens if you’ve already got a bunch of custom JavaScript written within
your company?? Does it all go to waste now that you’ve got Rich UI?
The answer to this question is no. Rich UI provides a way to interface with any
custom JavaScript that you may currently have.
Lets do a workshop that is twofold! We will write and call some logic written in pure
JavaScript, then write and call a widget written in pure JavaScript.
Create the following folder structure inside of the com.ibm.egl.education.widgets
project under the WebContent folder.
customJavaScript functions
customJavaScript widgets
© 2009 IBM Corporation
375
Calling custom JavaScript from Rich UI
Next, under the WebContent customJavaScript functions folder, create a
new JS file called customFunctions.js
Once the file is created, copy the code in the notes and paste it into the file.
Note the constructor, which is simply a function that is executed when an object of
this class is created.
Also note the hello function. This is our custom function which takes a parameter
and returns a string!
© 2009 IBM Corporation
376
Calling custom JavaScript from Rich UI
Next, under the WebContent customJavaScript widgets folder, create a new
JS file called customWidgets.js
Once the file is created, copy the code in the notes and paste it into the file.
Notice the “showButton” function, which creates our custom widget using pure
JavaScript
© 2009 IBM Corporation
377
Calling custom JavaScript from Rich UI
Now that we have our custom JavaScript written, lets create an ExternalType to
interface with this code!
Create a new EGL Package under the same project called customJavaScript.
Next create a new EGL Source File called customExternalTypes
© 2009 IBM Corporation
378
Calling custom JavaScript from Rich UI
Now that we have created the custom JavaScript and the ExternalType to interface to
that JavaScript, let’s create a RUI Handler and integrate it all together.
Create a new Rich UI Handler under the customJavaScript package called
customExternalTypesDemo
Note that there is copy/paste code in the notes!
© 2009 IBM Corporation
379
Calling custom JavaScript from Rich UI
Preview the page and note the functionality.
Note that the workshop we did was not the traditional hand holding.
We expect that if you are calling custom JavaScript you are well versed in this genre
and should be able to move forward by simply being presented with the concepts!
© 2009 IBM Corporation
380
Course
RBD/EGL Development
Units:
Deployment
© 2009 IBM Corporation
381
Deployment
Deploying a Rich UI application consists of generating all of your code into
one single HTML file.
Doing so is fairly simple, and is done for you by the tooling.
For deployment you have three options:
Deploy as straight HTML artifacts
Deploy into a Dynamic Web Project targeted to WAS
Deploy into a Dynamic Web Project targeted to Tomcat
In any case, if services calls are made from within the application, we must
make sure that the environment contains the Rich UI Proxy.
If deploying into a dynamic web project targeted to either WAS or Tomcat,
this is taken care of for you!
If deploying as straight HTML artifacts, a proxy (possibly written in PHP)
must be provided manually.
© 2009 IBM Corporation
382
Deployment
First lets switch our generation mode to Deployment
Go to Window Preferences EGL Rich UI
Once the change has been made, click apply and OK.
The IDE will prompt you to ask if you want to re-generate all artifacts, simply click OK
© 2009 IBM Corporation
383
Deployment
Now that our code has been generated
for deployment, lets deploy!
Right-click over the project and select
Deploy EGL Rich UI Application
© 2009 IBM Corporation
384
Deployment
A wizard will pop-up, and for our purposes, we will select the following options.
Click Next
© 2009 IBM Corporation
385
Deployment
On the next screen in the wizard we are given the opportunity to name the output
html file, asked where we want the code generated, and given the opportunity to
make some globalization settings
We can either generate the code to an existing project, or have the wizard create a brand
new Dynamic Web Project
© 2009 IBM Corporation
386
Deployment
Finally click Next and then Finish
Now expand the project where your
code was generated and look under
the WebContent folder.
Notice all of the generated artifacts and
the main html file which contains all of
the generated RUI Code
© 2009 IBM Corporation
387
Deployment
For deployment, there exists one final step!
We must export and deploy the Dynamic Web Project.
This can be done by exporting a WAR file, or in the case of a WAS project, exporting an
EAR file.
As long as you have generated your code to a Dynamic Web Project, all service calls
should work since the proxy is also generated!
© 2009 IBM Corporation
388
RBD/EGL Development
Course
Units:
What is Web 2.0?
Programming in EGL Rich UI
Learn EGL Rich UI
Appendix
Under Construction
© 2009 IBM Corporation
389