1. INNOV-10: Getting Started with Ajax Ken Wilner VP of Technology

2. © 2007 Progress Software Corporation 2 Innov-10: Getting Started With Ajax 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. © 2007 Progress Software Corporation 3 Innov-10: Getting Started With Ajax 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. © 2007 Progress Software Corporation 4 Innov-10: Getting Started With Ajax 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. © 2007 Progress Software Corporation 5 Innov-10: Getting Started With Ajax 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. © 2007 Progress Software Corporation 6 Innov-10: Getting Started With Ajax 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. © 2007 Progress Software Corporation 7 Innov-10: Getting Started With Ajax 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. © 2007 Progress Software Corporation 8 Innov-10: Getting Started With Ajax Agenda  Yahoo! User Interface  OpenLaszlo  Google Web Toolkit  Summary and Conclusions

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

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

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

12. © 2007 Progress Software Corporation 12 Innov-10: Getting Started With Ajax 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. © 2007 Progress Software Corporation 13 Innov-10: Getting Started With Ajax Request Message: http://localhost/cgi-bin/cgiip.exe/WService=wsbroker1/GetCustomerBeginsWeb?StartsWith=AB Response Message: Abbeville Sporting G Abbeville SC (864) 459-9494 29620 USA … Abc Sports Newtown CA 714 434-3422 90999 USA

14. © 2007 Progress Software Corporation 14 Innov-10: Getting Started With Ajax YUI and OpenEdge http://localhost/YUI_Demo/CustomerFiltered.html

15. © 2007 Progress Software Corporation 15 Innov-10: Getting Started With Ajax YUI – More Info  YUI Web Site http://developer.yahoo.com/yui/ http://developer.yahoo.com/yui/  Yahoo! Developers Network http://developer.yahoo.com/community/ http://developer.yahoo.com/community/  YUI Ext http://www.yui-ext.com http://www.yui-ext.com

16. © 2007 Progress Software Corporation 16 Innov-10: Getting Started With Ajax Agenda  Yahoo! User Interface  OpenLaszlo  Google Web Toolkit  Summary and Conclusions

17. © 2007 Progress Software Corporation 17 Innov-10: Getting Started With Ajax OpenLaszlo  Open Source – http://www.openlaszlo.orghttp://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

18. © 2007 Progress Software Corporation 18 Innov-10: Getting Started With Ajax 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. © 2007 Progress Software Corporation 19 Innov-10: Getting Started With Ajax OpenLaszlo Sample Applications http://www.openlaszlo.org/demos#LZPIX

20. © 2007 Progress Software Corporation 20 Innov-10: Getting Started With Ajax 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. © 2007 Progress Software Corporation 21 Innov-10: Getting Started With Ajax OpenLaszlo Development Model LZX file OpenLaszlo Presentation Server

22. © 2007 Progress Software Corporation 22 Innov-10: Getting Started With Ajax 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. © 2007 Progress Software Corporation 23 Innov-10: Getting Started With Ajax OpenLaszlo UI Widgets OpenLaszlo Kitchen Sink http://127.0.0.1:8080/lps-4.0.0/laszlo-explorer/index.jsp?bookmark=Demos

24. © 2007 Progress Software Corporation 24 Innov-10: Getting Started With Ajax 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. © 2007 Progress Software Corporation 25 Innov-10: Getting Started With Ajax 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. © 2007 Progress Software Corporation 26 Innov-10: Getting Started With Ajax OpenLaszlo and OpenEdge Web Server WebSpeed Messenger OpenLaszlo Client contactsData.doRequest(); Submit 5 2 WebSpeed 4 3 ContactsData = http://... Name 1 6

27. © 2007 Progress Software Corporation 27 Innov-10: Getting Started With Ajax OpenEdge Customer Filter Demo View VBox Grid List of customers…. HBox Text Customer Name Filter EditTextButton Submit

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

29. © 2007 Progress Software Corporation 29 Innov-10: Getting Started With Ajax Other OpenLaszlo Features  Drawing API  Animation  Drag and drop  Persistent connections  Runtime constraint system

30. © 2007 Progress Software Corporation 30 Innov-10: Getting Started With Ajax OpenLaszlo – More Info  OpenLaszlo WebSite http://www.openlaszlo.org http://www.openlaszlo.org  Manning Press – Laszlo in Action http://www.manning.com/klein/ http://www.manning.com/klein/klein_meapch1.pdf http://www.manning.com/klein/ http://www.manning.com/klein/klein_meapch1.pdf

31. © 2007 Progress Software Corporation 31 Innov-10: Getting Started With Ajax Agenda  Yahoo! User Interface  OpenLaszlo  Google Web Toolkit  Summary and Conclusions

32. © 2007 Progress Software Corporation 32 Innov-10: Getting Started With Ajax 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

33. © 2007 Progress Software Corporation 33 Innov-10: Getting Started With Ajax 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)

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

35. © 2007 Progress Software Corporation 35 Innov-10: Getting Started With Ajax Getting Started With GWT  projectCreator Creates Eclipse project  applicationCreator Creates sample project files

36. © 2007 Progress Software Corporation 36 Innov-10: Getting Started With Ajax 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

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

38. © 2007 Progress Software Corporation 38 Innov-10: Getting Started With Ajax GWT Getting Started Demo

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

40. © 2007 Progress Software Corporation 40 Innov-10: Getting Started With Ajax GWT Programming  Entry Point Contains public void onModuleLoad() { … }  Widgets have events button.addClickListener(new ClickListener() { public void 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”);

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

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

43. © 2007 Progress Software Corporation 43 Innov-10: Getting Started With Ajax GWT RPC Architecture Interface YourServiceAsync { yourMethod(…, callback); } class RemoteServiceServlet { } class YourServiceImpl { yourMethod(…) { ….} } Interface RemoteService { } interface YourService { yourMethod(…); } ServerInterface Client extends relatedimplements GWT Written by you

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

45. © 2007 Progress Software Corporation 45 Innov-10: Getting Started With Ajax OpenEdge Customer Filter Demo Vertical Panel GridWidget List of customers…. Horizontal Panel Label Customer Name Filter TextBoxButton Submit

46. © 2007 Progress Software Corporation 46 Innov-10: Getting Started With Ajax GWT and OpenEdge

47. © 2007 Progress Software Corporation 47 Innov-10: Getting Started With Ajax 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

48. © 2007 Progress Software Corporation 48 Innov-10: Getting Started With Ajax GWT – More Info  GWT WebSite http://code.google.com/webtoolkit/index.html http://code.google.com/webtoolkit/index.html  GWT Powered http://www.gwtpowered.org/ http://www.gwtpowered.org/  GWT Blog http://googlewebtoolkit.blogspot.com/ http://googlewebtoolkit.blogspot.com/  Manning Press – GWT in Action http://www.manning.com/hanson/ http://www.manning.com/hanson/

49. © 2007 Progress Software Corporation 49 Innov-10: Getting Started With Ajax Agenda  Yahoo! User Interface  OpenLaszlo  Google Web Toolkit  Summary and Conclusions

50. © 2007 Progress Software Corporation 50 Innov-10: Getting Started With Ajax 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!!!

51. © 2007 Progress Software Corporation 51 Innov-10: Getting Started With Ajax Questions?

52. © 2007 Progress Software Corporation 52 Innov-10: Getting Started With Ajax Thank you for your time

53. © 2007 Progress Software Corporation 53 Innov-10: Getting Started With Ajax