Saturday, 24 January 2015

The Wonderful World of JSF

Recently a good friend asked me where to begin with Java Server Faces (JSF).  In particular, he was interested in using embedded Jetty to run his JSF application on a Raspberry Pi.  He had downloaded a Hello World JSF applications from the Internet but could not get it working.


This is not an uncommon story.  I remember, back in the day, the confusion I faced when creating my first JSF application.  There are many considerations.  From what applications server to choose (Jetty, Tomcat, Glassfish, etc) to what framework (Vanilla, Ice Faces, Trinidad, Prime Faces) and even implementation (Glassfish, My Faces).  The waters can get even more murky considering some implementations offer features that are not application server independent.

The Moving Parts

A well designed application (web or otherwise) should be implemented in a way that it can be easily moved from one platform to another (an easy way of saying modular, encapsulation/data hiding, blah blah).  I am not talking about a port here, I am more referring to migrations from web application to FAT client to android app, etc.  A well written application should only require a change to the front end, not a change to the back-end, or if the storage mechanism is changing, then just the storage mechanism.


Our sample application will use embedded Jetty to run the application.  This means we do not require any further setup on our Raspberry Pi other than installing Java.  We will use My Faces and some other packages for our implementation.  This provides us with the core JSF classes.  Prime Faces will be used for our framework.  Prime Faces comes with some pretty fancy widgets.  We will event throw in some HTML 5 based web sockets for some fun.  The Spring Framework will be used for configuration.  Finally, I will use MapDB for the database, again because this is embedded and I haven't used it before.  Keep in mind, we will design this so it will be easy to change.

Eclipse with Maven will be used for our IDE.  JUnit 4 will be used for testing.  This blog will not cover the ins and outs of the Raspberry Pi.  My preferred development method is behaviour driven development (BDD) however I will not be showing you the BDD process here as it may be counter intuitive for some.  I will be doing testing but I will not cover it in the blog.  If you want to see the tests in action you can download the project off source forge.  Selenium will be used to test the web page.  Again, not covered.

Specifications

This friend of mine is in to fitness.  Let make a web app to suit his purpose.  We will start small and grow it out.  The intended order of implementation is to assist my friend in his work.  Some readers may notice that the block based implementation order kind of goes against BDD but that is fine, the main goal here is learning.  The features will be implemented in the following order:
  1. Basic Page
  2. Encryption
  3. Administrator Login
  4. User Login
  5. Data Entry
  6. Data Display
  7. Analytics
  8. TLS

Getting Started

Download Eclipse for Java Developers.  You will also need to download the Java JDK.  I will be using Java 7, you may also use Java 8.  If you do not like the oracle version, you can also download Open JDK.  I have heard that there may be some compatibility issues between the two.  While both of them handle some things in different ways, I have never experienced a compatibility issue yet.

Install the Java JDK.  Extract Eclipse to where ever you want and run it.  In most cases, Eclipse will detect the JDK installation, however, you can set it explicitly.  For my work spaces, I usually just set it.
  1. Go to Window > Preferences > Java > Installed JREs
  2. Click Add
  3. Select Standard VM and click  Next
  4. For Java Home, Browse to your JDK directory (C:\Program Files\Java\jdk1.7.0_60)
  5. The JRE Name field should be automatically populated.  We will change it.
  6. Set the name to jdk7 (or jdk 8 is you are using 8)
  7. Click Finish
  8. Check the check box beside our newly added VM and click OK
  We will also install some basic packages.

  1. Go to Help > Install New Software
  2. Set the Work With field to the default update site.  For Luna this is http://download.eclipse.org/eclipse/updates/4.4.
  3. Most of these will be installed.  However, under Web, XML, Java EE... select:
    • Eclipse Java EE Developer Tools
    • Eclipse Java Web Developer Tools
    • Eclipse Web Developer Tools
    • JSF Tools
    • JSF Tools - Web Page Editor
  4. Select Next, Next, Agree then Finish.
You will be prompted to restart.  I also like to install EclEmma, Find Bugs, EGit, Subclipse (choose native java implementation) and Checkstyle.  You can find them in the Eclipse Market place under the help menu.  I would also like to put in a plug for Saros.  It is an awesome way to share projects and edit them shared document live.

Now to bring some sanity to checkstyle.  The default line width is 80 characters.  This is there for hysterical (historical) reasons.  Now we have wide screens and IDEs.  I recommend you change it to 240.  This can be change under Windows > Preferences > Checkstyle.  I usually set a method of no more than 15 lines.  No more than 4 parameters to a method.  A class of no more than 150 lines.  You choose what you want.  I recommend copying another to create your own.

As a note.  Eclipse has some very powerful shortcut keys.  I will draw attention to them when I remember.

Creating the Project

In Eclipse:
  1. Select File > New > Project (Just Project, not Java Project)
  2. Select Maven > Maven Project
  3. For the basic users, the default location is okay.  The project will appear under the <user>/workspace directory.  Mine is different as I will be checking this into source forge.
  4. Click Next
  5. Maven is a tool that manages dependencies and even allows us to choose from project templates.  It is very powerful.  It can also be used outside Eclipse.  We will select the maven-archetype-quickstart option and select Next
  6. We can use PBU for present but unavailable.  SF is short for sourceforge.  We will name the project after a pun for getting fit 'ontrack'.  The source forge project name is already taken so the project will be called 'pbuontrack'.  For simplicity, we will only use one project for this.  Please note it is common to split the project up into sub-projects to keep thing separate.  Maven handles this very well.  Typically you would have a project for the web page, one for the core logic, one for storage, etc.  Set the following attributes:
    • Group Id: net.sf.pbu.ontrack
    • Artefact Id: ontrack
    • Version: 0.0.1
    • Package: net.sf.pbu.ontrack
  7. Click Finish
Give the project a minute to finish creating.  You should see the following.


We will change the java instance to the jdk7 profile we created earlier.
  1. Select the line that reads JRE System Library (J2SE-1.5).
  2. Press Alt + Enter (Same as Right-Click > Properties)
  3. Change the Execution Environment to JavaSE-1.7 (jdk7)
  4. Select OK

Looking Ahead

Now we have our basic project setup.  A zip file of the project is available at Source Forge.  Next we will look at adding dependencies to our POM so Maven can grab what we need.  After that, the fun will begin as we create an run a basic web page.

No comments:

Post a Comment