Fork me on GitHub

Wireframe Prototype Tutorial

This tutorial demonstrates the ease of building working a web application prototype that can be later extended to fully a functional web application.

The tutorial demonstrates the WoOF prototyping by providing wireframe navigation back and forth between the following two pages:

PrototypeHttpServer href screen shot.PrototypeHttpServer form screen shot.

Download Tutorial Source

Prototyping the Web Application

WoOF provides the ability to wireframe the web pages into a working prototype. This allows users to provide feedback on the web application before any code needs to be written. Having this feedback catches issues very early in the development life-cycle leading to reduced overall effort/cost in building the web application.

Once the users are happy with the web application, the later tutorials will show how to easily extend the prototype into a working application.

HTML pages

The web pages have the following HTML.

Page with href link

<html>
<head>
	<title>Example page with href link</title>
	<link href="./css/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>

<p>Navigate to next page <a href="#{link}">link</a></p>

</body>
</html>

Page with form link

<html>
<head>
	<title>Page with form submission to wireframe navigate</title>
	<link href="./css/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>

<form action="#{handleSubmit}" method="POST">
	<p>Name: <input type="text" name="name" /></p>
	<p>Age: <input type="text" name="age" /></p>
	<p><input type="submit" value="submit" /></p>
</form>

</body>
</html>

#{link}

Each of the above pages will render in a web browser. The HTML does contain the non-intrusive #{link} tags which are used by WoOF to determine the links to configure for the page.

Configuring the links

The following configuration shows wiring up the links within the application.woof.

application.woof configuration.

The names of the links are the tag names. Later tutorials will show how to map the form submission to a server POJO method.

As the WoOF HTML pages do not contain the actual link URIs, changing the navigation of the web application is controlled by the application.woof configuration. This allows keeping navigation details out of the web page design. It also makes changing web application navigation simple as the application evolves.

Next

The next tutorial looks at rending dynamic content.