Getting Started with Ajax

1
Getting Started with Ajax

• aka 2 Ajax Toolkits in 60 Minutes

Ken Wilner
VP of TechnologyOpenEdge
2
Desktop vs. Browser
Rich
AjaxClient
Traditional DesktopClient

Traditional BrowserClient
Gartner, Rich Internet Applications Are the Next
Evolution of the Web, May 4, 2005
Reach
3
Traditional Browser-based vs. 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

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

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

8
Agenda

• Yahoo! User Interface
• OpenLaszlo
• Summary and Conclusions

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

10
Why YUI?

• Pure JavaScript-based library promotes easy
  integration
• Modular design means ability to incrementally
  introduce components
• Simplified XML-based data binding model

11
YUI Getting Started Demo
http//www.yahoo.com/ http//localhost/YUI_Demo/He
lloWorld.html http//developer.yahoo.com/yui/
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.onDataR
eturnPopulateTable, myDataTable)
2
WebSpeed
13

• Request Message
• http//localhost/cgi-bin/cgiip.exe/WServicewsbrok
  er1/GetCustomerBeginsWeb?StartsWithAB

• Response Message
• ltdsCustomergt
• lteeCustomergt
•   ltNamegtAbbeville Sporting Glt/Namegt
•   ltCitygtAbbevillelt/Citygt
•   ltStategtSClt/Stategt
•   ltPhonegt(864) 459-9494lt/Phonegt
•   ltPostalCodegt29620lt/PostalCodegt
•   ltCountrygtUSAlt/Countrygt
•   lt/eeCustomergt
• lteeCustomergt
•   ltNamegtAbc Sportslt/Namegt
•   ltCitygtNewtownlt/Citygt
•   ltStategtCAlt/Stategt
•   ltPhonegt714 434-3422lt/Phonegt
•   ltPostalCodegt90999lt/PostalCodegt
•   ltCountrygtUSAlt/Countrygt
•   lt/eeCustomergt

14
YUI and OpenEdge
http//localhost/YUI_Demo/CustomerFiltered.html
15
YUI More Info

• YUI Web Sitehttp//developer.yahoo.com/yui/
• Yahoo! Developers Networkhttp//developer.yahoo.c
  om/community/
• YUI Exthttp//www.yui-ext.com

16
Agenda

• Yahoo! User Interface
• OpenLaszlo
• Summary and Conclusions

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

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

19
OpenLaszlo Sample Applications
http//www.openlaszlo.org/demosLZPIX
20
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
OpenLaszlo Development Model
LZX file
OpenLaszlo Presentation Server
22
OpenLaszlo Getting Started Demo
http//localhost8080/lps-4.0.0/Exchange_Demo/Hell
oWorld.lzx http//localhost8080/lps-4.0.0/Exchang
e_Demo/HelloWorld.lzx?lzrdhtml
23
OpenLaszlo UI Widgets
OpenLaszlo Kitchen Sink
http//127.0.0.18080/lps-4.0.0/laszlo-explorer/in
dex.jsp?bookmarkDemos
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

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

26
OpenLaszlo and OpenEdge
OpenLaszlo Client
Web Server
Submit
6

ltdataSetgt ContactsData http//... ltgrid
datapathContactsData/"gt ltgridtext
datapath"Name/text()gt Name
lt/gridtextgt
5
WebSpeed Messenger
1
4
3
2
lthandler name"onclick" gt
contactsData.doRequest()lt/handlergt
WebSpeed
27
OpenEdge Customer Filter Demo
View
VBox
HBox
Text
EditText
Button
Customer Name Filter
Submit
Grid List of customers.
28
OpenLaszlo and OpenEdge
http//localhost8080/lps-4.0.0/Exchange_Demo/Cust
omerFiltered.lzx
29
Other OpenLaszlo Features

• Drawing API
• Animation
• Drag and drop
• Persistent connections
• Runtime constraint system

30
OpenLaszlo More Info

• OpenLaszlo WebSitehttp//www.openlaszlo.org
• Manning Press Laszlo in Action
  http//www.manning.com/klein/http//www.manning.c
  om/klein/klein_meapch1.pdf

31
Agenda

• Yahoo! User Interface
• OpenLaszlo
• Summary and Conclusions

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

33
Questions?
34
Thank you foryour time
35
(No Transcript)