EGL Rich UI – Overview and Demonstration

1. Sanjay Chandru Manager, Technology Ecosystem Aaron Allsbrook IT Specialist, Rational Technical Services EGL Rich UI – Overview and Demonstration

2. Not Just Buzzwords

3. Software as aSERVICE Service, not software COMMUNITYmechanisms Users add value • Recommendations • Social networking features • Tagging • User comments • Community rights management • User-driven adoption • Value on demand • Low cost of entry • Public infrastructure Easy to use, easy to remix SIMPLEuser interface and dataservices • Responsive UIs (AJAX) • Feeds (Atom, RSS) • Simple extensions • Mashups (REST APIs) Three software patterns driving Web 2.0 Web 2.0

4. 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 RichUI

5. 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. 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. One language end-to-end: EGL • One unifying IDE: RBD • Mobility of Skills • Innovative Editing Approach EGL Web2.0 Architecture The InternetPHP/ASP/J2EE/etc EGL EGL compilation compilation Browser Server COBOL + Java JavaScript J2EE JCL Layouts Plain HTML GWT JSF AJAXProxy SOA REST/SOAP dojo Volta System I JDBC mashups Silverlight Etc. System Z SOA SOA Flex Google Gears Tech Preview in RBD 7.1On Community Portal, 1Q08In RBD 7.51, 4Q08 In RBD 7.0 today

8. EGL: Shielding Complexity Business Developers Business Developers Widget Writer UI Produce SOA IBM ISVs EGL Widget Library Data + Logic EGL Consume COBOL Java RPG SQL REST XML SOAP JSON SOAP XML REST PHP JavaScript AJAX Dojo Google

9. EGL Rich UI – Simple Example (Displaying Data)

10. Rich UI Terms and Concepts – Rich UI 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. • 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. • 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. Terms and Concepts - continued • 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 – 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 – 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. Terms and Concepts - continued • 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. RichUI is able to interact with, and integrate with Silverlight widgets in your application:

13. JSF Application RUI Application RUI Handler RUI Handler • A typical RUI application might look like this: RUI Application RUIWidget (RUIHandler) RUIWidget (RUIHandler) LibraryUI Logic, Service Calls LibraryUI Logic, Service Calls JavaScript Java or COBOL Databases Mainframe Applications EGL Server Side Processes Services Libraries Programs External Files And MQ

14. 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. DEMO SCENARIO

16. Scenario Flow UI Rendering • Boxes (Containers) • Buttons • Text Field • Text Label Event Handling • TextField (onKeyUp) • Buttons (onClick) Text Validation • Text Input (Numeric) Service Calls • SOAP

17. Can You Tell The Difference EGL Rich UI Windows