1 / 53

INNOV-10: Getting Started with Ajax

INNOV-10: Getting Started with Ajax. Ken Wilner. VP of Technology. Desktop Smooth, dynamic, and fine grained interaction model Asynchronous content retrieval. Traditional Browser Ubiquitous client Device independent. Desktop vs. Browser. Rich. Ajax Client. Traditional Desktop Client.

dmitri
Download Presentation

INNOV-10: 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. INNOV-10: Getting Started with Ajax Ken Wilner VP of Technology

  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 • Google Web Toolkit • 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 • Google Web Toolkit • 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 • Google Web Toolkit • Summary and Conclusions Innov-10: Getting Started With Ajax

  32. Google Web Toolkit (GWT) • Open Source – http://code.google.com/webtoolkit/ • Ajax written in Java • Use your Java tool of choice – JDT • Provides Java to JavaScript compiler • Debug in Java Innov-10: Getting Started With Ajax

  33. Why GWT? • Better tools • Eclipse – code complete • Debugging • Refactoring • Static type checking • Single technology • Packaged widget set – SWT like • No DOM • CSS is optional • Simplified remote communication (RPC style services) Innov-10: Getting Started With Ajax

  34. GWT Sample Applications http://code.google.com/webtoolkit/documentation/examples/desktopclone/demo.html Innov-10: Getting Started With Ajax

  35. Getting Started With GWT • projectCreator • Creates Eclipse project • applicationCreator • Creates sample project files Innov-10: Getting Started With Ajax

  36. GWT Application Components • MyApp.java • Java client application • MyApp.html • html page in which client is to be rendered • MyApp.gwt.xml • Connects html file to java files that contains entry point • Maps service (RPC) request to Java implementation Innov-10: Getting Started With Ajax

  37. GWT Runtime Models • Hosted – for testing • Runs as Java • Runs in hosted browser • Web mode – for deployment • Compiled to JavaScript • Runs in any browser Innov-10: Getting Started With Ajax

  38. GWT Getting Started Demo Innov-10: Getting Started With Ajax

  39. GWT UI Widgets Google Kitchen Sink http://code.google.com/webtoolkit/documentation/examples/kitchensink/demo.html#Info Innov-10: Getting Started With Ajax

  40. GWT Programming • Entry Point Contains public void onModuleLoad() { … } • Widgets have events button.addClickListener(new ClickListener() { publicvoid onClick(Widget sender) { if (label.getText().equals("")) label.setText("Hello World!"); else label.setText(""); } • CSS Styling – multiple approaches • .gwt-Button { } • myButton.setStyleName(“big-button"); • myButton.setWidth(“10em”); Innov-10: Getting Started With Ajax

  41. Get GWT classes Java 1.4.2 java.lang java.util.* base datatypes serialization (RPC) Don’t Get Java 5 Reflection threads GWT Programming Java Programming Innov-10: Getting Started With Ajax

  42. Submit GWT RPC GWT Client Web Server GWT Servlet 1 BeginsWithDataServiceImpl.java Class customer { getCustomerBeginsWith(…) { } } getCustomerBeginsWith(…,callback) 2 5 3 4 function callback(){…} Innov-10: Getting Started With Ajax

  43. GWT Interface RemoteService { } class RemoteServiceServlet { } Written by you interface YourService { yourMethod(…);} class YourServiceImpl{ yourMethod(…) { ….} } GWT RPC Architecture Interface Server Client extends extends Interface YourServiceAsync{ yourMethod(…, callback);} related implements Innov-10: Getting Started With Ajax

  44. Submit GWT and OpenEdge GWT Client Web Server GWT Servlet 1 BeginsWithDataServiceImpl.java Class customer { getCustomerBeginsWith(…) { } } getCustomerBeginsWith(…,callback) 2 3 7 5 4 AppServer 6 Open Client for Java function callback(){…} Innov-10: Getting Started With Ajax

  45. OpenEdge Customer Filter Demo Vertical Panel Horizontal Panel Label TextBox Button Submit CustomerNameFilter GridWidget List of customers…. Innov-10: Getting Started With Ajax

  46. GWT and OpenEdge Innov-10: Getting Started With Ajax

  47. Other GWT Features • History, bookmarks, and the back button support • Api allows history tokens to be added • History listener allows application to react when token is loaded • I18N • Build one property file for each locale, e.g. en_US, el_GR, es_ES, etc. • Right one automatically loaded based on locale query parameter • JSNI – JavaScript Native Interface • Mix Java and JavaScript code, e.g. Dojo, Prototype, Rico, Yahoo, etc. • Wrap JavaScript with type safe Java code Innov-10: Getting Started With Ajax

  48. GWT – More Info • GWT WebSitehttp://code.google.com/webtoolkit/index.html • GWT Poweredhttp://www.gwtpowered.org/ • GWT Bloghttp://googlewebtoolkit.blogspot.com/ • Manning Press – GWT in Actionhttp://www.manning.com/hanson/ Innov-10: Getting Started With Ajax

  49. Agenda • Yahoo! User Interface • OpenLaszlo • Google Web Toolkit • Summary and Conclusions Innov-10: Getting Started With Ajax

  50. 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

More Related