JSF and Struts Classic Reference Manual

We are going to show you how to create a simple JSF application using the JBoss Developer Studio plug-in 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 document will show you how to create such an application from the beginning, along the way demonstrating some of the powerful features of JBoss Developer Studio. You will design the JSF application and then run the application from inside JBoss Developer Studio. We'll assume that you have already launched Eclipse with JBoss Developer Studio installed and also that the JBoss Developer Studio 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.)

We are first going to create a new project for the application.

A jsfHello node should appear in the upper-left Package Explorer view.

Figure 2.1. Package Explorer View

Figure 2.2. Configuration File Editor

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. With JBoss Developer Studio, we can do all of this in the Diagram mode of the configuration file editor.

2.4.1. Adding Two Views (JSP Pages)

• Right-click anywhere on the diagram and select New View... from the pop-up menu

• In the dialog box, type pages/inputname as the value for From-view-id

• Leave everything else as is

• Click Finish

  If you look in the Package Explorer view you should see a pages folder under WebContent. 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 Finish

2.4.1.1. Creating the Transition (Navigation Rule)

• In the diagram, select the connection icon third from the top along the upper left side of the diagram

Figure 2.3. Connection Icon

to get an arrow cursor with a two-pronged plug at the arrow's bottom.

• Click on the pages/inputname page icon and then click on the pages/greeting page icon

A transition should appear between the two icons.

Figure 2.4. Transition Between Two Icons

• Select File > Save from the menu bar

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

You should see this now:

Figure 2.5. Tree View in Config Editor

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.

2.6.1. inputname.jsp

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

Figure 2.6. 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

Figure 2.7. JBoss Tools Palette

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

<para>Please enter a name:</para>

<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:

Figure 2.8. Visual Page Editor

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

<%@ 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>

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.

The source coding should look like this now:

<!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 without having to leave JBoss Developer Studio by using the JBoss engine that comes with the JBoss Developer Studio plug-in. For controlling JBoss server within JBoss Developer Studio there is JBoss Server view:

Figure 2.9. JBoss Server View

Figure 2.10. Run Icon

This is the equivalent of launching the browser and typing http://localhost:8080/jsfHello into your browser. Our JSF application should now appear.

JSF on Sun: JavaServer Faces Technology

Core JSF: Core JavaServer Faces

API: JSF API

JSF Tags: JSF Core Tags

HTML Tags Reference: JSF HTML Tags Reference

JSF Central: JSF Central - Your JavaServer Faces Community

FAQ: JSF FAQ

Download: JavaServer Faces Technology - Download

We are first going to create a new project for the application.

A "StrutsHello" node should appear in the upper-left Package Explorer view.

At this point, its empty except for the background grid lines.

Now, we will design the application by creating the individual components as placeholders first. (We dont have to complete all of the details inside the components until afterwards.)

3.2.3. Creating a Link

Let's now create a link from the inputname.jsp page to the action.

• On the left-hand side of the diagram in the column of icons, click on this icon:

Figure 3.1. Create New Connection Icon

• In the connect-the-components mode you are in now, click on the /pages/inputname.jsp icon in the diagram and then click on the /greeting action

A link will be created from the page to the action.

3.2.4. Creating a Forward

Next, we are going to create a forward for the action.

• On the left-hand side of the diagram in the column of icons, click on this icon, again:

Figure 3.2. Create New Connection Icon

• Click on the /greeting action icon in the diagram and then click on the pages/greeting.jsp icon

• That's it. A link will be drawn from the actions new greeting forward to the greeting.jsp JSP page. Note that the forwards name will be set based on the name of the target JSP file name. If you don't like it, you can easily change it

• Select the Tree tab at the bottom of the editor window (between Diagram and Source)

• Expand the struts-config.xml/action-mappings//greeting node and then select the greeting forward

• In the Properties Editor to the right, change the text to "sayHello" in the Name field

• Select the Diagram tab at the bottom of the editor window and see how the diagram is also updated to reflect the change

3.2.5. Creating a Global Forward

One last component that we need to create in the diagram is a global forward.

• Somewhere in the top-left corner of diagram, right-click and select Add > Global Forward...

• Enter getName in the Name field

• Select the Change...button for Path

• In the Edit Path window, switch to the Pages tab

• Expand the StrutsHello > WEB-ROOT (WebContent) > pages node and then select the inputname.jsp page

• Click Ok.

• Leave the rest of the fields blank and click OK

A forward object now appears on the diagram and also in the global-forwards folder in the Outline view.

• Tidy up the diagram, by clicking and dragging around each icon, so that the diagram looks something like this:

Figure 3.3. Diagram View

We are done with designing the application through the diagram. Now we need to write code for the action component. We also need to write an action class for the /greeting mapping along with a FormBean. To aid in the coding phase, JBoss Developer Studio can generate Java class stubs for all of the components shown in the diagram.

You should see a screen that says:

Generated classes: 2

Actions: 1

Form beans: 1

The Java files will be generated in a JavaSource > sample folder that you can see in the Package Explorer view under the "StrutsHello" node. One Action stub and one FormBean stub will have been generated.

We will now code both the Java stub classes just generated, the JSP files left in as placeholders from previous steps, and a new start JSP page we will have to create.

private String name = "";

     private String greetName = "";

this.name = "";

     this.greetName = "";

ActionErrors errors = new ActionErrors();

     return errors;

package sample;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts.action.ActionErrors;

import org.apache.struts.action.ActionMapping;



public class GetNameForm extends org.apache.struts.action.ActionForm 

{

  

  private String name = "";

  private String greetName = "";

  

  public String getName() 

  {

    return name;

  }

  public void setName(String name) 

  {

    this.name = name;

  }

  

  public String getGreetName() 

  {

    return greetName;

  }

  

  public void setGreetName(String greetName) 

  {

    this.greetName = greetName;

  }

  

  public GetNameForm() 

  {

  }

  

  public void reset(ActionMapping actionMapping, HttpServletRequest request) 

  {

    this.name = "";

    this.greetName = "";

  }

  

  public ActionErrors validate(ActionMapping actionMapping, HttpServletRequest request) 

  {

    ActionErrors errors = new ActionErrors();

    return errors;

  }

}

String name = ((GetNameForm)form).getName();

String greeting = "Hello, "+name+"!";

((GetNameForm)form).setName(greeting);

return mapping.findForward(FORWARD_sayHello);

package sample;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;



public class GreetingAction extends org.apache.struts.action.Action 

{

  

  // Global Forwards

  public static final String GLOBAL_FORWARD_getName = "getName";

  

  // Local Forwards

  public static final String FORWARD_sayHello = "sayHello";

  

  public GreetingAction() 

  {

  }

  public ActionForward execute(ActionMapping mapping, ActionForm form,

  HttpServletRequest request, HttpServletResponse response) throws Exception 

  {

    String name = ((GetNameForm)form).getName();

    String greeting = "Hello, "+name+"!";

    ((GetNameForm)form).setName(greeting);

    return mapping.findForward(FORWARD_sayHello);

  }

}

3.4.2. JSP Pages

3.4.2.1. inputname.jsp

In this page, the user will enter any name and click the submit button. Then, the greeting action will be called through the form.

Input name:

• Click on the inputname.jsp tab in the Editing area to bring its editor forward

• In the Web Projects view, expand StrutsHello > Configuration > default > struts-config.xml > action-mappings and select /greeting

• Drag it and drop it between the quotes for the "action" attribute to the <html:form> element in the Source pane of the editor

• Then type this text on a new line just below this line:

• Select the Visual pane of the editor

• Then, in the JBoss Tools Palette, expand the Struts Form library, select text, and drag it onto the box

  Note:

  By default there are only four groups on the JBoss Tools Palette. If you wish to make some group visible click the Show/Hide button on the top of palette and in the prompted dialog check the group (or groups) you want to be shown.

Figure 3.4. JBoss Tools Palette

• In the Insert Tag dialog box, type in name for property and select Finish

• In the StrutsForm library in the JBoss Tools Palette, select submit, and drag it to right after the text box in the Visual pane of the editor

• Right-click the submit button and select <html:submit> Attributes from the context menu

• In the Attributes dialog box, select the value field and type in "Say Hello!" for its value

After tidying the page source, the Editor window for the file should look something like this:

Figure 3.5. Editor Window

3.4.2.2. greeting.jsp

Next, we will fill in the result page.

• Click on the greeting.jsp tab in the Editing area to bring its editor forward

• Type in the following code:

<html>

<head>

    <title>Greeting</title>

</head>

    <body>

        <p>

        </p>

    </body>

</html>

To complete editing of this file, we will use macros from the JBoss Tools Palette. This palette is a view that should be available to the right of the editing area.

• Click on the Struts Common folder in the JBoss Tools Palette to open it

• Position the cursor at the beginning of the greeting.jsp file in the Source pane and then click on bean taglib in the JBoss Tools Palette

This will insert the following line at the top of the file:

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>

• Click on the Struts Bean folder in the JBoss Tools Palette to open it

• Position the cursor inside the <p> element

• Click on write in the JBoss Tools Palette

• Type in "GetNameForm" for the "name" attribute and add a "property" attribute with "greetName" as its value

The editor should now look like this:

Figure 3.6. Editor Window

3.4.2.3. index.jsp

Finally, we will need to create and edit an index.jsp page. This page will use a Struts forward to simply redirect us to the getName global forward.

• In the Web Projects view, right-click on StrutsHello > WEB-ROOT(WebContent) node and select New > File > JSP..

• Type index for Name and click on the Finish button

• On the JBoss Tools Palette, select the Struts Common folder of macros by clicking on it in the palette

• Click on the logic taglib icon

• Press the Enter key in the editor to go to the next line

• Back on the palette, select the Struts Logic folder of macros

• Click on redirect

• Delete the ending tag, put a forward slash in front of the closing angle bracket, and type "forward=getName" in front of the slash

The finished code for the page is shown below:

<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

<logic:redirect forward="getName"/>

• To save all the edits to files, select File>Save All from the menu bar

Because this is the Eclipse environment, no explicit compilation step is required. By default, Eclipse compiles as you go.

Everything is now ready for running our application without having to leave JBoss Developer Studio by using the JBoss Application Server engine that comes with the JBoss Developer Studio. For controlling JBoss AS within JBoss Developer Studio, there is JBoss Server view.

Figure 3.7. JBoss Server Panel

The browser should appear with the application started.

Apache Struts: Struts Technology

Struts 2: Apache Struts 2

Get Started: Struts Getting Started

Struts on IBM: Struts - An open-source MVC implementation

FAQ: Struts FAQ

Download: Release of Apache Struts

The example assumes that you have already created our sample "StrutsHello" application from the Getting Started Guide for Creating a Struts Application. You should have the JBoss Developer Studio perspective open on this StrutsHello project.

In these steps you will set up the validation that can be used for either client-side or server side validation. You need to enable validation as a part of the project, define an error message, and tie it into an appropriate part of the application.

Figure 4.1. Create Formset

Figure 4.2. New Property Is Added

Client-side validation uses a scripting language (like JavaScript) running in the client browser to actually do the validation. In a Struts application using the Validation Framework, however, you don't actually have to do any of the script coding. The Validation Framework handles this.

To see how this works in our application, you'll just need to make a couple of modifications to one of the JSP files.

onsubmit="return validateGetNameForm(this)"

The file should now look like this:

<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>

<html:html>

<head>

    <title>Input name</title>

    <html:javascript formName="GetNameForm"/>

</head>

<body>

    <html:form action="/greeting.do" onsubmit="return

        <para>validateGetNameForm(this)"></para>

        <table border="0" cellspacing="0" cellpadding="0">

            <tr>

                <td><b>Input name:</b></td>

            </tr>

            <tr>

                <td>

                    <html:text property="name" />

                    <html:submit value=" Say Hello! " />

                </td>

            </tr>

        </table>

    </html:form>

</body>

</html:html>

Figure 4.3. Run Icon

A JavaScript error message should be displayed in an alert box.

Server side validation does the validation inside the application on the server. In a Struts application using the Validation Framework, you still don't have to do any of the actual validation coding. The Validation Framework handles this. You will though have to make a few changes to the JSP file you modified for client-side validation along with a change to an action and a few changes to the form bean class.

The JSP file should now look like this:

<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>

<html:html>

<head>

    <title>Input name</title>

    <html:javascript formName="GetNameForm"/>

</head>

<body>

    <html:form action="/greeting.do">

        <table border="0" cellspacing="0" cellpadding="0">

            <tr>

                <td><b>Input name:</b></td>

            </tr>

            <tr>

                <td>

                    <html:text property="name" />

                    <html:submit value=" Say Hello! " />

                </td>

            </tr>

        </table>

    </html:form>

    <html:errors />

</body>

</html:html>

The file should now look like this:

package sample;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts.action.ActionErrors;

import org.apache.struts.action.ActionMapping;

public class GetNameForm extends



org.apache.struts.validator.ValidatorForm 

{



  private String name = "";

  

  /**

  * @return Returns the name.

  */

  public String getName() 

  {

    return name;

  }

  

  /**

  * @param name The name to set.

  */

  public void setName(String name) 

  {

    this.name = name;

  }

  

  public GetNameForm () 

  {

  }

  

  public void reset(ActionMapping actionMapping, 

    HttpServletRequest request) 

  {

    this.name = "";

  }

  

  // public ActionErrors validate(ActionMapping actionMapping,

    HttpServletRequest request) 

  {

    // ActionErrors errors = new ActionErrors();

    // return errors;

    // }

    }

The error message should appear in a refreshed version of the form.

You can also read Struts chapter in our "Visual Web Tools" guide for more information on this topic.