Post on 28-Jan-2015
description
transcript
Getting Started with Ajax
aka “2 Ajax Toolkits in 60 Minutes”
Ken WilnerVP of Technology
OpenEdge
© 2007 Progress Software Corporation2 Innov-10: Getting Started With Ajax
Desktop vs. Browser
Reach
Rich
Traditional Desktop
Client
Traditional Browser
Client
AjaxClient
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 Corporation3 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 Corporation4 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 Corporation5 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 Corporation6 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
DevelopmentEnvironment
and Tools
OpenLaszlo
Google Web Toolkit
Backbase Community
Edition
JackBE
General Interface
JavaScript Utilities
Prototype
Dojo
Yahoo
© 2007 Progress Software Corporation7 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 Corporation8 Innov-10: Getting Started With Ajax
Agenda
Yahoo! User Interface OpenLaszlo Summary and Conclusions
© 2007 Progress Software Corporation9 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation10 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 Corporation11 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/
© 2007 Progress Software Corporation12 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",…]};
© 2007 Progress Software Corporation13 Innov-10: Getting Started With Ajax
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>
© 2007 Progress Software Corporation14 Innov-10: Getting Started With Ajax
YUI and OpenEdge
http://localhost/YUI_Demo/CustomerFiltered.html
© 2007 Progress Software Corporation15 Innov-10: Getting Started With Ajax
YUI – More Info
YUI Web Sitehttp://developer.yahoo.com/yui/
Yahoo! Developers Networkhttp://developer.yahoo.com/community/
YUI Exthttp://www.yui-ext.com
© 2007 Progress Software Corporation16 Innov-10: Getting Started With Ajax
Agenda
Yahoo! User Interface OpenLaszlo Summary and Conclusions
© 2007 Progress Software Corporation17 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation18 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 Corporation19 Innov-10: Getting Started With Ajax
OpenLaszlo Sample Applications
http://www.openlaszlo.org/demos#LZPIX
© 2007 Progress Software Corporation20 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 Corporation21 Innov-10: Getting Started With Ajax
OpenLaszlo Development Model
LZX file
OpenLaszlo Presentation
Server
© 2007 Progress Software Corporation22 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
© 2007 Progress Software Corporation23 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
© 2007 Progress Software Corporation24 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 Corporation25 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 Corporation26 Innov-10: Getting Started With Ajax
OpenLaszlo and OpenEdge
Web Server
WebSpeed Messenger
OpenLaszlo Client
<handler name="onclick" > contactsData.doRequest();</handler>
Submit
5
2 WebSpeed
4
3
<dataSet> ContactsData = http://...
<grid datapath=“ContactsData:/*"> <gridtext datapath="Name/text()“> Name </gridtext>
1
6
© 2007 Progress Software Corporation27 Innov-10: Getting Started With Ajax
OpenEdge Customer Filter Demo
View
VBox
Grid
List of customers….
HBox
TextCustomer Name
Filter
EditText Button
Submit
© 2007 Progress Software Corporation28 Innov-10: Getting Started With Ajax
OpenLaszlo and OpenEdge
http://localhost:8080/lps-4.0.0/Exchange_Demo/CustomerFiltered.lzx
© 2007 Progress Software Corporation29 Innov-10: Getting Started With Ajax
Other OpenLaszlo Features
Drawing API Animation Drag and drop Persistent connections Runtime constraint system
© 2007 Progress Software Corporation30 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation31 Innov-10: Getting Started With Ajax
Agenda
Yahoo! User Interface OpenLaszlo Summary and Conclusions
© 2007 Progress Software Corporation32 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 Corporation33 Innov-10: Getting Started With Ajax
Questions?
© 2007 Progress Software Corporation34 Innov-10: Getting Started With Ajax
Thank you foryour time
© 2007 Progress Software Corporation35 Innov-10: Getting Started With Ajax