Mobile JSF

What is JSF?

JavaServer Faces (JSF) is a Java Enterprise Edition (Java EE) web framework for creating user interfaces with reusable components represented as custom tags in markup documents. Components can register action listeners that trigger business logic in the form of backing beans. JSF manages states between requests and handles navigation between pages as a result of outcomes from managed beans. Although JSF includes a custom tag library with a default set of UI components, new components can easily be added to provide application-specific functionality. JSF is standardized under JSR-127 through the Java Community Process.

What is Mobile JSF?

One of the features of JSF is the ability to have different renderkits that render components into different markup languages. Mobile JSF is leveraging on this functionality to be able to render to markup languages common on mobile devices, for example WML or XHTML-MP. The open source device capabilities database WURFL can be used together with Mobile JSF to determine what markup language to render to. In addition, Mobile JSF includes a media adaptor that can select or scale images also based on device capabilities.

Why Mobile JSF?

Traditionally, developers of mobile content that wanted to support a large user base, had to develop and maintain separate versions of their pages in different markup languages. This process can be tedious and prone to errors. With Mobile JSF, however, developers just need to maintain one version of every page. In addition, because Mobile JSF renders components to various markups automatically, developers often do not need to know specific details on the markup languages. Combined with the strengths of the JavaServer Faces framework, Mobile JSF proves to be a powerful tool for mobile web development.

Who should use Mobile JSF?

Anyone can use Mobile JSF to create mobile web pages that can display on a great number of devices. However, the real strengths of Mobile JSF come from the fact that it is based on the JSF framework. So if you are planning to create web-based user interfaces targeted towards mobile devices, with reusable components for user interaction and a lot of navigation, you should definitely consider Mobile JSF.
For more information, visit Ericsson Mobility World

Getting started with NetBeans IDE 6.0 for Mobile JSF

Installing the Mobile JSF project template plugin

• Download the plug-in from Ericsson Mobility World Developer Program.
• In NetBeans, select Tools from the menu and then Plugins.

• Select the Downloaded tab and click Add Plugins…

• Browse to the downloaded plugin nbm file and open it, then click Install.

• To install, you need to accept the license agreement. Then click Install.

• You will get a warning that the plugin is not cryptographically signed. Click Continue if you downloaded the plugin from Ericsson Mobility World Developer Program.

• The installer will confirm that you have successfully installed the plugin. Click Finish to close the dialog.

• Close the Plugins dialog.

Creating a new Mobile JSF project

When you select New Project, you will find Mobile JSF if you select category Web. Create a new Mobile JSF project and name it Hello.

Creating your first Mobile JSF page

This section demonstrates how to create a minimal Mobile JSF page with a simple backing bean, which alternates between two different strings written to the output page.

Creating the JSF page

Expand the Web Pages folder. You will see a file named main.jsp. Replace the body of this document with:

<h:form>
    <h:outputText value="Enter your name: "/>
    <h:inputText value="#{simpleBean.name}"/><br/>
    <h:outputText value="#{simpleBean.hello}"/><br/>
    <h:commandLink value="Say hello!" actionListener= "#{simpleBean.sayHello}"/><br/>
    <h:commandLink value="Say good bye!" action="bye"/>
</h:form>

Save the file main.jsp.

Creating the backing bean

Right-click on the Source Packages folder, select New and then Java class. Name the file SimpleBean.java. Replace the contents of this file with:

import javax.faces.event.ActionEvent;
 
public class SimpleBean {
    private int i = 0;
    private String hello = "";
    private String name = "";
 
    public String getHello() { return hello; }
    public void setHello(String hello) { this.hello = hello; }
 
    public String getName() { return name; }
    public void setName(String name) { this.name = name; }
 
    public void sayHello(ActionEvent actionEvent){
        setHello("Hello " + (((i++ % 2) == 0) ? name : "Mobile JSF") + "!!");
    }
}

Save the file SimpleBean.java.

Registering the backing bean in faces-config.xml

Under Configuration Files, open faces-config.xml. In add:

<managed-bean>
    <description>A simple bean.</description>
    <managed-bean-name>simpleBean</managed-bean-name>
    <managed-bean-class>SimpleBean</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

Save the file faces-config.xml.

Configuring devices

Under Configuration Files, open devices.xml. Add the appropriate <device> entries for the browsers that you would like to test. Look at the existing entries to get an idea of what to put in yours. Alternatively, you can set the User-Agent in your browser(s) to match one of the existing entries.

Building

Right-click the project name and select Build.

Setting the target server

Right-click on the project name and select Properties -> Run. Choose the server that you would like to deploy to.

Deploying

Right-click on the project name again, but now select Undeploy and Deploy.

Testing

Right-click on the project name and select Run or open your favorite browser and go to: http://localhost:8080/Hello/ (if your server is configured to run on port 8080)

When you click Say hello! the page will reload and be updated with a new text from the backing bean.

Use your favorite WAP browser to test the mobile version of the same page.

Adding a second page and navigation

This section shows how to create a new Mobile JSF page and a navigation rule to this page from the first page.

Creating the JSF page

Right-click on the Web Pages folder, select New and then Mobile JSF page. If Mobile JSF page is not shown in the list, select Other and then Mobile JSF page in the Mobile JSF category.
Name the file second.jsp. In the body of this document, write:

Good bye <h:outputText value="#{simpleBean.name}" />!

Save the file second.jsp.

Testing

Build, deploy and run your project. When you click Say good bye! you will navigate to the second.jsp page.

Using Cascading Style Sheets (CSS) with Mobile JSF

Mobile JSF allows rendering to three separate markup languages. Mobile JSF also selects and scales images using its media adaptor. WML and XHTML-MP are typically rendered for limited mobile devices that have similar capabilities, for example in terms of screen size. HTML is used both for handheld devices with small displays and desktop browsers on high-resolution screens. This chapter shows how Cascading Style Sheets (CSS) can be used together with Mobile JSF to differentiate page layout when rendering as HTML. Using CSS media types screen and handheld, different styling can be applied by desktop and mobile browsers.

Page layout

A typical web page layout consists of an area with the main page content, a navigation pane, and perhaps a sidebar with relevant information. Each logical part is often contained in its own block-level element and styled accordingly.

Figure 1. A typical web page layout.

When styling the same web page for a handheld device, we may choose not to display some parts and instead make sure that the most relevant content is easily accessible. Menus that are structured horizontally are probably better structured vertically on small screens. Large images are removed or replaced with smaller ones.

Figure 2. A web page structured vertically.

6.2 Using @media blocks

The css tag in Mobile JSF chooses between two style sheets, depending on the markup. For HTML, the extension of the style sheet file is "css". Using @media blocks, styles that will be applied by browsers depending on the media type can be added. A mobile browser applies the styles inside @media blocks of type handheld, while a desktop browser applies the styles inside @media blocks of type screen.

@media screen {
	…
}
 
@media handheld {
	…
}

6.3 Styling for handheld

If we look at our example again, this time without any styling whatsoever, we can easily see the flow of the document. We identify a menu followed by a news section, text content and an image.

Figure 3. A web page without any styling.

What is not evident from looking at the rendered page is that all content is wrapped inside a div container that we conveniently identify as "page". This lets us set the width of the entire page to fit a typical mobile phone screen width of 240 pixels. We also style page headings (of level three) to use a sans serif font.

#page {width: 240px; padding: 2px;}
#page h3 {font-family: sans-serif;}

There are two containers in the page (newsbar and bigimg) that we do not want to have in the handheld version of our page. Luckily, we can easily prevent them from being displayed using style rules.

#newsbar {display: none;}
#bigimg {display: none;}

The menu is represented as an unordered list and structured vertically by default. However, instead of the bullets, we would like a digit in front of every link corresponding to the access key that is assigned to it. The text should be displayed with a black sans serif font.

#menu li {list-style-type: decimal;}
#menu a {font-family: sans-serif; color: #000;}

Since the menu is part of the page header, it is wrapped in a container called "top" together with the placeholder for the logo. In the handheld version, we would like to have the green background on the header. The logo is a smaller variant than the one on the desktop version, and we insert the logo using CSS-generated content.

#top {background: #e0ffe0; padding-bottom: 3px;}
#logo:before {content: url(logo_small.png);}

Styling of the remaining container, the footer, is left as an exercise for the reader.

To learn more about CSS, read the book CSS: The Definitive Guide, 3rd Edition, by Eric A. Meyer, O'Reilly, November 2006.