ZOS15P2 – EGL et le WEB 2 - IBM Rational Rich UI Perspective ... but with different work bench views related to Web 2.0 ... play a huge role in the look and feel and behavior of

© 2009 IBM Corporation

IBM Software Group

ZOS15P2 – EGL et le WEB 2.0


IBM Rational

Presentation Agenda

● Business Value of Web 2.0

● EGL and Rich UI (Rich User Interface)

● Web Services and Rich UI Architecture

● Deployment

Not just Technology


IBM Rational

Industry Trend is to go from Green Screens to SOA

Dumb terminal

Web1.0

Web2.0, Ajax, SOA , EGL Rich UI happy experience (easy to build, by insiders)customer can own the solution


IBM Rational

Typical Web 2.0 Application Characteristics

● Rich user experience with 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

Good example: http://www.google.com/finance

(*) Web 2.0 is becoming synonymous with RIA (Rich Internet Application)


IBM Rational

Technology Attributes of Web 2.0

RSS/ATOM allows someone to link not just to a page, but to subscribe to it, with notification every time that page changes.

Users must be treated as co-developers, in a reflection of open source development practices. The open source dictum, "release early and release often”

“DATA is the new HTML." Database management is a core competency of Web 2.0 companies.

XML or JSON data over HTTP , in a lightweight approach sometimes referred to as REST (Representational State Transfer) as an alternative to SOAP.

AJAX incorporating: XHTML and CSS, DOM, XML and XSLT, XMLHttpRequest and JavaScript allowing information to be mashed up into new interactive portals."

Feeds

Perpetual Beta

Info-ware

LightweightProgramming

Model

Rich UserExperience


IBM Rational

Why Web 2.0 for the Enterprise?

● Web 2.0 is�Creating new markets�Lowering competitive barriers�Encouraging creativity to come from anywhere�Harnessing community created media�Tapping into the wisdom of the crowds�Enhancing communications and making information

to cause more impactl

● What does it means for the enterprise?�Greater collaboration and innovation across the

value chain�Increased levels of customer intimacy�Simplification of complex IT and business

infrastructure�Business model flexibility to capitalize on new

market opportunities

It’s fast becoming a Web 2.0 business world, but innovation

never goes out of style.

According to Gartner:

By 2008, the majority of Global 1000 companies will

have adopted several technology-related aspects of

Web 2.0

Missing out on the non-technology aspects of Web

2.0 means that many organizations will also miss out on some of the positive

business benefits

According to Gartner:

By 2008, the majority of Global 1000 companies will

have adopted several technology-related aspects of

Web 2.0

Missing out on the non-technology aspects of Web

2.0 means that many organizations will also miss out on some of the positive

business benefits


IBM Rational

“Mashups”

Google™ Map

Hotel information —separate database

Directions — come from somewhere else

Send to a phone —Additional functionality

Refers to the design and development pattern of combining and cuRefers to the design and development pattern of combining and custom stom ““widgetswidgets”” in a in a

web application. web application.

The rendered web application mashesThe rendered web application mashes--up (contains) relevant and related views of data up (contains) relevant and related views of data

onon--screen for effective presentationscreen for effective presentation

Why?

� Rapid application development

� Reuse existing services

� Avoid reinventing the wheel

� Empowers users

Why?

� Rapid application development

� Reuse existing services

� Avoid reinventing the wheel

� Empowers users


IBM Rational

Benefits of Web 2.0 – Modular Development and Component Reuse●● Because of the Rational Business Developer tooling, programmingBecause of the Rational Business Developer tooling, programming --model and loosemodel and loose --coupling in the EGL coupling in the EGL

implementation of Rich UI implementation of Rich UI –– Software Reuse is not only easy: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 Rich UI

ApplicationApplication

ExistingExisting

RUIHandlerRUIHandlerNewNew

RUIHandlerRUIHandler

External RIAExternal RIA


ExistingExisting

WidgetWidgetRUIHandlerRUIHandler

ElementsElementsExistingExisting

WidgetWidgetNew New

WidgetWidget

External External

JavaScriptJavaScript

New and New and

ExistingExisting

RUIWidgetsRUIWidgets


IBM Rational

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 � AJAX

� DOJO

� JSON

� Web Services

AJAX - Asynchronous JavaScript and XMLDOJO - An open source JavaScript toolkit. JSON - JavaScript Object Notation


IBM Rational

EGL: Shielding Complexity – Across the Development Lifecycle

ConsumeConsume Data + LogicData + Logic

UI UI ProduceProduce

JavaScriptJavaScriptAJAXAJAXDojoDojoGoogleGoogle

REST XMLREST XMLSOAP JSONSOAP JSON

SOAPSOAPXMLXMLRESTRESTPHPPHP

COBOLCOBOLJava RPGJava RPGSQLSQL

EGL EGL Widget Widget LibraryLibrary

IBMIBMIBMIBM

Widget Writer

Business Developers

Business Developers

EGL


IBM Rational

Rich UI Perspective● Similar to Web Perspective – but with different workbench views related to Web 2.0 development

Content Area

Where you design your Web 2.0 applications

Code EGL Rich UI statements

Test (Preview) your work

Palette

Project Explorer

Outline,Properties and EventsViews

Problems&

Generation ResultsViews


IBM Rational

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 PartPart types can be:

�� LibrariesLibraries

�� externalTypesexternalTypes – which can be used to call native or external JavaScript functionality

�� HandlersHandlers

� The EGL Part type used specifically for Rich UIUI programming – is an EGL HandlerHandler

EGL Rich UI HandlersHandlers come in two sub-type parts:

�� RUIHandlerRUIHandler

�� What weWhat we’’ll call all call a ““ ViewView ”” in this coursein this course

�� RUIHandler of subRUIHandler of sub --type RUIWidgettype RUIWidget

�� What weWhat we’’ll refer to simply as all refer to simply as a ““ WidgetWidget ””


IBM Rational

RUIHandlers – Code-Level Example

● From the above, note the following:�� initialUI=[Box]initialUI=[Box] this Box being a RUIWidget of type boxbox – that contains three additional RUIWidgets:

– TextLabel (which has some initial text)

– TextField

– Button – which has an onClickonClick function that fires populateFields(populateFields( ……))

�� onConstructionFunction = initializationonConstructionFunction = initialization (which in this case does nothing but could!)

�� populateFields(populateFields( ……)) EGL function – which just initializes text in the TextField RUIWidget

� Additional properties:� backgroundColor, width, height, columns=1


IBM Rational

Basics of Rich UI Programming – RUIWidgets● RUIHandlers contain one-to-many RUIWidgetsRUIWidgets

● RUIWidgets can be thought of, or categorized as:

� Simple :

� TextLabel

� Box

� Button

� Complex :

� 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●

● 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.

anyNameFieldanyNameField TextField {text=TextField {text= ““ LastNameLastName ”” };};

IBM providedIBM provided

RUIWidgetsRUIWidgets


IBM Rational

RUIWidget Properties

● In EGL Rich UI, RUIWidget propertiesproperties (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

● There are an extraordinary number of properties you 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:1.1. U.I. propertiesU.I. properties – Widget layout and display

2.2. EventEvent --handling propertieshandling properties – that respond to Widget run-time behavior in the browser

Browser Browser

Event handling Event handling

PropertiesProperties

U.I. U.I.

PropertiesProperties

RUIWidgetRUIWidget. . <property><property>


IBM Rational

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.htmlhttp://www.ibm.com:8080/EGLRichUI/myHelloWorld.html

● Example Rich UI application being developed in Rational Business Developer:

http://localhost:5590/EGLRichUI/mysamples/ruiProper tySample.htmlhttp://localhost:5590/EGLRichUI/mysamples/ruiProper tySample.html ?contextKey=5?contextKey=5

● Note that you can invoke an external browser from Preview�


IBM Rational

Terms and Concepts – Rich UI and SOA

● Rich UI makes extensive use of services, and SOAservices, 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.1. RESTful serviceRESTful service callscalls – 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.2. SOAP serviceSOAP service callscalls - A type of service call that is more popular in enterprise. It requires the exchange of XML messages between the client and host system.

●

● By utilizing web services you build modular, scalable systems.

ServerServer--SideSide

EnterpriseEnterprise

ComputingComputing

AssetsAssets

EGLEGL



ResourcesResources

ServiceService

CallsCalls

……andand……

ResultsResults

Rich UIRich UI

ApplicationApplicationJDBCJDBC

CallsCalls

……oror……

ServicesServices


IBM Rational

EGL/Rich UI EGL/Rich UI –– RunRun--Time Model Time Model –– 1,000 Foot View1,000 Foot View●● In EGL/Rich UI applicationsIn EGL/Rich UI applications

� Your Rich UI application – which runs in the browser, makes service calls to EGL (or non-EGL) Server-Side functionality which access enterprise data or enterprise applications

Users interact with your Rich UI application. 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:�� ServerServer --based application performancebased application performance – due to functionality/cycles offloaded to the RUIHandler�� BrowserBrowser --based dynamic processing capabilities and functiona litybased dynamic processing capabilities and functiona lity – simply due to Rich UI

DataData

StoreStore


Application(sApplication(s))

RUIHandlerApplication

GeneratedJavaScript +HTML

RUIHandlerRUIHandler


GeneratedGenerated

JavaScript +JavaScript +

HTMLHTML

Rendered in

thebrowser

Service Calls

JSONStringData ��

ServerServer--SideSide ClientClient--SideSide


IBM Rational

Rich UI Service Functionality Rich UI Service Functionality –– accessing SOAP Web Services accessing SOAP Web Services

What you will have to do before calling services from your EGL Rich UI applications:

1. Create or access the WSDL

� If using CICS there are tools in Rational Developer for System z to create WSDL files

� If using RPG there are automated facilities in Rational Developer for IBM i for 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

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)


IBM Rational

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.1. CallCall to the service.function(…)

2. The parameter listparameter list

3. The service callbackcallback reference

4. The service exception handling functionexception 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.2.

2.4.2.3.

3.

4.

Dude…what’s a “Callback Function”?

Hang on –we’ll be getting to that shortly.

Rich UI Service Functionality Rich UI Service Functionality –– accessing SOAP Web Services..accessing SOAP Web Services..


IBM Rational

Rich UI Service Call StatementRich UI Service Call Statementcall call serviceName.operationName(argumentListserviceName.operationName(argumentList ))

returning to returning to myCallbackFunctionmyCallbackFunctiononException onException myExceptionHandlermyExceptionHandler {{ timeOuttimeOut = milliseconds};= milliseconds};

•• serviceNameserviceName• Name of a variable based on an Interface part (see previous section on creating an EGL interface from a WSDL

•• operationNameoperationName• Name of the Interface part’s function

•• argumentListargumentList• List of arguments, each separated from the next by a comma.

•• myCallbackFunctionmyCallbackFunction• Name of a callback function that is available to t he call statement. In most cases, the function is in the same Rich UI handler or in a lib rary.

•• myExceptionHandlerFunctionmyExceptionHandlerFunction (Optional) • Name of a exception handler that is available to t he 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…


IBM Rational

function function callBackFunc(PositionalcallBackFunc(Positional Parameter List)Parameter List)//assign data returned from service call to Rich UI fields //assign data returned from service call to Rich UI fields //(optionally) do other processing//(optionally) do other processing

endend

•• Positional Parameter ListPositional 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” – positionall y with the Call statements arguments to the Web Serv ice

function function serviceExceptionFunc(excpserviceExceptionFunc(excp anyExceptionanyException in)in)//Parse the //Parse the excpexcp fields fields //Take action depending on the what has happened//Take action depending on the what has happened

endend

ExampleExample �

Callback and onException Functions Callback and onException Functions –– CodeCode

call call WebService.FunctionWebService.Function (arg1, arg2, arg3) returning to (arg1, arg2, arg3) returning to callBackFunctioncallBackFunction……

Function Function callBackFunctioncallBackFunction (arg1Type, arg2Type, arg3Type, (arg1Type, arg2Type, arg3Type, returnTypereturnType))

//assuming the Web Service has a //assuming the Web Service has a returns(dataTypereturns(dataType) argument) argument


IBM Rational

RUI Application Run-Time Architecture – 10,000 Foot View

RUI “Application”

RUI Handler RUI Handler

Independent entitiesIndependent entities

EGL Server Side Processes

Services

Libraries Programs

Enterprise ApplicationsEnterprise Applications

DatabasesDatabases

MQMQ

External FilesExternal Files

DL/IDL/I

RUIWidget(RUIHandler)

RUI LibraryUI Logic, Service Calls

RUI LibraryUI Logic, Service Calls

RUI Handler“embedded part”

JSF Application

RUIWidget(RUIHandler)

Forwards to

Invokes

InvokesComposed of

Accesses Server Side Data

ExternalTypeInvoke existing JavaScript

JavaJava……oror ……RPGRPG……oror ……COBOLCOBOL

SQL or otherSQL or otherFile I/OFile I/O

Composed ofComposed of

Calls function inCalls function in

Invokes


IBM Rational

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 WebSphere Application Server

� 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 WebSphere Application Server 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.


IBM Rational

• Declarative UI• Ajax support• Rich set of widgets• Easily extensible• Mashup using SOA

Rich User Interfaces

• EGL in 3 tiers:1. Data and Logic2. Soap/Rest Services3. Declarative UI

• Just 1 language• Skill transfer

Single Language

• Easy installation• No version pain• Flexibility

Mobility

Three Benefits of EGL Rich UI

the main focus of this particular RUI release


IBM Rational

EGL Rich UI mashup with Google Map

One model and 2 views (a list and a map with markers)


IBM Rational

EGL Rich UI mashup with Google Map (source)

The EGL GoogleMap abstraction itself is 45 lines of Javascript


IBM Rational


IBM Rational

BACKUP Web 2.0 using Rational Business Developer with “EGL Rich UI”

* Those slides are optional, you might want to add some of these to the Web 2.0 in case you are interested in more details….

Click here for the next session. Go to next topic


IBM Rational

More Terms and Concepts – AJAX, Widget, DOJO

●● AJAXAJAX – 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”.

●● WidgetWidget – 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.

●

●● DOJODOJO – 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/

EGL WidgetEGL Widget

DOJO WidgetDOJO Widget


IBM Rational

Still More Terms and Concepts – JSON, Silverlight

●● JSONJSON – 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.

●● SilverlightSilverlight – 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:


IBM Rational

RUIHandlers – aka “Views”● RUIHandlers are used to create Rich UI applications that are composed of one-to-many on-screen RUIWidgets.

These widgets can be IBM-provided widgets, or custom widgets that you’ve created

Elementary WidgetElementary Widget (ex. textbox, button HTML, etc.)(ex. textbox, button HTML, etc.)

ExternalType ExternalType (provides access to native JavaScript)(provides access to native JavaScript)

……

Cascading Style Sheet Cascading Style Sheet (optional property)(optional property)

RUIHandler type RUIHandlerRUIHandler type RUIHandler……

initialUI initialUI (initial U.I. rendering in the browser)(initial U.I. rendering in the browser)

onConstructionFunction onConstructionFunction (initial EGL Function)(initial EGL Function)

Custom Widget Custom Widget –– can embed reuse existing Widgetscan embed reuse existing Widgets

onConstructionFunctiononConstructionFunction

Elementary WidgetElementary Widget

Elementary WidgetElementary Widget

EGL FunctionEGL Function……

EGL Rich UIEGL Rich UI

ElementsElements

EGL EGL Function(sFunction(s))

……

� RUIHandlers are referred to as “views” because they represent the visual or

“view-able” elements of your Rich UI application


IBM RationalRUIHandler – Containing a RUIWidget of type GridGrid

● From the above, note the following:�� initialUI=[grid]initialUI=[grid] – declares a gridgrid 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)


IBM Rational

RUIWidget Properties – EGL Coding Example● To specify a RUIWidget property or event is very simple:

�� U.I. property exampleU.I. property example – Set the text value and background color of a TextField widget inside of the initial EGL function of RUIWidget or RUIHandler:

�� Browser event property exampleBrowser 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: variableName.property = valuevariableName.property = value

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 ☺


IBM RationalSimple RUIHandler/Elementary Widget – Document – 100 Foot View

Is figuratively represented by…


IBM Rational

Simple RUIHandler/Elementary Widget – Code – 10 Foot View

//NOTE references to U.I. elements//NOTE references to U.I. elements

//NOTE references to myTopBox Box//NOTE references to myTopBox Box

//NOTE: container for myBox02, myBox03//NOTE: container for myBox02, myBox03

//NOTE: When clicked? Assign value//NOTE: When clicked? Assign value

//NOTE: Properties of U.I. field//NOTE: Properties of U.I. field

//NOTE: Properties //NOTE: Properties –– including what function to invoke: including what function to invoke: ““onClickonClick””

myBox02myBox02

myTopBoxmyTopBox

myBox03myBox03


IBM Rational

RUIWidget Properties and the Visual EditorRUIWidget 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:

�� ColorColor – for text color

�� AlignmentAlignment – Right/Left/Center

� Note that (none) defaults to the parent container’s alignment

�� backgroundColorbackgroundColor – for the widget’s “fill (background) color”

�� idid – a unique identifier for the widget

�� ClassClass – the .css file’s unique class tag

� Note that in order to pick up custom .css tags, you will need to code:

cssFile = cssFile = ““ relative/relative/ fileSpec.fileName.cssfileSpec.fileName.css ”” – as a property of the RUIHandler

● Besides the major (common to all widget) properties , there are five additional categories of Widget pr operties 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)


IBM Rational

Event-Driven Programming and Event HandlingProgramming in Rich UI utilizes what is called event driven developmentevent driven development.

Most 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 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

� - keyboard events

� - mouse events


IBM Rational

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 RecordEvent 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)

Clicking the Multiply button fires an onClick event in

the browser.

If you have an event-handler defined for onClick

the JavaScript code (generated from your EGL) tied to the onClick event is automatically run in the

browser

HTML + JavaScript


IBM Rational

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 border):

2. From Project Explorer, Debug your EGL Rich UI Application


IBM Rational

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


IBM Rational

RUI Programming Model – “Callback” FunctionsEGL 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 managemanage – 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 err or messages

�Redirect to some other functionality, inside or out of your RUIHandler, etc.

● The common name for this kind of function is: ““CallbackCallback ”” FunctionFunction�You can think of a Callback Function simply as an event handler that is called by the event dispatcher in response to an asynchron ous event

● When a browser eventbrowser 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 eventsystem 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 toreturning tomodifier of the Service callcall statement


IBM Rational

Comparison: Synchronous vs. Event-Driven Programming Models

SynchronousSynchronous

Traditional RunTraditional Run--time modeltime model(Next Sequential Instruction programming idiom)(Next Sequential Instruction programming idiom)

Do processingDo processing

……

Call a service Call a service ��

Wait Wait ……

Wait Wait ……

Wait Wait ……

Wait Wait ……

Service call returns! Service call returns!

……

Do more processingDo more processing

……

Do processingDo processing

……

Call a service Call a service ��

(Specify a (Specify a ““CallbackCallback”” Function)Function)

……


……

Service call returns! Service call returns!

((““CallbackCallback”” Function Function

is automatically invoked)is automatically invoked)

……


……

EventEvent--DrivenDriven

Rich UI RunRich UI Run--time modeltime model(Modular, independent functions)(Modular, independent functions)


IBM Rational

Event Handlers/Event Dispatchers as an “Event Pipeline”

Do InitialProcessingDo InitialProcessing

Render RUI artifacts in browserRender RUI artifacts in browser

EventEvent -- onClick onClick captured incaptured in

RUIHandlerRUIHandler, handled , handled

as an EGL Functionas an EGL Function

Call a serviceCall a service (note that calling a (note that calling a

service does NOT preservice does NOT pre--reqreq. a . a

browser/user event)browser/user event)

EventEvent - Service call returnsService call returns

(EGL (EGL ““CallbackCallback”” Function Function

automatically invoked)automatically invoked)

��User clicks a

button

Events in the Events in the

BrowserBrowser

RUI Handler (EGL) codeRUI Handler (EGL) code

DatabaseDatabase

Enterprise DataEnterprise Data

Control immediately returns to the browser

EventEvent

PipelinePipeline


IBM Rational

● 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 RUIHandlerAyou will actually post a message (fire an event) on an EGL-supplied run-time system called the “InfoBusInfoBus ”.

● This is how it works.

� “Called” RUIHandler – typically in a “start-up” function subscribessubscribes to (registers a listener for) an InfoBus message identified by a string parameter value. This string is the event name.

� The “Calling” RUIHandler – in the EGL function that will be used to invoke the function in RUIHandlerB“publishespublishes ” a message to the InfoBus – with two parameters:

InfoBus – Calling From one RUIHandler or RUIWidget to Another

InfoBus Message Identifier (event)

EGL Function to invoke…named in subscribe

Parameter value passed in as the 2nd variable

InfoBus Message (event) Identifier(spelled exactly the same as the subscribe parameter)

EGL event handling Function. Note two Parameters


IBM Rational

InfoBus – One RUIHandler Invoking Functionality in Another““CalledCalled”” RUIHandler or RUIWidgetRUIHandler or RUIWidget

……

StartupStartup EGL FunctionEGL Function

InfoBus.subscribe(InfoBus.subscribe(““eventIDeventID””, , functionNamefunctionName););……

EGL Function named in subscribe(parm1, parm2)EGL Function named in subscribe(parm1, parm2)……

““CallingCalling”” RUIHandler or RUIWidgetRUIHandler or RUIWidget

……

EGL Function invoked by some event that should EGL Function invoked by some event that should

call/invoke the other RUIHandlercall/invoke the other RUIHandler

InfoBus.publish(InfoBus.publish(““eventIDeventID””, , variableValuevariableValue););

……

…… other functionalityother functionality

……

��User clicks a button

�InfoBusInfoBus

�Subscribe to (listen for)

any event named: eventIDeventID

�Publish a message for an event

named: eventIDeventID

The InfoBusInfoBus will find the namedlistener: “eventIDeventID” and will invokethe EGL function in the subscribesubscribestatement


IBM Rational

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


IBM Rational

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

Documents

ZOS15P2 – EGL et le WEB 2 - IBM Rational Rich UI Perspective ... but with different work bench views related to Web 2.0 ... play a huge role in the look and feel and behavior of