Child pages
  • converter-javaee6 - A simple JSF+Ajax aplication
Skip to end of metadata
Go to start of metadata

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.


  • is used as a managed bean for the index.xhtml page.
  • is a class which stores the exchanged amount of other currencies for specified amount of money in RMB.
  • 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.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".

xmlweb.xml converter-javaee6 Sample javax.faces.PROJECT_STAGE Development Faces Servlet javax.faces.webapp.FacesServlet 1 Faces Servlet /faces/* 30 index.html ]]>

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.

xmlgeronimo-web.xml org.apache.geronimo.samples converter-javaee6 ${version} car /converter-javaee6 ]]>

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.
xmlindex.xhtml Converter Sample
Converter - A JSF and AJAX Example
]]> 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. convertedList; private List currencyList; private Boolean render = false; /** Creates a new instance of ConverterBean */ public ConverterBean() { this.currencyList = new ArrayList(); Currency c = new Currency("USD", 6.8269); currencyList.add(c); c = new Currency("HKD", 0.87887); currencyList.add(c); c = new Currency("JPY", 0.00754); currencyList.add(c); c = new Currency("EUR", 9.6734); currencyList.add(c); c = new Currency("GBP", 11.1009); currencyList.add(c); setConvertedList(); } public Boolean getRender() { return render; } @SuppressWarnings( { "UnusedDeclaration" }) public void toggle(ActionEvent ae) { render = !render; } public void setMsg(String msg) { this.msg = msg; } public List getConvertedList() { return this.convertedList; } private void setConvertedList() { this.convertedList = new ArrayList(); for (Currency currency : currencyList) { ConvertedValue cv = new ConvertedValue(); cv.setName("<" + currency.getName() + ">"); cv.setActualVaule(Double.parseDouble(value) / currency.getRate()); this.convertedList.add(cv); } } public List getCurrencyList() { return currencyList; } public void setCurrencyList(List currencyList) { this.currencyList = currencyList; setConvertedList(); } public String getValue() { return value; } public void setValue(String value) { this.value = value; setConvertedList(); } } ]]>

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   .

  • No labels