Learn Java by Examples

In this tutorial, we will show you how to develop a simple JavaServer Faces (JSF) 2.0 application called as "WelcomeJSF" in NetBeans 7.3. In order to demonstrate development of this application we begin with:

1. Create a Web Application named as "WelcomeJSF" in NetBeans.
2. Create a simple JSF index form as index.xhtml
3. Create JSF page named as welcome.xhtml
4. Create a Managed Bean named as Welcome.java
5. Overview of Deployment Descriptor file named as web.xml
6. Build and Run the web application.

Create a Web Application named as "WelcomeJSF" in NetBeans.

Step 1 :- Open NetBeans IDE (See fig below)

and Select in the menu bar File ---> New Project or press Ctrl + Shift + N. (See fig below)

New Project dialog box gets open.

Step 2 :- Under Categories: select Java Web.
Step 3 :- Under Projects: select Web Application.
Step 4 :- Click Next > . (See fig below)

New Web Application dialog box gets open.

Step 5 :- Under Name and Location tab, enter Project Name: as "WelcomeJSF".
Step 6 :- Click Next > . (See fig below)

Under the same New Web Application, Server and Settings dialog box gets open.

Step 7:- Choose Server: as "GlassFish Server 4.0". You can also choose "GlassFish v3 Domain" as server if you are using old version of NetBeans other than 7.3.1, which comes bundled with "GlassFish v3 Domain".

Step 8:- Choose Java EE 6 Web as Java EE Version:. Keep rest as default.
Step 9:- Click Next >. (See fig below)

Under the same New Web Application, Frameworks dialog box gets open.

Step 10:- Choose JavaServer Faces in the Frameworks section.
Step 11:- Under the Libraries tab, select the server default libraries (JSF 2.2 or JSF 2.0) which comes up with server.
Step 12:- Click Configuration tab. (See fig below)

Step 13:- Under Configuration tab, provide JSF Servlet URL Pattern: as "/faces/*" and Preferred Page Language: as "Facelets".
Step 14:- Click Finish. (See fig below)

Following package structure for the web application gets created

Create a simple JSF index form as index.xhtml

After creation of WelcomeJSF web application, index.xhtml gets created automatically by NetBeans IDE. Modifying the xhtml page with following code.

<?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">
    <h:head>
        <title>Index Page !!!</title>
    </h:head>
    <h:body>
        <h:form>
            <h1>The Welcome Index Form !!!.</h1>
            <h:panelGrid columns="2" cellspacing="1" cellpadding="1">
                <h:panelGroup>
                    <h:outputLabel for="firstName">
                        <h:outputText value="FirstName: " />
                    </h:outputLabel>
                </h:panelGroup>
                <h:panelGroup>
                    <h:inputText id="firstName" value="#{welcome.firstName}"/>
                </h:panelGroup>

                <h:panelGroup>
                    <h:outputLabel for="lastName">
                        <h:outputText value="LastName: " />
                    </h:outputLabel>
                </h:panelGroup>
                <h:panelGroup>
                    <h:inputText id="lastName" value="#{welcome.lastName}"/>
                </h:panelGroup>
                
                <h:panelGroup>
                    <h:commandButton id="submit" value="Submit" 
action="#{welcome.welcomeUser}" />
                </h:panelGroup>
            </h:panelGrid>
        </h:form>
    </h:body>
</html>

In order to use JSF 2.0 features, JSF Namespaces are declared at the top of JSF page.

Step 1:- h:panelGrid represents a table having rows and columns.
Step 2:- h:panelGroup represents rows in a table. h:outputLabel represents a label displaying a value as a label through h:outputText on JSF page. h:inputText represents a component that takes in a value entered by the user."#{welcome.firstName}" represents JSF expression language, where JSF finds a managed bean by the name "welcome" and assign the value of h:inputText to firstName property of the managed bean.
Step 3:- h:commandButton renders out to a button having value specified by value attribute and action attribute evaluates to a string value. This value tells which page to display when submit button is clicked. Here string value is evaluated by calling "welcomeUser()" method present in the managed bean having name as "welcome".

Create JSF page named as welcome.xhtml

Step 1:- Click Web Pages directory, do a right click and browse from New ---> Other. (See fig below)

Step 2:- On clicking Other, New File dialog box gets open. Select JavaServer Faces in the Categories: tab.
Step 3:- Choose JSF Page under the File Types: section.
Step 4:- Click Next >. (See fig below)

Step 5:- New JSF Page dialog box gets open. Provide File Name: value as "welcome" in order to create welcome.xhtml page.
Step 6:- Select "Facelets" in the Options: box.
Step 7:- Click Finish. welcome.xhtml page gets created. (See fig below)

Modify welcome.xhtml with the following code.

<?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">
    
    <h:head>
        <title>Welcome !!!</title>
    </h:head>
    <h:body>
        <h:form><h1>
            <h:outputText id="welcomeUser"
                value="Welcome #{welcome.firstName} #{welcome.lastName} to JSF !!!."/>
        </h1></h:form>
    </h:body>
</html>

Create a Managed Bean named as Welcome.java

Step 1:- Click Source Packages directory, do a right click and browse from New ---> Other. (See fig below)

Step 2:- On clicking Other, New File dialog box gets open. Select JavaServer Faces in the Categories: tab.
Step 3:- Choose JSF Managed Bean under the File Types: section.
Step 4:- Click Next >. (See fig below)

Step 5:- New JSF Managed Bean dialog box gets open. Enter Class Name: value as Welcome in order to create a Managed Bean "Welcome.java".
Step 6:- Provide a package name here its "com.hubberspot.jsf".
Step 7:- Give a name to the Managed Bean say "welcome". It is been referred by this name into JSF expression language.
Step 8:- Provide a session scope to this Managed Bean.
Step 9:- Click Finish. (See fig below)

Modify Welcome.java with the following code.

package com.hubberspot.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class Welcome {

    // firstName to store value entered in index.xhtml
    private String firstName;
    
    // lastName to store value entered in index.xhtml
    private String lastName;

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }
    
    // method called when user clicks submit button in index.xhtml
    // It returns String as welcome. Based on this String flow gets
    // forwarded to welcome.xhtml
    public String welcomeUser() {
        return "welcome";
    }    
}

Overview of Deployment Descriptor file named as web.xml

Step 1:- Context Parameters with the name as "javax.faces.PROJECT_STAGE" and value as "Development" is provided. It tells that application is in Development phase and it provides debugging facilities.
Step 2:- Servlet and Servlet Mapping is provided in the web.xml for the Faces Servlet. Every request with url pattern as "/faces/*" is forwarded to JSF's Faces Servlet.
Step 3:- It defines a welcome file that points to "faces/index.xhtml". (See fig below)

Complete web.xml is provided below :

<?xml version="1.0" encoding="UTF-8"?>
<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">
    
    <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>faces/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

Final Package Structure for the web application

Build and Run the web application.

Step 1:- Right click "WelcomeJSF" directory and click "Build".
(See fig below)

Step 2:- Right click "WelcomeJSF" directory and click "Run". (See fig below)

Demo for the Working of the JSF web application

After running the application browse to following link in the browser as : "http://localhost:8080/WelcomeJSF/faces/index.xhtml"

Step 1:- Enter FirstName value in the textfield.
Step 2:- Enter LastName value in the textfield.
Step 3:- Click Submit button. (See fig below)

Step 4 :- On clicking Submit the values of text fields are passed to Managed Bean by name "welcome". It calls welcomeUser() method as a action present in the Managed Bean. On returning "welcome" string it forwards the request to welcome.xhtml. Thus renders output with welcoming the User with its FirstName and LastName.

Video tutorial to demonstrate how to create your first Java Server Faces (JSF) Framework Web Application.

Logical Operators in Java -

Program to demonstrate working of Logical Operators in Java.

public class LogicalOperators {

 public static void main(String[] args) {

  // Logical AND Operator & , &&
  // F & F --> F
  // T & F --> F
  // F & T --> F
  // T & T --> T

  int number1 = 5;
  int number2 = 10;

  boolean b1, b2, b3, b4, b5, b6, b7;

  b1 = (number1 > 6) && (number2 > number1);
  System.out.println(b1);

  b2 = (number1 > 4) && (number2 > number1);
  System.out.println(b2);

  // Logical OR Operator | , ||
  // F | F --> F
  // T | F --> T
  // F | T --> T
  // T | T --> T

        b3 = (number1 > 6) || (number2 > 15);
        System.out.println(b3);
        
        b4 = (number1 > 3) || (number2 > 11);
        System.out.println(b4);

        // Logical NOT Operator !

        // !T ---> F
        // !F ---> T
        
        b5 = !(number1 > 3);
        System.out.println(b5);
        
        b5 = !(number1 > 6);
        System.out.println(b5);
        
        // Logical XOR Operator ^
        // F ^ F ---> F
        // T ^ F ---> T
        // F ^ T ---> T
        // T ^ T ---> F
        
        b6 = (number1 > 3) ^ (number2 > 6);
        System.out.println(b6);
        
        b6 = (number1 > 3) ^ (number2 > 11);
        System.out.println(b6);

 }

}

Output of the program :

Learn Java by Examples

Free Data Structures and Algorithms Course

Ajax and Java

How to Create Your First Java Server Faces (JSF) Web Application ?.

How to use Logical Operators in Java ?.

Cracking the GAMAM Technical Interview

Subscribe For Free Video Tutorials

Free Best Seller Courses

Java Video Tutorials

Labels

Search This Blog

Blog Archive

About Me