HomeDocumentation > Reference > Samples > Java EE sample applications > converter-javaee6 - A simple JSF+Ajax aplication

JSF (Java Server Faces) provides a set of APIs and associated custom tags to create HTML forms that have complex interfaces. JSF 2.0 provides very easy-to-use Ajax support. It enables you to use Ajax without explicit JavaScript programming and with very simple tags.

Application Overview

This sample is a simple currency exchange converter. For a given amount of money in RMB,the converter will calculate the amount in other kind of currency according to current exchange rate.

This Sample mainly features JSF 2.0 enhancement: AJAX support in JSF 2.0.

Application Content

Converter-javaee6 application consists of following list of packages and classes.

org.apache.geronimo.samples.javaee6.converter

  • ConverterBean.java is used as a managed bean for the index.xhtml page.
  • ConvertedValue.java is a class which stores the exchanged amount of other currencies for specified amount of money in RMB.
  • Currency.java is a class which defines the name of a currency and the exchange rate between it and RMB.

The list of web application files in the application is depicted in the following.

|- WEB_INF

+- web.xml

+- geronimo-web.xml

|- index.html

|- header.html

|- index.xhtml

Application Implementation

The deployment descriptor file web.xml defines the welcome-file of the web application,parameter for the web context and a "Faces Servlet".

web.xml

The deployment plan file geronimo-web.xml describes information about the project such as module's unique identification and dependencies inside the <sys:environment/> tags. It is one of the best practices to give your module an unique identification, so that it can later be referenced by some other deployable applications. The path specified in the <context-root> tag will be the entry point of this web application. Therefore the sample application can be accessed at http://<hostname>:<port>/ converter-javaee6.

geronimo-web.xml

index.xhtml is a page which displays current exchange rate between RMB and other currencies such as USD, HKD, JPY, EUR and GBP. Input the amount of RMB, you will get the converted amount in other kind of currencies within no minutes through AJAX techniques. When you input a letter in the currency amount box, action goes to server, server computes the converted amount of currency and update the values in managed bean, then send the value back to client, replace the element in the DOM tree with new value.

<h:dataTable> is a component that builds a table from a collection. The collection can be accessed via getter method in managed bean.

<f:ajax event="keyup" execute="@this" render="out1" />

  • event indicates that server should response to the DOM events “key up”.
  • Execute is the element which is to be processed on server.
  • Render specifies elements to be displayed on page.
index.xhtml

ConverterBean.java annotated with @ManagedBean and @RequestScoped is used as a managed bean for index.xhtml page above. The bean defines the properties and methods associated with the UI components used on the page.

ConverterBean.java

Get Source Code

Please reference Samples General Information for information on obtaining and building the source for this and other samples.

Build the web application

Once all the sources get checked out the next step is to build converter-javaee6 sample. It requires Maven 2 for building the binaries.

From the < converter-javaee6_home> directory run the following command.

mvn clean install

This process will take a couple of minutes. The binaries will be generated in the corresponding target directory .

Deploy the web application

Deploying sample application is pretty straight forward as we are going to use the Geronimo Console.

  1. Scroll down to Deploy New from the Console Navigation panel.
  2. Load converter -javaee6-war-3.0-M1.war from converter-javaee6-war\target folder in to the Archive input box.
  3. Press Install button to deploy application in the server.

Test the web application

The app is visible at http://localhost:8080/converter-javaee6   .