Radio Button and Check Box

mvc-template1
In Biz Apps, you almost always need to use Check Box and Radio button.

Check box is to select multiple objects, and radio button is only select one of multiple objects. The reason we call “Radio button” is originally came from Car Radio; It is only let you select one station at a time.
radio-checkbox-img2
In Spring MVC, check box object is usually a list of String, and radio button is Integer. You will defined them in a Model layer (Bean).

There are some examples for Radio Button and Check Box in Biz Apps. Typically, you will used them in a list.

  1. The specified row (by Radio Button) will be updated.
  2. Selected records will be updated/deleted. (Many to Many)
<c:forEach items="${HDR_LIST}" var="rmaObj" varStatus="loop">
	<tr height="15">
		<td><form:radiobutton path="radioBtn" class='close clickIdx' data-id='${rmaObj.id}' /></td>
		<td><form:checkbox path="selectedCheckBox" value="${rmaObj.rmaNum}"/></td>
		<td id="id${loop.index}">${rmaObj.id}</td>
		<td id="idRmaNum${loop.index}">${rmaObj.rmaNum}</td>
		<td id="idStsCd${loop.index}">${rmaObj.rmaHdrStsCd}</td>
		<td id="idStsNm${loop.index}">${rmaObj.rmaHdrStsNm}</td>
		<td id="idTpCd${loop.index}">${rmaObj.rtrnTpCd}</td>
		<td id="idTpNm${loop.index}">${rmaObj.rtrnTpNm}</td>
		<td id="idRsnCd${loop.index}">${rmaObj.rtrnRsnCd}</td>
		<td id="idRsnNm${loop.index}">${rmaObj.rtrnRsnNm}</td>
		<td id="idCustCd${loop.index}">${rmaObj.sellToCustCd}</td>
		<td><a href="<c:url value='/edit/${rmaObj.id}' />" >Edit</a></td>
		<td><a href="<c:url value='/remove/${rmaObj.id}' />" >Delete</a></td>
		<td><a href="<c:url value='/cUrlValSubLine01Jsp/${rmaObj.rmaNum}' />" >Detail</a></td>
	</tr>
</c:forEach>

1. Radio button is defined as integer that will contains a row number
2. Check box is defined as List of String that contains a value of selected record(s)

package com.ns.spring.model.ui;

import java.util.ArrayList;
import java.util.List;

import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import com.ns.spring.model.RMA_HDR;

@JsonIgnoreProperties(ignoreUnknown = true)
public class RmaHdrModel {

	private int id;
	private String rmaNum = "";
	private String rmaHdrStsCd = "";
	private String rmaHdrStsNm = "";
	private String rtrnTpCd = "";
	private String rtrnTpNm = "";
	private String rtrnRsnCd = "";
	private String rtrnRsnNm = "";
	private String sellToCustCd = "";
	private String mdseCd = "";
	private List<RmaLineModel> rmaLines = new ArrayList<RmaLineModel>();
	private int radioBtn;
	private List<String> selectedCheckBox = new ArrayList<String>();
	
	public RmaHdrModel(){}

.
.
.
.

	public int getRadioBtn() {
		return radioBtn;
	}

	public void setRadioBtn(int radioBtn) {
		this.radioBtn = radioBtn;
	}

	public List<String> getSelectedCheckBox() {
		return selectedCheckBox;
	}

	public void setSelectedCheckBox(List<String> selectedCheckBox) {
		this.selectedCheckBox = selectedCheckBox;
	}
}

Screen Transition (With More than one Controllers)

multiple-relaiton-image-mvc2
In Spring MVC Web apps, there might be multiple combination between Controller, JSP(View), and Object class(Model). In other words, almost any combination is possible.

It is a lot more flexible compared to Struts which tied one Action class (controller class) tied with Form class (object model class).

mvc-classes-diagram-img1
There are number of Controller, Model classes, and views (JSP) in one Web App, and this examples shows the screen transition involved between two controllers and views (JSP).
screen-transition-img1 (1)
Summarized as four steps:

  1. First Controller calls the first JSP.
  2. First JSP calls the second Controller.
  3. Second Controller calls the second JSP.
  4. Second JSP is initialized.

Step 1 to 2. The first Controller (RmaController.java) calls main_01.jsp.
Step 2 to 3. The main_01.jsp calls second controller RmaDtlController.java.
Step 4. The second JSP (sub_line_01.jsp) is initialized.


Again (1 to 2), the first controller (RmaController.java) is invoked by a link, and calls second controller (RmaDtlController.java).
screen-tran-radio1
2015-06-07_22h29_16
Let’s look at step (2 to 3):
The main_01.jsp calls second controller RmaDtlController.java once the link is clicked (line 16).

<c:forEach items="${HDR_LIST}" var="rmaObj" varStatus="loop">
	<tr height="15">
		<td><form:radiobutton path="radioBtn" class='close clickIdx' data-id='${rmaObj.id}' /></td>
		<td><form:checkbox path="selectedCheckBox" value="${rmaObj.rmaNum}"/></td>
		<td id="id${loop.index}">${rmaObj.id}</td>
		<td id="idRmaNum${loop.index}">${rmaObj.rmaNum}</td>
		<td id="idStsCd${loop.index}">${rmaObj.rmaHdrStsCd}</td>
		<td id="idStsNm${loop.index}">${rmaObj.rmaHdrStsNm}</td>
		<td id="idTpCd${loop.index}">${rmaObj.rtrnTpCd}</td>
		<td id="idTpNm${loop.index}">${rmaObj.rtrnTpNm}</td>
		<td id="idRsnCd${loop.index}">${rmaObj.rtrnRsnCd}</td>
		<td id="idRsnNm${loop.index}">${rmaObj.rtrnRsnNm}</td>
		<td id="idCustCd${loop.index}">${rmaObj.sellToCustCd}</td>
		<td><a href="<c:url value='/edit/${rmaObj.id}' />" >Edit</a></td>
		<td><a href="<c:url value='/remove/${rmaObj.id}' />" >Delete</a></td>
		<td><a href="<c:url value='/cUrlValSubLine01Jsp/${rmaObj.rmaNum}' />" >Detail</a></td>
	</tr>
</c:forEach>

screen-tran-link-param-img1
In the line 16:
2.1. Link clicked contains an ID (RMA000016)
2.2.cUrlValSubLine01Jsp” specified in second JSP (sub_line_01.jsp) and it will be called
url-scrn-trans-rmaline1
2.3. The URL for second JSP: http://localhost:8080/NS2015V07/cUrlValSubLine01Jsp/RMA000016


Step 3: Second Controller calls the second JSP.

@RequestMapping("/cUrlValSubLine01Jsp/{rmaNum}")
public ModelAndView goToSubLine01Jsp(@PathVariable("rmaNum") String rmaNum,	Model model, HttpServletRequest req) {
	List<RmaLineModel> rmaLineModelList = RmaDtlBL.getRmaLineListWithCdTblNm(rmaNum, null);
	return getMVSubLine01(rmaNum, rmaLineModelList, req);
}

3.1. Returns ModelAndView object

private ModelAndView getMVSubLine01(String rmaNum, List<RmaLineModel> rmaLinsList, HttpServletRequest req) {

	RmaLineListModel newModel = new RmaLineListModel(rmaNum, rmaLinsList);

	ModelAndView modelAndView = new ModelAndView(VIEW.SUB_LINE_01.getVal());
	modelAndView.addObject(CONST.FORM_KEY.getVal(), newModel);
	// For item detail list
	modelAndView.addObject(CONST.LINE_LIST_MODEL.getVal(), newModel);
	// Setup Status drop down line the item list
	modelAndView.addObject(CONST.HDR_STS_LIST.getVal(), getList(CONST.HDR_STS_LIST.getVal()));
	// Item list for AJAX Auto complete
	req.getSession().setAttribute(CONST.MDSE_LIST.getVal(), getList(CONST.MDSE_LIST.getVal()));
	return modelAndView;
}

In the line 5:
3.2. Get the view name (“sub_line_01”) as constant (below) and set it to the object

enum VIEW {

	MAIN_01("main_01"),
	SUB_LINE_01("sub_line_01"),
	SUB_TP_01("sub_tp_01"),
	SUB_RSN_01("sub_rsn_01"),
	SUB_TP_RSN_01("sub_tp_rsn_01"),
	REDIRECT_HOME("redirect:/ns-home")
	;

	private String code;

	VIEW(String code) {
		this.code = code;
	}

	public String getVal() {
		return code;
	}
}

Step 4: Second JSP is initialized.
2015-05-29_07h12_12

Select Box Stays Selected

mvc-template1
You always see Select Box (Drop down) in Biz Web Apps. Sometimes stand alone, and sometimes in a list.

And Select box usually consists of three values.

    (A) Code that contains a key behind the screen
    (B) Displaying value
    (C) Selected value

stay-selected-img2
(A) and (B) is sometimes together. And you always need (C) in order to the select box stays selected when the page is refreshed.

For example, if you submit a form, without doing anything, the select box will be empty and selected value will be GONE!!!! It will happen every time you refresh a page.


Select box stand alone case:

<form:select path="rtrnTpCd" id="tpCd" onchange="onChangeTp();" style="height:25px; width:200px">
   <form:option value="" label="--- Select Type ---"/>
   <c:forEach items="${TP_LIST}" var="name">
      <c:choose>
         <c:when test="${name.getRtrnTpCd()== TP_SELECTED}">
            <form:option value="${name.getRtrnTpCd()}" selected="true">${name.getRtrnTpNm()}</form:option>
         </c:when>
         <c:otherwise>
            <form:option value="${name.getRtrnTpCd()}">${name.getRtrnTpNm()}</form:option>
         </c:otherwise>
      </c:choose>
   </c:forEach>
</form:select>
@RequestMapping(value = "/onChangeTpCdRsnMain01")
public @ResponseBody List<RtrnRsnModel> refreshRsn(@RequestParam(value = "tpCd") String rtrnTpCd, Model model, HttpServletRequest req) {

	List<RtrnRsnModel> hdrStsList = RsnBL.getRsnsBoundTp(rtrnTpCd);
	model.addAttribute("rtrnTpCd", rtrnTpCd);
	req.getSession().setAttribute(CONST.TP_SELECTED.getVal(), rtrnTpCd);
	return hdrStsList;
}

TP_SELECTED” is being set in the method “refreshRsn” in the Controller class, and the select box is being selected and stays with the value


Select Box in a list:

<c:forEach items="${rmaLineListModel.rmaLineModelList}" var="rmaLnObj" varStatus="i" begin="0">
.
.
.
<c:choose>
	<c:when test="${rmaLnObj.getRmaLineStsCd()== ''}">
		<form:select 
			path="rmaLineModelList[${i.index}].rmaLineStsCd" 
			id="idLnStCd${i.index}" 
			style="height:25px; width:130px">
		<form:option  value="" label=""/>
		<form:options items="${HDR_STS_LIST}" itemValue="rmaHdrStsCd" itemLabel="rmaHdrStsNm"/>
		</form:select>
	</c:when>
	<c:otherwise>
		<form:select 
			path="rmaLineModelList[${i.index}].rmaLineStsCd"
			items="${HDR_STS_LIST}" 
			id="idLnStCd${i.index}"
			itemLabel="rmaHdrStsNm" 
			itemValue="rmaHdrStsCd" 
			delimiter=" " 
			readonly="true" 
			disabled="true" 
			style="height:25px; width:130px"/>
		<form:hidden path="rmaLineModelList[${i.index}].rmaLineStsCd" id="idLnStCd${i.index}" />
	</c:otherwise>
</c:choose>

</c:forEach>

At line 7 to 13, selected value is NOT specified, whereas line 16 to 25 specified.

@RequestMapping("/cUrlValSubLine01Jsp/{rmaNum}")
public ModelAndView goToSubLine01Jsp(@PathVariable("rmaNum") String rmaNum,	Model model, HttpServletRequest req) {
	List<RmaLineModel> rmaLineModelList = RmaDtlBL.getRmaLineListWithCdTblNm(rmaNum, null);
	return getMVSubLine01(rmaNum, rmaLineModelList, req);
}

The controller that create the list of select box.

private ModelAndView getMVSubLine01(String rmaNum, List<RmaLineModel> rmaLinsList, HttpServletRequest req) {

	RmaLineListModel newModel = new RmaLineListModel(rmaNum, rmaLinsList);

	ModelAndView modelAndView = new ModelAndView(VIEW.SUB_LINE_01.getVal());
	modelAndView.addObject(CONST.FORM_KEY.getVal(), newModel);
	// For item detail list
	modelAndView.addObject(CONST.LINE_LIST_MODEL.getVal(), newModel);
	// Setup Status drop down line the item list
	modelAndView.addObject(CONST.HDR_STS_LIST.getVal(), getList(CONST.HDR_STS_LIST.getVal()));
	// Item list for AJAX Auto complete
	req.getSession().setAttribute(CONST.MDSE_LIST.getVal(), getList(CONST.MDSE_LIST.getVal()));
	return modelAndView;
}

The line 10 specify the select box object.