Home >> Miscellaneous
A very simple example to show how to use JSF (version 1.0) for a web application
with only two screens.
Software environment I have used for this example, so far as follows:
1. JDK 5.0.x
2. Tomcat 5.5.x
3. Eclipse 3.2
4. Apache Tomcat 6.0.18
5. List of JAR files used for this example as as follows:
5.1. commons-beanutils.jar
5.2. commons-collections.jar
5.3. commons-digester.jar
5.4. commons-logging.jar
5.5. jsf-api.jar
5.6. jsf-impl.jar
5.7. jstl.jar
5.8. standard.jar
One screen is to accept user input and the other one is the preview
screen.
Various components used in this example are as follows:
list of JAR files in WEB-INF/lib folder as
1. web.xml file for setting up FacesServlet
2. faces-config.xml file for the defining managed bean and navigational
rules and many more.
3. Managed bean to receive submit button click and values from the
screen text fields.
4. index screen and preview screen.
Some form of layout showing major components of this example
web.xml file
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app 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_2_5.xsd"
version="2.5">
<servlet>
<servlet-name>JSF-FacesServlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>JSF-FacesServlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
</web-app>
|
JSF context requires following configuration for instantiating managed beans
and defining managed beans scope, page navigation rules, and many more
different configuration spefific entries.
faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
"http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
<faces-config>
<managed-bean>
<managed-bean-name>SampleMGMTBean</managed-bean-name>
<managed-bean-class>
sample.ButtonEventCapture
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<navigation-rule>
<navigation-case>
<from-outcome>preview</from-outcome>
<to-view-id>/preview.jsf</to-view-id>
</navigation-case>
</navigation-rule>
<application>
<locale-config/>
</application>
<factory/>
<lifecycle/>
</faces-config>
|
I have written a managed bean for this example, this bean is a POJO
with two fields such as txtName and txtPass, with its setter and getter
methods. This managed bean is having two methods defined such as
submitButton and cancelButton in order to receive submit or cancel
actions from UI.
Managed bean "ButtonEventCapture.java" file as follows:
package sample;
public class ButtonEventCapture
{
String txtName;
String txtPass;
public void setTxtName(String txtName) {
this.txtName = txtName;
}
public String getTxtName() {
return txtName;
}
public void setTxtPass(String txtPass) {
this.txtPass = txtPass;
}
public String getTxtPass() {
return txtPass;
}
public String submitButton() {
System.out.println("Submit button is clicked...");
System.out.println("Name: "+txtName);
System.out.println("Pass: "+txtPass);
return "preview";
}
public String cancelButton() {
System.out.println("Cancel button is clicked...");
return null;
}
}
|
This class does nothing except printing name and pass on console
and then sending render value as "preview".
This "preview" is defined in the faces-config.xml file and
the corresponding to-view-id is set to the preview.jsp file.
This is to be noted that if the URL has *.jsf as file extension
then automatically same file name with jsp extension will be called
to render output.
Now let us look at the index.jsp file:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="sampleHtml" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="sampleCore" %>
<html>
<body>
<h4>Enrollment form:</h4>
<sampleCore:view>
<sampleHtml:form>
<table>
<tr><td>Name :</td><td><sampleHtml:inputText
value="#{SampleMGMTBean.txtName}"/></td></tr>
<tr><td>Pass :</td><td><sampleHtml:inputSecret
value="#{SampleMGMTBean.txtPass}"/></td></tr>
<tr><td><sampleHtml:commandButton value="Submit"
action="#{SampleMGMTBean.submitButton}"/></td>
<td><sampleHtml:commandButton value="Cancel"
action="#{SampleMGMTBean.cancelButton}"/></td></tr>
</table>
</sampleHtml:form>
</sampleCore:view>
</body>
</html>
|
and the next page is preview.jsp file:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="sampleHtml" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="sampleCore" %>
<html>
<body>
<h4>Preview</h4>
<sampleCore:view>
<sampleHtml:form>
<table>
<tr><td>Name :</td><td><sampleHtml:outputText
value="#{SampleMGMTBean.txtName}"/></td></tr>
<tr><td>Pass :</td><td><sampleHtml:outputText
value="#{SampleMGMTBean.txtPass}"/></td></tr>
</table>
</sampleHtml:form>
</sampleCore:view>
</body>
</html>
|
This is a very simple example to show how basic JSF components can be
used for navigation and request and response flow using HTTP and
input text being captured in the server side managed bean.
In order to run this example using browser, the URL is
http://localhost:8080/JSF-Sample/index.
jsf
Here the web address is localhost, web application name is
JSF-Sample, If you try to use index.jsp or / at the end of this URL,
you may encounter error on page, as mentioned in the web.xml
file, the servlet URL mapping refers to
*.jsf
More complex example will follow soon. Please keep reading and commenting
to improve.
If you like to share your comment/suggestions/feedback relating to this Page,
you can do so by droping us an email at
usingframeworks @ gmail . com
with the subject line mentioning URL for this Page (i.e,
/JSF-Example-Main.php) or use this
LINK.
As per this website's privacy policy, we never disclose your email id,
though we shall post your comments/suggestions/feedback with
your name (optional) and date on this Page. If you don't want your
comments/suggestions/feedback to be shared in this Page, please
mention so in your email to us. Thank you very much.....
If anything missed out , please let me know at
techienjoy at yahoo . com
|
|
|
|
|
| Android ListView Example : |
Example on Android ListView
explained with a very simple scenario
whereby showing folder and files with
structure and appropriate screens
captured and shown.
|
|
|
|
|
| Android Tab View Example : |
Example on Android Tab View
explained with a very simple scenario
and appropriate screens captured and shown.
|
|
|
|
|
|
| Android Sensors Example : |
Example on Android Sensors Listed and
explained with a very simple scenario
and article with appropriate screens
captured and shown.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Google GWT Example : |
Example using GWT and some design patterns and various
ways of implementing this example.
|
|
|
|
|
|
| Android ListView Example : |
Example on Android List View
explained with a very simple scenario
and article with appropriate screens
captured and shown.
|
|
|
| Android ListView Example : |
Example on Android ListView and
explained with a very simple scenario
and article with appropriate screens
captured and shown.
|
|
|
|
|
|
|
|
|
|
|
|
| Android Gallery Example : |
Example on Android Gallery View
explained with a very simple scenario
and appropriate screens captured and shown.
|
|
| Android Examples : |
List of ANDROid examples
with source code and output
screens captured and shown.
|
|
|
|
|
|
|
|
|
|
