Your SlideShare is downloading. ×
0
Ajax in Apache MyFaces
A new Approach to Web Applications
Agenda
    •   Introduction AJAX and Web 2.0
    •   Integrating AJAX in JavaServer Faces
    •   AJAX components in MyFac...
The New Web - Web 2.0
    •desktop- vs. web applications
    •Web 2.0
      • general definition
      • fully-fledged com...
The New Web - Web 2.0
    • complex and evolving technology infrastructure
      •   server software
      •   client appl...
What is AJAX?
    • a new approach to web applications
    • a terminology affected by “Jesse James
      Garrett” from Ad...
What is AJAX?
    • a bundle of common used techniques
      • HTML (or XHTML) and CSS
      • Document Object Model (DOM)...
AJAX Interaction
    • an AJAX application looks as if it resided
      on the user's machine
    • data is asynchronously...
HTTP Request - Response




7
HTTP Process Flow




8
AJAX Request - Response




9
AJAX Process Flow




10
XMLHttp Object
     • Http request to server using a JavaScript
       object
     • Microsoft:
       • XMLHttp since IE ...
XMLHttpRequest Object
     • Mozilla, Safari..
       • XMLHttpRequest
       • supports same methods and properties
     ...
XMLHttpRequest Object
     • do the request:
     http_request.open('GET', URL, true);


     GET, POST, HEAD…       async...
JavaScript Libraries
     • abstraction layer
       • no handling of XMLHttpRequest object
     • libraries provide..
   ...
JavaScript Libraries
     • prototype (Ruby on Rails)
       •   open-source JavaScript framework
       •   used in Tobag...
Pros of AJAX
     • richness and interactivity
       • web application -> desktop application
       • AJAX effects look ...
Pros of AJAX
     • platform independent
        • works across all browsers if JavaScript is
          enabled
        • ...
Cons of AJAX
     • stressing the server
       • more requests, data
     • web application can feel inactive to the user...
Agenda
     • Introduction AJAX and Web 2.0
     • Integrating AJAX in JavaServer Faces
       • AJAX handling in MyFaces
...
AJAX handling in MyFaces
     • AjaxPhaseListeners (AjaxDecodePhaseListener,
       PPRPhaseListener)
       • listening f...
AjaxDecodePhaseListener
       (ApplyRequestValues)




21
PPRPhaseListener
     (RenderResponse)




22
AJAX handling in MyFaces :
                 problems
     • No concurrent access on UIViewRoot
       allowed
     • State...
Agenda
     • Introduction AJAX and Web 2.0
     • Integrating AJAX in JavaServer Faces
     • AJAX components in MyFaces
...
The Dojo Toolkit
     • MyFaces has used prototype -> now Dojo!
     • advantages
       • huge library
          •   abst...
Dojo`s Widgets
     • client side js components
     • encapsulated js objects
     • represent an abstraction layer
     ...
Dojo`s Widgets
     • fast widget authoring
     • client side widgets -> server side JSF
       comps
     • ease of rend...
Dojo`s Widgets
     • examples
       • ComboBox (InputSuggestAjax)
       • Menues (FishEyeList)
       • Accordion
     ...
Tomahawk Examples: SuggestAjax
     • sandbox components
       • autosuggest control with AJAX
     • InputSuggestAjax
  ...
SuggestAjax
     • suggestedItemsMethod
        • method of backing bean
        • delivers preview data
        • realize...
InputSuggestAjax: .jsp
     <h:form>
       <h:panelGrid columns="3“>
             <x:outputLabel
       value="#{label.ti...
InputSuggestAjax :
                           suggestedItemsMethod
     public List getSuggestedProducts(String prefix)
  ...
TableSuggestAjax: .jsp
     <s:tableSuggestAjax var="address" startRequest="2"
             value="#{inputSuggestAjax.sugg...
AutoUpdateDataTable
     • sandbox component
     • frequency controlled updated DataTable
     • uses prototype.js
      ...
AutoUpdateDataTable: .jsp
     <h:form>
       <s:autoUpdateDataTable
                 var="bids“
                 value="...
AJAX Form Components
     • Server side validation through AJAX
     • Model updating




36
PPRPanelGroup
     • Implementation of Partial Page Rendering
       in Apache MyFaces
     • Each AJAX-Request Response f...
PPRPanelGroup: .jsp
     <h:form id="mainform">
          <h:inputText value="#{exampleBean.suggestValue}"/>
          <h:...
Links and books
     • MyFaces AJAX examples
       • http://www.irian.at/myfaces.jsf
         (sandbox components)
      ...
Questions ?



     •Answers!


40
Finish



     Thank you for your attention!




41
Upcoming SlideShare
Loading in...5
×

Ajax in Apache MyFaces

1,294

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,294
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Ajax in Apache MyFaces"

  1. 1. Ajax in Apache MyFaces A new Approach to Web Applications
  2. 2. Agenda • Introduction AJAX and Web 2.0 • Integrating AJAX in JavaServer Faces • AJAX components in MyFaces • Discussion (or Question & Answer) 1
  3. 3. The New Web - Web 2.0 •desktop- vs. web applications •Web 2.0 • general definition • fully-fledged computing platforms • serve web applications to end users • personal content, social networks • purely web based • RSS, Blogs, Wikis 2
  4. 4. The New Web - Web 2.0 • complex and evolving technology infrastructure • server software • client applications • content syndication • messaging protocols • A Web 2.0 site is built of many techniques • one of these is AJAX 3
  5. 5. What is AJAX? • a new approach to web applications • a terminology affected by “Jesse James Garrett” from Adaptive Path in february 2005 • short name for “Asynchronous JavaScript And XML” • becomes a hype in 2005 • popularity raised with the help of Google • Gmail, Google Maps, Google Calendar 4
  6. 6. What is AJAX? • a bundle of common used techniques • HTML (or XHTML) and CSS • Document Object Model (DOM) • XML • JavaScript, XMLHttpRequest Object • hence not a new technology • former called “server interaction via XMLHttpRequest” 5
  7. 7. AJAX Interaction • an AJAX application looks as if it resided on the user's machine • data is asynchronously fetched • JavaScript call to AJAX engine • HTTP - Request back to server • browser is updated with gathered information • not entirely refreshed 6
  8. 8. HTTP Request - Response 7
  9. 9. HTTP Process Flow 8
  10. 10. AJAX Request - Response 9
  11. 11. AJAX Process Flow 10
  12. 12. XMLHttp Object • Http request to server using a JavaScript object • Microsoft: • XMLHttp since IE 5.0 (ActiveX Object) • Instantiation: if (window.ActiveXObject) // IE { http_request = new ActiveXObject ("Microsoft.XMLHTTP"); } 11
  13. 13. XMLHttpRequest Object • Mozilla, Safari.. • XMLHttpRequest • supports same methods and properties if (window.XMLHttpRequest) // Mozilla, Safari { http_request = new XMLHttpRequest(); } • function call after server response: (for both) http_request.onreadystatechange = function(){ // do useful stuff }; 12
  14. 14. XMLHttpRequest Object • do the request: http_request.open('GET', URL, true); GET, POST, HEAD… asynchronous/synchronous AJAX!! http_request.send(); • response ok, continue processing: if (http_request.readyState == 4) • check the status code: if (http_request.status == 200) 13
  15. 15. JavaScript Libraries • abstraction layer • no handling of XMLHttpRequest object • libraries provide.. • ..plain AJAX support • ..visual effects • ..widgets (dojo toolkit) • ..ease of JavaScript handling 14
  16. 16. JavaScript Libraries • prototype (Ruby on Rails) • open-source JavaScript framework • used in Tobago project • former used in MyFaces AJAX components • also used by script.aculo.us • open rico • drag and drop management • dojo toolkit framework • widgets • namespace structure 15
  17. 17. Pros of AJAX • richness and interactivity • web application -> desktop application • AJAX effects look great • only parts of the page are changed • less redundant data • faster update of the page • no stalling of user’s interaction with the application • No additional plug-in like flash is needed 16
  18. 18. Pros of AJAX • platform independent • works across all browsers if JavaScript is enabled • works across all operating systems 17
  19. 19. Cons of AJAX • stressing the server • more requests, data • web application can feel inactive to the user • visualization • state handling • Browsers „back“ button • bookmarking • need of JavaScript support • differences of browsers -> more testing • not a big issue with JavaScript framework 18
  20. 20. Agenda • Introduction AJAX and Web 2.0 • Integrating AJAX in JavaServer Faces • AJAX handling in MyFaces • AJAX components in MyFaces • Discussion (or Question & Answer) 19
  21. 21. AJAX handling in MyFaces • AjaxPhaseListeners (AjaxDecodePhaseListener, PPRPhaseListener) • listening for an incoming AJAX request • tagged through Request Parameters which provide additional Information for the Request • seeks the affected components in the JSF tree • further processing delegated to component/renderer • quits JSF life cycle after Response has been sent 20
  22. 22. AjaxDecodePhaseListener (ApplyRequestValues) 21
  23. 23. PPRPhaseListener (RenderResponse) 22
  24. 24. AJAX handling in MyFaces : problems • No concurrent access on UIViewRoot allowed • StateSaving • Browser dependent memory leaks 23
  25. 25. Agenda • Introduction AJAX and Web 2.0 • Integrating AJAX in JavaServer Faces • AJAX components in MyFaces • Dojo`s toolkit • Tomahawk • Discussion (or Question & Answer) 24
  26. 26. The Dojo Toolkit • MyFaces has used prototype -> now Dojo! • advantages • huge library • abstracts common js handling • AJAX api • animation • event handling • widgets! • clean separation through namespacing • avoids naming conflicts • supports lazy-loading of js-modules • compression of js code 25
  27. 27. Dojo`s Widgets • client side js components • encapsulated js objects • represent an abstraction layer • no need for html/dom handling • well defined interface: only one tag! • hence easy to use • eg. <input dojoType=“comboBox” dataUrl=“..”> • not well-formed XHTML • can be also done programatically 26
  28. 28. Dojo`s Widgets • fast widget authoring • client side widgets -> server side JSF comps • ease of rendering • former: <div/>, <input>, <table/>, js-code… • now: only one widget tag! • under the hood • one widget = many html tags at runtime 27
  29. 29. Dojo`s Widgets • examples • ComboBox (InputSuggestAjax) • Menues (FishEyeList) • Accordion • Tree • Editor • TabbedPane • Wizard 28
  30. 30. Tomahawk Examples: SuggestAjax • sandbox components • autosuggest control with AJAX • InputSuggestAjax • shows suggested list of items • completely based upon dojo`s comboBox widget • TableSuggestAjax • suggests a html table • column value -> DOM node • based upon dojo`s js abstraction • dojo`s AJAX API (dojo.io.bind) 29
  31. 31. SuggestAjax • suggestedItemsMethod • method of backing bean • delivers preview data • realized with JSF’s MethodBinding • call order • 1.) Ajax request • 2.) AjaxDecodePhaseListener calls SuggestAjax comp • 3.) delegates encoding to renderer • 4.) renderer calls suggestionMethod in bean (MethodBinding) • 5.) computing of result list • 6.) result sent back to client; dojo control shows suggestion drop down 30
  32. 32. InputSuggestAjax: .jsp <h:form> <h:panelGrid columns="3“> <x:outputLabel value="#{label.title_product}"/> <s:inputSuggestAjax suggestedItemsMethod=“ #{product.getSuggestedProducts}“ charset="utf-8" value=“#{product.productNameToSearch}"/> <x:commandButton value="#{label.productButton}" action="#{product.searchForProducts}"/> </h:panelGrid> </h:form> 31
  33. 33. InputSuggestAjax : suggestedItemsMethod public List getSuggestedProducts(String prefix) { List<String> suggestedNames = new ArrayList<String>(); Session session = getSession(); Criteria crit = session.createCriteria(Product.class) .add(Restrictions .like("name","%"+prefix+"%")); List<Product> tempProds = crit.list(); for(Product prod : tempProds) suggestedNames.add(prod.getName()); return suggestedNames; } 32
  34. 34. TableSuggestAjax: .jsp <s:tableSuggestAjax var="address" startRequest="2" value="#{inputSuggestAjax.suggestValue}“ suggestedItemsMethod="#{inputSuggestAjax.getAddressList}“ charset="utf-8"> <t:column> <f:facet name="header"> <s:outputText value="city"/> </f:facet> <s:outputText for="cityField" label="#{address.city}"/> </t:column> … </s:tableSuggestAjax> 33
  35. 35. AutoUpdateDataTable • sandbox component • frequency controlled updated DataTable • uses prototype.js • Ajax.PeriodicalUpdater(…) 34
  36. 36. AutoUpdateDataTable: .jsp <h:form> <s:autoUpdateDataTable var="bids“ value="#{dataTableData.bids}" preserveDataModel="true" frequency="3"> <h:column> <f:facet name="header"> <h:outputText escape="false" value=“Bid"/> </f:facet> <h:outputText value="#{bids.bidData}" /> </h:column> </s:autoUpdateDataTable> </h:form> 35
  37. 37. AJAX Form Components • Server side validation through AJAX • Model updating 36
  38. 38. PPRPanelGroup • Implementation of Partial Page Rendering in Apache MyFaces • Each AJAX-Request Response fullfills a complete JSF-Request-Lifecycle (except RenderResponse which returns XML instead of HTML) • Knows which Components trigger AJAX- Requests and which do not 37
  39. 39. PPRPanelGroup: .jsp <h:form id="mainform"> <h:inputText value="#{exampleBean.suggestValue}"/> <h:commandButton value="update" id="button" /> <s:pprPanelGroup id="suggestValue" partialTriggers="mainform:button"> <h:outputText value="#{exampleBean.suggestValue}"/> </s:pprPanelGroup> </h:form> 38
  40. 40. Links and books • MyFaces AJAX examples • http://www.irian.at/myfaces.jsf (sandbox components) • http://tobago.atanion.net/tobago-example-demo • AJAX web resources • http://www.script.aculo.us • http://www.adaptivepath.com • http://www.dojotoolkit.org • http://www.ajaxpatterns.org/Ajax_Frameworks • http://www.ajaxdeveloper.org 39
  41. 41. Questions ? •Answers! 40
  42. 42. Finish Thank you for your attention! 41
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×