JBoss.orgCommunity Documentation
Now we will finish editing the JSP files for our two "views" using JSP Visual Page.
Click on the Diagram tab for 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 form within this folder, drag the cursor over to the editor, and drop it inside the red box in the editor
Another red box will appear inside the first red box
Right-click on the innermost box and select <h:form> Attributes from the menu
In the value field next to id, type greeting and click on the Close button
Type "Please enter name:" inside the boxes
Select inputText within the JSF HTML palette folder and drag it into the innermost box in the editor after "Please enter name:"
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, 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 innermost box in the editor after the input box
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
Back in the attributes dialog box, 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:
<%@ 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>
<h:form id="greeting">
Please enter name:
<h:inputText id="name" value="#{personBean.name}"/>
<h:commandButton value=" Say Hello " action="greeting"/>
</h:form>
</f:view>
</body>
</html>
The editor should look like this:
Save the file by selecting File > Save from the menu bar
Click 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 space after Hello) into the box
Select outputText 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 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 ( ! )
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