Java Web Application Development With Click Framework/Pages

Pages are the heart of web applications. In Click, Pages encapsulate the processing of HTML requests and the rendering of HTML responses. The section discusses Click pages and covers to following topics:


 * Page Java classes
 * Page execution sequence
 * Request parameter to page field auto binding
 * Navigation between pages
 * Templating common page content
 * Page security model
 * Stateful pages
 * Page error handling
 * Page not found handling
 * Pages message properties

In Click, a logical page is composed of a Java class and a Velocity template, with these components being defined in page elements of the click.xml file.

The path attribute specifies the location of the page Velocity template, and the classname attribute specifies the page Java class name.

Alternatively you can also configure Click to use JSP pages for rendering.

Classes
All custom Click pages must subclass the [click-api/net/sf/click/Page.html Page] base class. The Page class and its associated companion classes, Context and Control, are depicted below in Figure 1.



'''Figure 1. Page Class Diagram''' - created with Enterprise Architect courtesy Sparx Systems

The Page class provides a model attribute which is used to hold all the objects that are rendered in the page's Velocity template. The model may also contain Control objects, which provide user interface controls on the Page.

Pages also have an associated Context object which references all the javax.servlet objects associated with the request. When programming in Click you use the Context object to access HttpServletRequest attributes, parameters and the HttpSession object.

The Page class provide a number of empty handler methods which subclasses can override to provide functionality:


 * onSecurityCheck
 * onInit
 * onGet
 * onPost
 * onRender
 * onDestroy

The ClickServlet relies on instantiating Pages using a public no arguments constructor, so when you create Page subclasses you must ensure you don't add an incompatible constructor.

Execution
The GET request execution sequence for Pages is summarized below in the Figure 2.



'''Figure 2. GET Request Sequence Diagram''' - created with Enterprise Architect courtesy Sparx Systems.

Stepping through this GET request sequence, a new Page instance is created and the attributes for the Page are set (context, format, headers, path). Next request parameter values are then bound to any matching public Page fields.

Then the onSecurityCheck handler. This method can be used to ensure the user is authorized to access the page, and if necessary can abort any further processing.

The next method invoked is the onInit, this is where you place any post constructor initialization code.

The next step is the processing of the Page's controls. The ClickSerlvet gets the list of Controls from the page and then iterates through the list calling onProcess. If any of the Control's onProcess methods return false, processing of subsequent controls and the Page's onGet method is aborted.

If everything is executing normally the Page's onGet method is now called.

The next step is rendering the page template to generate the displayed HTML. The ClickServlet gets the model (Map) from the Page then adds the following objects to the model:


 * any public Page fields using the field's name
 * context - the Servlet context path, e.g. /mycorp
 * cssImports - the CSS imports and style blocks to include in the page's header.
 * format - the Format object for formatting the display of objects.
 * imports - the CSS and JavaScript imports to include in the pages header.
 * jsImports - the JavaScript imports and script blocks to include in the page's footer.
 * messages - the MessagesMap adapter for the Page getMessage method
 * path - the path of the page template to render
 * request - the page's HttpServletRequest object
 * response - the page's HttpServletResponse object
 * session - the SessionMap adapter for the user's HttpSession

It then merges the template with the page model and writes out results to the HttpServletResponse. When the model is being merged with the template, any Controls in the model may be rendered using their toString method.

The final step in this sequence is invoking the Page's <tt>onDestroy</tt> method. This method can be used to clean up resource associated with the Page before it is garbage collected. The <tt>onDestroy</tt> method is guaranteed to be called even if an exception occurs in the previous steps.

The execution sequence for POST requests is almost identical, except the <tt>onPost</tt> method is invoked instead on <tt>onGet</tt>. See the [../images/post-sequence-diagram.png POST Request Sequence Diagram].

Another view on the execution flow of Pages is illustrated in the Activity diagram below.



'''Figure 3. Page Execution Activity Diagram''' - created with Enterprise Architect courtesy Sparx Systems.

Request Param Auto Binding
Click will automatically bind any request parameter values to public Page fields with the same name. When binding these values it will also attempt to convert them to the correct type.

The best way to understand this is to walk through an example. Our application receives a GET request:

''' http://localhost:8080/mycorp/customer-details.htm? customerId = 7203 '''

This request is automatically handled by our <tt>CustomerDetails</tt> page:

After the CustomerDetails page has been created the "customerId" request parameter value "7023" will be converted into an Integer and assigned to the public page field <tt>customerId</tt>.

Another feature of Click is that any public Page fields are automatically added to the page's model before it is rendered. This will make these values available in the page template for display. In our example the public <tt>customerId</tt> field will be added to the Page model and will be available for rendering in the page template:

Our customer-details.htm page template contains:

After processing the request our page would be rendered as:


 * Customer ID: 7203

Customizing Auto Binding
Auto binding supports the conversion of request string parameters into the Java classes: Integer, Double, Boolean, Byte, Character, Short, Long, Float, BigInteger, BigDecimal, String and the various Date classes.

By default type conversion is performed by the [click-api/net/sf/click/util/RequestTypeConverter.html RequestTypeConverter] class which is used by the ClickServlet method [click-api/net/sf/click/ClickServlet.html#getTypeConverter getTypeConverter].

If you need to add support for additional types, you would write your own type converter class and subclass the ClickSerlvet to use your custom converter.

For example if we wanted to automatically load a <tt>Customer</tt> object from the database when a customer id request parameter is specified, you could write your own type converter:

This type converter would handle the following request:

''' http://localhost:8080/mycorp/customer-details.htm? customer = 7203

Loading the customer object from the database using given the "7203" customer id value. The ClickServlet would then assign this customer object to the matching page field:

To make your custom type converter available you will need to subclass ClickServlet and override the <tt>getTypeConverter</tt> method. For example:

Navigation
Navigation between pages is achieved by using forwards, redirects and by setting the page template path.

Forward
To forward to another page using the servlet RequestDispatcher set the Page's forward property. For example to forward to a page with a path index.htm:

This will invoke a new Page class instance mapped to the path index.htm. Note when a request is forwarded to another Page, the controls on the second page will not be processed. This prevents confusion and bugs, like a form on the second page trying to process a POST request from the first page.

Forward Parameter Passing
When you forward to another page the request parameters are maintained. This is a handy way of passing through state information through with the request. For example to you could add a customer object as request parameter which is displayed in the template of the forwarded page.

Forwarded to page template view-customer.htm:

Request attributes are automatically added to the Velocity Context object so are available in the page template.

Page Forwarding
Page forwarding is another way of passing information between pages. In this case you create the page to be forwarded to using the Context createPage method and then set properties directly on the Page. Finally set this page as the page to forward the request to. For example:

When creating a page with the <tt>createPage</tt> method ensure you prefix the page path with the "/"</tt> character.

You can also specify the target page using its class as long as the Page has a unique path. Using this technique the above code becomes:

This Page forwarding technique is best practice as it provides you with compile time safety and alleviates you from having to specify page paths in your code.

Please always use the Context <tt>createPage</tt> methods to allow Click to inject Page dependencies.

Template Path
An alternative to forwarding to a new page is to simply set the path to the new page template to render. With this approach the page template being rendered must have everything it needs without having its associated Page object being created. Our modified example would be:

Note how the customer object is passed through to the template in the Page model. This approach of using the Page model is not available when you forward to another Page, as the first Page object is "destroyed" before the second Page object is created and any model values would be lost.

Redirect
Redirects are another very useful way to navigate between pages.

The great thing about redirects are that they provide a clean URL in the user's browser which matches the page that they are viewing. This is important for when users want to bookmark a page. The downside of redirects are that they involve a communications round trip with the users browser which requests the new page. Not only does this take time, it also means that all the page and request information is lost.

An example of a redirect to a logout.htm page is provided below:

If the redirect location is begins with a "/" character the redirect location will be prefixed with the web application's context path.

For example if an application is deployed to the context "mycorp" calling <tt>setRedirect("/customer/details.htm")</tt> will redirect the request to: "/mycorp/customer/details.htm"

You can also obtain the redirect path via the target Page's class. For example:

Note when using this redirect method, the target Page class must have a unique path.

A short hand way of redirecting is to simply specify the target Page class in the redirect method. For example:

Redirect Parameter Passing
You can pass information between redirected pages using URL request parameters. The ClickServlet will encode the URL for you using HttpServletResponse.encodeRedirectURL(url) method.

In the example below a user will click on an OK button to confirm a payment. The <tt>onOkClick</tt> button handler processes the payment, gets the payment transaction id, and then redirects to the trans-complete.htm page with the transaction id encoded in the URL.

The Page class for the trans-complete.htm page can then get the transaction id through the request parameter <tt>" transId "</tt> :

Post Redirect
The parameter passing example above is also an example of a Post Redirect. The Post Redirect technique is a very useful method of preventing users from submitting a form twice by hitting the refresh button.

Page Templating
Click supports page templating (a.k.a. Tiles in Struts) enabling you to create a standardized look and feel for your web application and greatly reducing the amount of HTML you need to maintain.

To implement templating define a border template base Page which content Pages should extend. The template base Page class overrides the Page getTemplate method, returning the path of the border template to render. For example:

The BorderedPage template border.htm:

Other pages insert their content into this template using the Velocity #parse directive, passing it their contents pages' path. The $path value is automatically added to the VelocityContext by the ClickServlet.

An example bordered Home page is provided below:

The Home page's content home.htm:

When a request is made for the Home page (home.htm) Velocity will merge the border.htm page and home.htm page together returning:

Which may be rendered:

Home

Welcome to Home page your application starting point.

Note how the Home page class defines a title model value which is referenced in the border.htm template as $title. Each bordered page can define their own title which is rendered in this template.

Templating with JSP pages is also supported using the same pattern. Please see the Click Examples application for a demonstration.

Security
Pages provide an onSecurityCheck event handler which application pages can override to implement programmatic security model.

Please note you generally don't need to use this capability, and where possible you should use the declarative JEE security model.

Application Authentication
Applications can use the <tt>onSecurityCheck</tt> method to implement their own security model. The example class below provides a base Secure page class which other pages can extend to ensure the user is logged in. In this example the login page creates a session when a user successfully authenticates. This Secure page then checks to make sure the user has a session, otherwise the request is redirected to the login page.

Container Authentication
Alternatively you can also use the security services provided by the JEE Servlet Container. For instance to ensure users have been authenticated by the Serlvet Container you could use a Secure page of:

Container Access Control
The Servlet Container also provides facilities to enforce role based access control (authorization). The example below is a base page to ensure only users in the "admin" role can access the page, otherwise users are redirected to the login page. Application Admin pages would extend this secure page to provide their functionality.

Logging Out
To logout using the application or container based security models you would simply invalidate the session.

Stateful Pages
Click supports stateful pages where the state of the page is saved between the users requests. Stateful pages are useful in a number of scenarios including:


 * Search page and edit page interactions, in this scenario you navigage from a stateful search page which may have filter criteria applied to an object edit page. Once object update has been completed on the edit page, the user is redirected to the search page and the stateful filter criteria still applied.
 * Complex pages with multiple forms and or tables which need to maintain their state between interactions.

To make a page stateful you simply need to set the page [click-api/net/sf/click/Page.html#stateful stateful] property to be true and have the page implement the <tt>Serializable</tt> interface. For example:

Stateful page instances are stored in the user's HttpSession using the page's class name as the key. In the example above the page would be stored in the user's session using the class name: <tt>com.mycorp.page.SearchPage</tt>

Page Creation
With stateful pages they are only created once, after which they are retrieved from the session. However page event handlers are invoked for each request, including the <tt>onInit</tt> method.

When you are creating stateful pages you typically place all your control creation code in the Pages constructor so it is invoked only once, and don't put this code in the <tt>onInit</tt> method which will be invoked with each request.

If you have dynamic control creation code you would typically place this <tt>onInit</tt> method, but you will need to take care that controls and or models are not already present in the page.

Page Execution
The default Click page execution model is thread safe as a new Page instance is created for each request and thread. With stateful pages a user will have a single page instance which is reused in multiple requests and threads. To ensure page execution is thread safe, a users page instances are synchronized so only one request thread can execute a page instance at any one time.

Page Destruction
After normal page instances have been executed, they are de-referenced and garbage collected by the JVM. However with stateful pages they are stored in the user's <tt>HttpSession</tt> so care needs to be take not store too many objects in stateful page instances which may cause memory and performance issues.

When pages have completed their execution, all the Page's controls <tt>onDestroy</tt> methods are invoked, and then the Page's <tt>onDestroy</tt> method is invoked. This is your opportunity to de-reference any large sets or graphs. For example the Table control by default de-references its rowList in its onDestroy method.

Error Handling
If an Exception occurs processing a Page object or rendering a template the error is delegated to the registered handler. The default Click error handler is the ErrorPage, which is automatically configured as:

To register an alternative error handler you must subclass ErrorPage and define your page using the path " click/error.htm ". For example:

When the ClickSevlet starts up it checks to see whether the error.htm template exists in the click web sub directory. If it cannot find the page the ClickServlet will automatically deploy one. You can tailor the click/error.htm template to suit your own tastes, and the ClickServlet will not overwrite it.

The default error template will display extensive debug information when the application is in <tt>development</tt> or <tt>debug</tt> mode. Example error page displays include:


 * NullPointerException - in a page method
 * ParseErrorException - in a page template

When the application is in <tt>production</tt> mode only a simple error message is displayed.

Page Not Found
If the ClickServlet cannot find a requested page in the <tt>click.xml</tt> config file it will use the registered not-found.htm page.

The Click not found page is automatically configured as:

You can override the default configuration and specify your own class, but you cannot change the path.

When the ClickSevlet starts up it checks to see whether the not-found.htm template exists in the click web sub directory. If it cannot find the page the ClickServlet will automatically deploy one.

You can tailor the click/not-found.htm template to suit your own needs. This page template has access to the usual Click objects.

Message Properties
The Page class provides a messages property which is a MessagesMap of localized messages for the page. These messages are made available in the VelocityContext when the page is rendered under the key <tt>messages</tt>. So for example if you had a page title message you would access it in your page template as:

This messages map is loaded from the page classes property bundle. For example if you had a page class <tt>com.mycorp.page.CustomerList</tt> you could have an associated property file containing the page's localized messages:

/com/mycorp/page/CustomerList.properties

You can also defined a application global page messages properties file:

/click-page.properties

Messages defined in this file will be available to all pages through out your application. Note messages defined in your page class properties file will override any messages defined in the application global page properties file.

Page messages can also be used to override Control messages.