Hello everyone! In the previous post we set up base project using Wicket for out future development of ItemDirectory web application. That post, which was intended to be mainly about Wicket, surprisingly gathered some attention amongst Spring fans and was even mentioned in weekly summary at SpringSource.com.
Ok, enough about the past. Today we are going to add some nice common layout to ItemDirectory. Go go go! 🙂
The layout
As winning “The best designed web application ever” award is not the purpose of this tutorial, I didn’t want to spend a lot of time on creating beautiful layout. After a short search in Google results I found nice free template which seems to suit well to our tutorial needs:
Author of this free template is Spyka and you can download it from here. There you can find two other colour variations of our template ( if you don’t like orange 🙂 ) and many others to choose from if you want to choose completely different one.
Adding template to Wicket application
After downloading template we need to take following steps in order to make ItemDirectory use it:
- Copy styles.css file and images directory into src/main/webapp folder.
- Copy content of index.html and paste it into BasePage.html.
- Modify BasePage.html a little:
Because we are planning to use consistent layout across the whole application we will put common elements (marked as blue, transparent area on the image below) in BasePage.html and elements changing in each page (marked as green area) in corresponding page class. Using this technique will allow us to place logic responsible for repeating layout things in one place (BasePage class) and logic responsible for generating page-specific data in each page class inheriting from BasePage.
So after pasting complete index.html contents into BasePage.html we delete part responsible for green area (everything in
tag) and replace it with marker <wicket:child/> which will inform Wicket that filling this area is a role of inheriting class and not a BasePage class itself. After these modifications changed part of HTML file should look like presented below:
|
1 2 3 4 5 6 7 |
<div class="content"> <!-- CONTENT --> <wicket:child/> <!-- END CONTENT --> </div> |
And last modification to prevent our IDE from marking wicket:id elements as invalid: proper XML namespace declared in HTML file. Just make sure that beginning of your BasePage.html looks similar to this:
|
1 2 3 4 5 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" > |
Declaration below informs that we are using Wicket namespace.
|
1 2 |
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" |
And coming back to our steps…
- Modify HomePage.class
If you want to be able to view full pages with external HTML editor you should paste complete index.html contents into HomePage.html and remember to place old content between
like in the listing below:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="content"> <!-- CONTENT --> <wicket:extend> <h3 wicket:id="helloLabel"></h3> <span wicket:id="currentTime"></span> <br/> <br/> Number of users in database: <span wicket:id="numberOfUsers"/> </wicket:extend> <!-- END CONTENT --> </div> |
You don’t have to worry about content outside wicket:extend element as it will be ignored by framework (except some special cases marked with other wicket tags).
OK, we are done with template adding. If you wane to view changes in repository, here’s the link: https://bitbucket.org/tdziurko/item-directory/changeset/59ffdc84d325. Result should be like that:
Isn’t it much better than previous one? 🙂
Cleaning out the layout
Now we have pretty good layout, but we need to remove some elements that aren’t needed in our application. And because planned until now features are:
- listing items with pageable view
- adding/editing existing items
- viewing selected item details
- searching by advanced criteriasNote that these are only plans, and can be changed, even You can change list of features with comments and suggestions!
So currently we don’t need most of these links in the layout. I leave empty places to (maybe) fill them with additional requested features in the future. After cleaning main page looks like that:
List of changes (can be viewed here):
- removed some links from top panel, renamed some of them
- removed some links from side panel
- added links to sources, to this tutorial, etc on the side panel
- changed title and header
Ok, now we got cleaned look ready to start playing with Wicket again 🙂
Adding custom titles
As we plan to make our application available to users across the globe, we will add internationalization in the future , we would like to have one place to define application name, heading, etc. And Wicket make it very easy with properties file and wicket:key element:
First, we create file Application.properties next to Application.java file in pl.tomadzdziurko.itemdirectory.web package with following key-value pairs:
|
1 2 |
applicationName = Item Directory applicationHeader = Manage your items easily! |
Next in BasePage.html replace application name and header text and page title with Wicket element <wicket:message key=“keyName”/>. This element will tell Wicket to load text from properties file (more about this here in Wicket Wiki)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
(...) <title><wicket:message key="applicationName"/></title> <link rel="stylesheet" href="styles.css" type="text/css" /> </head> <body> <div class="header-wrapper"> <div class="header pagewidth"> <!-- TITLE --> <h1><a href="#"><wicket:message key="applicationName"/></a></h1> <h2><wicket:message key="applicationHeader"/></h2> <!-- END TITLE --> </div> </div> (...) |
When we reload page after Jetty noticed changes in the code, we could see page looking exactly the same as before adding properties file so everything seems to work correctly. But when we look at the title bar in web browser:
Oh no! – you might think – I screwed something up! But don’t worry, it’s not a bug, it’s a feature 🙂 Do you remember fragment of Application.java class?
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@Override protected void init() { super.init(); // (...) if (getConfigurationType().equals(WebApplication.DEPLOYMENT)) { getMarkupSettings().setStripWicketTags(true); getMarkupSettings().setStripComments(true); getMarkupSettings().setCompressWhitespace(true); } } |
Default Wicket behaviour is to render its tags, just to make it easier to debug and develop application. But in this code listing we said that if we deploy our application to the production, all tags should be stripped: setStripWicketTags(true). So if you move this method out of the if brackets we will see that now our title renders correctly.
And what now? While developing application, we will leave this ugly title for now because we might want to look into rendered HTML page source to check something connected with Wicket tags and if they are stripped we won’t see anything useful 🙂 And after production deployment, title will start looking as we planned.
All changes in this step are available in this changeset – link.
Summary
Ok, that’s all for today. I planned to add the first form to the project but this post is long enough without it, so Wicket form will be a main topic of next post. Thank you for your patience. All comments and suggestions are welcome!
