SlideShare a Scribd company logo
1 of 59
potix


Open Source Ajax -
Client/Server Side Solutions

    Robbie Cheng
    Evangelist, Potix Corporation
    robbiecheng@zkoss.org



                                Copyright © 2009 Potix Corporation
Agenda
 AjaxIntroduction
 Access Server Side (Java)
  API/Data/Service
   jQuery   + DWR
   GWT

   ZK

 Summary



                              potix
 AJAX INTRODUCTION


                      potix
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
Traditional Web Application vs. Ajax

                              within a browser,
                             there is AJAX engine




                                      potix
Ajax Interaction Example
                           Demo




                                  potix
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
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
JQUERY + DWR


                potix
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
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
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
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
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
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
Generate JavaSript Stub Code

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


  Javascript       Stub
       AjaxService.getOptions(callback)
   

       function callback(data){}
   




                                                                                potix
                                 image source : http://directwebremoting.org/
Convert Data Object to JavaScript

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




                                potix
Stock Watcher




                Ajax update
                , repeatedly




                               potix
[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(){…}
    …
[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
[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
[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
Code Structure

  User
  Event
             Your Code           Your
                                 Code
          (HTML, JavaScript)
                                (Java)


          jQuery         DWR     DWR
                         Stub   Servlet


                                Server
                Client

                                          potix
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
 GWT


        potix
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
What does the GWT code look like




                              potix
Component Base

  Widgets
    Button,   Textbox, Tree, RichTextArea …
  Panels   / Layout
    DockPanel,   HorizontalPanel, TabPanel …
  Custom    Widget
    Composite

  Widget   Gallery

                                                potix
Event Driven
     Click Listener Example
 




     Keyboard Listener Example
 




                                 potix
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
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);
[Example] Stock Watcher (GWT)




                       Demo

                                potix
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
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
 ZK – Direct RIA


                    potix
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
What does the ZK code look like
     a XML/ZUML file (with .zul extension) handle all things.
 




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




     Java Code as Controller
 




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




                                     potix
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
Rich Component Set

                                                                   Combobox



                                Inputs
                                                                  Fileupload


                   Slider



                                                                    Window
                                                 Menu & Toolbar
                      Captcha




Checkbox & Radio

                                                                     potix
                                         Chart
Rich Component Set (Cont. 1)

                                 Layouts


                       Tree

       Tabbox




                                 potix
                Grid & Listbox
Rich Component Set (Cont. 2)




    FCKEditor




                           Google map




                                        potix
                Timeline
Rich Component Set (Cont. 3)




                 Spreadsheet
                               potix
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
No more RPC!

  Accessing    Object / API / Resource
   Directly
  Use JDBC / Hibernate / JPA Directly
  Spring Integration
    Context    Management
    IOC

    Security




                                          potix
[Example]Stock Watcher (ZUML)




                                potix
                       Demo
potix
potix
Architecture




               potix
Server Push

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




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




                                                 potix
potix
Demo
Integrate with HTML
                                                                 Demo
     .zhtml
 
         use namespace „http://www.zkoss.org/2005/zul‟ to mashup zul
     




                                                                       potix
Integrate with JSP
                                                 Demo
     Use tag lib: http://www.zkoss.org/jsp/zul
 




                                                  potix
ZK Studio – WYSIWYG IDE




                          potix
 SUMMARY


            potix
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
Thank You!
http://www.zkoss.org




                       potix

More Related Content

What's hot

Lecture-1: Introduction to web engineering - course overview and grading scheme
Lecture-1: Introduction to web engineering - course overview and grading schemeLecture-1: Introduction to web engineering - course overview and grading scheme
Lecture-1: Introduction to web engineering - course overview and grading schemeMubashir Ali
 
Introduction - Web Technologies (1019888BNR)
Introduction - Web Technologies (1019888BNR)Introduction - Web Technologies (1019888BNR)
Introduction - Web Technologies (1019888BNR)Beat Signer
 
DEFINE FRAME AND FRAME SET WITH A EXAMPLE
DEFINE FRAME AND FRAME SET WITH A EXAMPLEDEFINE FRAME AND FRAME SET WITH A EXAMPLE
DEFINE FRAME AND FRAME SET WITH A EXAMPLEVaibhav Sinha
 
Architecture of .net framework
Architecture of .net frameworkArchitecture of .net framework
Architecture of .net frameworkThen Murugeshwari
 
Relational Database Design
Relational Database DesignRelational Database Design
Relational Database DesignArchit Saxena
 
Java: The Complete Reference, Eleventh Edition
Java: The Complete Reference, Eleventh EditionJava: The Complete Reference, Eleventh Edition
Java: The Complete Reference, Eleventh Editionmoxuji
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Gil Fink
 
FP304 DATABASE SYSTEM PAPER FINAL EXAM AGAIN
FP304 DATABASE SYSTEM  PAPER FINAL EXAM AGAINFP304 DATABASE SYSTEM  PAPER FINAL EXAM AGAIN
FP304 DATABASE SYSTEM PAPER FINAL EXAM AGAINSyahriha Ruslan
 
HTTP request and response
HTTP request and responseHTTP request and response
HTTP request and responseSahil Agarwal
 

What's hot (20)

Lecture-1: Introduction to web engineering - course overview and grading scheme
Lecture-1: Introduction to web engineering - course overview and grading schemeLecture-1: Introduction to web engineering - course overview and grading scheme
Lecture-1: Introduction to web engineering - course overview and grading scheme
 
Introduction - Web Technologies (1019888BNR)
Introduction - Web Technologies (1019888BNR)Introduction - Web Technologies (1019888BNR)
Introduction - Web Technologies (1019888BNR)
 
Php.ppt
Php.pptPhp.ppt
Php.ppt
 
DEFINE FRAME AND FRAME SET WITH A EXAMPLE
DEFINE FRAME AND FRAME SET WITH A EXAMPLEDEFINE FRAME AND FRAME SET WITH A EXAMPLE
DEFINE FRAME AND FRAME SET WITH A EXAMPLE
 
Ms sql-server
Ms sql-serverMs sql-server
Ms sql-server
 
Lab manual asp.net
Lab manual asp.netLab manual asp.net
Lab manual asp.net
 
Project report format computer science
Project report format computer scienceProject report format computer science
Project report format computer science
 
Architecture of .net framework
Architecture of .net frameworkArchitecture of .net framework
Architecture of .net framework
 
Introduction to .NET Framework
Introduction to .NET FrameworkIntroduction to .NET Framework
Introduction to .NET Framework
 
Relational Database Design
Relational Database DesignRelational Database Design
Relational Database Design
 
Php basics
Php basicsPhp basics
Php basics
 
Java: The Complete Reference, Eleventh Edition
Java: The Complete Reference, Eleventh EditionJava: The Complete Reference, Eleventh Edition
Java: The Complete Reference, Eleventh Edition
 
Introduction to php
Introduction to phpIntroduction to php
Introduction to php
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
FP304 DATABASE SYSTEM PAPER FINAL EXAM AGAIN
FP304 DATABASE SYSTEM  PAPER FINAL EXAM AGAINFP304 DATABASE SYSTEM  PAPER FINAL EXAM AGAIN
FP304 DATABASE SYSTEM PAPER FINAL EXAM AGAIN
 
Ppt 11 - netopeer
Ppt   11 - netopeerPpt   11 - netopeer
Ppt 11 - netopeer
 
Css position
Css positionCss position
Css position
 
HTTP request and response
HTTP request and responseHTTP request and response
HTTP request and response
 
Basics of the Web Platform
Basics of the Web PlatformBasics of the Web Platform
Basics of the Web Platform
 
Javascript
JavascriptJavascript
Javascript
 

Similar to Open Source Ajax Solution @OSDC.tw 2009

Beyond Cookies, Persistent Storage For Web Applications Web Directions North ...
Beyond Cookies, Persistent Storage For Web Applications Web Directions North ...Beyond Cookies, Persistent Storage For Web Applications Web Directions North ...
Beyond Cookies, Persistent Storage For Web Applications Web Directions North ...BradNeuberg
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenerytoddbr
 
當ZK遇見Front-End
當ZK遇見Front-End當ZK遇見Front-End
當ZK遇見Front-End祁源 朱
 
Rich Portlet Development in uPortal
Rich Portlet Development in uPortalRich Portlet Development in uPortal
Rich Portlet Development in uPortalJennifer Bourey
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)Christian Rokitta
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineRicardo Silva
 
Introduction To Groovy 2005
Introduction To Groovy 2005Introduction To Groovy 2005
Introduction To Groovy 2005Tugdual Grall
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSocketsGonzalo Ayuso
 
Joe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand DwrJoe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand Dwrdeimos
 
droidQuery: The Android port of jQuery
droidQuery: The Android port of jQuerydroidQuery: The Android port of jQuery
droidQuery: The Android port of jQueryPhDBrown
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology updateDoug Domeny
 
Practical AngularJS
Practical AngularJSPractical AngularJS
Practical AngularJSWei Ru
 
Mobile webapplication development
Mobile webapplication developmentMobile webapplication development
Mobile webapplication developmentGanesh Gembali
 
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)Carles Farré
 

Similar to Open Source Ajax Solution @OSDC.tw 2009 (20)

Beyond Cookies, Persistent Storage For Web Applications Web Directions North ...
Beyond Cookies, Persistent Storage For Web Applications Web Directions North ...Beyond Cookies, Persistent Storage For Web Applications Web Directions North ...
Beyond Cookies, Persistent Storage For Web Applications Web Directions North ...
 
jQuery
jQueryjQuery
jQuery
 
Api
ApiApi
Api
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
前端概述
前端概述前端概述
前端概述
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
當ZK遇見Front-End
當ZK遇見Front-End當ZK遇見Front-End
當ZK遇見Front-End
 
Rich Portlet Development in uPortal
Rich Portlet Development in uPortalRich Portlet Development in uPortal
Rich Portlet Development in uPortal
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 Engine
 
Introduction To Groovy 2005
Introduction To Groovy 2005Introduction To Groovy 2005
Introduction To Groovy 2005
 
Jsf Ajax
Jsf AjaxJsf Ajax
Jsf Ajax
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSockets
 
Joe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand DwrJoe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand Dwr
 
HTML5 - Pedro Rosa
HTML5 - Pedro RosaHTML5 - Pedro Rosa
HTML5 - Pedro Rosa
 
droidQuery: The Android port of jQuery
droidQuery: The Android port of jQuerydroidQuery: The Android port of jQuery
droidQuery: The Android port of jQuery
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
 
Practical AngularJS
Practical AngularJSPractical AngularJS
Practical AngularJS
 
Mobile webapplication development
Mobile webapplication developmentMobile webapplication development
Mobile webapplication development
 
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
 

Recently uploaded

ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 

Recently uploaded (20)

ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 

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