Red Hat JBoss Developer Studio 6.0 JSF Tools Tutorial

Red Hat JBoss Developer Studio 6.0 JSF Tools Tutorial
Red Hat JBoss Developer Studio
6.0
JSF Tools Tutorial
Provides information relating to the JSF Tools module.
Edition 6.0.0
Anatoly Fedosik
Olga Chikvina
Svetlana Mukhina
Red Hat JBoss Developer Studio 6.0 JSF Tools Tutorial
Provides information relating to the JSF Tools module.
Edition 6.0.0
Anato ly Fedo sik
Olga Chikvina
Svetlana Mukhina
Legal Notice
Copyright © 2011 Red Hat.
T his document is licensed by Red Hat under the Creative Commons Attribution-ShareAlike 3.0 Unported
License. If you distribute this document, or a modified version of it, you must provide attribution to Red
Hat, Inc. and provide a link to the original. If the document is modified, all Red Hat trademarks must be
removed.
Red Hat, as the licensor of this document, waives the right to enforce, and agrees not to assert, Section
4d of CC-BY-SA to the fullest extent permitted by applicable law.
Red Hat, Red Hat Enterprise Linux, the Shadowman logo, JBoss, MetaMatrix, Fedora, the Infinity Logo,
and RHCE are trademarks of Red Hat, Inc., registered in the United States and other countries.
Linux ® is the registered trademark of Linus T orvalds in the United States and other countries.
Java ® is a registered trademark of Oracle and/or its affiliates.
XFS ® is a trademark of Silicon Graphics International Corp. or its subsidiaries in the United States
and/or other countries.
MySQL ® is a registered trademark of MySQL AB in the United States, the European Union and other
countries.
Node.js ® is an official trademark of Joyent. Red Hat Software Collections is not formally related to or
endorsed by the official Joyent Node.js open source or commercial project.
T he OpenStack ® Word Mark and OpenStack Logo are either registered trademarks/service marks or
trademarks/service marks of the OpenStack Foundation, in the United States and other countries and
are used with the OpenStack Foundation's permission. We are not affiliated with, endorsed or
sponsored by the OpenStack Foundation, or the OpenStack community.
All other trademarks are the property of their respective owners.
Abstract
T he JSF T ools T utorial explains how to use the JSF T ools module to create a simple JSF application.
Table of Contents
Table of Contents
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3. . . . . . . . . .
Preface
.Chapter
. . . . . . . . 1.
. . .Introduction
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4. . . . . . . . . .
1.1. Key Features of JSF T ools
4
1.2. Other relevant resources on the topic
4
.Chapter
. . . . . . . . 2.
. . .Creating
.........a
. . Simple
. . . . . . . .JSF
. . . . Application
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5. . . . . . . . . .
2.1. Setting Up the Project
5
2.2. JSF Configuration File
5
.Chapter
. . . . . . . . 3.
. . .Adding
. . . . . . . Navigation
. . . . . . . . . . . .to
. . .the
. . . .Application
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7. . . . . . . . . .
3.1. Adding T wo Views (JSP Pages)
7
3.2. Creating the T ransition (Navigation Rule)
7
.........4
Chapter
. ...Adding
. . . . . . . .a. .Managed
. . . . . . . . . .Bean
. . . . . .to
. . the
. . . . Application
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9. . . . . . . . . .
.Chapter
. . . . . . . . 5.
. . .Editing
. . . . . . . .the
. . . .JSP
. . . . View
. . . . . .Files
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
............
5.1. inputname.jsp
11
5.2. greeting.jsp
15
. . . . . . . . . 6.
Chapter
. . .Creating
. . . . . . . . . the
. . . . Start
. . . . . . Page
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
............
. . . . . . . . . 7.
Chapter
. . .Running
. . . . . . . . .the
. . . .Application
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
............
. . . . . . . . . 8.
Chapter
. . .Other
. . . . . . Relevant
. . . . . . . . . . Resources
. . . . . . . . . . . .on
. . .the
. . . .topic
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
............
.Getting
. . . . . . . .Help
. . . . .and
. . . . Giving
. . . . . . . .Feedback
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
............
A.1. Do You Need Help?
20
A.2. Give us Feedback
20
. . . . . . . . . .History
Revision
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
............
1
Red Hat JBoss D eveloper Studio 6.0 JSF Tools Tutorial
2
Preface
Preface
T his manual uses several conventions to highlight certain words and phrases and draw attention to
specific pieces of information. T o get more information on these conventions please refer to the
Docum ent Conventions manual, which can be found on the Red Hat Documentation website under
the JBoss Developer Studio section.
3
Red Hat JBoss D eveloper Studio 6.0 JSF Tools Tutorial
Chapter 1. Introduction
T he 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.
T hus, in this document we are going to show you how to create a simple JSF application using JBoss
T ools plugins for Eclipse. T he completed application will ask a user to enter a name and click a button.
T he resulting new page will display the familiar message, "Hello <name>!" T his 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 T ools.
1.1. Key Features of JSF Tools
Here, we provide you with a key functionality which is integrated in JSF tooling.
T able 1.1. Key Functionality for JSF T ools
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.
1.2. Other relevant resources on the topic
All JBoss Developer Studio/JBoss T ools release documentation you can find at
http://docs.jboss.org/tools in the corresponding release directory.
T he latest documentation builds are available at http://download.jboss.org/jbosstools/nightly-docs.
4
Chapter 2. Creating a Simple JSF Application
Chapter 2. Creating a Simple JSF Application
Firstly, we assume that you have already launched Eclipse with JBoss T ools plug-ins installed and also
that the Web Development perspective is the current one. (If not, make it active by selecting Window →
Open Perspective → Web Development from the menu bar or by selecting Window → Open
Perspective → Other... from the menu bar and then selecting Web Development from the Select
Perspective dialog box.)
2.1. Setting Up the Project
Now we are going to create a new project for the application.
For that go to the menu bar and select File → New → Project...
Select JBoss T ools Web → JSF → JSF Project in the New Project dialog box.
Click the Next button.
Enter jsfHello as the project name.
Leave everything else as is, and click the Finish button.
2.2. JSF Configuration File
A jsfHello node should appear in the upper-left Package Explorer view.
Figure 2.1. 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
T hen double-click on the faces-config.xm l node to display the JSF application configuration file
5
Red Hat JBoss D eveloper Studio 6.0 JSF Tools Tutorial
editor
Figure 2.2. Configuration File Editor
6
Chapter 3. Adding Navigation to the Application
Chapter 3. Adding Navigation to the Application
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.
3.1. Adding Two Views (JSP Pages)
Create a new folder called pages under the WebContent folder.
Right-click anywhere on the diagram and select New View... from the context menu.
In the dialog box, type pages/inputnam e as the value for From View ID.
Leave everything else as is.
Click the Finish 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 New View... 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 Finish.
3.2. Creating the Transition (Navigation Rule)
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/inputnam e page icon and then click on the pages/greeting page icon.
A transition should appear between the two icons.
7
Red Hat JBoss D eveloper Studio 6.0 JSF Tools Tutorial
Figure 3.1. T ransition Between T wo Icons
Select File → Save from the menu bar.
8
Chapter 4. Adding a Managed Bean to the Application
Chapter 4. Adding a Managed Bean to the Application
T o store data in the application, we will use a managed bean.
Click on the T ree tab at the bottom of the editing window.
Select the Managed Beans node and then click the Add... button displayed along the right side of
the editor window.
T ype 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 Finish 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 Add... button.
T ype in nam e for Property-Nam e. Leave everything else as is. (When Property-Class is not
filled in, String is the assumed type.)
Click the Finish button.
Select the personBean node in the tree.
You should see this now:
Figure 4 .1. T ree View in Config Editor
9
Red Hat JBoss D eveloper Studio 6.0 JSF Tools Tutorial
Select File → Save from the menu bar.
You have now registered the managed bean and created a stub-coded class file for it.
10
Chapter 5. Editing the JSP View Files
Chapter 5. Editing the JSP View Files
Now we will finish editing the JSP files for our two "views" using JSP Visual Page Editor.
5.1. inputname.jsp
Click on the Diagram tab of the configuration file editor.
Open the editor for this first JSP file by double-clicking on the /pages/inputnam e.jsp icon.
T he Visual Page Editor will open in a screen split between source code along the top and a WYSIWIG
view along the bottom:
Figure 5.1. Visual Page Editor
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.
T o the right of the editor, in the JBoss T ools Palette, expand the JSF HT ML palette folder by
selecting it.
11
Red Hat JBoss D eveloper Studio 6.0 JSF Tools Tutorial
Figure 5.2. JBoss T ools Palette
Click on form within this folder, drag the cursor over to the editor, and drop it inside the <f:view>
element. T his 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>.
12
Chapter 5. Editing the JSP View Files
Important
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.
Figure 5.3. Inserting the form element
T he Insert T ags dialog box will be displayed.
In the value field next to id, type greeting and click on the Close button.
T ype "Please enter name:" inside the <h:form > element.
Select inputT ext within the JSF HT ML palette folder place it at the end of the <h:form > element.
Figure 5.4 . Inserting the input text element
13
Red Hat JBoss D eveloper Studio 6.0 JSF Tools Tutorial
In the attributes dialog, click in the value field next to the value attribute and click on the ...button.
T hen, select the Managed Beans → personBean → name node and click on the OK button.
Back in the attributes dialog, select the Advanced tab, and type in nam e as the value for the id
attribute, and then click on the Finish button.
Select commandButton within the JSF HT ML 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.
T hen, select the View Actions → greeting node and click on the OK button.
In the Advanced tab, type in Say Hello as the value for the value attribute ("Say Hello") and then
click on the Finish button.
T he source coding should be something like this now:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF8"%>
<%@ 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>
T he editor should look like this:
14
Chapter 5. Editing the JSP View Files
Figure 5.5. Visual Page Editor
Save the file by selecting File → Save from the menu bar
5.2. greeting.jsp
Click on the faces-config.xm l 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
T ype "Hello " (note the space after Hello) into the box
Select outputT ext within the JSF HT ML 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
T hen, select the Managed Beans → personBean → name node, click on the OK button, and then
click on the Finish button.
Right after the output field, type an exclamation point ( ! )
T he source coding should be something like this now:
15
Red Hat JBoss D eveloper Studio 6.0 JSF Tools Tutorial
<%@ 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
16
Chapter 6. Creating the Start Page
Chapter 6. Creating the Start Page
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 jsfHello → WebContent and select New → JSP
File
For Name type in index, for T emplate select New JSP File (html) and click the Finish 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. T his is a mapping defined in the web.xm l file for the project
for invoking JavaServer Faces when you run the application.
Select File → Save from the menu bar
17
Red Hat JBoss D eveloper Studio 6.0 JSF Tools Tutorial
Chapter 7. Running the Application
Everything is now ready for running our application by using the JBoss engine. For controlling JBoss
server there is Servers view:
Figure 7.1. 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 Run As → Run on Server:
T his is the equivalent of launching the browser and typing http://localhost:8080/jsfHello/index.jsp into
your browser. Our JSF application should now appear.
Figure 7.2. JSF Application in Firefox 4 .0
18
Chapter 8. Other Relevant Resources on the topic
Chapter 8. Other Relevant Resources on the topic
JSF on Sun: JavaServer Faces T echnology
Core JSF: Core JavaServer Faces
API: JSF API
JSF T ags: JSF Core T ags
HT ML T ags Reference: JSF HT ML T ags Reference
JSF Central: JSF Central - Your JavaServer Faces Community
FAQ: JSF FAQ
Download: JavaServer Faces T echnology - Download
In summary, with this tutorial you should now know how to organize JSF sample application using the
wizards provided by JBoss T ools, configure its stuff and finally run it on the JBoss Server.
Find out more features on JSF tooling in our JSF T ools Reference Guide. If you have questions and
suggestions, please refer to JBoss T ools Forum.
19
Red Hat JBoss D eveloper Studio 6.0 JSF Tools Tutorial
Getting Help and Giving Feedback
A.1. Do You Need Help?
If you experience difficulty with a procedure described in this documentation, visit the Red Hat Customer
Portal at http://access.redhat.com. T hrough the customer portal, you can:
search or browse through a knowledgebase of technical support articles about Red Hat products.
submit a support case to Red Hat Global Support Services (GSS).
access other product documentation.
Red Hat also hosts a large number of electronic mailing lists for discussion of Red Hat software and
technology. You can find a list of publicly available mailing lists at https://www.redhat.com/mailman/listinfo.
Click on the name of any mailing list to subscribe to that list or to access the list archives.
A.2. Give us Feedback
If you find a typographical error, or know how this guide can be improved, we would love to hear from
you. Submit a report in Bugzilla against the product JBoss Developer Studio and the component
JSF T ools T utorial. T he following link will take you to a pre-filled bug report for this product:
http://bugzilla.redhat.com/.
Fill out the following template in Bugzilla's Description field. Be as specific as possible when
describing the issue; this will help ensure that we can fix it quickly.
Document URL:
Section Number and Name:
Describe the issue:
Suggestions for improvement:
Additional information:
Be sure to give us your name so that you can receive full credit for reporting the issue.
20
Revision History
Revision History
Revision 6.0.1-1.4 06
Rebuild with Publican 4.0.0
T ue Jan 7 2014
Rüdiger Landmann
Revision 6.0.1-1
T ue Aug 27 2013
Michelle Murray
T OOLSDOC-382: Rebuilt for Customer Portal, content unchanged
Revision 1-1
Mon Mar 14 2011
General updates, screen shot refresh, and procedure check
Matthew Casperson
Revision 1-0
JBoss T ools Documentation
T eam
Wed Jun 09 2010
General updates
Revision 0-0
Fri Nov 20 2009
Initial creation of book by publican
Isaac Rooskov
21
Was this manual useful for you? yes no
Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Download PDF

advertisement