JBoss.orgCommunity Documentation

Chapter 5. Editing the JSP View Files

5.1. inputname.jsp
5.2. greeting.jsp

Now we will finish editing the JSP files for our two "views" using JSP Visual Page Editor.

5.1. inputname.jsp

The Visual Page Editor will open in a screen split between source code along the top and a WYSIWIG view along the bottom:

Visual Page Editor

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.

  • To the right of the editor, in the JBoss Tools Palette, expand the JSF HTML palette folder by selecting it.

JBoss Tools Palette

Figure 5.2. JBoss Tools Palette


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

Inserting the form element

Figure 5.3. Inserting the form element


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

Inserting the input text element

Figure 5.4. Inserting the input text element


  • In the attributes dialog, click in the value field next to the value attribute and click on the ...button.

  • Then, 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 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 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.

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:

Visual Page Editor

Figure 5.5. Visual Page Editor


  • Save the file by selecting File → Save from the menu bar

5.2. greeting.jsp

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>