Ajax On S2 Odp

818 views

Published on

Presentation from the October 2008 meeting of the ColoradoSprings Open Source Users Group.

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

  • Be the first to like this

No Downloads
Views
Total views
818
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Plus images, css, etc.This is a very small page.
  • show amazon page refresh
  • XMLHttpRequest
  • Ajax On S2 Odp

    1. 1. Ajax on Struts 2
    2. 2. About Myself ● Chad Davis ● Blackdog Software, Inc. ● J2EE Consulting ● Corporate Training ● Struts 2 in Action ● Open Source Enthusiast ● Debian Devotee
    3. 3. Road Map ● Something for everyone ● Struts 2 introduction ● Ajax introduction ● Walk through a code sample ● Questions at any time
    4. 4. Struts 2 ● Web application framework ● Java Servlets ● Second generation ● Software engineering
    5. 5. Classic versus Ajax Classic Web Applications • Ajax Web Applications •
    6. 6. Classic Web Applications < htm l> < head> < link rel= quot;stylesheetquot; type= quot;text/cssquot; href= quot;css/ajaxUserBrowser.cssquot; /> < /head> < body> < h2> Artist Browser Control< /h2> < form nam e= quot;ClassicRetrieveUserquot; action= quot;ClassicRetrieveUser.actionquot; m ethod= quot;postquot;> < select nam e= quot;usernam equot; id= quot;ClassicRetrieveUser_usernam equot;> < option value= quot;Jim m yquot;> Jim m y< /option> < option value= quot;Charlie Joequot;> Charlie Joe< /option> < option value= quot;Maryquot; selected= quot;selectedquot;> Mary< /option> < option value= quot;Artyquot;> Arty< /option> < /form > < /body> < /htm l> URL: /manningSampleApp/chapterEight/ClassicRetrieveUser.action Data: username=mary
    7. 7. How it works: classic style ● Browser makes request – Http – URL – Data ● Server – Processes data – Sends HTML page response ● Browser receives, renders HTML
    8. 8. <html> <head> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;css/classicUserBrowser.cssquot; /> </head> <body> <h2>Artist Browser Control</h2> <form id=quot;ClassicRetrieveUserquot; name=quot;ClassicRetrieveUserquot; onsubmit=quot;return true;quot; action=quot;/manningSampleApp/chapterEight/ClassicRetrieveUser.actionquot; method=quot;postquot;> <table class=quot;wwFormTablequot;> <tr> <td class=quot;tdLabelquot;><label for=quot;ClassicRetrieveUser_usernamequot; class=quot;labelquot;>Select an artist:</label></td> <td><select name=quot;usernamequot; id=quot;ClassicRetrieveUser_usernamequot;> <option value=quot;Jimmyquot;>Jimmy</option> <option value=quot;Charlie Joequot;>Charlie Joe</option> <option value=quot;Maryquot; selected=quot;selectedquot;>Mary</option> <option value=quot;Artyquot;>Arty</option> </select></td> </tr> <tr> <td colspan=quot;2quot;> <div align=quot;rightquot;><input type=quot;submitquot; id=quot;ClassicRetrieveUser_0quot; value=quot;Submitquot; /></div> </td> </tr> </table> </form> <hr/> <h2>Artist Information</h2> <div id='console'> <p><span class=quot;browser_labelquot;>Name:</span> Mary Greene</p> <p><span class=quot;browser_labelquot;>PortfolioName: </span>Wood Cuts</p> <p><span class=quot;browser_labelquot;>PortfolioName: </span>Oil Paintings</p> </div> </body> </html>
    9. 9. Classic Problems ● Slow ● High bandwidth ● Redundant ● Page rendering
    10. 10. Ajax Web Applications {quot;artistquot;: { quot;usernamequot;:quot;Maryquot;, quot;passwordquot;:quot;maxquot;, quot;portfolioNamequot;:quot;Mary's Portfolioquot;, quot;birthdayquot;:quot;2008-10-29 15:10:25.857MDTquot;, quot;firstNamequot;:quot;Maryquot;, quot;lastNamequot;:quot;Greenequot;, quot;receiveJunkMailquot;:quot;falsequot;, } } URL: /manningSampleApp/chapterEight/ClassicRetrieveUser.action Data: username=mary
    11. 11. How it works: Ajax ● Browser uses Javascript to submit request – Http – URL – Data ● Server – Processes data – Sends data response ( JSON, XML, etc. ) ● Browser Javascript – Proceses data – DHTML
    12. 12. {quot;artistquot;: { quot;usernamequot;:quot;Maryquot;, quot;passwordquot;:quot;maxquot;, quot;portfolioNamequot;:quot;Mary's Portfolioquot;, quot;birthdayquot;:quot;2008-10-29 15:10:25.857MDTquot;, quot;firstNamequot;:quot;Maryquot;, quot;lastNamequot;:quot;Greenequot;, quot;receiveJunkMailquot;:quot;falsequot;, quot;portfoliosquot;:{quot;entryquot;:[ {quot;stringquot;:quot;Wood Cutsquot;, quot;manning.chapterEight.utils.Portfolioquot;:{quot;namequot;:quot;WoodCutsquot;}}, {quot;stringquot;:quot;Oil Paintingsquot;, manning.chapterEight.utils.Portfolioquot;:{quot;namequot;:quot;Oil Paintingsquot;}} ]} } }
    13. 13. Ajax Selling Points ● Low bandwith ● No page rendering issues ● Supports a stronger Separation of Concerns
    14. 14. Observations . . . What does the server do? The page abstraction: JSP, ASP, PHP What should new frameworks do?
    15. 15. Struts 2 Architecture ● Does all the dirty work for you ● Separation of Concerns !! ● Interceptors, Actions, Results, ValueStack
    16. 16. Daily development ● Actions – you write them ● Results – declare them – write them if necessary ● Interceptors – nothing! – declare or write if necessary
    17. 17. Configuration ● Declare your actions ● Declare your results ● XML, Annotations
    18. 18. struts.xml <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?> <!DOCTYPE struts PUBLIC quot;-//Apache Software Foundation//DTD Struts Configuration 2.0//ENquot; quot;http://struts.apache.org/dtds/struts-2.0.dtdquot;> <struts> <package name=quot;chapterEightPublicquot; namespace=quot;/chapterEightquot; extends=quot;struts-defaultquot;> <action name=quot;ClassicUserBrowserquot; class=quot;manning.chapterEight.UserBrowserquot;> <result>classicUserBrowser.jsp</result> </action> </package> </struts>
    19. 19. Let's code: classic style What do we need to write? Interceptors? Results? An Action A JSP Page
    20. 20. Let's Code: Ajax Style What do we need to write? Interceptors? Results? An Action A JSP Page? Javascript Client Application
    21. 21. Summary Ajax – Lower Bandwidth Ajax – No Page Rendering Ajax – Javascript Client Struts 2 – Second Generation Framework Ajax – JSON,Built on Software Engineering Principles Struts 2 – XML Struts 2 – Fast Development, Flexible Architecture

    ×