[스프링MVC - 2편] 타임리프 스프링 통합 (2)

체크 박스 - 멀티

FormItemController - 추가

@ModelAttribute("regions")
public Map<String, String> regions() {
	Map<String, String> regions = new LinkedHashMap<>();
	regions.put("SEOUL", "서울");
	regions.put("BUSAN", "부산");
	regions.put("JEJU", "제주");
	return regions;
}

@ModelAttribute의 특별한 사용법

등록 폼, 상세화면, 수정 폼에서 모두 서울, 부산, 제주라는 체크 박스를 반복해서 보여주어야 한다

이렇게 하려면 각각의 컨트롤러에서 model.addAttribute(...)을 사용해서 체크 박스를 구성하는 데이터를 반복해서 넣어주어야 한다

 @ModelAttribute는 이렇게 컨트롤러에 있는 별도의 메서드에 적용할 수 있다

이렇게 하면해당 컨트롤러를 요청할 때 regions에서 반환한 값이 자동으로 모델(model)에 담기게 된다

 

 

 

addForm.html - 추가

<!-- multi checkbox -->
<div>
	<div>등록 지역</div>
	<div th:each="region : ${regions}" class="form-check form-check-inline">
	<input type="checkbox" th:field="*{regions}" th:value="${region.key}" class="form-check-input">
	<label th:for="${#ids.prev('regions')}" th:text="${region.value}" class="form-check-label">서울</label>
	</div>
</div>

• th:for="${#ids.prev('regions')}" : each로 체크박스가 반복 생성된 결과 (id 뒤에 숫자 추가)

 

 

 

라디오 버튼

라디오 버튼은 여러 선택지 중에 하나를 선택할 때 사용할 수 있다

라디오 버튼을 자바 ENUM을 활용해서 개발한다

FormItemController - 추가

@ModelAttribute("itemTypes")
public ItemType[] itemTypes() {
	return ItemType.values();
}

temType.values()를 사용하면 해당 ENUM의 모든 정보를 배열로 반환한다

예) [BOOK, FOOD, ETC]

 

 

 

addForm.html - 추가

<!-- radio button -->
<div>
	<div>상품 종류</div>
	<div th:each="type : ${itemTypes}" class="form-check form-check-inline">
	<input type="radio" th:field="*{itemType}" th:value="${type.name()}" class="form-check-input">
	<label th:for="${#ids.prev('itemType')}" th:text="${type.description}" class="form-check-label">BOOK</label>
	</div>
</div>

• item.itemType=FOOD : 값이 있을 때
• item.itemType=null : 값이 없을 때

체크 박스는 수정시 체크를 해제하면 아무 값도 넘어가지 않기 때문에, 별도의 히든 필드로 이런 문제를 해결했다 

라디오 버튼은 이미 선택이 되어 있다면, 수정시에도 항상 하나를 선택하도록 되어 있으므로 체크 박스와 달리 별도의 히든

필드를 사용할 필요가 없다

 

 

 

타임리프에서 ENUM 직접 사용하기

• <div th:each="type : ${T(hello.itemservice.domain.item.ItemType).values()}">
• 스프링EL 문법으로 ENUM을 직접 사용할 수 있다
• 이렇게 사용하면 ENUM의 패키지 위치가 변경되거나 할때 자바 컴파일러가 타임리프까지 컴파일 오류를 잡을 수 없으므로 추천하지는 않는다

 

 

 

셀렉트 박스

FormItemController - 추가

@ModelAttribute("deliveryCodes")
public List<DeliveryCode> deliveryCodes() {
	List<DeliveryCode> deliveryCodes = new ArrayList<>();
	deliveryCodes.add(new DeliveryCode("FAST","빠른 배송"));
	deliveryCodes.add(new DeliveryCode("NORMAL","일반 배송"));
	deliveryCodes.add(new DeliveryCode("SLOW","느린 배송"));
	return deliveryCodes;
}

 

 

 

addForm.html - 추가

<!-- SELECT -->
<div>
	<div>배송 방식</div>
	<select th:field="*{deliveryCode}" class="form-select">
		<option value="">==배송 방식 선택==</option>
		<option th:each="deliveryCode : ${deliveryCodes}" th:value="${deliveryCode.code}" th:text="${deliveryCode.displayName}">FAST</option>
	</select>
</div>

<hr class="my-4">