Rich UI – A Sneak Peek

  • 1,508 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,508
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • RichUI has also been used to generate Java/SWT bindings, hence the reason for swaying from the traditional name of RIA.
  • The AJAX Proxy (or RichUI Proxy) is only 10 lines of code in PHP and 40 in Java.
  • http://silverlight.net/

Transcript

  • 1. EGL Rich UI – Overview and Demonstration Sanjay Chandru Manager, Technology Ecosystem Aaron Allsbrook IT Specialist, Rational Technical Services
  • 2. Not Just Buzzwords
  • 3. Three software patterns driving Web 2.0 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
  • 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 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. 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. EGL Web2.0 Architecture COBOL Java J2EE EGL compilation Server JSF JDBC JCL SOA 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. EGL: Shielding Complexity Consume Data + Logic UI Produce JavaScript AJAX Dojo Google REST XML SOAP JSON SOAP XML REST PHP COBOL Java RPG SQL EGL Widget Library IBM Widget Writer ISVs SOA Business Developers Business Developers EGL
  • 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.
    • A typical RUI application might look like this:
    RUI Application RUI Handler RUI Handler JavaScript EGL Server Side Processes Services Libraries Programs Mainframe Applications Databases External Files And MQ Java or COBOL RUIWidget (RUIHandler) Library UI Logic, Service Calls Library UI Logic, Service Calls RUI Application JSF Application RUIWidget (RUIHandler)
  • 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 Event Handling Text Validation Service Calls
    • Boxes (Containers)
    • Buttons
    • Text Field
    • Text Label
    • TextField (onKeyUp)
    • Buttons (onClick)
    • Text Input (Numeric)
    • SOAP
  • 17. Can You Tell The Difference Windows EGL Rich UI