Getting Started with Ajax

1. Getting Started with Ajax aka “2 Ajax Toolkits in 60 Minutes” Ken Wilner VP of TechnologyOpenEdge

2. Desktop • Smooth, dynamic, and fine grained interaction model • Asynchronous content retrieval Traditional Browser • Ubiquitous client • Device independent Desktop vs. Browser Rich AjaxClient Traditional DesktopClient + Traditional BrowserClient Gartner, Rich Internet Applications Are the Next Evolution of the Web, May 4, 2005 Reach Innov-10: Getting Started With Ajax

3. Ajax Traditional Browser Browser User Interface User Interface HTML/CSS/data JavaScript event Ajax Engine HTTP(params) HTML(data)/CSS HTTP (data) Transport Object Web Server Web Server Backend Business Application Backend Business Application Server Server Traditional Browser-based vs. Ajax Innov-10: Getting Started With 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 Innov-10: Getting Started With Ajax

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 Innov-10: Getting Started With Ajax

6. Ajax Frameworks and Libraries DevelopmentEnvironmentand Tools OpenLaszlo Google Web Toolkit Backbase Community Edition JackBE General Interface JavaScript Utilities Prototype Dojo Yahoo UI Widgets Dojo, Prototype, Backbase, Zimbra, ActiveWidgets, TurboWidgets, Yahoo UI Low Level Effects Dojo, Rico, Scriptaculous Remoting Toolkits Dojo,JSON-RPC,Prototype, Yahoo, DWR Innov-10: Getting Started With Ajax

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 Innov-10: Getting Started With Ajax

8. Agenda • Yahoo! User Interface • OpenLaszlo • Summary and Conclusions Innov-10: Getting Started With Ajax

9. Yahoo! User Interface Library (YUI) • Open source – http://developer.yahoo.com/yui/ • Comprehensive set of Ajax focused JavaScript components • Great documentation!! • Cheat sheets • Training videos Innov-10: Getting Started With Ajax

10. Why YUI? • Pure JavaScript-based library promotes easy integration • Modular design means ability to incrementally introduce components • Simplified XML-based data binding model Innov-10: Getting Started With Ajax

11. YUI Getting Started Demo http://www.yahoo.com/ http://localhost/YUI_Demo/HelloWorld.html http://developer.yahoo.com/yui/ Innov-10: Getting Started With Ajax

12. YUI and OpenEdge YUI Client Web Server Submit 6 myDataSource = new YAHOO.util.DataSource("http://...); myDataSource.responseSchema = { resultNode: "eeCustomer", fields: ["Name","City",…] }; 5 WebSpeed Messenger 1 4 3 myDataSource.makeConnection( “StartsWith=“"custnam”, myDataTable.onDataReturnPopulateTable, myDataTable); 2 WebSpeed Innov-10: Getting Started With Ajax

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> Innov-10: Getting Started With Ajax

14. YUI and OpenEdge http://localhost/YUI_Demo/CustomerFiltered.html Innov-10: Getting Started With Ajax

15. YUI – More Info • YUI Web Sitehttp://developer.yahoo.com/yui/ • Yahoo! Developers Networkhttp://developer.yahoo.com/community/ • YUI Exthttp://www.yui-ext.com Innov-10: Getting Started With Ajax

16. Agenda • Yahoo! User Interface • OpenLaszlo • Summary and Conclusions Innov-10: Getting Started With Ajax

17. OpenLaszlo • Open Source – http://www.openlaszlo.org • 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 Innov-10: Getting Started With Ajax

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 Innov-10: Getting Started With Ajax

19. OpenLaszlo Sample Applications http://www.openlaszlo.org/demos#LZPIX Innov-10: Getting Started With Ajax

20. 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 OpenLaszlo Innov-10: Getting Started With Ajax

21. OpenLaszlo Development Model LZX file OpenLaszlo Presentation Server Innov-10: Getting Started With Ajax

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 Innov-10: Getting Started With Ajax

23. OpenLaszlo UI Widgets OpenLaszlo Kitchen Sink http://127.0.0.1:8080/lps-4.0.0/laszlo-explorer/index.jsp?bookmark=Demos Innov-10: Getting Started With Ajax

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 Innov-10: Getting Started With Ajax

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 Innov-10: Getting Started With Ajax

26. OpenLaszlo and OpenEdge OpenLaszlo Client Web Server Submit 6 <dataSet> ContactsData = http://... <grid datapath=“ContactsData:/*"> <gridtext datapath="Name/text()“> Name </gridtext> 5 WebSpeed Messenger 1 4 3 2 <handler name="onclick" > contactsData.doRequest();</handler> WebSpeed Innov-10: Getting Started With Ajax

27. OpenEdge Customer Filter Demo View VBox HBox Text EditText Button Customer Name Filter Submit Grid List of customers…. Innov-10: Getting Started With Ajax

28. OpenLaszlo and OpenEdge http://localhost:8080/lps-4.0.0/Exchange_Demo/CustomerFiltered.lzx Innov-10: Getting Started With Ajax

29. Other OpenLaszlo Features • Drawing API • Animation • Drag and drop • Persistent connections • Runtime constraint system Innov-10: Getting Started With Ajax

30. OpenLaszlo – More Info • OpenLaszlo WebSitehttp://www.openlaszlo.org • Manning Press – Laszlo in Action http://www.manning.com/klein/http://www.manning.com/klein/klein_meapch1.pdf Innov-10: Getting Started With Ajax

31. Agenda • Yahoo! User Interface • OpenLaszlo • Summary and Conclusions Innov-10: Getting Started With Ajax

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!!! Innov-10: Getting Started With Ajax

33. Questions? Innov-10: Getting Started With Ajax

34. Thank you foryour time Innov-10: Getting Started With Ajax

35. Innov-10: Getting Started With Ajax