!! 게시물 목록 페이지
이전 글에서 게시물 작성 페이지까지 만들었다. 이번에는 게시물 목록을 보여주는 페이지를 만들어 보자. 페이징 기능까지 구현된 게시물 목록 페이지를 만들 것이다. 먼저 BoardApplication 클래스의 getHomePage() 메소드가 ListBoard.class 를 리턴하도록 변경하자. 그러면 시작 페이지가 게시물 목록 페이지로 변경된다. ListBoard 클래스와 HTML 템플릿의 코드는 아래와 같다.

__ListBoard.java__

[{Java2HtmlPlugin

package example.board.page;
import net.databinder.components.DataPage;
import net.databinder.components.DateLabel;
import net.databinder.models.DatabinderProvider;
import org.hibernate.Query;
import wicket.PageParameters;
import wicket.extensions.markup.html.repeater.data.DataView;
import wicket.extensions.markup.html.repeater.data.IDataProvider;
import wicket.extensions.markup.html.repeater.refreshing.Item;
import wicket.markup.html.basic.Label;
import wicket.markup.html.link.BookmarkablePageLink;
import wicket.markup.html.navigation.paging.PagingNavigator;
import wicket.model.CompoundPropertyModel;
import example.board.model.Board;
public class ListBoard extends DataPage {
    private static final long serialVersionUID = 6428023586056929600L;
    @SuppressWarnings("serial")
    public ListBoard(PageParameters params) {
        DataView boards = new DataView(
                "boards",
                new BoardProvider(
                        "from Board board where board.level = 0 and board.isDelete = 0 order by board.thread desc"),
                10) {
            public void populateItem(final Item item) {
                final Board board = (Board) item.getModelObject();
                item.setModel(new CompoundPropertyModel(board));
                item.add(new Label("id"));
                item.add(new Label("writer"));
                item.add(new DateLabel("writeDate", "yyyy-MM-dd"));
                item.add(new Label("readCount"));
                item.add(new Label("title"));
            }
        };
        add(boards);
        BookmarkablePageLink linkToWriteBoard = new BookmarkablePageLink(
                "linkToWriteBoard", WriteBoard.class);
        add(linkToWriteBoard);
        add(new PagingNavigator("navigator", boards));
    }
    @Override
    protected String getName() {
        return "게시물 목록";
    }
    @SuppressWarnings("serial")
    class BoardProvider extends DatabinderProvider.QueryBinder implements
            IDataProvider {
        public BoardProvider(String queryString) {
            super(queryString);
        }
        public void bind(Query query) {
        }
    }
}
}]

Wicket 페이지 클래스의 개념에 대해 얘기하자면, 클래스의 생성자에서 HTML 템플릿의 wicket:id에 해당하는 컴포넌트를 생성해서 클래스에 add 하고, 폼 전송 처리는 Form 클래스의 onSubmit() 메소드를 오버라이딩해서 구현하는 것이다. ListBoard 클래스의 경우 게시물 목록만 보여주고 폼 전송 처리는 필요없기 때문에 생성자에서 컴포넌트만 구성해주면 된다. 이 클래스에서 핵심이 되는 부분은 DataView boards = ... 부분이다. DataView는 List 형식의 객체를 표현할 때 사용하는 클래스로서 HQL로 List 객체를 뽑아오고, 메소드의 3번째 인자는 한 페이지당 보여줄 목록의 갯수를 설정한다. populateItem(final Item item) {..} 메소드에서 List의 각 객체를 뽑아내고 HTML 템플릿에 해당하는 컴포넌트를 생성 구현하면 된다. 페이징 기능은 PagingNavigator 클래스만 생성해서 추가하면 자동으로 구현된다. 정말 간단하게 페이징 기능까지 구현된 웹페이지를 만들 수 있다.

__ListBoard.html__

[{Java2HtmlPlugin

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:wicket="http://wicket.sourceforge.net/" lang="euc-kr">
<head>
<link
    href="http://localhost:8080/app/resources/net.databinder.components.DataPage/DataPage.css"
    type="text/css" rel="stylesheet" />
<title>글 목록</title>
</head>
<body>
<wicket:extend>
    <wicket:child />
    <table width="700" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th width="60">번호</th>
            <th>제목</th>
            <th width="100">작성자</th>
            <th width="120">날짜</th>
            <th width="60">조회수</th>
        </tr>
        <tr wicket:id="boards">
            <td align="center"><span wicket:id="id">[번호]</span></td>
            <td><span wicket:id="title">[제목]</span></td>
            <td align="center"><span wicket:id="writer">[작성자]</span></td>
            <td align="center"><span wicket:id="writeDate">[날짜]</span></td>
            <td align="center"><span wicket:id="readCount">[조회수]</span></td>
        </tr>
    </table>
    <span wicket:id="navigator">[dataview navigator]</span>
    <br />
    <a href="#" wicket:id="linkToWriteBoard">글쓰기</a>
</wicket:extend>
</body>
</html>
}]

[2-1.jpg]

다음에는 게시물 내용을 보는 페이지를 만들어 보자.