Introduction to the Struts Web Framework 2

 

 

 

 

 

 

Creating JSP Pages

 

Begin by creating two JSP pages for the application. The first displays a form. The second is the view returned when login is successful.

 

  1. Creating a Login Page

  2. Creating a Success Page

 

Creating a Login Page

 

1.      Right-click the MyStrutsApp project node, choose New > JSP, and name the new file login. Click Finish. The login.jsp file opens in the Source Editor.

 

NetBeans with struts framework project - creating new JSP page

 

NetBeans with struts framework project - new JSP page information

 

2.      In the Source Editor, change the content of both the <title> and <h1> tags (or <h2> tags, depending on the IDE version you are using) to Login Form.

 

NetBeans with struts framework project - new JSP page content

 

3.      Add the following two taglib directives to the top of the file:

 

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>

<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>

 

NetBeans with struts framework project - adding taglib into JSP page

 

Many web applications use JSP pages for views in the MVC paradigm, so Struts provides custom tag libraries which facilitate interaction with HTML forms. These can be easily applied to a JSP file using the IDE's support for code completion. When you type in the Source Editor, the IDE provides you with code completion for Struts tags, as well as the Struts Javadoc. You can also invoke code completion manually by pressing Ctrl-Space:

 

NetBeans with struts framework project - code completion features


The bean taglib provides you with numerous tags that are helpful when associating a form bean (i.e., an
ActionForm bean) with the data collected from the form. The html taglib offers an interface between the view and other components necessary to a web application. For example, below you replace common html form tags with Struts' <html:form> tags. One benefit this provides is that it causes the server to locate or create a bean object that corresponds to the value provided for html:form's action element.

 

4.      Below the <h1> (or <h2>) tags, add the following:

 

<html:form action="/login">

 

   <html:submit value="Login" />

 

</html:form>

 

NetBeans with struts framework project - adding form

 

Whenever you finish typing in the Source Editor, you can tidy up the code by right-clicking and choosing Format (Alt-Shift-F).

 

 

 

 

 

-----------------------------------------------------

 

NetBeans with struts framework project - tidy up the code using Format menu

 

5.      In the Palette (Window > Palette) in the right region of the IDE, drag a Table item from the HTML category to a point just above the <html:submit value="Login" /> line. The Insert Table dialog box displays. Set the rows to 3, columns to 2, and leave all other settings at 0. Later in the tutorial, you will attach a stylesheet to affect the table display.

 

NetBeans with struts framework project - the table palette

 

NetBeans with struts framework project - dragging and dropping the table palette

 

Click OK, then optionally reformat the code (Alt-Shift-F). The form in login.jsp now looks as follows:

 

<html:form action="/login">

    <table border="0">

        <thead>

            <tr>

                <th></th>

                <th></th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td></td>

                <td></td>

            </tr>

            <tr>

                <td></td>

                <td></td>

            </tr>

            <tr>

                <td></td>

                <td></td>

            </tr>

        </tbody>

    </table>

 

    <html:submit value="Login" />

 

</html:form>

 

NetBeans with struts framework project - the inserted table template

 

Note: You can safely delete the <thead> table row, as it is not used in this tutorial.

 

NetBeans with struts framework project - the table header

 

6.      In the first table row, enter the following (changes in bold):

 

<tr>

    <td>Enter your name:</td>

    <td><html:text property="name" /></td>

</tr>

 

NetBeans with struts framework project - the table data

 

7.      In the second table row, enter the following (changes in bold):

 

<tr>

    <td>Enter your email:</td>

    <td><html:text property="email" /></td>

   </tr>

 

NetBeans with struts framework project - inserting the table data

 

The html:text element enables you to match the input fields from the form with properties in the form bean that will be created in the next step. So for example, the value of property must match a field declared in the form bean associated with this form.

 

8.      Move the <html:submit value="Login" /> element into the second column of the third table row, so that the third table row appears as follows (changes in bold):

 

   <tr>

    <td></td>

    <td><html:submit value="Login" /></td>

   </tr>

 

NetBeans with struts framework project - moving the table data - drag and drop feature

 

At this stage, your login form should look as follows:

 

<html:form action="/login">

    <table border="0">

        <tbody>

            <tr>

                <td>Enter your name:</td>

                <td><html:text property="name" /></td>

            </tr>

            <tr>

                <td>Enter your email:</td>

                <td><html:text property="email" /></td>

            </tr>

            <tr>

                <td></td>

                <td><html:submit value="Login" /></td>

            </tr>

        </tbody>

    </table>

</html:form>

 

NetBeans with struts framework project - the over all login form template which created with table

 

 

 


 Strut & Web 1 | Back to Main | Strut & Web 3