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

© 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 +

© 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

© 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

© 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

© 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

© 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

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

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

© 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

© 2007 Progress Software Corporation 11 Innov-10: Getting Started With Ajax YUI Getting Started Demo

© 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 WebSpeed myDataSource = new YAHOO.util.DataSource(" myDataSource.responseSchema = { resultNode: "eeCustomer", fields: ["Name","City",…] };

© 2007 Progress Software Corporation 13 Innov-10: Getting Started With Ajax Request Message: Response Message: Abbeville Sporting G Abbeville SC (864) USA … Abc Sports Newtown CA USA

© 2007 Progress Software Corporation 14 Innov-10: Getting Started With Ajax YUI and OpenEdge

© 2007 Progress Software Corporation 15 Innov-10: Getting Started With Ajax YUI – More Info  YUI Web Site  Yahoo! Developers Network  YUI Ext

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

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

© 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

© 2007 Progress Software Corporation 19 Innov-10: Getting Started With Ajax OpenLaszlo Sample Applications

© 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

© 2007 Progress Software Corporation 21 Innov-10: Getting Started With Ajax OpenLaszlo Development Model LZX file OpenLaszlo Presentation Server

© 2007 Progress Software Corporation 22 Innov-10: Getting Started With Ajax OpenLaszlo Getting Started Demo

© 2007 Progress Software Corporation 23 Innov-10: Getting Started With Ajax OpenLaszlo UI Widgets OpenLaszlo Kitchen Sink

© 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

© 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

© 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 = Name 1 6

© 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

© 2007 Progress Software Corporation 28 Innov-10: Getting Started With Ajax OpenLaszlo and OpenEdge

© 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

© 2007 Progress Software Corporation 30 Innov-10: Getting Started With Ajax OpenLaszlo – More Info  OpenLaszlo WebSite  Manning Press – Laszlo in Action

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

© 2007 Progress Software Corporation 32 Innov-10: Getting Started With Ajax Google Web Toolkit (GWT)  Open Source –  Ajax written in Java  Use your Java tool of choice – JDT  Provides Java to JavaScript compiler  Debug in Java

© 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)

© 2007 Progress Software Corporation 34 Innov-10: Getting Started With Ajax GWT Sample Applications

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

© 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

© 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

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

© 2007 Progress Software Corporation 39 Innov-10: Getting Started With Ajax GWT UI Widgets Google Kitchen Sink

© 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”);

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

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

© 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

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

© 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

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

© 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

© 2007 Progress Software Corporation 48 Innov-10: Getting Started With Ajax GWT – More Info  GWT WebSite  GWT Powered  GWT Blog  Manning Press – GWT in Action

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

© 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!!!

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

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

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