Your SlideShare is downloading. ×
  • Like
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply


  • 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


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • We like traditional desktops because they have: Tabular data with selective drill down Instant feedback Asynchronous content retrieval
  • Yahoo Zimbra Commercial widget vendors like ActiveWidgets and TurboWidgets Ajax Toolkit – already saw Etc. Most talked about and popular toolkits are Dojo, Prototype, and Scriptaculous – going to highly a few of there major capabilities and will go back to simple example and show you some of those things in code Finally we will end the presentation by going back to that enterprise looking app and how you how I used ActiveWidgets and Prototype to build that awesome looking app
  • Go to sample applications in slide and example what it is all about Run hello world Open firefox Go to http://localhost/YUI_Demo/HelloWorld.html Show and explain javascript including call back mechanism Walk through YUI site Highlight the libraries that they have Mention the CSS files that they have Show extension documentation Click on calendar control and show all the info they have Discuss getting started info Show examples Point out cheatsheets Run YUI kitchen sink example Quick tour through YUI site to show the extensive documentation Run simple Hello world example Open code Walk through code Modify code to change background to green and to change size of modal dialog box Refresh
  • ~~~Fix build sequence
  • Start Firefox and run demo Show 4GL code Show client code Start with html as basic layout at bottom and show basic from – explain ids Explain onload event Button overlays html button Grid and datasource – XMLHTTPRequest underneath datasource
  • Run some sample OpenLaszlo applications
  • Start the Laszlo Server Using a text editor, e.g. Notepad Write program and save in LZX file Place on server Load in browser Debug using integrated debugger
  • Start up Laszlo server Run hello world example Startup firefox Goto http://localhost:8080/lps-4.0.0/Exchange_Demo/HelloWorld.lzx Goto http://localhost:8080/lps-4.0.0/Exchange_Demo/HelloWorld.lzx?lzr=dhtml and show it’s the same Explain how it works Modify view to specify background of red and refresh in browser Console Change source such that button is spelled bbutton and show that message comes up Change back Debugger Click on debugger to show that there is an integrated debugger Type diag.x and diag.y to show that it dumps out property values Move diag and show diag.x and diag.y again Modify modify button onclick to add ;Debug.write(“hello”) and show that it writes out to debugger window Point out there are deployment buttons as well!!
  • Click on components Click on sampler Click on general components and show date picker. Mention the others Click on floating list Click on menu
  • Make clearer what is AppServer So let put it all together and show it from a process flow perspective
  • Another way of doing this is screen capture and then draw boxes around each part
  • Indicate same server code as with YUI Start Firefox Run demo as - http://localhost:8080/lps-4.0.0/Exchange_Demo/CustomerFiltered.lzx?lzr=dhtml Show code in Eclipse
  • Need to work on this slide


  • 1. Getting Started with Ajax aka “2 Ajax Toolkits in 60 Minutes” Ken Wilner VP of Technology OpenEdge
  • 2. Desktop vs. Browser Reach Rich Traditional Desktop Client Traditional Browser Client Ajax Client Gartner, Rich Internet Applications Are the Next Evolution of the Web, May 4, 2005 +
    • Desktop
    • Smooth, dynamic, and fine grained interaction model
    • Asynchronous content retrieval
    • Traditional Browser
    • Ubiquitous client
    • Device independent
  • 3. Traditional Browser-based vs. Ajax User Interface Web Server Backend Business Application HTTP(params) HTML(data)/CSS Browser Server Traditional User Interface Ajax Engine Web Server Backend Business Application HTTP (data) Transport Object JavaScript event HTML/CSS/data Browser Server Ajax
  • 4. Ajax Technologies
    • JavaScript
      • General purpose programming language that runs in a browser
      • Aka JScript aka ECMAScript
    • Cascading Style Sheets (CSS)
      • Reusable styles for defining look of a Web page
      • Script based or JavaScript settable
    • Document Object Model (DOM)
      • XML parser
      • Built-in document object allows widget-tree walker
    • XMLHttpRequest
      • Communicate with a Web Server without a refresh
      • Synchronous and asynchronous
  • 5. Ajax Challenges
    • Layout issues
    • UI Controls
    • Server communication and data binding
    • Remote-site integration
    • Back button, bookmarks, and history
    • Internationalization
    • Accessing DOM
    • Browser-cross compatibility
  • 6. Ajax Frameworks and Libraries Remoting Toolkits Dojo,JSON-RPC,Prototype, Yahoo, DWR UI Widgets Dojo, Prototype, Backbase, Zimbra, ActiveWidgets, TurboWidgets, Yahoo UI Low Level Effects Dojo, Rico, Scriptaculous Development Environment and Tools OpenLaszlo Google Web Toolkit Backbase Community Edition JackBE General Interface JavaScript Utilities Prototype Dojo Yahoo
  • 7. Ajax Toolkits
    • Yahoo! User Interface
      • Set of JavaScript utilities and controls
    • OpenLaszlo
      • XML and JavaScript declarative programming model
    • Google Web Toolkit
      • Java-based development framework
  • 8. Agenda
    • Yahoo! User Interface
    • OpenLaszlo
    • Summary and Conclusions
  • 9. Yahoo! User Interface Library (YUI)
    • Open source – http:// /
    • Comprehensive set of Ajax focused JavaScript components
    • Great documentation!!
      • Cheat sheets
      • Training videos
  • 10. Why YUI?
    • Pure JavaScript-based library promotes easy integration
    • Modular design means ability to incrementally introduce components
    • Simplified XML-based data binding model
  • 11. YUI Getting Started Demo http:// / http:// localhost/YUI_Demo/HelloWorld.html http:// /
  • 12. YUI and OpenEdge Web Server WebSpeed Messenger YUI Client myDataSource.makeConnection( “StartsWith=“"custnam”, myDataTable.onDataReturnPopulateTable, myDataTable); Submit 1 5 2 WebSpeed 4 3 6 myDataSource = new YAHOO.util.DataSource("http://...); myDataSource.responseSchema = { resultNode: "eeCustomer", fields: ["Name","City",…] };
  • 13.
    • Request Message:
    • http://localhost/cgi-bin/cgiip.exe/WService=wsbroker1/GetCustomerBeginsWeb?StartsWith=AB
    • Response Message:
    • <dsCustomer>
    • <eeCustomer>
    •   <Name> Abbeville Sporting G </Name>
    •   <City> Abbeville </City>
    •   <State> SC </State>
    •   <Phone> (864) 459-9494 </Phone>
    •   <PostalCode> 29620 </PostalCode>
    •   <Country> USA </Country>
    •   </eeCustomer> …
    • <eeCustomer>
    •   <Name> Abc Sports </Name>
    •   <City> Newtown </City>
    •   <State> CA </State>
    •   <Phone> 714 434-3422 </Phone>
    •   <PostalCode> 90999 </PostalCode>
    •   <Country> USA </Country>
    •   </eeCustomer>
    •   </dsCustomer>
  • 14. YUI and OpenEdge http:// localhost/YUI_Demo/CustomerFiltered.html
  • 15. YUI – More Info
    • YUI Web Site http:// /
    • Yahoo! Developers Network http:// /community/
    • YUI Ext
  • 16. Agenda
    • Yahoo! User Interface
    • OpenLaszlo
    • Summary and Conclusions
  • 17. OpenLaszlo
    • Open Source –
    • Supports multiple platforms – minimal differences
      • Flash (swf) – no ActionScript
      • Ajax (dhtml)
    • Application written in LZX
      • XML
      • JavaScript
    • Rich library of controls and services
    • Well documented with good examples
    • Laszlo server compiles LZX into swf or dhtml
  • 18. Why OpenLaszlo?
    • Standard framework for building RIA-based applications
      • UI Components
      • Databinding
      • Remote communication
      • Events
    • Object-oriented XML markup language promotes extensibility
    • Declarative style aligns well with HTML and promotes productivity
    • Complete JavaScript api promotes data-driven dynamic programming
    • Richness of environment means minimal code writing versus other alternatives
  • 19. OpenLaszlo Sample Applications http://
  • 20. OpenLaszlo
    • Ajax
    • Open standard
    • Platform and device independence
    • Seamless integration with HTML
    • Flash
    • De-facto standard plugin (98% coverage)
    • High-level of consistency across browsers
    • Streaming audio and video
  • 21. OpenLaszlo Development Model LZX file OpenLaszlo Presentation Server
  • 22. OpenLaszlo Getting Started Demo http://localhost:8080/lps-4.0.0/Exchange_Demo/HelloWorld.lzx http://localhost:8080/lps-4.0.0/Exchange_Demo/HelloWorld.lzx?lzr= dhtml
  • 23. OpenLaszlo UI Widgets OpenLaszlo Kitchen Sink
  • 24. OpenLaszlo Declarative Programming
    • Views group components and layouts control positioning
    • UI components have events
    • Events logic typically defined via handlers using JavaScript
    • Styling
      • Fonts, fontsize, width, height, bgcolor, etc.
      • Set via attributes
      • Set programmatically
  • 25. OpenLaszlo Databinding
    • XML based
      • Embedded in application
      • XML file
      • Remote Web application
      • Web Service (proxied only)
    • Programming models – XPath-based
      • Declarative or Api driven
      • XPath to bind to UI components
      • Dataset/Datapath elements to point to data source
  • 26. OpenLaszlo and OpenEdge Web Server WebSpeed Messenger OpenLaszlo Client <handler name=&quot;onclick&quot; > contactsData.doRequest(); </handler> Submit 5 2 WebSpeed 4 3 <dataSet> ContactsData = http://... <grid datapath=“ContactsData:/*&quot;> <gridtext datapath=&quot;Name/text()“> Name </gridtext> 1 6
  • 27. OpenEdge Customer Filter Demo View VBox Grid List of customers…. HBox Text Customer Name Filter EditText Button Submit
  • 28. OpenLaszlo and OpenEdge http://localhost:8080/lps-4.0.0/Exchange_Demo/CustomerFiltered.lzx
  • 29. Other OpenLaszlo Features
    • Drawing API
    • Animation
    • Drag and drop
    • Persistent connections
    • Runtime constraint system
  • 30. OpenLaszlo – More Info
    • OpenLaszlo WebSite http://
    • Manning Press – Laszlo in Action http:// /
  • 31. Agenda
    • Yahoo! User Interface
    • OpenLaszlo
    • Summary and Conclusions
  • 32. In Summary
    • Ajax – rich UI for the Web
    • Looks to tools and frameworks to help you out – still evolving
    • Pick a toolkit that fits your style and requirements
    • You can start using with OpenEdge today
    • Start learning now!!!
  • 33. Questions?
  • 34. Thank you for your time
  • 35.