JBoss.orgCommunity Documentation

JSF Tools Tutorial

Version: 4.0.0


1. Introduction
1.1. Key Features of JSF Tools
1.2. Other relevant resources on the topic
2. Creating a Simple JSF Application
2.1. Setting Up the Project
2.2. JSF Configuration File
3. Adding Navigation to the Application
3.1. Adding Two Views (JSP Pages)
3.2. Creating the Transition (Navigation Rule)
4. Adding a Managed Bean to the Application
5. Editing the JSP View Files
5.1. inputname.jsp
5.2. greeting.jsp
6. Creating the Start Page
7. Running the Application
8. Other Relevant Resources on the topic

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.

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 WindowOpen PerspectiveWeb Development from the menu bar or by selecting WindowOpen PerspectiveOther... from the menu bar and then selecting Web Development from the Select Perspective dialog box.)

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.

To store data in the application, we will use a managed bean.

You should see this now:


  • Select FileSave 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.

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 form within this folder, drag the cursor over to the editor, and drop it inside the <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>.

    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.


  • The Insert Tags dialog box will be displayed.

  • In the value field next to id, type greeting and click on the Close button.

  • Type "Please enter name:" inside the <h:form> element.

  • Select inputText within the JSF HTML palette folder place it at the end of the <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 Managed BeanspersonBeanname node and click on the OK 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 Finish button.

  • Select commandButton within the 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 View Actionsgreeting 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.

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 FileSave from the menu bar

You also need to create a start page as an entry point into the application.

A JSP editor will open up on the newly created file.

<!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.

Everything 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 Run AsRun on Server:

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.


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.