스프링과 JPA를 이용한 웹개발 프로젝트_View 구현 2

타임리프에서 자바 클래스 접근하기

• SeedStarter→Feature→name: 중첩 반복문 작성이 까다로움!
• 본 예제에서는 특정 SeedStarter에 속한 모든 Feature들을 탐색하며 name을 수집, 하나의 문자열로 concat

타임리프에서 자바 클래스 접근하기

CollectorFeatureName

public class CollectorFeatureName {
    public static final List<FeatureType> name(Stream<Feature> stream) {
    	return stream.map(v->v.getName()).collect(Collectors.toList());
    }
}

타임리프에서 메소드에 정의된 클래스에 접근하기 위해(인스턴스 변수로 접근이 아닌) 함수를 static으로 정의!

➡️그냥 타임리프에서 사용할 함수는 모두 정적으로 만들어야합니다.

<td th:text="${T(com.example.seedstarter.entity.CollectorFeatureName).name(starter.features.stream())}"></td>

<td>
    <table>
        <tbody>
        <tr th:each="detail : ${starter.details}">
            <td th:text="${detail.rowNum}">1</td>
            <td th:text="${detail.variety}">Thymus Thymi</td>
            <td th:text="${detail.seedPerCell}">12</td>
        </tr>
        </tbody>
    </table>
</td>

그러면 테이블 안에 테이블이 생성됩니다!

새로운 SeedStarter 추가 form 만들기

<div class="container alert alert-success">
    <form action="#" th:action="@{/seedstartermng}" th:object="${seedStarterAddForm}" method="post">
        <fieldset>
            <legend>새로운 Seed Starter추가</legend>
                <div class="form-group row">
                	<label for="plantedDateTxBox" class="col-sm-2 col-form-label"
                	th:text="#{seedstarter.datePlanted}"></label>
                <div class="col-sm-10">
                	<input type="text" id="plantedDateTxBox" th:field="*{datePlanted}"/>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">추가</button>
        </fieldset>
    </form>
</div>

Selection expressions

▪ *{...} : th:object로 정의된 변수(object)에 포함된 값을 의미

<form action="#" th:action="@{/seedstartermng}" th:object="${seedStarterAddForm}" method="post">
<input type="text" id="plantedDateTxBox" th:field="*{datePlanted}"/>

@Getter
@Setter
public class SeedStarterAddForm {
	private String datePlanted;
}

Selection expressions

▪ Method level에 @ModelAttribute를 사용하여 모델에 공통 속성 등록

public class SeedStarterMngController {
    @ModelAttribute
    public void addAttributes(Model model) {
    	model.addAttribute("seedStarterAddForm", new SeedStarterAddForm());
    }
    
    @PostMapping({"/seedstartermng"})
    public String addNewSeedStarter(@ModelAttribute SeedStarterAddForm seedStarterAddForm){
        System.out.println("seedStarter = " + seedStarterAddForm.getDatePlanted());
        return "seedstartermng1";
    }
}

▪ SeedStarter리스트 표시에 필요한 부분도 모델에 공통 속성 등록

public class SeedStarterMngController {
    private final SeedStarterService seedStarterService;
    private final ObjectMapper mapper;
    
    @ModelAttribute
    public void addAttributes(Model model) {
        List<SeedStarter> seedStarterWithFeature = seedStarterService.findWithFeature();
        List<SeedStarter> seedStarterWithDetail = seedStarterService.findWithDetail();
        model.addAttribute("seedStarterWithFeature",seedStarterWithFeature);
        model.addAttribute("seedStarterWithDetail",seedStarterWithDetail);
        model.addAttribute("seedStarterAddForm", new SeedStarterAddForm());
}

새로운 SeedStarter 추가 form 만들기

<div class="form-group row">
                    <div class="col-sm-2" th:text="#{seedstarter.covered}"></div>
                    <div class="col-sm-10">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="coveredChkBox" th:field="*{covered}">
                            <label class="form-check-label" for="coveredChkBox" ></label>
                        </div>
                    </div>
                </div>
                <div class="form-row row">
                    <div class="col-sm-2" th:text="#{seedstarter.type}"></div>
                    <div class="col-sm-2">
                        <select id="seedStarterType" class="form-control" th:field="*{type}">
                            <option selected value="PLASTIC">PLASTIC</option>
                            <option selected value="WOOD" >WOOD</option>
                        </select>
                    </div>
                </div>
                <div class="form-row row">
                    <div class="col-sm-2" th:text="#{seedstarter.features}"></div>
                    <div class="col-sm-2">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="features" value="SUBSTRATE" th:field="*{substrate}">
                            <label class="form-check-label">특정 기질</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="features" value="FERTILIZER" th:field="*{fertilizer}">
                            <label class="form-check-label">비료 사용</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="features" value="PH_CORRECTOR" th:field="*{phCorrector}">
                            <label class="form-check-label">수소 농도 교정</label>
                        </div>
                    </div>
                </div>

@Getter
@Setter
public class SeedStarterAddForm {
    private String datePlanted;
    private boolean covered;
    private String type;
    private String substrate;
    private String fertilizer;
    private String phCorrector;
}

전체 완성 결과

➡️값도 잘들어오는 것을 확인할 수 있습니다!

 

자세한 코드 확인은 깃허브를 참고하시기를 바랍니다.

https://github.com/shin-jae-eun/seedStarter.git