Tutorial - Separating Page Design and Logic

Author Keith Wong, keithwong@optushome.com.au

Last updated: 19th Jan 2002

Example Code

These are the files for this example.
customer.jsp  [source code]
CustomerForm.java  [source code]
CustomerFormDesign.java  [source code]

The binaries can be downloaded below (packaged in a war file). In Tomcat, simple place the war file under the "webapps" directory, it will automatically explode when Tomcat is started up. Make sure the objectivehtml-java-alphaX.jar is in the Tomcat $TOMCAT_HOME/lib directory. You should then be able to view the form using the URL http://localhost:8080/objectivehtml-design/customer.jsp. Replace the server address and port number if your computer is setup differently.
objectivehtml-design.war

Introduction

This tutorial continues on from the first tutorial. If you have not gone through that tutorial then it is suggested you go back and read that one before proceeding.

In this tutorial we'll show you how you can separate your page design and page logic simply by using some object-orientated programming tricks. In a typical templating framework most developers would have their form design in the jsp page itself. Whilst this at first seems easier, there are a number of limitations with this approach. With this approach it is almost impossible to completely separate your form design with your form presentation logic. A complex page would contain not only html tags but would also contain user-defined jsp tags and jsp scriplet code. As more logic is added, the design of the form becomes harder and harder to read in the muddy mix of jsp tags and java code. Using Objective Html its possible to achieve a clean separation of form design and presentation logic.

Though the code in this example uses the "Model 1" approach from the first tutorial, the concepts highlighted in this example equally apply to the "Model 2" approach given in the Struts example.

Once again we have our customer details form. The requirements of the form are the same as the first tutorial.

Code Walk-Through

CustomerFormDesign.java

public class CustomerFormDesign extends HtmlForm
{
	public HtmlParagraph m_parUserMessage;
	...

	public CustomerFormDesign()
			throws Exception
	{
		...
	}

}

This class encapsulates the form design. All the form objects that will be used in this form are declared in this class. No methods are declared in this class, only a constructor exists that instantiates all the form objects and layouts the form objects.

CustomerForm.java

public class CustomerForm extends CustomerFormDesign
{
	...

	private boolean validateForm()
	{
		...
	}

	public void saveForm()
		throws InvalidAttributeException
	{
		...
	}
}

Our new CustomerForm class extends our previously declared CustomerFormDesign class. By extending CustomerFormDesign, the CustomerForm class will now inherit access to the declared form objects and also inherits the constructor to create the form. This class is used to encapsulate all the presentation logic of the form. In this class we define 2 methods validateForm() and saveForm() that have presentation logic.

Conclusion

So there you have it, we have successfully separated our form design and form presentation logic by using the features of inheritance in object-orientated programming. By having one class for the form design and another for the form presentation logic it allows one developer to work on the form design whilst another can be working on the logic. If anyone picks up mistakes in this tutorial please let me know.