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 https://github.com/knishe/knishe-public (you can simply clone and try the example https://help.github.com/articles/fork-a-repo) with following command it can be clone into to the local machine(you need git installed to perform this command).
 

git clone https://github.com/knishe/knishe-public.git

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. HelloWold.java (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.

	/*
	* $Id: HelloWorld.java 739661 2009-02-01 00:06:00Z davenewton $
	*
	* Licensed to the Apache Software Foundation (ASF) under one
	* or more contributor license agreements. See the NOTICE file
	* distributed with this work for additional information
	* regarding copyright ownership. The ASF licenses this file
	* to you under the Apache License, Version 2.0 (the
	* "License"); you may not use this file except in compliance
	* with the License. You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing,
	* software distributed under the License is distributed on an
	* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	* KIND, either express or implied. See the License for the
	* specific language governing permissions and limitations
	* under the License.
	*/
	package org.training.struts.web.ui;
	import java.util.ArrayList;
	import java.util.List;
	import com.opensymphony.xwork2.ActionSupport;
	/**
	* <code>Set welcome message.</code>
	*/A
	public class HelloWorld extends ActionSupport {
	public HelloWorld() {
	leftModuleList = new ArrayList<Module>();
	leftModuleList.add(new Module("M1", "Software Engineering"));
	leftModuleList.add(new Module("M2", "Object Oriented Design"));
	leftModuleList.add(new Module("M3", "Secure Language"));
	rightModuleList = new ArrayList<Module>();
	leftList = new ArrayList<String>();
	rightList = new ArrayList<String>();
	}
	public String registerModule() throws Exception {
	return SUCCESS;
	}
	public String execute() throws Exception {
	return SUCCESS;
	}
	private List<Module> leftModuleList;
	private List<Module> rightModuleList;
	private List<String> leftList;
	private List<String> rightList;
	public List<Module> getLeftModuleList() {
	return leftModuleList;
	}
	public void setLeftModuleList(List<Module> leftModuleList) {
	this.leftModuleList = leftModuleList;
	}
	public List<Module> getRightModuleList() {
	return rightModuleList;
	}
	public void setRightModuleList(List<Module> rightModuleList) {
	this.rightModuleList = rightModuleList;
	}
	public List<String> getLeftList() {
	return leftList;
	}
	public void setLeftList(List<String> leftList) {
	this.leftList = leftList;
	}
	public List<String> getRightList() {
	return rightList;
	}
	public void setRightList(List<String> rightList) {
	this.rightList = rightList;
	}
	}

view raw HelloWorld.java hosted with ❤ by GitHub

Create Module bean class

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

	package org.training.struts.web.ui;
	public class Module {
	private String moduleId;
	private String moduleName;
	public Module() {
	}
	public Module(String moduleId, String moduleName) {
	this.moduleId = moduleId;
	this.moduleName = moduleName;
	}
	public String getModuleId() {
	return moduleId;
	}
	public void setModuleId(String moduleId) {
	this.moduleId = moduleId;
	}
	public String getModuleName() {
	return moduleName;
	}
	public void setModuleName(String moduleName) {
	this.moduleName = moduleName;
	}
	}

view raw Module.java hosted with ❤ by GitHub

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.

	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
	"http://struts.apache.org/dtds/struts-2.0.dtd">
	<struts>
	<constant name="struts.enable.DynamicMethodInvocation" value="true" />
	<constant name="struts.devMode" value="true" />
	<package name="example" namespace="/" extends="struts-default">
	<action name="HelloWorld" class="org.training.struts.web.ui.HelloWorld">
	<result>/example/HelloWorld.jsp</result>
	</action>
	<action name="RegisterAction" method="registerModule"
	class="org.training.struts.web.ui.HelloWorld">
	<result name="input">/example/HelloWorld.jsp</result>
	<result name="success">/example/Success.jsp</result>
	</action>
	</package>
	<!-- Add addition packages and configuration here. -->
	</struts>

view raw struts.xml hosted with ❤ by GitHub

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 

	<!DOCTYPE html>
	<%@ page contentType="text/html; charset=UTF-8"%>
	<%@ taglib prefix="s" uri="/struts-tags"%>
	<html>
	<head>
	<title>Hello World Title</title>
	<s:head/>
	</head>
	<body>
	<h1>Hello World</h1>
	<s:form action="RegisterAction">
	<s:optiontransferselect
	list="leftModuleList"
	listKey="moduleId"
	listValue="moduleName"
	name="leftList"
	doubleList="rightModuleList"
	doubleName="rightList"
	headerKey="rightSelectNon"
	headerValue="<-- Select Module -->"
	doubleHeaderKey="leftSelectNon"
	doubleHeaderValue="<-- Select Module -->"
	allowUpDownOnLeft="false"
	allowUpDownOnRight="false"
	>
	</s:optiontransferselect>
	<s:submit></s:submit>
	</s:form>
	</body>
	</html>

view raw HelloWorld.jsp hosted with ❤ by GitHub

Create Success.jsp

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

	<!DOCTYPE html>
	<%@ page contentType="text/html; charset=UTF-8"%>
	<%@ taglib prefix="s" uri="/struts-tags"%>
	<html>
	<head>
	<title>Success Page Title</title>
	</head>
	<body>
	<h1>Sucess Page</h1>
	Left list key(s)<s:select list="leftList"></s:select>
	Right list key(s)<s:select list="rightList"></s:select>
	</body>
	</html>

view raw Success.jsp hosted with ❤ by GitHub

Wish you all the best.