타임리프(스프링 통합과 폼)

입력 폼 처리

th:object="${item}" -> 폼에서 사용할 객체를 지정. 그러면 item에 관한 프로퍼티를 *{...}으로 적용 가능

th:field는 id, name, value 속성을 모두 다 자동으로 만들어줌

-> 검증(Validation)에서 위력

 

체크 박스

<input type="checkbox" id="open" name="open" class="form-check-input">

html의 체크박스는 체크시에는 on(true)으로 넘어오고 비체크시에는 아무것도 넘어오지 않는다 

->

<input type="checkbox" id="open" name="open" class="form-check-input"><input type="hidden" name="_open" value="on">

-> 스프링 MVC는 히든 필드도 만들어서 해결함(스프링이 비체크시에는 false로 반환해줌)

 

타임리프는 히든 필드마저 생성해줌 ( 값이 참이면 내부 비교로직으로 checked까지 넣어줌 )

<input type="checkbox" id="open" th:field="${item.open}" class="form-check-input">

 

 

체크 박스 - 멀티

@ModelAttribute의 또다른 기능

-> 아래처럼 쓰면 모든 뷰에서 모델에 regions가 넘어간다

 

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

 

th:filed는 반복문일때 아이디도 다르게 만들어줌(regions1, regions2)

            <div th:each="region : ${regions}" class="form-check form-check-inline">
                <input type="checkbox" th:field="${item.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>

 

th:for="${#ids.prev('regions')}"

-> 동적으로 생성되는 id 값을 사용할수 있음

 

라디오 버튼

마찬가지로 @ModelAttribute를 사용해서 model에 자동으로 넣기

 

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

ItemType.values() -> 배열을 리턴함

 

    <div>
        <div>상품 종류</div>
        <div th:each="type : ${itemTypes}" class="form-check form-check-inline">
            <input type="radio" th:field="${item.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>

 

셀렉트 박스

마찬가지로 @ModelAttribute를 사용해서 model에 자동으로 넣기

 

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

 

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