Any jsf project needs a particular directory structure as mentioned by the jsf framework.
This directory structure can be easily obtained by starting a jsf project in NetBeans.
To start a new jsf project in NetBeans:
1) Go to file click on new project.
2) Select the category as web and project as web application.
3) In the next page give the desired name for the project and location where to save the project.
4) And in the same page select the server as tomcat that comes along with NetBeans.
5) In the next page select the framework as JavaServer Faces this will enable the NetBeans to recognise the project as a type of jsf.
6) Now you can see the new project under the projects window.
7) Expand the new projec to see its directory structure viz. Web Pages, Configuration Files, etc..
To create a web page:
1) Right click on the Web Pages and select a new jsp page. (Only jsp pages acts as a jsf pages)
2) This jsp page can be used to create the the user interface i.e web pages of ur project and the bussiness logic should not be mixed up in this page as we do in jsp.
3) Interface can be created using jsf tags which provide rich user interface components that comes with properties to link up them with the business logic that u wud write in a backend bean.
4) Backend beans are the java class files where u wud do ordinary java coding for ur bussiness logic.
To create a backend bean:
1) Right click on the Source Packages and select a new Java Class.
2) In the wizard opened select names for the java file and for the package.
Any bean that u create in the project shud be registered in the faces-config.xml file i.e present in the Configuration Files as like
<managed-bean>
<managed-bean-name>anyName</managed-bean-name>
<managed-bean-class>package.beanName</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
The below example wud clearly explain you the relationship between the jsp page and the backend bean.
Let us consider the example of a login page with two inputtext boxes for username and password and a button to submit.
Upon submit the username and password that the user enters in the webpage shud be verified and be allowed to the next page if he is authenticated.
so first to create the user interface on the web page
Open ur web page that was created earlier
We use the jsf tags that comes with the jsf library to create the user interface
To do so we need to import those library before we start using them
So the first two lines of any jsf page wud be the below ones:
<%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %>
<%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %>
At the end of the above lines examine the prefix given as h and f
h denotes the basic html tags
f denotes the jsf tags
These prefix letters can be changed according to ur choice but not recommended
The complete page wud look like
<html>
<head>
<title>Online Exam</title>
</head>
<body>
<f:view>
<h1>
<h:outputText value=”Login”/>
</h1>
<p>
<h:messages style=”color:darkred”/>
</p>
<h:form id=”backlogForm”>
<p>
<h:outputText value=”UserName “/>
<h:inputText value=”#{loginBean.userName}” id=”tf_UserName”/>
</p>
<p>
<h:outputText value=”Password “/>
<h:inputText value=”#{loginBean.password}” id=”tf_Password”/>
</p>
<h:commandButton action=”#{loginBean.submit}” value=”SUBMIT” />
</p>
</h:form>
</f:view>
</body>
</html>
The above tags like h:outputText, h:messages, h:inputText are used in creating the user interface.
Look at the value of inputText is given as {vloginBena.userName} this means the value is bind with the userName property of the vloginBean.
so as to bind the value with a property in the bean we need to create setter and getter methods for that particular value.
To do so we need to have the following lines inside the class file:
String userName;
public String getUserName() {
return userName;
}
public void setUserName(String usr) {
userName = usr;
}
The above lines are the very common lines you wud encounter regularly in the jsf.
The above lines wud enable u to set or get the value of the interface components of ur web page inside the java file or the backend bean.
Now let us c how the java code of our example wud look like:
package beans;
import java.io.IOException;
import java.sql.*;
import javax.faces.FactoryFinder;
import javax.faces.application.ApplicationFactory;
import javax.faces.application.FacesMessage;
import javax.faces.application.Application;
import javax.faces.application.ViewHandler;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpSession;
public class LoginBean {
String userName;
String password;
String result = null;
public String getUserName() {
return userName;
}
public void setUserName(String usr) {
userName = usr;
}
public String getPassword() {
return password;
}
public void setPassword(String pwd) {
password = pwd;
}
public String submit() {
String userId = null;
String password = null;
userId = getUserName();
password = getPassword();
System.out.println(”username is “+userId);
System.out.println(”password is “+password);
String result = null;
//If null user name / password - redirect with error
if (”".equals(userId) || “”.equals(password)) {
// The below lines wud display a message on the web page by using the
// h:messages tag that we used in the jsp page
FacesMessage fm = new FacesMessage(”Field is Empty”);
FacesContext.getCurrentInstance().addMessage(”Field is Empty”, fm);
return “none”;
}
//All the print statements wud get printed in the tomcat server console
System.out.println(”auth start”);
String auth = authenticateUser(userId, password);
if(auth.equals(”pass”)){
System.out.println(”authenticated”);
try {
/*values can be stored in session
such that they can be accessed from other beans
*/
HttpSession session = (HttpSession) facesContext.getExternalContext().getSession(false);
session.setAttribute(”userId”, userId);
session.setAttribute(”password”, password);
/* Now redirect the user to home.jsp with user information
The below value is returned to the faces-config.xml file where the navigation rule is applied see the faces-config.xml file at the end of this bean.*/
return “welcome”;
}
catch (Exception e) {
FacesMessage fm = new FacesMessage(”session exception ” +e.getMessage());
FacesContext.getCurrentInstance().addMessage(”session exception “+e.getMessage(), fm);
result = “none”;
}
}
else{
FacesMessage fm = new FacesMessage(”username and password doesnt match”);
FacesContext.getCurrentInstance().addMessage(”username and password doesnt match”, fm);
}
return result;
}
private String authenticateUser(String usr, String pwd){
if(usr.equals(”test”) && pwd.equals(”test”)) {
System.out.println(”pass”);
return “pass”;
}
else
return “fail”;
}
}
The faces-config.xml file wud look like:
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE faces-config PUBLIC “-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN” “http://java.sun.com/dtd/web-facesconfig_1_1.dtd”>
<!– =========== FULL CONFIGURATION FILE ================================== –>
<faces-config xmlns=”http://java.sun.com/JSF/Configuration”>
<navigation-rule>
<from-view-id>/login.jsp</from-view-id>
<navigation-case>
<!– Add a navigation from login page to next page –>
<from-action>#{loginBean.submit}</from-action>
<from-outcome>welcome</from-outcome>
<to-view-id>/nextpage.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<managed-bean>
<managed-bean-name>loginBean</managed-bean-name>
<managed-bean-class>beans.LoginBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
</faces-config>
Any jsf project you do will require editing these basic three pages else others for advanced functions.
The component that plays vital role in many forms is the drop down button.
You may need to do certain action performed on the remaining components on the selection of the
value in the drop down button like disabling (non editable) the components or even making them invisible.
So lets c how to dynamically vary the form based on the value selected in the combo box.
So lets now look at the syntax of a combobox:
<h:selectOneMenu value=”#{feeReg.cm_VEH_TYPE}”
onchange=”submit()” id=”cm_VEH_TYPE”
valueChangeListener=”#{feeReg.cm_VEH_TYPE_Changed}”
immediate=”true”>
<f:selectItems value=”#{feeReg.cm_VEH_TYPE_List}”/>
<h:outputLabel id=”cm_VEH_TYPELabel” for=”cm_VEH_TYPE” value=”Vehicle Type:”/>
</h:selectOneMenu>
h:selectOneMenu is the jsf tag to implement a combo box, look at the various parameters that u can pass to tis tag, value which we have seen, valueChangeListener is the one which will watch for the value change and will call the code that is assigned to this parameter, here we refered it to a method cm_VEH_TYPE_Changed in the feeReg bean. So what u write inside a this method will be a normal java code for ur bussiness logic.
And now in the logic u may want to disable or make other components in the form invisible but how wud u access the components in the bean to dynamically change them.
As we have seen earlier we can set or get the value of inputtext box by using the setter and getter method written inside the bean and are linked up to the component to its value parameter. So similarly there are parmeters like disabled and rendered that can be applied to any of the components and set their value that is true or false by calling the bean.
so lets c how we do it:
Suppose we want to disable or make an inputtext box invisible
<h:inputText id=”tf_SEAT_CAP” value=”#{feeReg.tf_SEAT_CAP}” disabled=”#{feeReg.tf_SEAT_CAP_Disabled}”
rendered=”#{feeReg.tf_SEAT_CAP_Rendered}”>
<h:outputLabel id=”tf_SEAT_CAPLabel” for=”tf_SEAT_CAP”>
<h:outputText value=”Seating Capacity:”/>
</h:outputLabel>
</h:inputText>
Look at the above h:inputText tag with several parmeters like id, value, disabled and rendered.
The value that is assigned to the “disabled” shud be true or false but we have not declared it directly instead we are redirecting it to a property inside a bean where its value is assigned.
A property inside a bean by definition shud have a setter and getter method.
So now once u have the setter and getter methods for a disabled property of inputText box u can dynamically set the value true or false in your bussiness logic.
And the same way goes for “rendered” which is used to make a component visible or invisible.
And in the above code the h:outputLabel is used to assign a label for the inputText box.
The “for” parmeter of the h:outputLabel will assign the label to the particular component with the ‘id’ as assigned to the ‘for’.
So giving an ‘id’ for all the component is a good idea.
Rest all in the next post. untill then happy coding..
