Ajax and Web 2.0 Related Frameworks and toolkits by hec15202

VIEWS: 66 PAGES: 53

									Ajax and Web 2.0 Related
Frameworks and toolkits


 Tao Michael Li
 Technology Evangelist
 Sun Microsystems, Inc.

                           1
                           1
Agenda
• AJAX Basics
  > AJAX Interaction:Using Sample Application
• AJAX Toolkits and Frameworks
  >   Dojo Toolkits
  >   jMaki
  >   AJAX-enabled JavaServer Faces-Dynafaces
  >   Wicket
  >   Google Web Toolkit
  >   Direct Web Remoting
AJAX Basics:
What is AJAX?
What is AJAX?
• AJAX= acronym for:
  > Asynchronous JavaScript And XML
• Browser client uses JavaScript to Asynchronously
  get XML data from a server and update page
  dynamically without refreshing the whole page
User Interface: Traditional Web vs.
AJAX                           User operation
                                      01100110
                                      01111001
                                      01101011
                                                                                        stops while
             Stateless
                                   Synchronous call
                                                                                        the data is being
            HTML View                                            Stateful
                                                                  Server                fetched
              Browser
                                   New HTML page
                                      011001101101
                                      111110010100
                                      011010111101
                                      110011010110




AJAX                                                 0110    No interruption in user interface display
                                                     0111
                                                             Only new information updated on page
                                            Asynchronous call
       Events         Stateful
       handled     JavaScript™ UI                                           Stateless
        locally                                                              Server
                         Browser
                                           Data only, not HTML
                                                     0110
                                                     1001
                                                     1011
Traditional Web   AJAX
                          within a browser,
                         there is AJAX engine
AJAX Basics:
AJAX Interaction:
Sample Application
AJAX Interaction diagram - 1
Data Validation Example
1. A Client event occurs
• A JavaScript function is called as the result of an
  event
• Example: validateUserId() JavaScript function is
  event handler to a onkeyup event on input form field
  with id = “userid”

  <input type="text"
        size="20"
         id="userid"
        name="id"
       onkeyup="validateUserId();">
AJAX Interaction diagram - 2
Data Validation Example
2.1 An XMLHttpRequest object is created
var req;
function initRequest() {
  if (window.XMLHttpRequest) {
      req = new XMLHttpRequest();                 XMLHttpRequest
  } else if (window.ActiveXObject) {              created
        isIE = true;
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function validateUserId() {
  initRequest();
  req.onreadystatechange = callBackMethod;
  var input = document.getElementById("userid");
  var url = "validate?id=" + escape(input.value);
  req.open("GET", url, true);
  req.send(null);
}
    2.2 An XMLHttpRequest object is
    configured (cont.)
var req;
function initRequest() {
  if (window.XMLHttpRequest) {
      req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {            Set Callback function
      isIE = true;
      req = new ActiveXObject("Microsoft.XMLHTTP");
  }
}

function validateUserId() {
  initRequest();
    req.onreadystatechange = callBackMethod;
    var input = document.getElementById("userid");
    var url = "validate?id=" + escape(input.value);
    req.open("GET", url, true);
    req.send(null);
}
AJAX Interaction diagram - 3
Data Validation Example
3. XMLHttpRequest object makes an
asynchronous request
function initRequest() {
  if (window.XMLHttpRequest) {
      req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
      isIE = true;
      req = new ActiveXObject("Microsoft.XMLHTTP");
  }
}                                         requested URL is set
function validateUserId() {
  initRequest();
  req.onreadystatechange = callBackMethod;
  var input = document.getElementById("userid");
  var url = "validate?id=" + escape(input.value);
  req.open("GET", url, true);
  req.send(null);
}                             Make request to url asynchronously
AJAX Interaction diagram - 4
Data Validation Example
4. Server component process request

public class ValidateServlet extends HttpServlet {
...
public void doGet(HttpServletRequest request, HttpServletResponse
  response) throws IOException, ServletException {
    String targetId = request.getParameter("id");
    String isValid =null;
    if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
           isValid="true";
    } else {
           isValid="false";
    }
     response.setContentType("text/xml");
     response.setHeader("Cache-Control", "no-cache");
     response.getWriter().write("<message>" + isValid + "</message>");
    }
}
AJAX Interaction diagram - 5
Data Validation Example
5. Server component return the result

public class ValidateServlet extends HttpServlet {
...
public void doGet(HttpServletRequest request, HttpServletResponse
  response) throws IOException, ServletException {
    String targetId = request.getParameter("id");
    String isValid =null;
     if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
            isValid="true";
         } else {
            isValid="false";             Content type text/xml
         }
     }
     response.setContentType("text/xml");
     response.setHeader("Cache-Control", "no-cache");
     response.getWriter().write("<message>" + isValid + "</message>");
    }
}                                    Cache-control must be no-cache
AJAX Interaction diagram - 6
Data Validation Example
        6. The XMLHttpRequest object calls the
        callback() function and processes the result
        The XMLHttpRequest object calls the callBack()
         function when there is a state change. readyState
         ==4 and status==200 mean the request is
         successful.
function callBackMethod() {                4= complete
   if (req.readyState == 4) {
       if (req.status == 200) {                        200 = ok
            var isValid= req.responseXML.getElementsByTagName("message")[0].firstChild.data;
            setMessage(isValid);
        }
    }                                                                               response
}
                message= “<message>true</message>”
AJAX Interaction diagram - 7
Data Validation Example
7. The HTML DOM is updated dynamically
function setMessage(isValid) {
  var mdiv = document.getElementById("userIdMessage");
  if (isValid == "true") {
     mdiv.innerHTML = "<div style=\"color:green\">Valid User Id</ div>";
  } else {
     mdiv.innerHTML = "<div style=\"color:red\">Invalid User Id</ div>";
  }
}


 <body>
 ......
 <div id="userIdMessage"></div>
 </body>
Current Issues with AJAX
• JavaScript
  > inconsistent support among browsers
     >requires cross browser testing
  > code is visible to a hacker
  > Can be difficult to develop, debug, and maintain
  > automatic testing is hard
AJAX Toolkits and
Frameworks :
Dojo Client Side
JavaScript Library
What is Dojo Toolkit?
• Open Source set of JavaScript libraries
• Simplifies adding AJAX into web pages!
• Major industry support (Sun, IBM, AOL)
• Server side technology independent
• http://dojotoolkit.com/



                                   source: dojotoolkit.org
Features Of Dojo toolkit
•   Powerful AJAX-based I/O remoting
•   Comprehensive Widgets library
•   Animation
•   Backward, forward, bookmarking support
Dojo Demo
Dojo Pro's And Con's
• Pro's
  > Server side technology agnostic
  > Make Ajax easier
     > Hides XMLHttpRequest details,
     > Handles browser incompatibilities
  > Can mix with other Javascript frameworks
  > Comprehensive widgets library
  > Strong developer community
• Con's
  > Developer still has to learn some JavaScript
AJAX Toolkits and
Frameworks :
jMaki
What is jMaki
• Widget wrapper
  > Ajax in a tag
• Glue
  > Make widget talk to each other
  > External Service integration
• Server technology integration
  > Support JSF/JSP/PHP/JavaScript
• Great tooling support
jMaki Demo
jMaki Pro’s and Con’s
• Pro’s
  > Works in different platforms/language
     > Java, Jruby, PHP, Phobos
  > Greate tooling support
  > Can be incorporated in existing application
• Con’s
  > Still need to know javascript
  > Wrapped targets may change
AJAX Toolkits and
Frameworks :
AJAX-Enabled
JavaServer Faces
AJAX enabled Java Server Faces
• JSF is Component based
• AJAX details hidden inside the components
  > component provider will provide the details
• Dynamic Faces (DynaFaces)
  > Incremental improvement to JSF 1.2
  > Extended life cycle – Shale remoting
• Developer entry points
     > Page
     > Components
Demo DynaFaces with NetBeans
VWP
Pro's And Con's
• Pro's
  > Drag-and-dropping AJAX-enabled JavaServer Faces
    components within an IDE for building AJAX application
  > Enable the communication between widgets from
    different vendor
  > Page authors do not need to know JavaScript
• Con's
  > programming AJAX-enabled JavaServer Faces
    components is not easy.
AJAX Toolkits and
Frameworks :
Wicket
What is wicket?
• An Apache open source project
• Wicket is a Java Web framework
  > based on servlet
  > component based like JSF but simpler than JSF
     > Wicket components are just HTML tag with wicket attribute
     > i.e. <input wicket:id=”userInput” />, <p wicket:id=”title”>...</p>
• Takes “J”(Javascript) and “X”(xml) out of AJAX
• Most recent version 1.3.1
Wicket Demo
Pro's And Con's
• Pro's
  > Pure HTML + Java: desktop GUI like programming
     > create a HTML page
     > put components on the page
     > Define how each component reacts to user input
     > Active community
  > Easy to separate presentation and logic
  > Easy for Java Developers
• Con's
  > HTML template tightly coupled with Java
  > The Wicket way – everything done in Java
     > Good for Java developers, but not web developers
AJAX Toolkits and
Frameworks :

Google Web Toolkit
What is GWT (Google Web Toolkit)?
• Build AJAX apps with Java technology
  > Run as Javascript & HTML
• Google provides:
  > Java-to-JavaScript compiler:
     >Develop in Java
     >At deploy time the compiler translates your Java
      application to browser-compliant JavaScript and HTML
  > special web browser for debugging GWT applications
GWT Demo
Pro's And Con's
• Pro's
  > Allows Java developers to use Java language for the
    development AJAX applications
  > No need to learn JavaScript language
  > It is from Google (Good momentum)
• Con's
  > Extra step in deployment
     > translate Java to Javascript
  > Currently only supports up to Java 1.4
AJAX Toolkits and
Frameworks :

Direct Web Remoting:
DWR
What is DWR?
• Make Server side Java objects available to client as
  javascript call.
• Framework generates client stub dynamically, which
  is a JavaScript code
• Client stub (Proxy) handles marshalling of
  parameters and return value
• https://dwr.dev.java.net/
DWR Demo
Pro's And Con's
• Pro's
  > Expose existing backend business logic to AJAX client
    very easily.
  > Allows you to use familiar RMI like syntax in the client
    side JavaScript code
• Con's
  > Hackers can see what backend methods are available
  > Custom converter (mashaller and unmarshaller) needs to
    be created for custom Java objects
Summary &
Resources
Summary
• AJAX helps make applications more interactive
  > But AJAX does not come for free
  > Start small and don’t overdo it
  > Choose the right Toolkits and Frameworks for your
    application
• Slides and demo script can be downloaded @
  > http://developers.sun.com.cn/blog/sunblade/
   For More Information
• The BluePrints Solutions catalog on AJAX:
  > https://bpcatalog.dev.java.net/nonav/solutions.html
• AJAX Q & A
  > https://blueprints.dev.java.net/ajax-faq.html
• Asynchronous JavaScript Technology and XML (AJAX)
  With Java 2 Platform, Enterprise Edition
  > http://java.sun.com/developer/technicalArticles/J2EE/AJAX/inde
    x.html
• AJAX Frameworks
  > http://ajaxpatterns.org/wiki/index.php?title=AJAXFrameworks
• AJAX Library and Frameworks Comparison
  > http://wiki.osafoundation.org/bin/view/Projects/AjaxLibraries
• AJAX Developer Resource Center
  > http://developers.sun.com/ajax/
• JavaScript Developer Site
  > java.sun.com/javascript
Ajax and Web 2.0 Related
Frameworks and toolkits


 Tao Michael Li
 Technology Evangelist
 Sun Microsystems, Inc.

                           53
                           53

								
To top