Tuesday, August 31, 2010

Introduction to JSF

Java Server Faces is View in MVC (Model, View, Controller).

Get started with JSF

1. Download jsf latest jar files (https://javaserverfaces.dev.java.net/servlets/ProjectDocumentList?folderID=10411)
2. Set up the
3. Set up your project by modifying web.xml
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>

4. Write the jsp files, java source code, faces-config.xml and deploy on a webserver
For e.g converter.jsp
<f:view>

<h:form>
<h:panelGrid border="1" columns="2">
<f:facet name="header">
<h:outputText value="Temperature Conversion"></h:outputText>
</f:facet>

<f:facet name="footer">
<h:commandButton value="Convert" action="#{conversion.convert}"></h:commandButton>


</f:facet>

<h:outputText value="Celcius"></h:outputText>
<h:inputText value="#{conversion.celcius}"><f:convertNumber type="number" maxFractionDigits="2"/></h:inputText>

<h:outputText value="Fahrenheit "></h:outputText>
<h:inputText value="#{conversion.fahrenheit}"><f:convertNumber type="number" maxFractionDigits="2"/></h:inputText>

</h:panelGrid>
</h:form>

</f:view>

the conversion data bean class:

package proj;

public class Conversion {
..

public Float getCelcius()
{
return celcius;
}

public void setCelcius(Float c)
{
System.out.println("Celcius="+c);
celcius=c;
}
public Float getFahrenheit()
{
return fahrenheit;
}

public void setFahrenheit(Float f)
{
System.out.println("Fahrenheit="+f);
fahrenheit=f;
}

public String convert()
{
//conversion logic
return "convert";
}

..
}
faces-config.xml
<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>
conversion</managed-bean-name>
<managed-bean-class>
proj.Conversion</managed-bean-class>
<managed-bean-scope>
session</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/converter.jsp</from-view-id>
<navigation-case>
<from-outcome>convert</from-outcome>
<to-view-id>/result.jsp</to-view-id>
</navigation-case>
</navigation-rule>

</faces-config>

Download the full source code

No comments: