체크박스 - 단일1

체크박스 - 단일2

타임리프를 사용해서 폼에서 체크박스, 라디오 버튼, 셀렉트 박스를 편리하게 사용하는 방법을 학습해보자.

기존 상품 서비스에 다음 요구사항이 추가되었다.

상품 종류는 ENUM 을 사용한다. 설명을 위해 description 필드를 추가했다.

배송 방식은 DeliveryCode 라는 클래스를 사용한다. code 는 FAST 같은 시스템에서 전달하는 값이고,
displayName 은 빠른 배송 같은 고객에게 보여주는 값이다.

ENUM , 클래스, String 같은 다양한 상황을 준비했다. 각각의 상황에 어떻게 폼의 데이터를 받을 수 있는지
하나씩 알아보자.

@Data
public class Item {
    ...
    private ItemType itemType; //상품 종류

public enum ItemType {

    BOOK("도서"), FOOD("음식"), ETC("기타");

    private final String description;

    ItemType(String description) {
        this.description = description;
    }
}

타임리프로 생성된 HTML

• th:field의 부가적인 효과

  • 값이 있으면 값까지 출력해줌 (value 속성)
  • 변수이름에 오타가 나면 오류를 내준다

• 등록 폼보다 수정 폼에서 더 효과를 봄(필드가 많을 경우 매우 유용)

@Data
public class Item {
   ...
    private String deliveryCode;// 배송 방식

/**
 * FAST: 빠른 배송
 * NORMAL: 일반 배송
 * SLOW: 느린 배송
 */
@Data
@AllArgsConstructor
public class DeliveryCode {

    private String code; //시스템에서 전달하는 값
    private String displayName; // 고객에게 보여주는 값
}

• 상품 상세와 수정에도 똑같이 적용
• disabled 를 사용해서 상품 상세에서는 셀렉트 박스가 선택되지 않도록 한다

MVC1 편에서 개발한 상품 관리 프로젝트를 약간 다듬어서 사용!

• <label for="id 값"> 에 지정된 id 가 checkbox 에서 동적으로 생성된 regions1 , regions2 , regions3 에 맞추어 순서대로 입력된 것을 확인할 수 있다.