ajax ons2
DESCRIPTION
Ajax on Struts 2TRANSCRIPT
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
URL: /manningSampleApp/chapterEight/ClassicRetrieveUser.actionData: username=mary
<html> <head> <link rel ="stylesheet" type="text/css" href="css/ajaxUserBrowser.css" /> </head> <body> <h2>Artist Browser Control</h2> <form name="ClassicRetrieveUser" action="ClassicRetrieveUser.action"
method ="post"> <select name="username" id="ClassicRetrieveUser_username" > <option value="Jimmy">Jimmy</option> <option value="Charlie Joe">Charlie Joe</option > <option value="Mary" selected="selected" >Mary</option > <option value="Arty" >Arty</option> </form> </body></html>
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="stylesheet" type="text/css" href="css/classicUserBrowser.css" /></head><body><h2>Artist Browser Control</h2><form id="ClassicRetrieveUser" name="ClassicRetrieveUser" onsubmit="return true;" action="/manningSampleApp/chapterEight/ClassicRetrieveUser.action" method="post"><table class="wwFormTable"> <tr> <td class="tdLabel"><label for="ClassicRetrieveUser_username" class="label">Select an artist:</label></td> <td><select name="username" id="ClassicRetrieveUser_username"> <option value="Jimmy">Jimmy</option> <option value="Charlie Joe">Charlie Joe</option> <option value="Mary" selected="selected">Mary</option> <option value="Arty">Arty</option> </select></td> </tr> <tr> <td colspan="2"> <div align="right"><input type="submit" id="ClassicRetrieveUser_0" value="Submit" /></div> </td> </tr></table></form><hr/><h2>Artist Information</h2><div id='console'><p><span class="browser_label">Name:</span> Mary Greene</p><p><span class="browser_label">PortfolioName: </span>Wood Cuts</p><p><span class="browser_label">PortfolioName: </span>Oil Paintings</p></div></body></html>
Classic Problems
Slow High bandwidth Redundant Page rendering
Ajax Web Applications
URL: /manningSampleApp/chapterEight/ClassicRetrieveUser.actionData: username=mary
{"artist":{
"username":"Mary","password":"max","portfolioName":"Mary's Portfolio","birthday":"2008-10-29 15:10:25.857MDT","firstName":"Mary","lastName":"Greene","receiveJunkMail":"false",
}}
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
{"artist":{
"username":"Mary","password":"max","portfolioName":"Mary's Portfolio","birthday":"2008-10-29 15:10:25.857MDT","firstName":"Mary","lastName":"Greene","receiveJunkMail":"false","portfolios":{"entry":[ {"string":"Wood Cuts", "manning.chapterEight.utils.Portfolio":{"name":"WoodCuts"}}, {"string":"Oil Paintings", manning.chapterEight.utils.Portfolio":{"name":"Oil Paintings"}}]}
}}
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?
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="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<package name="chapterEightPublic" namespace="/chapterEight" extends="struts-default">
<action name="ClassicUserBrowser" class="manning.chapterEight.UserBrowser"><result>classicUserBrowser.jsp</result>
</action>
</package>
</struts>
<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 ActionA JSP Page?Javascript Client Application
Summary
Struts 2 – Second Generation Framework
Struts 2 – Built on Software Engineering Principles
Struts 2 – Fast Development, Flexible Architecture
Ajax – No Page Rendering
Ajax – Javascript Client
Ajax – Lower Bandwidth
Ajax – JSON, XML