My first WoOF application

This tutorial walks you through adding WoOF to an existing JEE web application to provide the following simple example (with World dynamically rendered):

Hello World screenshot.

Please be aware that this tutorial does not highlight many features of WoOF as it walks through introducing WoOF to an existing Java Web Application. Please see the other tutorials should you want to start looking at the features of WoOF.

The default Maven webapp archetype will be used as the existing application.

Download the Tutorial Source if you want to see the completed tutorial source code.

Steps

The following are the steps to adding WoOF to an existing JEE web application. As WoOF runs as a Filter, it can run along side your existing JEE code.

1. Create the existing WebApp

As per Maven Guide to WebApps, the default WebApp is created with the following command within an empty directory:

    mvn archetype:create -DarchetypeArtifactId=maven-archetype-webapp -DgroupId=my.first.woof -DartifactId=MyFirstWoofApp

On completion of the command, a new directory MyFirstWoofApp should be created containing the WebApp.

2. Import the project into Eclipse

To import the project into Eclipse the necessary Eclipse files need to be created with the following command. Therefore change into the created WebApp project directory and create the files with the following commands:

    cd MyFirstWoofApp
    mvn eclipse:eclipse

The WebApp is now ready to be imported into Eclipse as a project. Therefore:

  1. Open Eclipse
  2. Within the Package Explorer, right click and select Import...
  3. Choose Existing Projects into Workspace and then click Next
  4. Enter root directory as the directory created above and then click Finish

The project should now be imported and ready to edit.

3. Add WoOF dependency

First things first, add the following dependency for WoOF to the pom.xml file:

                <dependency>
                        <groupId>net.officefloor.plugin</groupId>
                        <artifactId>officeplugin_woof</artifactId>
                        <version>2.2.0</version>
                </dependency>

Once added you will likely need to re-create the Eclipse files to pick up the WoOF dependency with the following command:

    mvn eclipse:clean eclipse:eclipse

On refreshing the project within Eclipse, the WoOF dependencies should now be available.

4. Create the HTML template

Within the src/main/webapp directory create the file Template.html with the following content:

<html>
    <body>
        Hello ${text}
    </body>
</html>

5. Create the page logic class

The defaultly created WebApp does not include the Java source directory, therefore within Eclipse:

  1. create the source directory src/main/java
  2. and underneath it the package my.first.woof

Within the package create the following two classes.

TemplateLogic

public class TemplateLogic {

	public World getTemplate() {
		return new World();
	}
}

This class provides the dynamic logic for the web page by providing the World class to the template rendering.

Please note that this is the most simplest of logic classes for a web page by providing the property object for the default Template section. The tutorials provide more detail on what this means and how more complex dynamic logic can be added by just adding methods to this class.

World

public class World {
	
	public String getText() {
		return "World";
	}
}

This class is returned by the above TemplateLogic class to provide the property values to be rendered to the page (in this case ${text} ).

6. Configure the WoOF Application

WoOF is configured by graphical configuration and requires installation of the OfficeFloor Eclipse Plug-ins. Please use the instructions on the following link to install the OfficeFloor Eclipse Plug-ins:

Install OfficeFloor Eclipse Plug-ins

Once the OfficeFloor Eclipse Plug-ins are installed, the application.woof configuration file needs to be created by:

  1. Right clicking on src/main/resources and select New then Other...
  2. Under OfficeFloor select WoOF and click Next.
  3. Use the default values, so just click Finish

You should now be presented with following blank graphical editor:

Blank application.woof.

To add the template, right click within the graphical editor and select Add template. The following dialog will be presented to which the following configuration should be provided:

Blank application.woof.
  • Template Path: Template.html
  • Logic class: my.first.woof.TemplateLogic
  • URI: template

Once clicking on Finish the application.woof should now look as follows.

Configured application.woof.

WoOF is now configured to respond with above web page to the /template URI.

7. Add the WoofServletFilter

Before running the application, we need to also make the JEE Servlet Container aware of WoOF by adding the following Filter configuration to src/main/webapp/WEB-INF/web.xml:

	<filter>
		<filter-name>WoOF</filter-name>
		<filter-class>net.officefloor.plugin.woof.servlet.WoofServletFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>WoOF</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

All coding and configuration is now complete for adding WoOF to an existing WebApp.

8. Running the WebApp

Jetty provides a Maven plug-in for running a WebApp. Use the following command to run the WebApp:

    mvn org.mortbay.jetty:jetty-maven-plugin:run

After running the above command, the WoOF template content will be available at http://localhost:8080/template and look as follows:

Hello World screenshot.

Congratulations

Congratulations you have just created and run your first WoOF Web Application.

Please see the tutorials for adding further functionality to your WoOF Web Application.