Thursday, August 16, 2012

Easy example for Struts2 optiontransferselect

Optiontransferselect  is a Struts2 UI component  which allows to create UI component like shown below:

 This example allows you to select modules from the list given in the left side to right side. The source code of this example available in github in this link (you can simply clone and try the example with following command it can be clone into to the local machine(you need git installed to perform this command).
git clone

It been generated and build using Maven and configure with jetty which allows to run the application instantly with one command "mvn install -Dmaven.test.skip=true jetty:run" (for this Maven should be configured) and you can browse to http://localhost:8080/struts-webapp/HelloWorld  to see the UI component in action.

The web application is structure as shown below and newbies do not confuse with complex folder structure because created by maven struts2 archetype. All we need to care  about is these five files.
  1. (Action class)
  2. Module (Just Java Bean to hold "moduleId" and "moduleName")
  3. struts.xml
  4. HelloWorld.jsp
  5. Success.jsp (Just to ensure the results)

Create HelloWorld Action class

First create the HelloWorld action class with four lists, two lists to display modules and two lists to hold the left list and right list once submit.

Create Module bean class

Create the Module bean class to hold the "moduleId" and the "moduleName"

Edit the struts.xml

Edit the struts.xml and copy the following code snippet. In this XML I have created two action to direct to load the HelloWorld page with left and right list and another action to invoke a method "registerModule" during the submit and redirect to Success page.

Create HelloWorld.jsp

Create HelloWorld jsp file  with optiontranferselect UI component. You should place the   with in the the head of the jsp or body in-order to select the list contents during the click of submit button 

Create Success.jsp

 Create Success jsp file display the selected left list and right list after the submission.

Wish you all the best.

No comments: