스프링통합과 폼(2)

라디오 버튼

• 여러 선택지중 하나를 선택할 때 사용이 가능
• 자바 ENUM을 활용해서 개발

멀티 체킹을 했던 것처럼 @ModelAttribute을 통해서 itemType을 추가해두자.

ItemType.values()를 사용시 해당 ENUM의 모든 정보를 배열로 반환해줌.

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

라디오 버튼의 경우 버튼이 이미 선택되있다면 , 수정시에도 항상 하나를 선택하도록 되어 있으므로 체크박스와 달라 별도의 히든필드가 필요없음.

<!-- 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>

<div th:each="type : ${T(hello.itemservice.domain.item.ItemType).values()}">

타임리프에서 ENUM을 직접 사용하는 방법도 존재한다.

• ${T(위치경로).values()} 통해서 가능

• 스프링EL 문법으로 ENUM을 직접 사용할 수 있다.

• 하지만 이렇게 사용시 ENUM의 패키지 위치가 변경되거나 할때 자바 컴파일러가 타임리프까지 컴파일 오류를 잡을 수 없기 때문에 추천하진 않는다.

셀렉트 박스

• 여러 선택지 중 하나를 선택할 때 사용
• 마찬가지로 @ModelAttribute를 통해서 deliveryCodes를 추가

@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;
}

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

• select의 경우 값을 지정하지 않을 경우 맨위의 값으로 저장이된다.
• 만약 값이 "" 일때를 정해놓으면 이 값이 선택됨.