innov-10: getting started with ajax ken wilner vp of technology

INNOV-10: Getting Started with Ajax

Ken WilnerVP of Technology

© 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 Google Web Toolkit 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



Google Web Toolkit (GWT)

Open Source – http://code.google.com/webtoolkit/ Ajax written in Java Use your Java tool of choice – JDT Provides Java to JavaScript compiler Debug in Java


Why GWT?

Better tools• Eclipse – code complete• Debugging• Refactoring

Static type checking Single technology

• Packaged widget set – SWT like• No DOM• CSS is optional

Simplified remote communication (RPC style services)


GWT Sample Applications

http://code.google.com/webtoolkit/documentation/examples/desktopclone/demo.html


Getting Started With GWT

projectCreator• Creates Eclipse project

applicationCreator• Creates sample project files


GWT Application Components

MyApp.java• Java client application

MyApp.html• html page in which client is to be rendered

MyApp.gwt.xml• Connects html file to java files that contains

entry point

• Maps service (RPC) request to Java implementation


GWT Runtime Models

Hosted – for testing• Runs as Java

• Runs in hosted browser

Web mode – for deployment• Compiled to JavaScript

• Runs in any browser


GWT Getting Started Demo


GWT UI Widgets

http://code.google.com/webtoolkit/documentation/examples/kitchensink/demo.html#Info

Google Kitchen

Sink


GWT Programming

Entry Point Contains

public void onModuleLoad(){

…}

Widgets have events

button.addClickListener(new ClickListener() { public void onClick(Widget sender) { if (label.getText().equals("")) label.setText("Hello World!"); else label.setText(""); }

CSS Styling – multiple approaches

• .gwt-Button { } • myButton.setStyleName(“big-button");• myButton.setWidth(“10em”);


GWT Programming

Get

GWT classes Java 1.4.2 java.lang java.util.* base datatypes serialization (RPC)

Don’t Get

Java 5 Reflection threads

Java Programming


GWT RPC

Web Server

GWT Servlet

GWT Client

getCustomerBeginsWith(…,callback)

function callback(){…}

1

4

53

2

BeginsWithDataServiceImpl.java

Class customer

{ getCustomerBeginsWith(…)

{

}

}

Submit


GWT RPC Architecture

Interface YourServiceAsync{ yourMethod(…, callback);}

class RemoteServiceServlet

{

}

class YourServiceImpl{

yourMethod(…)

{ ….} }

Interface RemoteService

{

}

interface YourService

{

yourMethod(…);}

ServerInterface

Client extendsextends

related implements

GWT

Written by you


GWT and OpenEdge

Web Server

GWT Servlet

GWT Client

getCustomerBeginsWith(…,callback)

function callback(){…}

1

6

75

2

BeginsWithDataServiceImpl.java

Class customer

{ getCustomerBeginsWith(…)

{

}

}AppServer

4

3

Open Client for

Java

Submit


OpenEdge Customer Filter Demo

Vertical Panel

GridWidget

List of customers….

Horizontal Panel

Label

Customer Name Filter

TextBox Button

Submit


GWT and OpenEdge


Other GWT Features

History, bookmarks, and the back button support• Api allows history tokens to be added• History listener allows application to react when token is

loaded

I18N• Build one property file for each locale, e.g. en_US, el_GR,

es_ES, etc.• Right one automatically loaded based on locale query

parameter

JSNI – JavaScript Native Interface• Mix Java and JavaScript code, e.g. Dojo, Prototype, Rico,

Yahoo, etc.• Wrap JavaScript with type safe Java code


GWT – More Info

GWT WebSitehttp://code.google.com/webtoolkit/index.html

GWT Poweredhttp://www.gwtpowered.org/

GWT Bloghttp://googlewebtoolkit.blogspot.com/

Manning Press – GWT in Actionhttp://www.manning.com/hanson/


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

innov-10: getting started with ajax ken wilner vp of technology

Documents