Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and...
Transcript of Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and...
![Page 1: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/1.jpg)
1
Ajax and Web 2.0 Related Frameworks and Toolkits
Dennis Chen
Director of Product Engineering / Potix Corporation
![Page 2: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/2.jpg)
Agenda• Ajax Introduction• Access Server Side (Java) API/Data/Service
> jQuery + DWR> GWT> ZK
2
> ZK
• Summary
![Page 3: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/3.jpg)
3
���� AJAX INTRODUCTION
![Page 4: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/4.jpg)
What is Ajax• Asynchronous JavaScript and XML• Browser asynchronously get data from a server
and update page dynamically without refreshing(reloading) the whole page
• Web Application Development Techniques
4
• Web Application Development Techniques> DHTML, CSS (Cascade Style Sheet)> Javascript and HTML DOM> Asynchronous XMLHttpRequest
![Page 5: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/5.jpg)
Traditional Web Application vs. Ajax
within a browser,
there is AJAX engine
5
![Page 6: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/6.jpg)
Ajax Interaction Example
6
Demo
![Page 7: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/7.jpg)
Challenge of Providing Ajax
• Technique Issue> JavaScript , DHTML and CSS
• Cross Browser Issue> IE 6,7,8 , Firefox 2,3 , Safari 3, Opera 9, Google
Chrome…
7
• Asynchronous Event and Data• Business Logic and Security• Maintenance
![Page 8: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/8.jpg)
Solutions : Ajax Frameworks / Toolkits• Client Side Toolkit
> jQuery, Prototype , …
• Client Side Framework> GWT ,YUI, Ext-JS, Dojo …
• Server Side Toolkit (Java)
8
• Server Side Toolkit (Java)> DWR…
• Server Side Framwork> ZK, ECHO2, ICEface ..
![Page 9: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/9.jpg)
9
����JQUERY + DWR
![Page 10: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/10.jpg)
What is jQuery• http://jquery.com/
• A JavaScript toolkit that simplifies the interaction between HTML and JavaScript.
• Lightweight and Client only
• Provides high level function to
10
• Provides high level function to > Simplify DOM access and alternation> Enable multiple handlers per event> Add effects/animations> Asynchronous interactions with server
• Solve browser incompatibilities
![Page 11: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/11.jpg)
Powerful Selector / Traversing API• Powerful Selector
$(“div”) // by tag$(“.errorbox”) //by css class$(“#cur_article”) //by element id
$(“form input”) //all input in form
Demo
11
• Traversing API$(“div”).eq(2) // div which on index 2$(“div”).not(".green, #blueone“)$(“div”).filter(fn)
Demo
Demo
![Page 12: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/12.jpg)
Handle Events//listen click
$(“#cur_article").click(function () {
$(this).toggleClass("highlight");
});
//listen click
$(“#target”).bind(“click”,fn);
12
//fire click event
$(“#target”).trigger(“click”);
//unlisten click
$(“#target”).unbind(“click”,fn);
Demo
![Page 13: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/13.jpg)
DOM Manipulation//change attribute
val = $(“#target”).attr(“a_attribute”);
$(“#targetX”).attr(“a_attribute”,val);
//change html content
val = $(“#target”).text();
$(“#targetY”).html(val);
13
//change style class
$(“#target”).addClass(“error”);
$(“#targetZ”).toggleClass(“error”);
Demo
![Page 14: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/14.jpg)
Other Features• Animation
> show(), hide(), fadein(), fadeout(), slideup(), slidedown()
• Widget> Accordion, Datepicker , Dialog, Slider, Tabs
Demo
14
• jQuery.ajax / Ajax Assistance> load(url, [data], callback)> $.get(url, [data], callback)> $.post(url, [data], callback)> $.ajax(options)
![Page 15: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/15.jpg)
What is DWR• http://directwebremoting.org/• Direct Web Remoting• RPC calls from client-side JavaScript to server-
side Java object’s API• Generates client stub (Proxy), which is a
15
• Generates client stub (Proxy), which is a JavaScript code
• Provides server side runtime to pass client RPC• Client stub (Proxy) handles marshalling of
parameters and return value
![Page 16: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/16.jpg)
Generate JavasSript Stub Code• Java
> AjaxService.getOptions():String[]
• Javascript Stub> AjaxService.getOptions(callback)> function callback(data){}
16image source : http://directwebremoting.org/
![Page 17: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/17.jpg)
Convert Data Object to JavaScript • Primitive Type• Date, Array, Collection• DOM Objects• JavaBean
17
![Page 18: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/18.jpg)
Stock Watcher
18
Ajax update
, repeatedly
![Page 19: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/19.jpg)
[Example] Stock Watcher• Server Side Java Code
public class StockService {
public StockPrice[] getPrice(String[] symbols) {
…
}
}
19
public class StockPrice {
private String symbol;
private double price;
private double change;
public String getSymbol(){…}
public double getPrice(){…}
public double getChange(){…}
…
}
![Page 20: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/20.jpg)
[Example] Stock Watcher (Cont. 1)• DWR Configuration – dwr.xml
<dwr><allow>
<create creator="new" javascript=" StockService "><param name="class" value=“ my.StockService " />
</create><convert converter="bean" match=“ my.StockPrice ">
20
<convert converter="bean" match=“ my.StockPrice "><param name="include" value=" symbol, price, change " />
</convert></allow>
</dwr>
![Page 21: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/21.jpg)
[Example] Stock Watcher (Cont. 2)• Html
<script src="jquery-1.2.6.min.js"></script>
<script src='dwr/interface/StockService.js '></script>
<script src='dwr/engine.js'></script>
…
<table >…<tbody id="stockList “ /></table>
<div>
<input id="symbol " type="text">
21
• Client Side Java Script
});
…SW.symbols = []; // a symbol array$("#btn") .click ( function(){
var symbol = $("#symbol").val() ;SW.symbols.push(symbol);StockService.getPrice(SW.symbols,SW.update);
});
<input id="symbol " type="text">
<button id="btn " >Add</button>
</div>
![Page 22: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/22.jpg)
[Example] Stock Watcher (Cont. 3)• Client Side Java Script
//ajax callback
SW.update = function(data) {
var stockList = $("#stockList") ;
stockList.empty();
for ( var i = 0; i < SW.symbols.length; i++) {
var row = "<tr>";
row += "<td>" + SW.symbols[i] + "</td>";
22
row += "<td>" + SW.symbols[i] + "</td>";
if (data) {
for ( var j = 0; j < data.length; j++) {
if (data[j].symbol == SW.symbols[i]) {
row += "<td>" + data[j].price.toFixed(2) + "</td>";
row += "<td>" + data[j].change.toFixed(2) + "</td>";
}
}
}
row += "</tr>";
stockList.append(row);
}
}Demo
![Page 23: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/23.jpg)
Code Structure
Your Code
(HTML, JavaScript)
Your Code
(Java)
Event
User
Event
23
jQuery DWR Stub
DWR Servlet
(Java)
Client Server
![Page 24: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/24.jpg)
It Helps, But…• jQuery + DWR helps you
> Manipulate HTML more easier> Do Ajax request more easier
• You still have to> Write Javascript
24
> Write Javascript> Manipulate HTML DOM> Build rich UIs
�<table/><div/><span/><input/>…
![Page 25: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/25.jpg)
25
���� GWT
![Page 26: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/26.jpg)
What is GWT• http://code.google.com/webtoolkit/• Google Web Toolkit • Write AJAX apps in the Java language• Component-base, Event-driven
26
• Compile, Deploy and Run in JavaScript, > Host mode , debug in Java
• Communicate with server through RPC> Simple/Default RPC> JSON
![Page 27: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/27.jpg)
What does the GWT code look like
27
![Page 28: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/28.jpg)
Component Base• Widgets
> Button, Textbox, Tree, RichTextArea …
• Panels / Layout> DockPanel, HorizontalPanel, TabPanel …
• Custom Widget
28
• Custom Widget> Composite
• Widget Gallery
![Page 29: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/29.jpg)
Event Driven• Click Listener Example
29
• Keyboard Listener Example
![Page 30: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/30.jpg)
Simple RPC Call• Both Client & Server Side
> An service interface extends RemoteServicepublic interface StockPriceService extends RemoteService {
StockPrice[] getPrices(String[] symbols);
}
30
• Server Side> A class extends RemoteServiceServlet and implement service
interfacepublic class StockPriceServiceImpl extends RemoteServiceServlet implements StockPriceService {
public StockPrice[] getPrices(String[] symbols) {
...
}
}
![Page 31: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/31.jpg)
Simple RPC Call (Cont.)• Client Side (Write in Java, will be compiled into JavaScript)
> A interface with API which is named according to service interface
> Invoke RPC
public interface StockPriceServiceAsync {
void getPrices( String[] symbols, AsyncCallback<StockPrice[]> callback);
}
31
> Invoke RPCStockPriceServiceAsync stockPriceSvc =
( StockPriceServiceAsync) GWT.create( StockPriceService.class);
AsyncCallback<StockPrice[]> callback = new AsyncCallback<StockPrice[]>() {
public void onFailure(Throwable caught) {
// do something with errors
}
public void onSuccess(StockPrice[] result) {
// update the watch list FlexTable
}
};
//in timer…
stockPriceSvc.getPrices(symbols, callback);
![Page 32: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/32.jpg)
[Example] Stock Watcher (GWT)
32
Demo
![Page 33: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/33.jpg)
Code Structure
Compiled JavaScript From
Your RPC Imp.
Your Code
(Java)
Event
User
Event
compile & deploy
33
GWT Widget / RPC GWT Servlet
JavaScript From Your Code
Imp.
(Java)
Client Server
![Page 34: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/34.jpg)
It Helps, But…• GWT helps You
> Write Ajax Application by Java Code> do RPC, not http request
• You still have to> Know which code run in client, which run in server
34
> Know which code run in client, which run in server�Not all Java Code can compile into JavaScript
> Integrate with your JEE Application�With HTML/JSP and other JavaScript.
![Page 35: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/35.jpg)
35
���� ZK – Direct RIA
![Page 36: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/36.jpg)
What is ZK• An Open Source Server Centric Ajax Framework• Pure Java (No need to write JavaScript)• Event-driven, Component-base• Markup & Scriptable
36
• Standards-based> XUL/XHTML> Java EE
• Extensible
![Page 37: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/37.jpg)
What does the ZK code look like• a XML/ZUML file (with .zul extension) handle all
things.
37
Demo
![Page 38: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/38.jpg)
What does the ZK code look like (Cont. 1)• ZUML as View
38
• Java Code as Controller
![Page 39: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/39.jpg)
What does the ZK code look like (Cont. 2)
• Java Code handle all the stuff
39
![Page 40: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/40.jpg)
Markup Language & Scriptable• Markup Language
> <window title=“Hello”/>> new Window().setTitle(“Hello”);
• Scriptable> <zscript>doSomething()</zscript>
40
> <zscript>doSomething()</zscript>> <button onClick=“doSomething()”/>> Language : Java / JavaScript / Ruby/ Groovy
• Easy to build UI template• Fast for prototyping
ZK Explorer
![Page 41: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/41.jpg)
Rich Component Set
Inputs
Combobox
Fileupload
41Chart
Checkbox & Radio
Window
Menu & Toolbar
Slider
Captcha
![Page 42: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/42.jpg)
Rich Component Set (Cont. 1)
Tabbox
Tree
42Grid & Listbox Layouts
![Page 43: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/43.jpg)
Rich Component Set (Cont. 2)
43
Google map
FCKEditor
Timeline
![Page 44: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/44.jpg)
Rich Component Set (Cont. 3)
44
Spreadsheet
![Page 45: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/45.jpg)
Event Driven• Component Events (name start with ‘on’)
> onClick, onSelect, onChange, …> In ZMUL
45
> In Java
• Fire the Event> Events.post(“onClick”,target,data);> Events.send(“onClick”,target,data);
![Page 46: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/46.jpg)
No need to do RPC• Accessing Object / API / Resource Directly• Use JDBC / Hibernate / JPA Directly• Spring Integration
> Context Management > IOC
46
> IOC> Security
![Page 47: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/47.jpg)
[Example]Stock Watcher (ZUML)
47
Demo
![Page 48: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/48.jpg)
48
![Page 49: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/49.jpg)
49
![Page 50: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/50.jpg)
Architecture
50
![Page 51: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/51.jpg)
Server Push• Reverse-Ajax, Server send content to the client
actively.
51
![Page 52: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/52.jpg)
Component Extension - Macro Component• Any ZUL page can become a Macro Component
52
![Page 53: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/53.jpg)
53
Demo
![Page 54: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/54.jpg)
Integrate with HTML• .zhtml
> use namespace ‘http://www.zkoss.org/2005/zul’ to mashup zul
54
Demo
![Page 55: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/55.jpg)
Integrate with JSP• Use tag lib: http://www.zkoss.org/jsp/zul
55
Demo
![Page 56: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/56.jpg)
ZK Studio – WYSIWYG IDE
56
![Page 57: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/57.jpg)
Why ZK• Direct RIA
> Simple programming model> Direct access database, enterprise resource> 200+ Ajax components> WYSIWYG visual Ajax editor> Mobile access
• Enterprise
57
• Enterprise> High security> Scalability, clustering and failover> Enterprise environment integration> Customizability
• Open> Open source> Standards base> 800,000+ downloads
![Page 58: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/58.jpg)
58
���� SUMMARY
![Page 59: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/59.jpg)
Summary• jQuery
> A client side JavaScript toolkit to help developer manipulate HTML> Provide a lots of utility function on JavaScript
• DWR> A toolkit to wrap server side Java API into a client side JavaScript RPC
API
GWT
59
• GWT> A client side Ajax framework, developer writes Java, the code is
compiled to be running in JavaScript.> Component base, use RPC to access Server Side API
• ZK> A server centric Ajax framework, pure java, developer no need to write
JavaScript.> Rich UI component set, markup language, scriptable, fast for prototyping
extensible , easy to access any server side API/resource/service.> Easy to integrate with other Java /JEE standard.
59
59
![Page 60: Ajax and Web 2.0 Related Frameworks and Toolkits · Ajax and Web 2.0 Related Frameworks and Toolkits ... dennischen@zkoss.org. ... > Write Ajax Application by Java Code](https://reader030.fdocuments.net/reader030/viewer/2022040122/5d3f403e88c993b73d8d02f7/html5/thumbnails/60.jpg)