게시물 목록 페이지#

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

ListBoard.java

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 = (Boarditem.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

<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

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

Add new attachment

Only authorized users are allowed to upload new attachments.

List of attachments

Kind Attachment Name Size Version Date Modified Author Change note
jpg
2-1.jpg 175.9 kB 1 13-Dec-2006 23:27 59.187.230.143
« This page (revision-1) was last changed on 13-Dec-2006 23:27 by 59.187.230.143