Creating a Web Application with Struts 2.x

1. Create a Struts 2 Project

The project created in this tutorial is available at Sample Struts 2 Project.

1. Select File>New>Web Project. Type MyBlogStruts2Example in the Project name field, and click Finish.
   
   Note: This tutorial uses the Java EE 6 version; however, Java EE 7 is an available option when creating new projects.
   
   
   Creating a new Web project
2. Right-click the project, and select Configure Facets>Install Apache Struts (2.x) Facet This menu option was updated in MyEclipse 2017. For prior versions, click here. .
3. Click Finish to accept the default settings.
   
   
   Struts configuration

The structure of the new Struts 2 project is shown in the image below. By default, Struts 2 Core Libraries Classpath container is added to the project. You can select multiple Struts 2 classpath containers from the add Struts 2 capabilities wizard shown above.

Struts project structure

2. Create a Package

The flow of the sample blog application starts with the index.jsp page that contains a link to the login page. The login page contains user login and password fields. On entering a valid username and password, the request is passed to the Admin page that contains options to create, review, and delete blog posts. An error message appears in the login page for invalid username or password value. Begin with creating a package to group a set of actions together.

1. In the Explorer, expand MyBlogStruts2Example>src, and double-click struts.xml to open it in the editor.
2. Click the  Package icon on the palette, and click the open area on the Flow editor canvas.
3. Type login in the Name field, /loginns in the Namespace field, and struts-default in the Extends field. Click Finish.
   
   
   Adding a Struts 2 package

The value in the Extends field sets the extends relationship between packages. You can use the Add button to select from a list of packages to extend.

A graphical representation for the Struts 2 package component appears in the Flow editor. A new package entry is automatically added to the struts.xml file. You can view the source by clicking the Source tab in the editor.


Package component displayed in the Flow and Source views

Tips:

• You can right-click the Flow editor canvas, and select MyEclipse>New Package to add packages to the Flow editor.
• You can edit the Struts 2 configuration file in the Source editor. For instance, you can add a new package entry in the configuration file, and then switch to the Flow editor to view the graphical representation of the package component. The two editors (Source and Flow) can be used interchangeably as needed.

3. Create an Action

Struts 2 actions are the fundamental units of the framework. An action element represents the mapping between the identifier and the handler class. The framework uses this mapping to determine how to process the request. Create an action that processes the request to open the login page.

1. Click on the  Action icon on the palette, and click the login package in the Flow editor.
2. Type ShowLoginPage in the Name field, com.myeclipseide.example.myblog.login.ShowLoginPage in the Class field, and click Finish.
   
   
   Creating a Struts 2 action
   
   Package name: The package to contain the new action. A new package can be created using the New button.
   Name: The name of the action.
   Action class: Used for mapping an action handler with the action identifier. You can create a new handler or map to an existing handler class.
   Class: The action handler class. Selecting the Existing Class option enables the Browse button.
   Parameters: Shows the list of action parameters.
   Results: Shows the list of Results in the action.

Action component displayed in the Flow and Source views

Tips:

• To Edit an action parameter, click the parameter to activate for editing.
• You can create new results (explained later) in the New Action wizard.
• Selecting the result in the New Action wizard enables the Edit button. You can edit results from the New Action wizard.
• You can also add new actions by editing the Struts 2 configuration file in the Source editor. Switching to the Flow editor displays the graphical representation of the actions.

4. Create a JSP Page

The JSP/HTML nodes represent the web resources in the application. Use the JSP and HTML tools can to create JSP and HTML pages. In this application, you create a set of JSP pages. First you will create loginPage.jsp.

1. Click the   JSP icon on the palette, and click the Flow editor canvas.
2. Type loginPage.jsp in the File Name field, select Default JSP template from the Template to use drop-down, and click Finish.
   
   
   Creating a new JSP page

5. Create a Result

An action result represents a possible outcome of an operation. An action mapping often contains a set of results. The action handler method returns a String that is used by the framework to select the result element. In this application, the ShowLoginPage action contains a single result with the name success and type dispatcher, which forwards the request to another web resource, in this case loginPage.jsp.

1. Click the  Result icon on the palette, and click the ShowLoginPage action in the Flow editor.
2. Type success in the Name field, select dispatcher from the Result type drop-down, browse for loginPage.jsp in the Location field, and click Finish.
   
   
   Creating a new Result component
   
   Name: The name of the action result. You can choose between the standard set of result tokens or set a custom name.
   Result type: Drop-down menu for choosing the type of result.
   Location: Web resource to render the outcome of the operation.
   Parameters: List of result parameters. You can add /remove parameters using the Add/Remove buttons.

 
Result component displayed in the Flow and Source views

Tips:

• In the New Result wizard, you can leave the Location field empty and make use of the Extends/Location tool to connect to a Web resource node in the graphical editor.
• You can create results using connections. Click the  Extends/Location tool in the Flow editor palette, click an action, and create a connection with the required target (JSP/HTML or Action) node. The New Result wizard opens with some pre-populated field values based on the target of the connection.
• You can change the target of the existing connection by selecting the target end of the connection and dragging it onto another target node. For instance, you have a result connected to the loginPage.jsp node, and at some point you want to change it to another page. You can select the connection endpoint (the one on the target side), and drag it onto the new target node. The changes are automatically applied to the struts.xml file.

6. Add Authentication Nodes

Use the skills learned in the previous sections to add additional nodes to the flow.

1. Create a package named secure, with the namespace of /securens that extend the struts-default package. This package groups the actions dealing with security. To keep things simple, you create a single action that performs the task of validating the username and password values. For invalid credentials, the request returns to the login page and an error message displays in the login page.
2. Create an action named AuthenticateUser in the secure package. Specify the value for the class field as com.myeclipseide.example.myblog.secure.AuthenticateUser. This adds an action to the package and creates a new handler Java class named AuthenticateUser in the Java package com.myeclipseide.example.myblog.secure.
3. Add two results to the action. Name the first result error of the dispatcher type that forwards the result to the login page. Name the second result success of the redirectAction type. This result redirects the request to another page that contains options to create, review, and delete blogs.
   
   Note: In this step, the success result (name = success, type = redirect action) is not connected to an action or a JSP page. You will do this in later sections after creating the remaining components of the application.
   
   
   Addition of new components
4. Double-click the AuthenticateUser action to open it in the editor. Copy and paste the following code into the file, replacing the default code.
   
   

   package com.myeclipseide.example.myblog.secure;
   
   import com.opensymphony.xwork2.ActionSupport;
   
   public class AuthenticateUser extends ActionSupport {
         private String userName;
         private String password;
         public String getUserName() {
               return userName;
         }
   
         public void setUserName(String userName){
               this.userName = userName;
         }
   
         public String getPassword() {
               return password;
         }
   
         public void setPassword(String password) {
               this.password = password;
         }
   
         public String execute() {
         // Empty username or password value is not permitted.
                if (getUserName().equals("") || getPassword().equals("")) {
                    addActionError("Invalid username or password! Please try again!");
                    return ERROR;
                }
                return SUCCESS;
         }
   }

   Note: To keep things simple, any username/password values are accepted except empty values.

7. Add the Blog Page

1. Create a package named blogging with the namespace /bloggingns to group the actions dealing with the creation, review and deletion of blogs.
2. Creation an action in the blogging package named ShowBlogAdminPage that will do a simple job of forwarding the request to the blogAdminPage. Set the Class field to ShowBlogAdminPage. The success result in the above section (inside the AuthenticateUser action) is mapped to this action. The framework forwards the request to this action if the validation succeeds.
3. Click  in the palette, and create a connection from the Success result (present inside the AuthenticateUser action) to the ShowBlogAdminPage action. The following image shows how you can use the redirect action result type.
   
   
   Flow with additional nodes
4. Similar to the ShowBlogAdminPage action above, create actions named CreateBlogPost, ReviewAllPosts, ShowDeleteBlogPage and DeleteBlogPost in the blogging package. Set the handler names same to be the same as the action names. Create these actions under the package com.myeclipseide.example.myblog.blogging.
5. Create a JSP page called createBlogPage in the Flow editor. Add a new Result with name success of the dispatcher type in the CreateBlogPost action. In the New Result wizard, set the Location value to createBlogPage.jsp.
6. Add similar results to the ReviewAllPosts and DeleteBlogPost actions. Forward the result in the ReviewPostsPage.jsp to the reviewPostsPage.jsp and the result in the DeleteBlogPost action to the deleteBlogPage.jsp. The figure below shows the final result of all the above operations.
   
   
   Final flow

The following snippets show the contents of the loginPage.jsp, blogAdminPage.jsp, PublishBlogPage.jsp, createBlogPage.jsp, reviewPostsPage.jsp, and deleteBlogPage.jsp pages.

8. Deploy and Test the Application

1. Right-click MyBlogStruts2Example, and select Run As>MyEclipse Server Application. Select the MyEclipse Tomcat Server. The project deploys, the server starts, and the index.jsp page opens in the browser.
2. The index.jsp page contains a link – Start Blogging. Click the link, and the loginPage.jsp appears.
   
   
   Start Blogging link on the index.jsp page
3. On the admin page, click Create to create a new blog, Review to get a list of all the posts, Delete to delete a post, and Log out to log out of the application.