EGL Rich UI – Overview and Demonstration

®

© 2008 IBM Corporation

IBM Software Group EGL Simplify Innovation

EGL International ConferenceZurich Oct 20-21 2008

EGL Rich UI – Overview and Demonstration

Sanjay ChandruManager, Technology Ecosystem

Aaron AllsbrookIT Specialist, Rational Technical Services

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

Not Just Buzzwords


Three software patterns driving Web 2.0

•User-driven adoption

•Value on demand•Low cost of entry•Public

infrastructure

Software as aSERVICE

Service, not software

COMMUNITYmechanisms •Recommendation

s•Social networking

features•Tagging•User comments•Community rights

management

Users add value

SIMPLEuser interface

and dataservices

•Responsive UIs (AJAX)•Feeds (Atom, RSS)•Simple extensions•Mashups (REST APIs)

Easy to use, easy to remix

Web 2.0


Web 2.0 technologies highlight the next pendulum swing between client and server function.

Client ServerMainframe computing“Dumb” little green screen clientsOmnipotent big mainframe servers

Client-server computing“Smart” Personal Computer clientsSimple file and database servers

Web (1.0) computingLight Web Browser clientsRich application and database servers

Web 2.0 computingRich Internet Application clientsLighter application and database servers

TUI

CUI

JSF

RichUI


Forrester Research on Web 2.0

70% of Fortune 1000 companies want to standardize on deploying browser applications*

Browsers are catching up Still, majority of CIOs say the limits of HTML stops them* HTML is inflexible and Javascript is too complex Businesses are forced to trade off benefits of rich client vs

Web2.0 applications EGL Rich UI intends to provide the benefits of both

* Forrester Research – Urban Myth


What is RichUI RichUI 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, interactive site, such as: www.digg.com www.hulu.com

You might also have heard the term: “Rich Internet Application” (RIA)– which is often used synonymously with RichUI.

The perceived benefits of RichUI or RIA include: Improved user-responsiveness

The most successful RichUI 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)


EGL Web2.0 Architecture

COBOL Java

J2EE

EGL

compilation

Server

JSF

JDBC

JCL

SOA

SOA

JavaScript

EGL

compilation

Browser+

System I

System Z

AJAXProxy

The InternetPHP/ASP/J2EE/etc

Plain HTML

dojo

Silverlight

Flex

Layouts

REST/SOAP

mashups

SOA

GWT

Volta

Google Gears

Etc.

In RBD 7.0 today Tech Preview in RBD 7.1On Community Portal, 1Q08In RBD 7.51, 4Q08

• One language end-to-end: EGL• One unifying IDE: RBD• Mobility of Skills • Innovative Editing Approach


EGL: Shielding Complexity

Consume Data + Logic

UI Produce

JavaScriptAJAXDojoGoogle

REST XMLSOAP JSON

SOAPXMLRESTPHP

COBOLJava RPGSQL

EGL Widget Library

IBM

Widget Writer

ISVs

Business Developers

Business Developers

EGL


EGL Rich UI – Simple Example (Displaying Data)


Rich UI Terms and Concepts – Rich UI and SOA Rich U.I. 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 U.I.1.1. RESTful service callsRESTful 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.2. SOAP service callsSOAP 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.

By utilizing web services, one can create a truly scalable system.


Terms and Concepts - continued

AJAXAJAX – Stands for Asynchronous JavaScript and XML. RichUI makes extensive (almost wholesale) use of AJAX, utilizing it whenever it makes a service call. RichUI never executes a traditional HTML Form Submit.

WidgetWidget – A widget is a graphical unit 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. RichUI is able to interface with DOJO code in order to pull in some of their widgets. http://dojotoolkit.org/

http://dojotoolkit.org/


Terms and Concepts - continued

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. RichUI is able to interact with, and integrate with Silverlight widgets in your application:


A typical RUI application might look like this:

RUI Application

RUI Handler RUI Handler

JavaScript

EGL Server Side Processes

Services

Libraries Programs

Mainframe ApplicationsMainframe Applications

DatabasesDatabases

External FilesExternal FilesAnd And MQMQ

Java or COBOL

RUIWidget(RUIHandler)

LibraryUI Logic, Service Calls

LibraryUI Logic, Service Calls

RUI Application

JSF Application

RUIWidget(RUIHandler)


EGL Rich UI - Summary

Simple, declarative UI descriptions Resulting Javascript code deploys on light-

weight web server and runs in browser One language Simple metaphors Customizable Data-driven Declarative


DEMO SCENARIO


UI Rendering

Event Handling

Text Validation

Service Calls

Scenario Flow

Boxes (Containers)ButtonsText FieldText Label

TextField (onKeyUp)Buttons (onClick) Text Input

(Numeric)

SOAP


Can You Tell The Difference

WindowsEGL Rich UI

Documents

EGL Rich UI – Overview and Demonstration