Getting Started with Ajax

Presentation Transcript

aka “2 Ajax Toolkits in 60 Minutes”

Ken Wilner

VP of TechnologyOpenEdge

Desktop

Smooth, dynamic, and fine grained interaction model
Asynchronous content retrieval

Traditional Browser

Ubiquitous client
Device independent

Desktop vs. Browser

Rich

AjaxClient

Traditional DesktopClient

+

Traditional BrowserClient

Gartner, Rich Internet Applications Are the Next Evolution of the Web, May 4, 2005

Reach

Innov-10: Getting Started With Ajax

Ajax

Traditional

Browser

User Interface

HTML/CSS/data

JavaScript event

Ajax Engine

HTTP(params)

HTML(data)/CSS

HTTP (data)

Transport Object

Web Server

Backend Business Application

Server

Traditional Browser-based vs. 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

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

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

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

Agenda

OpenLaszlo
Summary and Conclusions

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

Why YUI?

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

YUI Getting Started Demo

http://www.yahoo.com/

http://localhost/YUI_Demo/HelloWorld.html

http://developer.yahoo.com/yui/

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.onDataReturnPopulateTable, myDataTable);

2

WebSpeed

Request Message:

http://localhost/cgi-bin/cgiip.exe/WService=wsbroker1/GetCustomerBeginsWeb?StartsWith=AB

Response Message:

<Name>Abbeville Sporting G</Name>

<City>Abbeville</City>

</eeCustomer>…

<Name>Abc Sports</Name>

<City>Newtown</City>

</eeCustomer>

</dsCustomer>

YUI and OpenEdge

http://localhost/YUI_Demo/CustomerFiltered.html

YUI – More Info

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

Agenda

OpenLaszlo

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

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

OpenLaszlo Sample Applications

http://www.openlaszlo.org/demos#LZPIX

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

OpenLaszlo

OpenLaszlo Development Model

LZX file

OpenLaszlo Presentation Server

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

OpenLaszlo UI Widgets

OpenLaszlo Kitchen Sink

http://127.0.0.1:8080/lps-4.0.0/laszlo-explorer/index.jsp?bookmark=Demos

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

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

OpenLaszlo and OpenEdge

OpenLaszlo Client

Web Server

Submit

6

<dataSet> ContactsData = http://...

5

WebSpeed Messenger

1

4

3

2

<handler name="onclick" > contactsData.doRequest();</handler>

WebSpeed

OpenEdge Customer Filter Demo

View

VBox

HBox

Text

EditText

Button

Customer Name Filter

Submit

Grid

List of customers….

OpenLaszlo and OpenEdge

http://localhost:8080/lps-4.0.0/Exchange_Demo/CustomerFiltered.lzx

Other OpenLaszlo Features

Drawing API
Animation
Drag and drop
Persistent connections
Runtime constraint system

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

Agenda

OpenLaszlo

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

Questions?

Thank you foryour time