1 / 35

Getting Started with Ajax

Getting Started with Ajax aka “2 Ajax Toolkits in 60 Minutes” Ken Wilner VP of Technology OpenEdge Desktop Smooth, dynamic, and fine grained interaction model Asynchronous content retrieval Traditional Browser Ubiquitous client Device independent Desktop vs. Browser Rich Ajax Client

mike_john
Download Presentation

Getting Started with Ajax

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related