JBoss Tools 3 Developers Guide
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Editing pages code sources

In this section, we will generate the source code of the register.jsp and success.jsp pages. You will also see how to develop a start page for the application.

Editing the register.jsp page

For editing the source code of a page that appears in the Diagram view, just double-click on it. For example, double-click on the register.jsp icon to open the page source in the Visual Page Editor as you can see in the following screenshot:

Editing the register.jsp page

Note

The Visual Page Editor is made of two parts: source code along the top and a WYSIWIG view along the bottom.

Now, we can use the JBoss Tools Palette (for details see Chapter 3) for editing the page source code in an easy manner. For example, for editing the register.jsp source code, follow these steps:

  1. Place the cursor in source code, right after the f:view tag.
  2. Type here the following code and place the cursor after it: 
    <h2>Registration form:</h2>
  3. Expand the JSF HTML section of the JBoss Tools Palette.
  4. Click on the form tag and wait until the Insert Tag window appears.
  5. Type success in the Value column, next to the id row, and click on Finish.
  6. Place the cursor inside the h:form tag, and click on the panelGrid tag from the JBoss Tools Palette. Wait until the Insert Tag window appears.
  7. Type 3 in the Value column, next to the columns row, and click on Finish.
  8. Place the cursor inside the h:panelGrid tag.
  9. Click on the outputLabel tag from the JBoss Tools Palette.
  10. In the Insert Tag window, type #{personBean.personName} in the Value column next to the for row. You can fill this field by manually typing or by browsing to the personName property (as shown in the following screenshot).
    Editing the register.jsp page
  11. Switch to Advanced tab. Type personNameLabel in the Value column, next to the id row and click on Finish.
  12. Place the cursor inside the h:outputLabel tag and click on the outputText tag from the JBoss Tools Palette.
  13. In the Insert Tag window, type Your Name: in the Value column, next to the value row, and then click on Finish.

    Steps 9—13 will generate the following source code:

    <h:outputLabel for="#{personBean.personName}" id="personNameLabel">
<h:outputText value="Your Name:"/>
</h:outputLabel>
  14. Now, place the cursor after the h:outputLabel and repeat steps 9—13 for inserting a label with text for every property of the PersonBean managed bean (personAge, personBirthDate, personPhone). The generated source code should look like this: 
    <h:outputLabel for="#{personBean.personAge}" id="personAgeLabel">
<h:outputText value="Your Age:"/>
</h:outputLabel>
<h:outputLabel for="#{personBean.personBirthDate}" id="personBirthDateLabel">
<h:outputText value="Your Birth Date (dd/MM/yyyy):"/>
</h:outputLabel>
<h:outputLabel for="#{personBean.personPhone}" id="personPhoneLabel">
<h:outputText value="Your Phone Number (x[x]-xxx-xxx-xxxx):"/>
</h:outputLabel>
  15. Place the cursor between the first and the second h:outputLabel tags.
  16. Click on the inputText tag from the JBoss Tools Palette.
  17. In the Insert Tag window, switch to Advanced tab. Type personName in the Value column, next to the id row.
  18. Also, type #{personBean.personName} in the Value column, next to the value row. You can fill in this field manually or by browsing to the personName property. Click Finish.

    Steps 15—17 generate the following source code:

    <h:inputText id="personName" value="#{personBean.personName}"/>

    Now, place the cursor after each h:outputLabel tag and repeat steps 15—17 for inserting a text field for each property of the PersonBean managed bean (personAge, personBirthDate, personPhone). The generated source code should look like this:

    <h:inputText id="personAge" value="#{personBean.personAge}"/>
<h:inputText id="personBirthDate" value="#{personBean.personBirthDate}"/>
<h:inputText id="personPhone" value="#{personBean.personPhone}"/>
  19. Place the cursor after the first h:inputText tag.
  20. Click on the message tag from the JBoss Tools Palette.
  21. In the Insert Tag window, switch to Advanced tab. Type personName in the Value column, next to the for row.
  22. Type color: red; text-decoration: overline in the Value column, next to the style row.
  23. Type personNameError in the Value column, next to the id row. Click Finish.

    Steps 19—22 generate the following source code:

    <h:message for="personName" id="personNameError"
style="color: red; text-decoration: overline"/>

    Now, place the cursor after each h:inputText tag and repeat steps 19—22 for inserting a h:message tag for each property of the PersonBean managed bean (personAge, personBirthDate, personPhone). The generated source code should look like this:

    <h:message for="personAge" id="personAgeError"
style="color: red; text-decoration: overline"/>
<h:message for="personBirthDate" id="personBirthDateError"
style="color: red; text-decoration: overline"/>
<h:message for="personPhone" id="personPhoneError"
style="color: red; text-decoration: overline"/>
  24. Place the cursor after the h:panelGrid tag.
  25. Click on the commandButton tag from the JBoss Tools Palette.
  26. In the Insert Tag window, type success in the Value column, next to the action row.
  27. Type Register in the Value column, next to the value row. Click on Finish.
  28. Place the cursor inside the h:inputText tag that corresponds to the personAge property. Place here the following default converter and validator: 
    <h:inputText id="personAge" value="#{personBean.personAge}">
<f:converter converterId="javax.faces.Integer"/>
<f:validateLongRange maximum="150" minimum="0"/>
</h:inputText>
  29. Place the cursor inside the h:inputText tag that corresponds to the personBirthDate property. Place here the following default converter: 
    <h:inputText id="personBirthDate" value="#{personBean.personBirthDate}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:inputText>
  30. Place the cursor inside the h:inputText tag that corresponds to the personPhone property. Place here the following custom converter: 
    <f:converter converterId="phoneConverter" />
  31. Place the cursor inside the h:inputText tag that corresponds to the personPhone property. Place here the following custom validator: 
    <f:validator validatorId="phoneValidator" />

The complete source code of register.jsp is:

<%@ 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>
<h2>Registration form:</h2>
<h:form id="success">
<h:panelGrid columns="3">
<h:outputLabel for="#{personBean.personName}"
id="personNameLabel">
<h:outputText value="Your Name:"/>
</h:outputLabel>
<h:inputText id="personName"
value="#{personBean.personName}"/>
<h:message for="personName" id="personNameError"
style="color: red; text-decoration: overline"/>
<h:outputLabel for="#{personBean.personAge}" id="personAgeLabel">
<h:outputText value="Your Age:"/>
</h:outputLabel>
<h:inputText id="personAge" value="#{personBean.personAge}">
<f:converter converterId="javax.faces.Integer"/>
<f:validateLongRange maximum="150" minimum="0"/>
</h:inputText>
<h:message for="personAge" id="personAgeError"
style="color: red; text-decoration: overline"/>
<h:outputLabel for="#{personBean.personBirthDate}"
id="personBirthDateLabel">
<h:outputText value="Your Birth Date (dd/MM/yyyy):"/>
</h:outputLabel>
<h:inputText id="personBirthDate"
value="#{personBean.personBirthDate}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:inputText>
<h:message for="personBirthDate" id="personBirthDateError"
style="color: red; text-decoration: overline"/>
<h:outputLabel for="#{personBean.personPhone}"
id="personPhoneLabel">
<h:outputText value="Your Phone Number (x[x]-xxx-xxx-xxxx):"/> </h:outputLabel>
<h:inputText id="personPhone" value="#{personBean.personPhone}">
<f:converter converterId="phoneConverter" />
<f:validator validatorId="phoneValidator" />
</h:inputText>
<h:message for="personPhone" id="personPhoneError"
style="color: red; text-decoration: overline"/>
</h:panelGrid>
<h:commandButton action="success" value="Register"/>
</h:form>
</f:view>
</body>
</html>

Editing the success.jsp page

Using the JBoss Tools Palette and the experience from the above section, you can easily develop a success.jsp page that looks like this (here, we just display on screen the submitted information using a set of h:outputText tags):

<%@ 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>
<h2>Registration successfully done!</h2>
<h:panelGrid columns="2">
<h:outputText value="Inserted Name:"/>
<h:outputText value="#{personBean.personName}"/>
<h:outputText value="Inserted Age:"/>
<h:outputText value="#{personBean.personAge}"/>
<h:outputText value="Inserted Birth Date:"/>
<h:outputText value="#{personBean.personBirthDate}"/>
<h:outputText value="Inserted Phone Number:"/>
<h:outputText value="#{personBean.personPhone.allNumber}"/>
<h:outputText value="Inserted Phone Number Country Code:"/>
<h:outputText value="#{personBean.personPhone.countryCode}"/>
<h:outputText value="Inserted Phone Number Area Code:"/>
<h:outputText value="#{personBean.personPhone.areaCode}"/>
<h:outputText value="Inserted Phone Number Prefix:"/>
<h:outputText value="#{personBean.personPhone.prefixNumber}"/>
</h:panelGrid>
</f:view>
</body>
</html>

Editing a start page for the registerJSF project

Now, it is time to create a start page for the application. This can be done by following these steps:

  1. In the Package Explorer view navigate to your WebContent directory (registerJSF | WebContent).
  2. Right-click on the WebContent directory and select the New | JSP File from the contextual menu.
  3. In the New JSP File window, type index in the Name field and select JSPRedirect option from the Template field. Click on Finish (if you click on the Next button, you will be able to add tag libraries to your JSP—here it is not the case).
  4. A JSP editor will open the source code of the index.jsp. Type /pages/register.jsf between the quotes of the page attribute.

The start page will look like this:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head></head>
<body>
<jsp:forward page="/pages/register.jsf" />
</body>
</html>

Save the project status by selecting the Save option from the File main menu.

Testing the registerJSF project

Finally, it is time to test our registerJSF project to see how it works. For this, start the JBoss 4.2 Server server (do this from JBoss AS view) and deploy the application on this server (do this by , and then on the project name in Package Explorer view and select Run As | Run On Server option).

The application will start in Eclipse Internal Web Browser, but you may also open it in your own web browser by accessing the http://localhost:8080/registerJSF/ URL. Following are some screenshots of the application:

Testing the registerJSF project
上一章目录下一章