Developing the Web Module

1. Create and Configure the Web Module Project

The Web resources are developed in a Web project.

Choose File New Project from the main menu.

The New Project dialog opens.
Select Web Dynamic Web Project . Choose Next .
Enter ConverterWeb in the Project name field.
To assign the Web project to the previously created Enterprise Application project, select the Add project to an EAR checkbox and select ConverterEAR from the EAR project name dropdown list.
Choose Finish to create your Web project structure.
Add and configure the JavaServer Faces facet to the Web project.
1. In the Project Explorer , select the ConverterWeb project.
2. In the context menu, choose Properties .
  
  The Properties for ConverterWeb dialog opens.
3. In the properties tree, select Project Facets .
4. In the Project Facets area, select the JavaServer Faces checkbox, and select version 1.2 .
5. Choose Further configuration required .
  
  The Modify Faceted Project dialog opens.
6. In the JSF Implementation Library area, select the SAP Component Library for JSF checkbox. Choose OK .
7. Choose Apply , then choose OK .

2. Create a Web Client

The Web client in this tutorial is a JSP.

In the Project Explorer , select ConverterWeb WebContent
In the context menu, choose New Other .

The New dialog opens.
Select Web JSP . Choose Next .
Enter index.jsp in the File name field.
Choose Finish .

The Developer Studio creates the index.jsp file and opens it for editing.

Implement the JSP as follows:

                     <%@ page import="com.sap.tutorial.javaee.ConverterLocal, java.math.*, javax.naming.*"%>
<%@taglib uri="http://java.sap.com/jsf/html" prefix="sap-h"%><%@taglib uri="http://java.sap.com/jsf/core" prefix="f"%>

<html>
<head>
<title>Currency Converter</title>
</head>

<body>

<f:view><body><h1> Currency Converter</h1><hr>
<sap-h:form >
        <sap-h:outputText value="Enter an amount to convert:"/><br><br/>
        <sap-h:inputText id="name" value="#{managedBean.amount}" />
        <sap-h:commandButton action="#{managedBean.convert}" value="Sumbit" />
</sap-h:form>

<sap-h:form rendered="#{managedBean.correctAmountSet}"><br/>
        <sap-h:outputText value="#{managedBean.amount} " escape="false"/>
        <sap-h:outputText value="USD are: " escape="false"/>
        <sap-h:outputText value="#{managedBean.convertedAmountInEUR} " escape="false"/>
        <sap-h:outputText value="EUR " escape="false"/><br/>
        <sap-h:outputText value="#{managedBean.amount}  " escape="false"/>
        <sap-h:outputText value="EUR are: " escape="false"/>
        <sap-h:outputText value="#{managedBean.convertedAmountInUSD} " escape="false"/>
        <sap-h:outputText value="USD "/><br/>
</sap-h:form>
<sap-h:form rendered="#{!managedBean.correctAmountSet}" ><br/>
        <sap-h:outputText value="Only digits are allowed." escape="false"/><br/>
        <sap-h:outputText value="Use a dot(.) as decimal separator." escape="false"/><br/>
</sap-h:form>

</f:view>

</html>

Save the index.jsp file.

3. Configure the Project References

Since your Web project uses resources from the ConverterEJB project, you have to set these references:

Select ConverterWeb in the Project Explorer .
In the context menu, choose Properties .
In the Properties for ConverterWeb tree, select Java Build Path .
Choose the Projects tab.
Choose Add .
Select the ConverterEJB checkbox, then choose OK .
In the properties tree, select Project References .
On the Setting Java Build Path screen that pops up, choose Apply .
Select the ConverterEAR and ConverterEJB checkboxes.
Choose OK .

4. Create the ManagedBean

In the Project Explorer , select the ConverterWeb project.
In the context menu, choose New Class .

The New Java Class wizard opens.
In the Package field, enter com.sap.tutorial.javaee.web .
In the Name field, enter ManagedBean .
Choose Finish .

The Developer Studio creates the ManagedBean class file and opens it for editing.

Implement the ManagedBean class as follows:

                     @EJB ConverterLocal converter;

String amount;
String convertedAmountInEUR;
String convertedAmountInUSD;

boolean correctAmountSet;

public ManagedBean() {
        }

public String convert() {

        setCorrectAmountSet(amount);
        
        convertedAmountInEUR = null;
        if (isCorrectAmountSet()) {
                BigDecimal value = new BigDecimal(amount);
                convertedAmountInEUR = converter.dollarToEuro(value).toPlainString();
                }
        
        convertedAmountInUSD = null;
        if (isCorrectAmountSet()) {
                BigDecimal value = new BigDecimal(amount);
                convertedAmountInUSD = converter.euroToDollar(value).toPlainString();
                }
        
        return "Submit";
        }

public void setAmount(String amount) {
        this.amount = amount;
        }

public String getAmount() {
        return amount;
        }

public String getConvertedAmountInEUR() {
        return convertedAmountInEUR;
        }

public void setConvertedAmountInEUR(String convertedAmountInEUR) {
        this.convertedAmountInEUR = convertedAmountInEUR;
        }

public String getConvertedAmountInUSD() {
        return convertedAmountInUSD;
        }

public void setConvertedAmountInUSD(String convertedAmountInUSD) {
        this.convertedAmountInUSD = convertedAmountInUSD;
        }

public void setCorrectAmountSet(String amount) {
        Double dAmount = null;
        try {
                dAmount = Double.valueOf(amount);
                } catch (NumberFormatException nfe) {
                correctAmountSet = false;
                }
        
        if (dAmount != null) {
                correctAmountSet = true;
                }
        }

public boolean isCorrectAmountSet() {
        return correctAmountSet;
        }

public void setCorrectAmountSet(boolean correctAmountSet) {
        this.correctAmountSet = correctAmountSet;
        }

To import the additional classes that you refer in your code, choose Source Organize Imports from the main menu.
To save the ManagedBean.java file, choose File Save from the main menu.

5. Edit the Web Module Deployment Descriptors

In the Project Explorer , expand the WEB-INF folder under WebContent of the ConverterWeb project.

Editing the web.xml

Double-click the web.xml file to open it for editing.
Choose the Source tab of the editor.

Replace the existing <welcome-files-list> entries (if any) with the following one:

                     <welcome-file-list>
        <welcome-file>faces/index.jsp</welcome-file>
</welcome-file-list>

Add the following code to the XML source to define a local EJB reference to the Converter bean:

                     <ejb-local-ref>
        <ejb-ref-name>Converter</ejb-ref-name>
        <ejb-ref-type>Session</ejb-ref-type>
        <local>com.sap.tutorial.javaee.ConverterLocal</local>
</ejb-local-ref>

To save the file, choose File Save from the main menu.

Editing the faces-config.xml

Double-click the faces-config.xml file to open it for editing.
Choose the Source tab of the editor.

Implement the source of the faces-config.xml as follows:

                     <?xml version="1.0" encoding="UTF-8"?>

<faces-config
        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-facesconfig_1_2.xsd"
        version="1.2">
<managed-bean>
        <managed-bean-name>managedBean</managed-bean-name>
        <managed-bean-class>com.sap.tutorial.javaee.web.ManagedBean</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
        <managed-property>
                <property-name>amount</property-name>
                <property-class>java.lang.String</property-class>
                <value></value>
        </managed-property>
        <managed-property>
                <property-name>convertedAmountInEUR</property-name>
                <property-class>java.lang.String</property-class>
                <value></value>
        </managed-property>
        <managed-property>
                <property-name>convertedAmountInUSD</property-name>
                <property-class>java.lang.String</property-class>
                <value></value>
        </managed-property>
        <managed-property>
                <property-name>correctAmountSet</property-name>
                <property-class>boolean</property-class>
                <value>false</value>
        </managed-property>
</managed-bean>
<navigation-rule>
        <display-name>index</display-name>
        <from-view-id>/index.jsp</from-view-id>
        <navigation-case>
                <from-outcome>Submit</from-outcome>
                <to-view-id>/index.jsp</to-view-id>
        </navigation-case>
</navigation-rule>

</faces-config>

To save the file, choose File Save from the main menu.