Apache Geronimo v3.0 Documentation: converter-javaee6

{scrollbar}

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".

xmlweb.xml

<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="converter-javaee6"> <description>converter-javaee6 Sample</description> <context-param> <param-name>javax.faces.PROJECT_STAGE</param-name> <param-value>Development</param-value> </context-param> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <session-config> <session-timeout> 30 </session-timeout> </session-config> <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> </web-app>

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

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://geronimo.apache.org/xml/ns/j2ee/web-2.0.1" xmlns:naming="http://geronimo.apache.org/xml/ns/naming-1.2" xmlns:sec="http://geronimo.apache.org/xml/ns/security-2.0" xmlns:sys="http://geronimo.apache.org/xml/ns/deployment-1.2"> <sys:environment> <sys:moduleId> <sys:groupId>org.apache.geronimo.samples</sys:groupId> <sys:artifactId>converter-javaee6</sys:artifactId> <sys:version>${version}</sys:version> <sys:type>car</sys:type> </sys:moduleId> <sys:dependencies/> <sys:hidden-classes/> <sys:non-overridable-classes/> </sys:environment> <context-root>/converter-javaee6</context-root> </web-app>

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

<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:c="http://java.sun.com/jsp/jstl/core"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="./css/default.css" rel="stylesheet" type="text/css" /> <title>Converter Sample</title> </h:head> <h:body> <div id="top" class="top"><ui:insert name="top">Converter - A JSF and AJAX Example</ui:insert> </div> <div> <div id="left"><ui:insert name="left"> <h:commandButton id="button1" value="Show Exchange Rate" onclick="jsf.ajax.request(this, event, {execute: 'button1', render: 'pg1'}); return false;" actionListener="#{ConverterBean.toggle}" /> <h:panelGroup id="pg1"> <h:dataTable id="out1" value="#{ConverterBean.currencyList}" var="item" rendered="#{ConverterBean.render}"> <h:column> <f:facet name="header"> <h:outputText value="Currency" /> </f:facet> <h:outputText value="#{item.name}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Rate" /> </f:facet> <h:outputText value="#{item.rate}" /> </h:column> </h:dataTable> </h:panelGroup> </ui:insert></div> <div id="content" class="left_content"><ui:insert name="content"> <h:form> <h:outputText value="RMB:"/> <h:inputText value="#{ConverterBean.value}"> <f:ajax event="keyup" execute="@this" render="out1" /> </h:inputText> <h:dataTable id="out1" value="#{ConverterBean.convertedList}" var="item"> <h:column> <f:facet name="header"> <h:outputText value="Currency" /> </f:facet> <h:outputText value="#{item.name}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Actual Value" /> </f:facet> <h:outputText value="#{item.actualValue}" /> </h:column> </h:dataTable> </h:form> </ui:insert></div> </div> </h:body> </html>

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.

javaConverterBean.java

package org.apache.geronimo.samples.javaee6.converter; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.annotation.Resource; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import javax.faces.event.ActionEvent; @ManagedBean(name = "ConverterBean") @RequestScoped public class ConverterBean { private String value = "1.0"; private List<ConvertedValue> convertedList; private List<Currency> 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.

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

Test the web application

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