1. ® © 2008 IBM Corporation IBM Software Group EGL Simplify Innovation EGL International Conference Zurich Oct 20-21 2008 EGL Rich UI – Overview and Demonstration Sanjay Chandru Manager, Technology Ecosystem Aaron Allsbrook IT Specialist, Rational Technical Services

2. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation Not Just Buzzwords

3. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation Three software patterns driving Web 2.0 User-driven adoption Value on demand Low cost of entry Public infrastructure Software as a SERVICE Service, not software COMMUNITY mechanisms Recommendations Social networking features Tagging User comments Community rights management Users add value SIMPLE user interface and data services Responsive UIs (AJAX) Feeds (Atom, RSS) Simple extensions Mashups (REST APIs) Easy to use, easy to remix Web 2.0

4. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation Web 2.0 technologies highlight the next pendulum swing between client and server function. ClientServer Mainframe computing Dumb little green screen clients Omnipotent big mainframe servers Client-server computing Smart Personal Computer clients Simple file and database servers Web (1.0) computing Light Web Browser clients Rich application and database servers Web 2.0 computing Rich Internet Application clients Lighter application and database servers TUI CUI JSF RichUI

5. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation 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

6. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation 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)

7. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation EGL Web2.0 Architecture COBOLJava J2EE EGL compilation Server JSF JDBC JCL SOA JavaScript EGL compilation Browser + System I System Z AJAX Proxy The Internet PHP/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.1 On Community Portal, 1Q08 In RBD 7.51, 4Q08 One language end-to-end: EGL One unifying IDE: RBD Mobility of Skills Innovative Editing Approach

8. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation EGL: Shielding Complexity Consume Data + Logic UIProduce JavaScript AJAX Dojo Google REST XML SOAP JSON SOAP XML REST PHP COBOL Java RPG SQL EGL Widget Library IBM Widget Writer ISVs Business Developers EGL

9. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation EGL Rich UI – Simple Example (Displaying Data)

10. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation Rich UI Terms and Concepts – Rich UI and SOA services, and SOA Rich U.I. 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 U.I. 1.RESTful service calls 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 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. By utilizing web services, one can create a truly scalable system.

11. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation Terms and Concepts - continued AJAX AJAX – 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. Widget Widget – 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. DOJO DOJO – 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/

12. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation Terms and Concepts - continued JSON 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 Silverlight – is a new technology developed by Microsoft that is similar to Macromedias Flash. RichUI is able to interact with, and integrate with Silverlight widgets in your application:

13. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation A typical RUI application might look like this: RUI Application RUI Handler JavaScript EGL Server Side Processes Services LibrariesPrograms Mainframe Applications Databases External Files AndMQ Java or COBOL RUIWidget (RUIHandler) Library UI Logic, Service Calls RUI Application JSF Application RUIWidget (RUIHandler)

14. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation 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

15. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation DEMO SCENARIO

16. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation UI Rendering Event Handling Text Validation Service Calls Scenario Flow Boxes (Containers) Buttons Text Field Text Label TextField (onKeyUp) Buttons (onClick) Text Input (Numeric) SOAP

17. IBM Software Group | EGL Simplify Innovation IBM Software Group EGL Simplify Innovation Can You Tell The Difference Windows EGL Rich UI