Optiontransferselect is a Struts2 UI component which allows to create UI component like shown below:
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.
- HelloWold.java (Action class)
- Module (Just Java Bean to hold "moduleId" and "moduleName")
- struts.xml
- HelloWorld.jsp
- 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * $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; | |
| } | |
| } |
Create Module bean class
Create the Module bean class to hold the "moduleId" and the "moduleName"
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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> |
Create HelloWorld.jsp
Create HelloWorld jsp file with optiontranferselect UI component. You should place the
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Create Success.jsp
Create Success jsp file display the selected left list and right list after the submission.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Wish you all the best.
