Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Ajax and Web 2.0 Related Frameworks and toolkits by yfe18125

VIEWS: 5 PAGES: 57

									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 Client-side JavaScript Library
  >   jMaki
  >   AJAX-enabled JavaServer Faces
  >   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
Anatomy of an AJAX Interaction
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();">
Anatomy of an AJAX Interaction
Data Validation Example
2. 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 = processRequest;
  if (!target) target = document.getElementById("userid");
  var url = "validate?id=" + escape(target.value);
  req.open("GET", url, true);
  req.send(null);
}
    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 = callBack;
    if (!target) target = document.getElementById("userid");
    var url = "validate?id=" + escape(target.value);
    req.open("GET", url, true);
    req.send(null);
}
Anatomy of an AJAX Interaction
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 = processRequest;
  if (!target) target = document.getElementById("userid");
  var url = "validate?id=" + escape(target.value);
  req.open("GET", url, true);
  req.send(null);
}                             Make request to url asynchronously
Anatomy of an AJAX Interaction
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>");
    }
}
Anatomy of an AJAX Interaction
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
Anatomy of an AJAX Interaction
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 callBack() {                      4= complete
   if (req.readyState == 4) {
       if (req.status == 200) {                        200 = ok
            var isValid= responseXML.getElementsByTagName("message")[0].firstChild.data;
            setMessage(isValid);
        }
    }                                                                              response
}
                message= “<message>true</message>”
Anatomy of an AJAX Interaction
Data Validation Example
7. The HTML DOM is updated dynamically
<script type="text/javascript">

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>";
  }
}
</script>
<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)
• http://dojotoolkit.com/
• Server side technology independent




                                            source: dojotoolkit.org
Dojo Toolkit Libraries
                • dojo.io: AJAX-based
                  communication with the
                  server
                • dojo.event: unified event
                  system
                • dojo.widget Widget
                  framework
                • dojo.dom: DOM manipulation
                  routines
                • string, json: utility routines to
                  make JavaScript easier to
                  use.
Dojo Pro's And Con's
• Pro's
  > You can use it with any server side technology
  > Make Ajax easier, takes care of browser problems
  > Can mix with other Javascript frameworks
• Con's
  > Developer still has to learn some JavaScript
AJAX Toolkits and
Frameworks :
jMaki
What is jMaki
• jMaki is a lightweight AJAX Framework
  > Make javascript accessible to JSP, JSF, PHP,
    Ruby/JRuby and Phobos
• “AJAX” in a tag
• Widget model
  > Leveraging popular toolkits: dojo, Yahoo, Google,
    Scriptaculous, ...
• Layout
• Server Model
  > Mashup with outside services
Publish/Subscribe

• A means for one or more Project jMaki widgets to
  communicate with each other in a page
  using topics
• Publish/Subscribe is much like a server-side
  messaging system by it runs in the scope of an
  HTML page



https://ajax.dev.java.net/publishsubscribe.html
Publish Example

icon.onClick = function (){
  jmaki.publish("/dojo/fisheye", this);
}
 Subscribe Example
<script>
  function fisheyeListener(item) {
     var targetDiv = document.getElementById("newpage");
    var responseText = "";
    var index = Number(item.index);
     switch(index){
       case 1: // Set responseText equal to Jayashri's bio
      break;
       case 2: // Set responseText equal to Roberto's bio
      default: responseText += 'Click on one of the photos above';
      break;
     }
     targetDiv.innerHTML = responseText;
 }
 jmaki.subscribe("/dojo/fisheye", fisheyeListener);
</script>
jMaki Demo
jMaki Pro’s and Con’s
• Pro’s
  > Works in different platforms/language
  > Can be incorporated in existing application
• Con’s
  > still need to know javascript
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
  > Page authors do not need to know JavaScript
  > Can take advantage of JSF features (rich framework)
• Con's
  > programming AJAX-enabled JavaServer Faces
    components is not easy.
AJAX Toolkits and
Frameworks :
Wicket
What is wicket?
• 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>
  > POJO data model
• Wicket recipe: desktop GUI like programming
  > create a HTML page
  > put components on the page
  > Define how each component reacts to user input
• Most recent version 1.3
Wicket for AJAX
• Takes “J”(Javascript) and “X”(xml) out of AJAX
  > pure HTML + Java
• Make web development easy for Java developers
• Easy to separate presentation and logic
Wicket Demo
Pro's And Con's
• Pro's
  > No JavaScript, no XML, pure HTML + Java
  > Great for Java developers
  > Active community
• 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
  > Take out “J”(Javascript) from AJAX
• 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
  > <work in progress>
• When to use
  > When you prefer using Java for GUI
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
  > Allows you to expose existing backend business logic to
    AJAX client with minimum work
  > 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
• When to use
  > When you want to expose existing backend business
    logic to AJAX client using underlying framework
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
   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.

                           57
                           57

								
To top