Reader Level:
ARTICLE

Creating Web application On NetBeans using JSF

Posted by Vikas Mishra Articles | JSP December 11, 2011
NetBeans IDE provides numerous features that enable built-in support for JavaServer Faces 2.0. The IDE's new JSF 2.0 support builds upon its previous support for JavaServer Faces, and includes versatile editor enhancements for Facelets pages, various facilities for working with entity classes.
  • 0
  • 0
  • 41615
Download Files:
 

Working with JSF in Netbeans:

In this article I'm going to describe how to create a web application on NetBeans using the JSF 2.0 Framework. NetBeans IDE provides numerous features that enable built-in support for JavaServer Faces 2.0. The IDE's new JSF 2.0 support builds upon its previous support for JavaServer Faces, and includes versatile editor enhancements for Facelets pages, various facilities for working with entity classes, and a suite of JSF wizards for common development tasks, such as creating JSF managed beans, Facelets templates and composite components. NetBeans IDE 6.8, 6.9 and 7.0 support the JSF 2.0.The following topics describes how the JSF 2.0 features  disposal when working in the NetBeans IDE. There is an application to create a web application:

Step 1 : Creating a New Project with JSF 2.0 Support : Use the IDE's Project wizard to create a new Java web application.

1.gif

Step 2 :
In next step given it a particular name:



 2.gif

Step 3 : Select Server : Select a Glassfish server 3.0 on wards:

select-server.gif

Step 4 : Select Frame Work : Select a Frame work JSF 2.0: 

selectframework.gif

Step 5 : Utilizing JSF Editor : The IDE's editor is language-specific, and provides support depending on the file type you are working in. Generally speaking, you can press Ctrl-Space on an element in your file to invoke code completion and API documentation. You can also take advantage of keyboard shortcuts and code templates.

The following briefly demonstrates the editor support that is at your disposal.

Facelets Editor: The IDE's Facelets editor provides numerous features that facilitate JSF development, including syntax highlighting and error checking for JSF tags, documentation support, and code completion for EL expressions, core Facelets libraries and namespaces.

facilates-editor.gif

Faces Editor: If you include a faces-config.xml file in your JSF project, you can press Ctrl-Space when defining navigation rules or declaring managed beans in order to bring up code completion and documentation support.

faces-xml.gif

Step 6 : Managed Bean: The NetBeans IDE provides numerous wizards that facilitate development with JSF 2.0. You can create new Facelets pages, Facelets templates, JSF managed beans, composite components, Faces configuration files, and more.

managedbean1.gif

Step 7 : Facelets Template Wizard : Use the Facelets Template wizard to generate a Facelets template. From the JavaServer Faces category in the IDE's File wizard, select Facelets Template. You can choose from eight unique layout styles, and specify whether the layout is implemented using CSS or an HTML <table> tag.

newfacetemplet.gif

Step 8 : Facelets Template Client Wizard : Use the Facelets Template Client wizard to generate a page that references a Facelets template in your project. From the JavaServer Faces category in the IDE's File wizard, select Facelets Template Client. You can specify the location of the Facelets Template that is used by the client. You can specify if the root tag is <html> or <ui:composition>

faceclient.gif

Example : We making an application on NetBeans using the JSF 2.0: These are the files for it :

greeting.xhtml:

<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition template="./template.xhtml">
<ui:define name="title">
Greeting
</ui:define>
<ui:define name="box">
<h4>Hi, my name is vikas mishra</h4>
<h5>I'm thinking of a number
<br/>
between
<span class="highlight">0</span> and
<span class="highlight">10</span>.</h5>
<h5>Can you guess it?</h5>
<h:form>
<h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />
<h:commandButton id="submit" value="submit" action="response" />
</h:form>
</ui:define>
</ui:composition>
</body>
</html>

response.xhtml:

<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition template="./template.xhtml">
<ui:define name="title">
Response
</ui:define>
<ui:define name="box">
<h4><h:outputText escape="false" value="#{UserNumberBean.response}"/></h4>
<h:form prependId="false">
<h:commandButton id="backButton" value="Back" action="greeting" />
</h:form>
</ui:define>
</ui:composition>
</body>
</html>

template.xhtml:

<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<title><ui:insert name="title">Facelets Template</ui:insert></title>
</h:head>
<h:body>
<div id="mainContainer">
<div id="left" class="subContainer greyBox">
<ui:insert name="box">Box Content Here</ui:insert>
</div>
<div id="right" class="subContainer">
<img src="duke.png" alt="Duke waving" />
</div>
</div>
</h:body>
</html>

web.xhtml:

<?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>a
<session-timeout>30</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/greeting.xhtml</welcome-file>
</welcome-file-list>
</web-app>

Output:

response.xhtml:

out1.bmp

greeting.xhtml:

out2.bmp

greeting.xhtml:

output3.bmp

COMMENT USING