tutorial-osgi-camel-part2c

Apache Wicket - web site

The tutorial is almost finished. We have to design the web page that we will use to consult the incidents published in the database. The web framework that we will use is Apache Wicket.

Step 1 : Web pages

To display the incidents in a web page, we will create the file HomePage.html in the directory src/main/java/org/apache/camel/example/reportincident. This file contain html tags with some wicket tags. One of the benefit of apache Wicket compare to other wqeb frameworks is that it try to keep the html page as clean as possible to facilitate the work of the web designer and integration with code made by the developers

<html>
<head>
	<title>Report Incident HomePage</title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
	<strong>Report Incident HomePage</strong>
	<br/>
	<p/>
	<span wicket:id="message">message will be here</span> (1)
	<p/>
	
	<table cellspacing="0" class="dataview">
    	<tr>
        	<th>Id</th>
        	<th>Incident Date</th>
        	<th>Incident Ref</th>
        	<th>First Name</th>
        	<th>Last Name</th>
        	<th>Summary</th>
        	<th>Details</th>
        	<th>Email</th>
        	<th>Phone</th>
        	<th>Origin</th>
        	<th>Creation date</th>
    	</tr>
    	<tr>
        	<td><span wicket:id="incidentId">[incidentId]</span></td> (2)
        	<td><span wicket:id="incidentDate">[incidentDate]</span></td>
        	<td><span wicket:id="incidentRef">[incidentRef]</span></td>
        	<td><span wicket:id="givenName">[givenName]</span> </td>
       	 	<td><span wicket:id="familyName">[familyName]</span></td>
        	<td><span wicket:id="summary">[summary]</span></td>
        	<td><span wicket:id="details">[details]</span></td>
        	<td><span wicket:id="email">[email]</span></td>
        	<td><span wicket:id="phone">[phone]</span></td>
        	<td><span wicket:id="creationUser">[creationUser]</span></td>
        	<td><span wicket:id="creationDate">[creationDate]</span></td>
    	</tr>
	</table>

</body>
</html>

Remarks :
(1) - The tag wicket:id="message" is used to display top of the screen a message
(2) - The tags <td> are enriched with parameter wicket:id="" to allow to the wicket code page to replace this property with the property field of the Incident class.

Child pages

Apache Wicket - web site

Step 1 : Web pages

Step 2 : Web page code

Step 3 : web.xml configuration

Step 4 : Adapt the pom.xml file

Package the application

Deploy

Test it

Conclusion

Links

#Resources