INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Ken Wilner VP of Technology Progress Software

© 2006 Progress Software Corporation2 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue UI Choice Today? Desktop App Vs. Web App

© 2006 Progress Software Corporation3 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Rich Internet Applications Today  Zimbra  Google Maps  OpenEdge

© 2006 Progress Software Corporation4 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Desktop App vs. Browser App. Reach Rich Traditional Desktop Client Traditional Browser Client AJAX Client Gartner, Rich Internet Applications Are the Next Evolution of the Web, May 4, 2005

© 2006 Progress Software Corporation5 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Traditional Browser-based Application Time user activity process request request HTML user activity process request request HTML user activity Browser Server Server-based Processing

© 2006 Progress Software Corporation6 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Application Model Time Browser Server AJAX Engine process data request requestdata user activity event user activity event user activity event user activity event datarequest1 N-tier-based Processing request2 data

© 2006 Progress Software Corporation7 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Agenda  Concepts and Technologies  Data Models  Frameworks and Libraries  For the Enterprise  Conclusion

© 2006 Progress Software Corporation8 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX in a Nutshell  Architectural design pattern for building Rich Internet Applications (RIA)  Coined by Jesse James Garrett of Adaptive Path in 2005  Asynchronous JavaScript and XML Not necessarily asynchronous Not necessarily XML Absolutely JavaScript  Browser behaves like a desktop client  Works with most browsers – some differences

© 2006 Progress Software Corporation9 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue 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

© 2006 Progress Software Corporation10 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue 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 call HTML/CSS/data Browser Server AJAX

© 2006 Progress Software Corporation11 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Request Processing and OpenEdge Web Server Web Services Adapter\ WebSpeed AppServer/ WebSpeed Browser AJAX Engine XMLHttpRequest CustNum Submit function callback() {…}

© 2006 Progress Software Corporation12 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Simple AJAX Code Demo

© 2006 Progress Software Corporation13 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Agenda  Concepts and Technologies  Data Models  Frameworks  For the Enterprise  Conclusion

© 2006 Progress Software Corporation14 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Data Binding Models  HTML Snippet  JavaScript  Encoded String  JSON – JavaScript Object Notation  XML  Web Services

© 2006 Progress Software Corporation15 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Data Binding Demo

© 2006 Progress Software Corporation16 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Data Binding Models

© 2006 Progress Software Corporation17 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Agenda  Concepts and Technologies  Data Models  Frameworks  For the Enterprise  Conclusion

© 2006 Progress Software Corporation18 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Frameworks and Libraries XMLHttpRequest Remoting Toolkits Dojo,JSON-RPC,Prototype, Zimbra UI Widgets Dojo, Prototype, Backbase, Zimbra, ActiveWidgets, TurboWidgets, Yahoo UI Low Level Effects Dojo, Rico, Scriptaculous Development Environment and Tools Ajax Toolkit Framework Backbase Community Edition JackBE General Interface MS Atlas JavaScript Utilities Prototype Dojo

© 2006 Progress Software Corporation19 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Dojo  UI Low Level Affects Animation affects Drag and drop Fade in/out  UI Widgets Tabs Trees Menu Combo box Comprehensive JavaScript Toolkit – largely undocumented

© 2006 Progress Software Corporation20 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Dojo  JavaScript Utilities Object inheritance and manipulation Strings Request timeouts Type checking Dom manipulation Data Structures Crypto JSON serialization/deserialization  Remoting Cross-browser XMLHttpRequest handling Comprehensive JavaScript Toolkit – largely undocumented

© 2006 Progress Software Corporation21 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Prototype Demo

© 2006 Progress Software Corporation22 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Prototype  Cross-browser XMLHttpRequest handling  Utility Routines Object creation and inheritance Array manipulation String manipulation  Simplified DOM API

© 2006 Progress Software Corporation23 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Prototype Demo

© 2006 Progress Software Corporation24 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Scriptaculous  Effects Library Size Position Transparency  Drag and Drop Library

© 2006 Progress Software Corporation25 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Prototype Demo

© 2006 Progress Software Corporation26 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Agenda  Concepts and Technologies  Data Models  Frameworks  For the Enterprise  Conclusion

© 2006 Progress Software Corporation27 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX For the Enterprise  Object-oriented library  Standard widgets Datagrid Tabs Tree Combo Etc.  Simple XML binding or record sets make ideal for Web services and Prodatasets ActiveWidgets

© 2006 Progress Software Corporation28 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX for the Enterprise Demo

© 2006 Progress Software Corporation29 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Agenda  Concepts and Technologies  Data Models  Frameworks  For the Enterprise  Conclusion

© 2006 Progress Software Corporation30 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Tools That You Want to Know!!!!  Firefox Dom Inspector  Firefox Firebug  Eclipse Ajax Toolkit Framework  Eclipse Web

© 2006 Progress Software Corporation31 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Resources  Web Sites  Books Pragmatic Ajax Ajax in Action Ajax for Hackers  Just Google for AJAX AJAX Javascript XMLHttpRequest -> 1.8M hits

© 2006 Progress Software Corporation32 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue In Summary  AJAX – rich UI for the Web  Start small – technology still immature  Moving your application to OpenEdge® Reference Architecture and SOA will get you ready for AJAX  You can use with OpenEdge today  Looks to tools and frameworks to help you out – still evolving  Start learning now!!!

© 2006 Progress Software Corporation33 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Questions?

© 2006 Progress Software Corporation34 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Thank you for your time

© 2006 Progress Software Corporation35 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue