potix


Open Source Ajax -
Client/Server Side Solutions

    Robbie Cheng
    Evangelist, Potix Corporation
    robbiechen...
Agenda
 AjaxIntroduction
 Access Server Side (Java)
  API/Data/Service
   jQuery   + DWR
   GWT

   ZK

 Summary



...
 AJAX INTRODUCTION


                      potix
What is Ajax
     Asynchronous JavaScript and XML
 


     Browser asynchronously get data from a
 
     server and upda...
Traditional Web Application vs. Ajax

                              within a browser,
                             there i...
Ajax Interaction Example
                           Demo




                                  potix
Challenge of Providing Ajax

  Technique   Issue
    JavaScript   , DHTML and CSS
  Cross   Browser Issue
    IE6,7,8 ...
Solutions : Ajax Frameworks /
Toolkits
  Client   Side Toolkit
    jQuery,   Prototype , …
  Client   Side Framework
  ...
JQUERY + DWR


                potix
What is jQuery
   http://jquery.com/
 
  A JavaScript toolkit that simplifies the
   interaction between HTML and JavaSc...
Powerful Selector / Traversing API

  Powerful   Selector
  $(“div”) // by tag
  $(“.errorbox”) //by css class
  $(“#cur_...
Handle Events
 //listen click
 $(“#cur_articlequot;).click(function () {
    $(this).toggleClass(quot;highlightquot;);
 })...
DOM Manipulation
 //change attribute
 val = $(“#target”).attr(“a_attribute”);
 $(“#targetX”).attr(“a_attribute”,val);

 //...
Other Features
  Animation                                 Demo
    show(),   hide(), fadein(), fadeout(), slideu
     p...
What is DWR
   http://directwebremoting.org/
 
  Direct Web Remoting
  RPC calls from client-side JavaScript to
   serv...
Generate JavaSript Stub Code

  Java
       AjaxService.getOptions():String[]
   


  Javascript       Stub
       Ajax...
Convert Data Object to JavaScript

  PrimitiveType
  Date, Array, Collection
  DOM Objects
  JavaBean




            ...
Stock Watcher




                Ajax update
                , repeatedly




                               potix
[Example] Stock Watcher

  Server     Side Java Code
 public class StockService {
     public StockPrice[] getPrice(Strin...
[Example] Stock Watcher (Cont. 1)

  DWR        Configuration – dwr.xml
 <dwr>
   <allow>
     <create creator=quot;newqu...
[Example] Stock Watcher (Cont. 2)

  Html
 <script src=quot;jquery-1.2.6.min.jsquot;></script>
 <script src='dwr/interfac...
[Example] Stock Watcher (Cont. 3)
                                                                                        ...
Code Structure

  User
  Event
             Your Code           Your
                                 Code
          (HTML...
It Helps, But…

  jQuery    + DWR helps you
    Manipulate HTML easier
    Do Ajax request easier

  You   still have ...
 GWT


        potix
What is GWT

  http://code.google.com/webtoolkit/
  Google Web Toolkit
  Write AJAX apps in the Java language
  Compon...
What does the GWT code look like




                              potix
Component Base

  Widgets
    Button,   Textbox, Tree, RichTextArea …
  Panels   / Layout
    DockPanel,   HorizontalP...
Event Driven
     Click Listener Example
 




     Keyboard Listener Example
 




                                 pot...
Simple RPC Call

  Both    Client & Server Side
  public interface StockPriceService extends RemoteService {
       An se...
Simple RPC Call (Cont.)
         Client Side (Write in Java, will be compiled into JavaScript)
     
              A inte...
[Example] Stock Watcher (GWT)




                       Demo

                                potix
Code Structure
                              Your Code
                                (Java)

                           ...
It Helps, But…

  GWT    helps You
    WriteAjax Application by Java Code
    RPC, no http request

  You   still have...
 ZK – Direct RIA


                    potix
What is ZK
     An Open Source Server Centric Ajax Framework
 
     Pure Java (No need to write JavaScript)
 
     Event...
What does the ZK code look like
     a XML/ZUML file (with .zul extension) handle all things.
 




                     ...
What does the ZK code look like
(Cont. 1)
     ZUML as View
 




     Java Code as Controller
 




                   ...
What does the ZK code look like
(Cont. 2)
    Java Code handle all the stuff





                                     po...
Markup Language & Scriptable
     Markup Language
 
         <window title=“Hello”/>
     

         new Window().setTit...
Rich Component Set

                                                                   Combobox



                       ...
Rich Component Set (Cont. 1)

                                 Layouts


                       Tree

       Tabbox




  ...
Rich Component Set (Cont. 2)




    FCKEditor




                           Google map




                             ...
Rich Component Set (Cont. 3)




                 Spreadsheet
                               potix
Event Driven
    Component Events (name start with „on‟)

        onClick, onSelect, onChange, …
    

        In ZMUL
 ...
No more RPC!

  Accessing    Object / API / Resource
   Directly
  Use JDBC / Hibernate / JPA Directly
  Spring Integra...
[Example]Stock Watcher (ZUML)




                                potix
                       Demo
potix
potix
Architecture




               potix
Server Push

  Reverse-Ajax,  Server send content to
  the client actively.




                                         ...
Component Extension - Macro
Component
     Any ZUL page can become a Macro Component
 




                              ...
potix
Demo
Integrate with HTML
                                                                 Demo
     .zhtml
 
         use name...
Integrate with JSP
                                                 Demo
     Use tag lib: http://www.zkoss.org/jsp/zul
 ...
ZK Studio – WYSIWYG IDE




                          potix
 SUMMARY


            potix
Summary
     jQuery
 
          A client side JavaScript toolkit to help developer manipulate HTML
      

          Pro...
Thank You!
http://www.zkoss.org




                       potix
Upcoming SlideShare
Loading in …5
×

Open Source Ajax Solution @OSDC.tw 2009

3,183 views
2,578 views

Published on

Present Open Source Ajax Solutions at OSDC.tw 2009.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,183
On SlideShare
0
From Embeds
0
Number of Embeds
94
Actions
Shares
0
Downloads
46
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Open Source Ajax Solution @OSDC.tw 2009

  1. potix Open Source Ajax - Client/Server Side Solutions Robbie Cheng Evangelist, Potix Corporation robbiecheng@zkoss.org Copyright © 2009 Potix Corporation
  2. Agenda  AjaxIntroduction  Access Server Side (Java) API/Data/Service  jQuery + DWR  GWT  ZK  Summary potix
  3.  AJAX INTRODUCTION potix
  4. 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  DHTML, CSS (Cascade Style Sheet)  Javascript and HTML DOM  Asynchronous XMLHttpRequest  potix
  5. Traditional Web Application vs. Ajax within a browser, there is AJAX engine potix
  6. Ajax Interaction Example Demo potix
  7. Challenge of Providing Ajax  Technique Issue  JavaScript , DHTML and CSS  Cross Browser Issue  IE6,7,8 , Firefox 2,3 , Safari 3, Opera 9, Google Chrome…  Asynchronous Event and Data  Business Logic and Security  Maintenance potix
  8. Solutions : Ajax Frameworks / Toolkits  Client Side Toolkit  jQuery, Prototype , …  Client Side Framework  GWT ,YUI, Ext-JS, Dojo …  Server Side Toolkit (Java)  DWR…  Server Side Framwork  ZK, ECHO2, ICEface .. potix
  9. JQUERY + DWR potix
  10. 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 Simplify DOM access and alternation  Enable multiple handlers per event  Add effects/animations  Asynchronous interactions with server  Solve browser incompatibilities  potix
  11. Powerful Selector / Traversing API  Powerful Selector $(“div”) // by tag $(“.errorbox”) //by css class $(“#cur_article”) //by element id Demo $(“form input”) //all input in form  Traversing API $(“div”).eq(2) // div which on index 2 $(“div”).not(quot;.green, #blueone“) $(“div”).filter(fn) Demo potix
  12. Handle Events //listen click $(“#cur_articlequot;).click(function () { $(this).toggleClass(quot;highlightquot;); }); //listen click $(“#target”).bind(“click”,fn); //fire click event $(“#target”).trigger(“click”); //unlisten click $(“#target”).unbind(“click”,fn); Demo potix
  13. DOM Manipulation //change attribute val = $(“#target”).attr(“a_attribute”); $(“#targetX”).attr(“a_attribute”,val); //change html content val = $(“#target”).text(); $(“#targetY”).html(val); //change style class $(“#target”).addClass(“error”); $(“#targetZ”).toggleClass(“error”); Demo potix
  14. Other Features  Animation Demo  show(), hide(), fadein(), fadeout(), slideu p(), slidedown()  Widget  Accordion, Datepicker , Dialog, Slider, Tabs  jQuery.ajax / Ajax Assistance  load(url, [data], callback)  $.get(url, [data], callback)  $.post(url, [data], callback)  $.ajax(options) potix
  15. 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 JavaScript code  Provides server side runtime to pass client RPC  Client stub (Proxy) handles marshalling of parameters and return value potix
  16. Generate JavaSript Stub Code  Java AjaxService.getOptions():String[]   Javascript Stub AjaxService.getOptions(callback)  function callback(data){}  potix image source : http://directwebremoting.org/
  17. Convert Data Object to JavaScript  PrimitiveType  Date, Array, Collection  DOM Objects  JavaBean potix
  18. Stock Watcher Ajax update , repeatedly potix
  19. [Example] Stock Watcher  Server Side Java Code public class StockService { public StockPrice[] getPrice(String[] symbols){ … } } public class StockPrice { private String symbol; private double price; private double change; public String getSymbol(){…} public double getPrice(){…} potix public double getChange(){…} …
  20. [Example] Stock Watcher (Cont. 1)  DWR Configuration – dwr.xml <dwr> <allow> <create creator=quot;newquot; javascript=quot;StockServicequot;> <param name=quot;classquot; value=“my.StockServicequot; /> </create> <convert converter=quot;beanquot; match=“my.StockPricequot;> <param name=quot;includequot; value=quot;symbol, price, changequot; /> </convert> </allow> </dwr> potix
  21. [Example] Stock Watcher (Cont. 2)  Html <script src=quot;jquery-1.2.6.min.jsquot;></script> <script src='dwr/interface/StockService.js'></script> <script src='dwr/engine.js'></script> … <table >…<tbody id=quot;stockList“ /></table> <div> <input id=quot;symbolquot; type=quot;textquot;> <button id=quot;btnquot; >Add</button> </div> …  Client Side Java Script SW.symbols = []; // a symbol array $(quot;#btnquot;).click( function(){ var symbol = $(quot;#symbolquot;).val(); SW.symbols.push(symbol); StockService.getPrice(SW.symbols,SW.update); }); potix
  22. [Example] Stock Watcher (Cont. 3) Demo  Client Side Java Script //ajax callback SW.update = function(data) { var stockList = $(quot;#stockListquot;); stockList.empty(); for ( var i = 0; i < SW.symbols.length; i++) { var row = quot;<tr>quot;; row += quot;<td>quot; + SW.symbols[i] + quot;</td>quot;; if (data) { for ( var j = 0; j < data.length; j++) { if (data[j].symbol == SW.symbols[i]) { row += quot;<td>quot; + data[j].price.toFixed(2) + quot;</td>quot;; row += quot;<td>quot; + data[j].change.toFixed(2) + quot;</td>quot;; } } } row += quot;</tr>quot;; stockList.append(row); } } potix
  23. Code Structure User Event Your Code Your Code (HTML, JavaScript) (Java) jQuery DWR DWR Stub Servlet Server Client potix
  24. It Helps, But…  jQuery + DWR helps you  Manipulate HTML easier  Do Ajax request easier  You still have to  Write Javascript  Manipulate HTML DOM  Build rich UIs <table/><div/><span/><input/>…  potix
  25.  GWT potix
  26. What is GWT  http://code.google.com/webtoolkit/  Google Web Toolkit  Write AJAX apps in the Java language  Component-base, Event-driven  Compile, Deploy and Run in JavaScript,  Host mode , debug in Java  Communicate with server through RPC  Simple/Default RPC potix  JSON
  27. What does the GWT code look like potix
  28. Component Base  Widgets  Button, Textbox, Tree, RichTextArea …  Panels / Layout  DockPanel, HorizontalPanel, TabPanel …  Custom Widget  Composite  Widget Gallery potix
  29. Event Driven Click Listener Example  Keyboard Listener Example  potix
  30. Simple RPC Call  Both Client & Server Side public interface StockPriceService extends RemoteService { An service interface extends  StockPrice[] getPrices(String[] symbols); RemoteService }  Server Side A class extends RemoteServiceServlet and implement  service interface public class StockPriceServiceImpl extends RemoteServiceServlet implements StockPriceService { public StockPrice[] getPrices(String[] symbols) { ... } } potix
  31. 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  public interface StockPriceServiceAsync { void getPrices(String[] symbols, AsyncCallback<StockPrice[]> callback); } Invoke RPC  StockPriceServiceAsync 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… potix stockPriceSvc.getPrices(symbols, callback);
  32. [Example] Stock Watcher (GWT) Demo potix
  33. Code Structure Your Code (Java) compile & deploy User Compiled Event Your RPC Imp. JavaScript From Your Code (Java) GWT Widget / RPC GWT Servlet Client Server potix
  34. It Helps, But…  GWT helps You  WriteAjax Application by Java Code  RPC, no http request  You still have to  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.  potix
  35.  ZK – Direct RIA potix
  36. What is ZK An Open Source Server Centric Ajax Framework  Pure Java (No need to write JavaScript)  Event-driven, Component-base  Markup & Scriptable  Standards-based  XUL/XHTML  Java EE  Extensible  potix
  37. What does the ZK code look like a XML/ZUML file (with .zul extension) handle all things.  Demo potix
  38. What does the ZK code look like (Cont. 1) ZUML as View  Java Code as Controller  potix
  39. What does the ZK code look like (Cont. 2) Java Code handle all the stuff  potix
  40. Markup Language & Scriptable Markup Language  <window title=“Hello”/>  new Window().setTitle(“Hello”);  Scriptable  <zscript>doSomething()</zscript>  <button onClick=“doSomething()”/>  Language : Java / JavaScript / Ruby/ Groovy  Easy to build UI template   Fast for prototyping potix ZK Explorer
  41. Rich Component Set Combobox Inputs Fileupload Slider Window Menu & Toolbar Captcha Checkbox & Radio potix Chart
  42. Rich Component Set (Cont. 1) Layouts Tree Tabbox potix Grid & Listbox
  43. Rich Component Set (Cont. 2) FCKEditor Google map potix Timeline
  44. Rich Component Set (Cont. 3) Spreadsheet potix
  45. Event Driven Component Events (name start with „on‟)  onClick, onSelect, onChange, …  In ZMUL  In Java  Fire the Event  Events.post(“onClick”,target,data);  Events.send(“onClick”,target,data);  potix
  46. No more RPC!  Accessing Object / API / Resource Directly  Use JDBC / Hibernate / JPA Directly  Spring Integration  Context Management  IOC  Security potix
  47. [Example]Stock Watcher (ZUML) potix Demo
  48. potix
  49. potix
  50. Architecture potix
  51. Server Push  Reverse-Ajax, Server send content to the client actively. potix
  52. Component Extension - Macro Component Any ZUL page can become a Macro Component  potix
  53. potix Demo
  54. Integrate with HTML Demo .zhtml  use namespace „http://www.zkoss.org/2005/zul‟ to mashup zul  potix
  55. Integrate with JSP Demo Use tag lib: http://www.zkoss.org/jsp/zul  potix
  56. ZK Studio – WYSIWYG IDE potix
  57.  SUMMARY potix
  58. 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  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.  potix 5 8 58
  59. Thank You! http://www.zkoss.org potix

×