Customizing the Look and Feel

In this section we will customize the look and feel of the search screen as specified in the TimeTracker prototype.

The basic process for front-end customization is pretty simple. As you know, AndroMDA generates front-end elements (such as JSPs, style sheets and javascript) in the web\target\src directory. If you need to customize any of these elements, just copy them over to the web\src\main directory, maintaining the same tree structure. Now you can make any edits to these files. When you build your application again, maven will copy the artifacts from the src directory to the target directory, overwriting the automatically generated files. It will then proceed to build the war from the target directory. Thus you can have a mix for auto-generated and customized files in your war. Note that it is best to wait until a screen is functionally complete before starting to customize the look and feel - making functional changes after customization makes it difficult to syncronize the artifacts.

With this background, we are ready to customize our front-end. Note that customizations requires some knowledge of JSF and Facelets. We cannot possibly cover all these topics in this tutorial, so we will simply provide the customized files to you. Follow the steps below to customize the search screen and run the application:

1. Download custom-look-and-feel.zip and unzip it at C:\timetracker\web\src\main. You will get a sub-directory under main called jsp. This directory further contains 3 sub-directories:
   • layout: a new Tiles layouts and related files
   • org: customized JSP for the search screen
   • styles: a new style sheet used by our custom JSP
2. Edit the file C:\timetracker\web\src\main\properties\messages.properties and completely overwrite its content with the properties shown below. These properties hold messages used by our JSPs.

                           #Temporary message until Approve Timecards page is defined
                           approve.timecards.title=Approve Timecards
   
                           # Overrides of AndroMDA generated messages
                           time.tracker.home=Home
   
                           # Custom messages
                           search.criteria=Search Criteria
                           search.results=Search Results
                       

3. Execute the commands mvn clean followed by mvn install in the Command Prompt.
4. Make sure the JBoss server is running.
5. Deploy the application: Copy timetracker.war from web\target to Jboss standalone\deployments directory.
6. Open a browser and make it point to http://localhost:8080/timetracker. The TimeTracker search page should appear with the new look and feel.

Congratulations! We are done with the search screen.