getting started with ajax l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Getting Started with Ajax PowerPoint Presentation
Download Presentation
Getting Started with Ajax

Loading in 2 Seconds...

play fullscreen
1 / 35

Getting Started with Ajax - PowerPoint PPT Presentation


  • 571 Views
  • Uploaded on

Getting Started with Ajax aka “2 Ajax Toolkits in 60 Minutes” Ken Wilner VP of Technology OpenEdge Desktop Smooth, dynamic, and fine grained interaction model Asynchronous content retrieval Traditional Browser Ubiquitous client Device independent Desktop vs. Browser Rich Ajax Client

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Getting Started with Ajax' - mike_john


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
getting started with ajax

Getting Started with Ajax

aka “2 Ajax Toolkits in 60 Minutes”

Ken Wilner

VP of TechnologyOpenEdge

desktop vs browser

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

traditional browser based vs ajax

Ajax

Traditional

Browser

Browser

User Interface

User Interface

HTML/CSS/data

JavaScript event

Ajax Engine

HTTP(params)

HTML(data)/CSS

HTTP (data)

Transport Object

Web Server

Web Server

Backend Business Application

Backend Business Application

Server

Server

Traditional Browser-based vs. Ajax

Innov-10: Getting Started With Ajax

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

Innov-10: Getting Started With Ajax

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

Innov-10: Getting Started With Ajax

ajax frameworks and libraries
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

Innov-10: Getting Started With Ajax

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

Innov-10: Getting Started With Ajax

agenda
Agenda
  • Yahoo! User Interface
  • OpenLaszlo
  • Summary and Conclusions

Innov-10: Getting Started With Ajax

yahoo user interface library yui
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

Innov-10: Getting Started With Ajax

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

Innov-10: Getting Started With Ajax

yui getting started demo
YUI Getting Started Demo

http://www.yahoo.com/

http://localhost/YUI_Demo/HelloWorld.html

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

Innov-10: Getting Started With Ajax

yui and openedge
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

Innov-10: Getting Started With Ajax

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

Innov-10: Getting Started With Ajax

yui and openedge14
YUI and OpenEdge

http://localhost/YUI_Demo/CustomerFiltered.html

Innov-10: Getting Started With Ajax

yui more info
YUI – More Info
  • YUI Web Sitehttp://developer.yahoo.com/yui/
  • Yahoo! Developers Networkhttp://developer.yahoo.com/community/
  • YUI Exthttp://www.yui-ext.com

Innov-10: Getting Started With Ajax

agenda16
Agenda
  • Yahoo! User Interface
  • OpenLaszlo
  • Summary and Conclusions

Innov-10: Getting Started With Ajax

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

Innov-10: Getting Started With Ajax

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

Innov-10: Getting Started With Ajax

openlaszlo sample applications
OpenLaszlo Sample Applications

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

Innov-10: Getting Started With Ajax

openlaszlo20
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

Innov-10: Getting Started With Ajax

openlaszlo development model
OpenLaszlo Development Model

LZX file

OpenLaszlo Presentation Server

Innov-10: Getting Started With Ajax

openlaszlo getting started demo
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

Innov-10: Getting Started With Ajax

openlaszlo ui widgets
OpenLaszlo UI Widgets

OpenLaszlo Kitchen Sink

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

Innov-10: Getting Started With Ajax

openlaszlo declarative programming
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

Innov-10: Getting Started With Ajax

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

Innov-10: Getting Started With Ajax

openlaszlo and openedge
OpenLaszlo and OpenEdge

OpenLaszlo Client

Web Server

Submit

6

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

<grid datapath=“ContactsData:/*"> <gridtext datapath="Name/text()“> Name </gridtext>

5

WebSpeed Messenger

1

4

3

2

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

WebSpeed

Innov-10: Getting Started With Ajax

openedge customer filter demo
OpenEdge Customer Filter Demo

View

VBox

HBox

Text

EditText

Button

Customer Name Filter

Submit

Grid

List of customers….

Innov-10: Getting Started With Ajax

openlaszlo and openedge28
OpenLaszlo and OpenEdge

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

Innov-10: Getting Started With Ajax

other openlaszlo features
Other OpenLaszlo Features
  • Drawing API
  • Animation
  • Drag and drop
  • Persistent connections
  • Runtime constraint system

Innov-10: Getting Started With Ajax

openlaszlo more info
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

Innov-10: Getting Started With Ajax

agenda31
Agenda
  • Yahoo! User Interface
  • OpenLaszlo
  • Summary and Conclusions

Innov-10: Getting Started With Ajax

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

Innov-10: Getting Started With Ajax

slide33

Questions?

Innov-10: Getting Started With Ajax

slide34

Thank you foryour time

Innov-10: Getting Started With Ajax