Struts2+Thymeleaf3을 사용하여 테이블 내보내기

18405 단어 Thymeleaf3Javastruts2

Struts2로 표 형식을 출력하는 방법


Struts2로 표 형식을 출력하는 가장 간단한 방법은 자바입니다.util.List 설치 클래스(Array List)에 저장하고 액세스기(get 메서드)를 준비합니다.
SnipetAction.java
List<SampleDTO> results;

public List<SampleDTO> getResults {
  return results;
}
이렇게 하면 뷰 측도 중복 처리용 라벨로results의 이름으로 처리할 수 있습니다.
이번에 View 측 템플릿에서는 Struts2 표준 JSP가 아닌 Thymeleaf3을 선택했습니다.

Struts2-Thymeleaf3 플러그인 가져오기 및 설정


Qiita:Struts2.5에서 Thymeleaf3 사용 공개.
마븐 창고도 공개되었기 때문에, 예를 들어 Eclipse의 마븐 플러그인을 사용하여 위상 이름 (jar)을 입력합니다
struts2-thymeleaf3-plugin
이렇게 넣으면 힌트 줄 거지?

동작 클래스


Struts2-Convention 플러그인을 사용하는 작업 클래스입니다.에뮬레이션 기반이므로 Action 클래스에 대한 설정 파일을 만들지 않습니다.
DisplayListAction.java
package serendip.sturts.thymeleaf.struts2_thymeleaf_sampleapp.actions;

import java.util.List;

import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.apache.struts2.convention.annotation.Results;

import com.opensymphony.xwork2.ActionSupport;

import lombok.Getter;
import lombok.Setter;
import lombok.extern.log4j.Log4j2;
import serendip.sturts.thymeleaf.struts2_thymeleaf_sampleapp.model.ProductService;
import serendip.sturts.thymeleaf.struts2_thymeleaf_sampleapp.model.SampleProduct;

/**
 * <code>Set welcome message.</code>
 */
@Namespace("/")
@ParentPackage("struts-thymeleaf")
@Results({@Result(name=ActionSupport.SUCCESS,type="thymeleaf",location="list")})
@Log4j2
public class DisplayListAction extends ActionSupport {

    @Action("list")
    public String execute() throws Exception {

        ProductService service = new ProductService();

        products = service.search();
        log.info("- search:{}" , products);

        return SUCCESS;
    }

    @Getter @Setter
    List<SampleProduct> products;

}
Action 클래스에서는 검색 처리를 모방한 Product Service에서 검색 결과로 여러 개의 SampleProduct 인스턴스를 가져오는 List에 저장됩니다.

Action 레벨에서 호출된 ProductService


원래는 데이터베이스 등 외부 저장소에서 검색 결과를 얻은 반으로 되돌아갔으나 이번에는 정형화된 것을 되돌려 모크류를 만들었다.
ProductService.java
package serendip.sturts.thymeleaf.struts2_thymeleaf_sampleapp.model;

import java.util.Arrays;
import java.util.List;

/**
 * @author A-pZ
 *
 */
public class ProductService {
    public List<SampleProduct> search() {
        List<SampleProduct> resultList =

        Arrays.asList(
            new SampleProduct("A-1", "試作品X-290PA1", 10, true, true),
            new SampleProduct("A-2", "試作品X-290PA2", 20, true, true),
            new SampleProduct("B-3", "試作品X-B3", 10, true, true),
            new SampleProduct("B-4", "試作品X-B4", 30, true, true),
            new SampleProduct("C-5", "試作品X-C5", 10, true, false),
            new SampleProduct("C-6", "試作品X-C6", 40, true, false),
            new SampleProduct("D-7", "試作品X-D7", 10, false, true),
            new SampleProduct("D-8", "試作品X-D8", 50, false, true),
            new SampleProduct("E-9", "試作品X-E9", 10, true, true),
            new SampleProduct("Z-1000", "試作品Z-1000", 0, false, false)
        );

        return resultList;
    }
}
검색 결과에 사용된 SampleProduct 클래스는 다음과 같습니다.
SampleProduct.java
package serendip.sturts.thymeleaf.struts2_thymeleaf_sampleapp.model;

import java.io.Serializable;

import lombok.Data;

/**
 * @author A-pZ
 *
 */
@Data
public class SampleProduct implements Serializable {
    public SampleProduct(String id, String name, long stock, boolean secret, boolean editable) {
        super();
        this.id = id;
        this.name = name;
        this.stock = stock;
        this.secret = secret;
        this.editable = editable;
    }
    private String id;
    private String name;
    private long stock;
    private boolean secret;
    private boolean editable;
}

Thymeleaf3 템플릿 HTML


Action 클래스부터 검색 결과는 제품 이름으로 처리되기 때문에 템플릿도 제품으로 참조합니다.
Struts2-Thymeleaf3-pluggin에서 처리된 Thymeleaf 템플릿은 그대로 유지되며 특별한 변화가 없습니다.
list.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:sth="http://serendip.thymeleaf">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <table class="table table-bordered">
        <thead>
            <th>id</th>
            <th>製品名</th>
            <th>在庫数</th>
            <th>公開可?</th>
            <th>編集可?</th>
        </thead>
        <tbody>
            <tr th:each="product : ${products}">
                <td th:text="${product.getId()}"></td>
                <td th:text="${product.getName()}"></td>
                <td th:text="${product.getStock()}"></td>
                <td th:text="${product.isSecret()?'👍':''}"></td>
                <td th:text="${product.isEditable()?'👍':''}"></td>
            </tr>
        </tbody>
    </table>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
시크릿과isedtable에 대해서boolean입니다. 사실이라면👍라는 그림문자를 남겼다.
반복도 쉬워요!

결과 내보내기


이번 예는bootstrap4.0.0-alpha6이다.
다른 내비게이션 표시줄과 기본 스타일은 다음 화면으로 변합니다.

좋은 웹페이지 즐겨찾기