INNOV-10: Getting Started with Ajax Ken Wilner VP of Technology.
-
Upload
andra-boone -
Category
Documents
-
view
215 -
download
0
Transcript of 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
+
© 2007 Progress Software Corporation3 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation4 Innov-10: Getting Started With 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
© 2007 Progress Software Corporation5 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation6 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation7 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation8 Innov-10: Getting Started With Ajax
Agenda
Yahoo! User Interface OpenLaszlo Google Web Toolkit Summary and Conclusions
© 2007 Progress Software Corporation9 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation10 Innov-10: Getting Started With Ajax
Why YUI?
Pure JavaScript-based library promotes easy integration
Modular design means ability to incrementally introduce components
Simplified XML-based data binding model
© 2007 Progress Software Corporation11 Innov-10: Getting Started With Ajax
YUI Getting Started Demo
http://www.yahoo.com/
http://localhost/YUI_Demo/HelloWorld.html
http://developer.yahoo.com/yui/
© 2007 Progress Software Corporation12 Innov-10: Getting Started With Ajax
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",…]};
© 2007 Progress Software Corporation13 Innov-10: Getting Started With Ajax
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>
© 2007 Progress Software Corporation14 Innov-10: Getting Started With Ajax
YUI and OpenEdge
http://localhost/YUI_Demo/CustomerFiltered.html
© 2007 Progress Software Corporation15 Innov-10: Getting Started With Ajax
YUI – More Info
YUI Web Sitehttp://developer.yahoo.com/yui/
Yahoo! Developers Networkhttp://developer.yahoo.com/community/
YUI Exthttp://www.yui-ext.com
© 2007 Progress Software Corporation16 Innov-10: Getting Started With Ajax
Agenda
Yahoo! User Interface OpenLaszlo Google Web Toolkit Summary and Conclusions
© 2007 Progress Software Corporation17 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation18 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation19 Innov-10: Getting Started With Ajax
OpenLaszlo Sample Applications
http://www.openlaszlo.org/demos#LZPIX
© 2007 Progress Software Corporation20 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation21 Innov-10: Getting Started With Ajax
OpenLaszlo Development Model
LZX file
OpenLaszlo Presentation
Server
© 2007 Progress Software Corporation22 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation23 Innov-10: Getting Started With Ajax
OpenLaszlo UI Widgets
OpenLaszlo Kitchen
Sink
http://127.0.0.1:8080/lps-4.0.0/laszlo-explorer/index.jsp?bookmark=Demos
© 2007 Progress Software Corporation24 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation25 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation26 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation27 Innov-10: Getting Started With Ajax
OpenEdge Customer Filter Demo
View
VBox
Grid
List of customers….
HBox
TextCustomer Name
Filter
EditText Button
Submit
© 2007 Progress Software Corporation28 Innov-10: Getting Started With Ajax
OpenLaszlo and OpenEdge
http://localhost:8080/lps-4.0.0/Exchange_Demo/CustomerFiltered.lzx
© 2007 Progress Software Corporation29 Innov-10: Getting Started With Ajax
Other OpenLaszlo Features
Drawing API Animation Drag and drop Persistent connections Runtime constraint system
© 2007 Progress Software Corporation30 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation31 Innov-10: Getting Started With Ajax
Agenda
Yahoo! User Interface OpenLaszlo Google Web Toolkit Summary and Conclusions
© 2007 Progress Software Corporation32 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation33 Innov-10: Getting Started With Ajax
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)
© 2007 Progress Software Corporation34 Innov-10: Getting Started With Ajax
GWT Sample Applications
http://code.google.com/webtoolkit/documentation/examples/desktopclone/demo.html
© 2007 Progress Software Corporation35 Innov-10: Getting Started With Ajax
Getting Started With GWT
projectCreator• Creates Eclipse project
applicationCreator• Creates sample project files
© 2007 Progress Software Corporation36 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation37 Innov-10: Getting Started With Ajax
GWT Runtime Models
Hosted – for testing• Runs as Java
• Runs in hosted browser
Web mode – for deployment• Compiled to JavaScript
• Runs in any browser
© 2007 Progress Software Corporation38 Innov-10: Getting Started With Ajax
GWT Getting Started Demo
© 2007 Progress Software Corporation39 Innov-10: Getting Started With Ajax
GWT UI Widgets
http://code.google.com/webtoolkit/documentation/examples/kitchensink/demo.html#Info
Google Kitchen
Sink
© 2007 Progress Software Corporation40 Innov-10: Getting Started With Ajax
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”);
© 2007 Progress Software Corporation41 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation42 Innov-10: Getting Started With Ajax
GWT RPC
Web Server
GWT Servlet
GWT Client
getCustomerBeginsWith(…,callback)
function callback(){…}
1
4
53
2
BeginsWithDataServiceImpl.java
Class customer
{ getCustomerBeginsWith(…)
{
}
}
Submit
© 2007 Progress Software Corporation43 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation44 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation45 Innov-10: Getting Started With Ajax
OpenEdge Customer Filter Demo
Vertical Panel
GridWidget
List of customers….
Horizontal Panel
Label
Customer Name Filter
TextBox Button
Submit
© 2007 Progress Software Corporation46 Innov-10: Getting Started With Ajax
GWT and OpenEdge
© 2007 Progress Software Corporation47 Innov-10: Getting Started With Ajax
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
© 2007 Progress Software Corporation48 Innov-10: Getting Started With Ajax
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/
© 2007 Progress Software Corporation49 Innov-10: Getting Started With Ajax
Agenda
Yahoo! User Interface OpenLaszlo Google Web Toolkit Summary and Conclusions
© 2007 Progress Software Corporation50 Innov-10: Getting Started With Ajax
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!!!
© 2007 Progress Software Corporation51 Innov-10: Getting Started With Ajax
Questions?
© 2007 Progress Software Corporation52 Innov-10: Getting Started With Ajax
Thank you foryour time
© 2007 Progress Software Corporation53 Innov-10: Getting Started With Ajax