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.
Step 2 : In next step given it a particular name:
Step 3 : Select Server : Select a
Glassfish server 3.0 on wards:
Step 4 : Select Frame Work : Select a
Frame work JSF 2.0:
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.
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.
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.
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.
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>
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:
greeting.xhtml:
greeting.xhtml:
