Ajax On S2 Odp

Ajax on Struts 2

About Myself ● Chad Davis ● Blackdog Software, Inc. ● J2EE Consulting ● Corporate Training ● Struts 2 in Action ● Open Source Enthusiast ● Debian Devotee

Road Map ● Something for everyone ● Struts 2 introduction ● Ajax introduction ● Walk through a code sample ● Questions at any time

Struts 2 ● Web application framework ● Java Servlets ● Second generation ● Software engineering

Classic versus Ajax Classic Web Applications • Ajax Web Applications •

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

How it works: classic style ● Browser makes request – Http – URL – Data ● Server – Processes data – Sends HTML page response ● Browser receives, renders HTML

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

Classic Problems ● Slow ● High bandwidth ● Redundant ● Page rendering

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

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

{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;}} ]} } }

Ajax Selling Points ● Low bandwith ● No page rendering issues ● Supports a stronger Separation of Concerns

Observations . . . What does the server do? The page abstraction: JSP, ASP, PHP What should new frameworks do?

Struts 2 Architecture ● Does all the dirty work for you ● Separation of Concerns !! ● Interceptors, Actions, Results, ValueStack

Daily development ● Actions – you write them ● Results – declare them – write them if necessary ● Interceptors – nothing! – declare or write if necessary

Configuration ● Declare your actions ● Declare your results ● XML, Annotations

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>

Let's code: classic style What do we need to write? Interceptors? Results? An Action A JSP Page

Let's Code: Ajax Style What do we need to write? Interceptors? Results? An Action A JSP Page? Javascript Client Application

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

Ajax On S2 Odp

by ghessler

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 2

Statistics

Ajax On S2 Odp Presentation Transcript