Case Study: Case Study: The Design of a JSP FrameworkThe Design of a JSP Framework

By Michael AlfordBy Michael Alford

malford@orbitz.commalford@orbitz.com

March 29, 2001March 29, 2001

AcknowledgmentsAcknowledgments

• Xqsite, Inc.Xqsite, Inc.– Zak JacobsonZak Jacobson– John KoszarekJohn Koszarek– Nick.VujasinNick.Vujasin– Greg SkudlarickGreg Skudlarick

• Orbitz LLCOrbitz LLC

Web DevelopmentWeb Development

ForcesForces

• Quick and easy developmentQuick and easy development

• Simple to maintainSimple to maintain

• High performanceHigh performance

Quick and Easy DevelopmentQuick and Easy Development

• Just get the damn thing out the door!Just get the damn thing out the door!

• Engineers vary widely in skill/experience.Engineers vary widely in skill/experience.– Make common case very simple.Make common case very simple.– Make difficult stuff easy to plug in.Make difficult stuff easy to plug in.

• Mismatch: Graphic artists work visually, Mismatch: Graphic artists work visually, while engineers work with code.while engineers work with code.

• Reuse previously written code.Reuse previously written code.

Simple to MaintainSimple to Maintain

• Low complexity.Low complexity.

• Easily extensible with use of patterns.Easily extensible with use of patterns.

• Easily configurable.Easily configurable.

• Straightforward to debug & monitor.Straightforward to debug & monitor.– Judicious logging.Judicious logging.– Don’t impair app server tools.Don’t impair app server tools.

High PerformanceHigh Performance

• Instantiate as few objects as possible.Instantiate as few objects as possible.

• Cache reusable objects.Cache reusable objects.

• Avoid Java reflection.Avoid Java reflection.

• Minimize synchronization.Minimize synchronization.

• Minimize indirection.Minimize indirection.

• Minimize dynamic content.Minimize dynamic content.

Common PracticesCommon Practices

Custom TagsCustom Tags

• <html:iterate collection=“aList” ><html:iterate collection=“aList” >

<html:valueOf obj=“anObject” /><html:valueOf obj=“anObject” />• </html:iterate/></html:iterate/>

• Tag HandlerTag Handler– Java codeJava code

– Evaluates custom tagsEvaluates custom tags

– PropertiesProperties• pageContextpageContext

• parent tagparent tag

Benefits of Custom TagsBenefits of Custom Tags

• Eliminate Java code from HTML.Eliminate Java code from HTML.

• Greater separation of content from Greater separation of content from presentation.presentation.

• Promote consistency across site.Promote consistency across site.

• Reusable within context of a website.Reusable within context of a website.

Liabilities of Custom TagsLiabilities of Custom Tags

• Designers cannot work visually.Designers cannot work visually.– Inefficient iterative back-and-forth between Inefficient iterative back-and-forth between

designer and developer.designer and developer.– Custom modules for visual tool?Custom modules for visual tool?

• Closely tied to HTML, limiting reusability.Closely tied to HTML, limiting reusability.

• Lower performance versus embedded code.Lower performance versus embedded code.

• No industry standard set of tags.No industry standard set of tags.

JSP Model 2JSP Model 2(Model-View-Controller variant)(Model-View-Controller variant)

Web Browser

Controller

HTML View withCustom Tags

ModelBeans

Request

Acces

s data

Find data

Forward Request

HTML returned to user

Benefits of MVCBenefits of MVC

• Multiple views of same model.Multiple views of same model.

• Pluggable views and controllers.Pluggable views and controllers.

• Separation of development tasks.Separation of development tasks.

• Reuse potential.Reuse potential.

• Frameworks potential.Frameworks potential.

Liabilities of MVCLiabilities of MVC

• Increased complexity.Increased complexity.

• Close coupling between view & controller.Close coupling between view & controller.

• Close coupling of views & controllers to a Close coupling of views & controllers to a model.model.

• Difficulty of using MVC with some web Difficulty of using MVC with some web development tools.development tools.

Document-ViewDocument-View

• Combine View and ControllerCombine View and Controller

• MVC variantMVC variant

• Java Swing’s UIDelegateJava Swing’s UIDelegate

Xqsite Page ArchitectureXqsite Page Architecture

Core ClassesCore Classes

Design GoalsDesign Goals

• Fast to develop for the common tasks.Fast to develop for the common tasks.– Even at the cost of flexibility.Even at the cost of flexibility.– Most of a website is specific to a project.Most of a website is specific to a project.

• Simple.Simple.

• Pluggable services for the hard stuff.Pluggable services for the hard stuff.

• JSP 1.0.JSP 1.0.

Architectural OverviewArchitectural Overview

Web Browser

Business methodslayer

HTML View

ModelBeans

Request

Access data

Find data

HTML returned to user

Page

Use

Bea

n

PagePage

• Container of FieldsContainer of Fields

• Mediator between View and Business LayerMediator between View and Business Layer

• The “use bean” tag in JSP is simple and The “use bean” tag in JSP is simple and easy to use.easy to use.

Page BenefitsPage Benefits

• Standardizes development team on a common design.Standardizes development team on a common design. • Automates validation and formatting of various types Automates validation and formatting of various types

of data.of data.• Automates required field handling.Automates required field handling.• Extensible - add new field types or services without Extensible - add new field types or services without

modifying existing architecture.modifying existing architecture.• Provides file uploading services.Provides file uploading services.• Easily configurable page-specific, field-specific, and Easily configurable page-specific, field-specific, and

locale-specific error messages; can even use a locale-specific error messages; can even use a properties file.properties file.

Page: Init & ControlPage: Init & Control

• <jsp:useBean id="pageObject"<jsp:useBean id="pageObject"• scope="request"scope="request"• class="yourPageSubclass">class="yourPageSubclass">• pageObject.onLoad(pageContext);pageObject.onLoad(pageContext);• </jsp:useBean></jsp:useBean>

• onLoadonLoad– Calls initFieldsCalls initFields– Calls business layer depending on whether this Calls business layer depending on whether this

is first view or a submission of form data.is first view or a submission of form data.

Page: Example OnLoad With Page: Example OnLoad With ValidationValidation

• public void onLoad(PageContext pageContext) throws Exception { • super.onLoad(pageContext);•  • // Check if submit button was pressed• if (isButtonSelected("createAccount")) {• // Process the state when createAccount is clicked• if (isFormValid()) {• // call business objects here • }• }• if (isButtonSelected("cancel")) {• // Process the state when cancel is clicked• redirect("/location/of/maybe/the/previous/page"); • }• else {• // User’s initial visit or reload of page• // Typically do nothing here• }• }

Submit form back to JSPSubmit form back to JSP

• <form name=“myForm" action="<%= <form name=“myForm" action="<%= request.getServletPath() %>" method="POST">request.getServletPath() %>" method="POST">

Page: ButtonsPage: Buttons

• Radio buttonsRadio buttons• <input type="radio" name="salutation" value="mrs" <%= <input type="radio" name="salutation" value="mrs" <%=

page.getButtonSelected("salutation", "mrs") %>>page.getButtonSelected("salutation", "mrs") %>>

• CheckboxesCheckboxes• <input type="checkbox" name=“factor" value="10" <%= <input type="checkbox" name=“factor" value="10" <%=

page.getButtonSelected(“factor", "10") %>>page.getButtonSelected(“factor", "10") %>>

Page: Text Field and Error Page: Text Field and Error MessagesMessages

• String getErrorMessage(String key, String String getErrorMessage(String key, String fieldName)fieldName)

• String getRequiredMessage(String String getRequiredMessage(String fieldName)fieldName)

• JSP:JSP:• <input type="text" name=“lastName" size="20" maxlength="40" <input type="text" name=“lastName" size="20" maxlength="40"

value='<%= page.getFieldValue(“lastName") %>' value='<%= page.getFieldValue(“lastName") %>' required="true">required="true">

• <%=page.getErrorMessage(page.MESSAGE_FIELD_MISSING, <%=page.getErrorMessage(page.MESSAGE_FIELD_MISSING, “lastName")%>“lastName")%>

Field Abstract ClassField Abstract Class

• abstract void validate();abstract void validate();• boolean isRequired();boolean isRequired();• boolean isValid();boolean isValid();• read/write properties:read/write properties:

– NameName– DescriptionDescription– ValueValue– Invalid and Missing MessagesInvalid and Missing Messages

Field SubclassesField Subclasses

• ButtonFieldButtonField

• DateFieldDateField

• NumericFieldNumericField

• SelectFieldSelectField

• TextFieldTextField

Xqsite Page ArchitectureXqsite Page Architecture

Minimizing the Designer/Engineer Minimizing the Designer/Engineer ConflictConflict

PageGeneratorPageGenerator

• Uses the HTML Parser Uses the HTML Parser sunlabs.brazil.handler.HtmlRewritersunlabs.brazil.handler.HtmlRewriter

• For every HTML page, creates a For every HTML page, creates a subclass of Page.subclass of Page.

• For every HTML input field, adds a For every HTML input field, adds a Field to the Page subclass.Field to the Page subclass.

• Stubs out the onLoad method of Stubs out the onLoad method of Page subclass.Page subclass.

• Creates JSP with most of the Creates JSP with most of the necessary code to access the Page.necessary code to access the Page.

HTML Layer RequirementsHTML Layer Requirements

• Each input field must be named uniquely.Each input field must be named uniquely.• Add a fieldType attribute to those fields that Add a fieldType attribute to those fields that

need to be specified less generically. need to be specified less generically. – Will not adversely affect visual HTML editors.Will not adversely affect visual HTML editors.– Example: HTML Text field may have a Example: HTML Text field may have a

fieldType attribute of DateField.fieldType attribute of DateField.

• Add a required attribute for those fields that Add a required attribute for those fields that the user is required to enter.the user is required to enter.

Xqsite Page ArchitectureXqsite Page Architecture

Service DelegationService Delegation

Interceptor PatternInterceptor Pattern

• ““Allows services to be added transparently Allows services to be added transparently to a framework and triggered automatically to a framework and triggered automatically when certain events occur.”when certain events occur.”

• Services are defined in a config file, and Services are defined in a config file, and registered upon app startup.registered upon app startup.

• Page class onLoad acts as central Page class onLoad acts as central dispatcher, passing a Context object to dispatcher, passing a Context object to services.services.

Context controlContext control

• Context object provides accessors for Context object provides accessors for services to retrieve state information.services to retrieve state information.

• Context object provides mutators so that Context object provides mutators so that services may modify request.services may modify request.

• Example: Authorization service forwards Example: Authorization service forwards user to a login page by setting target on user to a login page by setting target on Context object.Context object.

Possible ServicesPossible Services

• File uploadFile upload

• ConfigurationConfiguration

• Authorization/AuthenticationAuthorization/Authentication

• ThrottlingThrottling

• LoggingLogging

• 33rdrd-Party Integration-Party Integration

Applying Page Concepts to Applying Page Concepts to Current Industry PracticesCurrent Industry Practices

Adopt Custom TagsAdopt Custom Tags

• All Field subclasses can be made into All Field subclasses can be made into custom tag handlers.custom tag handlers.

• PageGenerator creates a JSP of custom tags PageGenerator creates a JSP of custom tags instead of embedded Java code.instead of embedded Java code.

Adopt MVCAdopt MVC

• Eliminate Page in favor of FrontControllerEliminate Page in favor of FrontController

• Make FrontController a Interceptor Make FrontController a Interceptor dispatcher.dispatcher.

• If using Struts, PageGenerator can create an If using Struts, PageGenerator can create an ActionForm.ActionForm.

Other Java-based Web Other Java-based Web FrameworksFrameworks

• StrutsStruts• WebMacro and VelocityWebMacro and Velocity• HyperQbsHyperQbs• JanxJanx• WebWorkWebWork• Cocoon (XSP)Cocoon (XSP)• Resin (XTP)Resin (XTP)• BrazilBrazil

ReferencesReferences

Crupi, Malks, Alur, Crupi, Malks, Alur, Core J2EE PatternsCore J2EE Patterns, or , or http://developer.java.sun.com/developer/technicalhttp://developer.java.sun.com/developer/technicalArticles/J2EE/patterns/Articles/J2EE/patterns/

Gamma, et al.,(aka Gang of Four), Gamma, et al.,(aka Gang of Four), Design PatternsDesign PatternsBuschmann, et al., Buschmann, et al., Pattern-Oriented Software Pattern-Oriented Software

Architecture; A System of PatternsArchitecture; A System of PatternsSchmidt, et al., Schmidt, et al., Pattern-Oriented Software Pattern-Oriented Software

Architecture; Patterns for Concurrent and Architecture; Patterns for Concurrent and Networked ObjectsNetworked Objects

Struts Framework, http://jakarta.apache.org/strutsStruts Framework, http://jakarta.apache.org/struts