İndir

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

+


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


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

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


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

Yahoo! User Interface 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

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",…]};


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>


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

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


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


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

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


OpenEdge Customer Filter Demo

View

VBox

Grid

List of customers….

HBox

TextCustomer Name

Filter

EditText Button

Submit


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



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


İndir

Documents

openedge http

openlaszlo open source

controls openlaszlo

openlaszlo databinding

info yui web site http

ajax frameworks

community yui ext http

started demo http