JBoss.orgCommunity Documentation
Version: 4.0.0
Copyright © 2007, 2008, 2009, 2010, 2011 JBoss by Red Hat
The following chapters describe how to deal with classic/old style of JSF development. We recommend users to use JBoss Seam to simplify development, but until then you can read about classical JSF usage here.
Thus, in this document we are going to show you how to create a simple JSF application using JBoss Tools plugins for Eclipse. The completed application will ask a user to enter a name and click a button. The resulting new page will display the familiar message, "Hello <name>!" This tutorial will show you how to create and run such an application from the beginning along the way demonstrating some of the powerful features of JBoss Tools.
Here, we provide you with a key functionality which is integrated in JSF tooling.
Table 1.1. Key Functionality for JSF Tools
Feature | Benefit |
---|---|
JSF and Facelets support | Step-by-step wizards for creating new JSF and Facelets projects with a number of predefined templates, importing existing ones and adding JSF capabilities to non-jsf web projects. |
Flexible and customizable project template management | Jump-start development with out-of-the-box templates or easily customized templates for re-use. |
Support for JSF Configuration File | Working on file using three modes: diagram, tree and source. Synchronization between the modes and full control over the code. Easy moving around the diagram using the Diagram Navigator. |
Support for Managed Beans | Adding new managed beans, generating code for attributes, properties and getter/setter methods. |
Support for Custom Converters and Validators | Fast creating of custom converters and validators with tree view of faces-config.xml file. |
Verification and Validation | All occuring errors will be immediately reported by verification feature, no matter in what view you are working. Constant validation and errors checking allows to catch many of the errors during development process that significantly reduces development time. |
All JBoss Developer Studio/JBoss Tools release documentation you can find at http://docs.jboss.org/tools in the corresponding release directory.
The latest documentation builds are available at http://download.jboss.org/jbosstools/nightly-docs.
Firstly, we assume that you have already launched Eclipse with JBoss Tools plug-ins installed and also that the Web Development perspective is the current one. (If not, make it active by selecting → → from the menu bar or by selecting → → from the menu bar and then selecting from the Select Perspective dialog box.)
Now we are going to create a new project for the application.
For that go to the menu bar and select
→ →Select
→ → in the New Project dialog box.Click the
button.Enter jsfHello as the project name.
Leave everything else as is, and click the
button.A jsfHello node should appear in the upper-left Package Explorer view.
Click the plus sign next to jsfHello to reveal the child nodes
Click the plus sign next to WebContent under jsfHello
Click the plus sign next to WEB-INF under WebContent
Then double-click on the faces-config.xml
node to display the JSF application configuration file editor
In our simple application, the flow is defined as a single navigation rule connecting two views (presentation files). At this point, we will create the placeholders for the two JSP presentation files and then the navigation rule to connect them as views. Later, we will complete the coding for the JSP presentation files. We can do all of this in the Diagram mode of the configuration file editor.
Create a new folder called pages
under the WebContent
folder.
Right-click anywhere on the diagram and select
from the context menu.In the dialog box, type pages/inputname as the value for From View ID.
Leave everything else as is.
Click the
button.If you look in the Package Explorer view you should see a pages
folder under the WebContent
folder. Opening it will reveal the JSP file you
just created.
Back on the diagram, right-click anywhere and select
from the pop-up menu.In the dialog box, type pages/greeting as the value for From View ID.
Leave everything else as is.
Click the
.In the diagram, select the connection icon third from the top along the upper left side of the diagram () to get an arrow cursor with a two-pronged plug at the arrow's bottom.
Click on the pages/inputname page icon and then click on the pages/greeting page icon.
A transition should appear between the two icons.
Select
→ from the menu bar.To store data in the application, we will use a managed bean.
Click on the Tree tab at the bottom of the editing window.
Select the Managed Beans node and then click the button displayed along the right side of the editor window.
Type in jsfHello.PersonBean for Class and personBean for Name. Leave the Scope selection as is and leave the Generate Source Code checkbox checked.
Click the
button.personBean will now be selected and three sections of information: Managed Bean, Properties, and Advanced will be displayed about it. Under the Properties section, click the button.
Type in name for Property-Name. Leave everything else as is. (When Property-Class is not filled in, String is the assumed type.)
Click the
button.Select the personBean node in the tree.
You should see this now:
Select
→ from the menu bar.You have now registered the managed bean and created a stub-coded class file for it.
Now we will finish editing the JSP files for our two "views" using JSP Visual Page Editor.
Click on the Diagram tab of the configuration file editor.
Open the editor for this first JSP file by double-clicking on the /pages/inputname.jsp icon.
The Visual Page Editor will open in a screen split between source code along the top and a WYSIWIG view along the bottom:
Some JSF code is already in the file, because we have chosen a template to create a page.
Select the Visual tab, so we can work with the editor completely in its WYSIWYG mode.
To the right of the editor, in the JBoss Tools Palette, expand the JSF HTML palette folder by selecting it.
Click on <f:view>
element. This can be done by dragging the form element onto the horizontal line at the top of the <f:view>
element. You should see a message saying Place at the beginning of <f:view>.
It is also possible to drag from the toolbar to the Source view. If you encounter any issues when dragging items to the Visual view, use the Source view; drag an element from the toolbar and drop it where you wish it to be within the code.
The Insert Tags dialog box will be displayed.
In the value field next to id, type greeting and click on the button.
Type "Please enter name:" inside the <h:form>
element.
Select <h:form>
element.
In the attributes dialog, click in the value field next to the value attribute and click on the button.
Then, select the
→ → node and click on the button.Back in the attributes dialog, select the Advanced tab, and type in name as the value for the id attribute, and then click on the button.
Select JSF HTML palette folder and drag it into the end of the <h:form>
element.
In the attributes dialog, click in the value field next to the action attribute and click on the button.
Then, select the
→ node and click on the button.In the Advanced tab, type in Say Hello as the value for the value attribute ("Say Hello") and then click on the button.
The source coding should be something like this now:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <f:view> <h:form id="greeting"> Please enter name: <h:inputText id="name" value="#{personBean.name}"/> <h:commandButton action="greeting" value="Say Hello"/> </h:form> </f:view> </body> </html>
The editor should look like this:
Save the file by selecting
→ from the menu barClick on the faces-config.xml
tab to bring the diagram back
Open the editor for the second file by double-clicking on the /pages/greeting.jsp
icon
Select the Visual tab, so we can work with the editor completely in its WYSIWYG mode
Type "Hello " (note the space after Hello) into the box
Select
within the JSF HTML palette folder and drag it into the innermost box in the editor after "Hello "In the attributes dialog, click in value field next to the value attribute and click on the (Browse) button
Then, select the
→ → node, click on the button, and then click on the button.Right after the output field, type an exclamation point ( ! )
The source coding should be something like this now:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <html> <head> <title></title> </head> <body> <f:view> Hello <h:outputText value="#{personBean.name}"/>! </f:view> </body> </html>
Save the file
You also need to create a start page as an entry point into the application.
In the Package Explorer view to the left, right-click
→ and select →For Name type in index, for Template select and click the button.
A JSP editor will open up on the newly created file.
In the Source part of the split screen, replace the contents of the file with the code below.
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head></head> <body> <jsp:forward page="/pages/inputname.jsf" /> </body> </html>
Note the .jsf
extension for the file name. This is a mapping defined in the web.xml
file for the project for invoking JavaServer Faces when you run the application.
Select
→ from the menu barEverything is now ready for running our application by using the JBoss engine. For controlling JBoss server there is Servers view:
Start up JBoss by clicking on the icon in Servers view. (If JBoss is already running, stop it by clicking on the red icon and then start it again. Remember, the JSF run-time requires restarting the servlet engine when any changes have been made.) After the messages in the Console tabbed view stop scrolling, JBoss is available
Click the Run icon() or right click your project folder and select
→ :This is the equivalent of launching the browser and typing http://localhost:8080/jsfHello/index.jsp into your browser. Our JSF application should now appear.
JSF on Sun: JavaServer Faces Technology
Core JSF: Core JavaServer Faces
API: JSF API
JSF Tags: JSF Core Tags
HTML Tags Reference: JSF HTML Tags Reference
JSF Central: JSF Central - Your JavaServer Faces Community
FAQ: JSF FAQ
Download: JavaServer Faces Technology - Download
In summary, with this tutorial you should now know how to organize JSF sample application using the wizards provided by JBoss Tools, configure its stuff and finally run it on the JBoss Server.
Find out more features on JSF tooling in our JSF Tools Reference Guide. If you have questions and suggestions, please refer to JBoss Tools Forum.