Ajax On S2 Odp

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (16)

Similar to Ajax On S2 Odp

Similar to Ajax On S2 Odp (20)

More from ghessler

More from ghessler (7)

Recently uploaded

Recently uploaded (20)

Ajax On S2 Odp

Editor's Notes