Wicket 表を作る

2019-03-222019
22.1% (80.8/365)
March
70.3% (21.8/31)
Week 12
68.7% (4.8/7)
Day 22 Fri
81.1% (19.4/24)

訪問者

total: 18801
today: 8
yesterday: 3
now: 13

↑

更新

MenuBar

表を使ったアプリケーション
アプリケーションの構造
MagicLogic
ListPage.html
MagicVO.java
ListPage.java
ReceitPage
- ReceitPage.html
- RecitePage.java

表を使ったアプリケーション †

一覧表のリンクをクリックすると、明細画面に遷移するようなアプリケーションを作りたい

↑

アプリケーションの構造 †

クラス名	内容
MagicVO	魔法一件分(=表一行分)を表す Value Object
ListPage?	一覧表画面
RecitePage?	明細画面
MagicLogic?	魔法を全件取得するビジネスロジック(※)

※本式のアプリケーションでは、Session Bean などになるはず。ここでは、CSVファイルを読み込んでいる

↑

MagicLogic? †

package com.snail.wicket.exam.list;

import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.LinkedList;
import java.util.List;

public class MagicLogic {

  public static List<MagicVO> getMagicVOList() throws IOException {
    BufferedReader reader = new BufferedReader(new InputStreamReader(
          new FileInputStream("C:\\temp\\magics.csv"), "UTF-8"));

    List<MagicVO> res = new LinkedList<MagicVO>();

    String line;

    while ((line = reader.readLine()) != null) {
      String[] col = line.split(",");

      if (col.length == 4) {
        res.add(new MagicVO(col[0], col[1].replaceAll("\"", ""),
            col[2], col[3].replaceAll("\"", "")));
      }
    }

    return res;
  }

  public static void main(String[] args) {
    try {
      for (MagicVO vo : MagicLogic.getMagicVOList()) {
        System.out.println(vo);
      }
    } catch (IOException e) {
      e.printStackTrace();
    }
  }
}

こんな CSV ファイルを読み込んで、MagicVO の List を返す。
このクラスは、特に Wicket とは関係ない。

↑

ListPage?.html †

<?xml version="1.0" encoding="UTF-8"?>
<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:wicket="http://wicket.apache.org/">
<head>
<title>Wicket List Examination</title>
</head>
<body>
<strong>Wicket List Examination</strong>
<br/><br/>
<span wicket:id="msg"> error message will be here </span>

<table border="1">
  <tr>
    <th>ID</th>
    <th>NAME</th>
    <th>MP</th>
  </tr>
  <tr wicket:id="magic">
    <td wicket:id="id">01</td>
    <td>
      <a wicket:id="reciteLink">
        <span wicket:id="name">水遁の術</span>
      </a>
    </td>
    <td wicket:id="mp">10</td>
  </tr>
</table>

</body>
</html>

表の作り方

<tr> タグに wicket:id を付ける
- <tr> は、表(<table>) 一行分を表す
- これが、org.apache.wicket.markup.html.list.ListView? に対応する
- ListView? の中には、org.apache.wicket.markup.html.list.ListItem? が複数個有り、Wicket によってレタリングされるときには、その個数分 <tr> が展開される。
<td> タグに wicket:id を付ける
- <td> は、行(<tr>) の中の一列分を表す
- ListPage.java では、ListItem? に、wicket:id に対応する Label や Link を複数個追加することになる。
- 直接 <td> タグに wicket:id を付けなくても、その子要素の <a> や <span> に wicket:id を付けても良い
リンクを作るためには、
```
<td>
  <a wicket:id="reciteLink">
    <span wicket:id="name">水遁の術</span>
  </a>
</td>
```
と言うように、<a> タグ (→ org.apache.wicket.markup.html.link.Link に対応) の下に、<span> タグ (→ org.apache.wicket.markup.html.basic.Label に対応) を入れる。

↑

MagicVO.java †

package com.snail.wicket.exam.list;

import java.io.Serializable;
import java.lang.reflect.InvocationTargetException;

import org.apache.commons.beanutils.BeanUtils;

public final class MagicVO implements Serializable {
  private static final long serialVersionUID = 5916203121960729085L;
  
  public static final String EFFECT_COL = "effect";
  public static final String ID_COL = "id";
  public static final String MP_COL = "mp";
  public static final String NAME_COL = "name";

  private String effect;
  private String id;
  private String mp;
  private String name;
  
  public MagicVO(final String id,final String name,final String mp,final String effect){
	  this.id = id;
	  this.name = name;
	  this.mp = mp;
	  this.effect = effect;
  }
  
  public void setEffect(String effect) {
    this.effect = effect;
  }

  public String getEffect() {
    return effect;
  }

  public void setId(String id) {
    this.id = id;
  }

  public String getId() {
    return id;
  }

  public void setMp(String mp) {
    this.mp = mp;
  }

  public String getMp() {
    return mp;
  }

  public void setName(String name) {
    this.name = name;
  }

  public String getName() {
    return name;
  }
  
  public String toString(){
	  try {
		return BeanUtils.describe(this).toString();
	} catch (IllegalAccessException e) {
		return super.toString();
	} catch (InvocationTargetException e) {
		return super.toString();
	} catch (NoSuchMethodException e) {
		return super.toString();
	}
  }
}

この Bean が、表の1行分に相当する。
普通の Java Bean。Serializable を忘れずに

↑

ListPage.java †

package com.snail.wicket.exam.list;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.link.Link;
import org.apache.wicket.markup.html.list.ListItem;
import org.apache.wicket.markup.html.list.ListView;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.CompoundPropertyModel;

import java.io.IOException;

public class ListPage extends WebPage {

  private FeedbackPanel feedback = new FeedbackPanel("msg");

  public ListPage() {
    add(feedback);

    try {
      ListView magic = new ListView("magic", MagicLogic.getMagicVOList()) {
          @Override
          protected void populateItem(ListItem item) {
            final MagicVO vo = (MagicVO) item.getModelObject(); // final でないと、Link#onClick() から参照できない
            item.setModel(new CompoundPropertyModel(vo));
            item.add(new Label(MagicVO.ID_COL));
            item.add(new Label(MagicVO.MP_COL));

            Link reciteLink = new Link("reciteLink") {
                @Override
                public void onClick() {
                  setResponsePage(new RecitePage(vo));
                }
              };

            item.add(reciteLink);

            reciteLink.add(new Label(MagicVO.NAME_COL));
          }
        };

      add(magic);
    } catch (IOException e) {
      error("魔法一覧を読み取れませんでした");
    }
  }
}

WebPage? に、ListView? を追加する
ListView? の作り方( 21行目 )
- 表全体は ListView? に格納する。ListView? 配下に、複数の ListItem?(行) が有り、列は ListItem? に add() する
- new ListView?( wicket:id , List<MagicVO> )
- populateItem(ListItem? item) を override する
ListItem? の作り方( 23行目 )
- populateItem(ListItem? item) の item に、列を add() する
- wicket:id と MagicVO のフィールド名(getter) が同じであれば、CompoundPropertyModel を使うことができる。*1
リンクの作り方( 29行目 )
- Link を item に add() する
- リンクが押されたときの処理は、Link#onClick() を override する
- リンクの文字列は、Link に Label を add() する(38行目)

↑

ReceitPage? †

これらは、ListPage? で指定された MagicVO を表示するだけなので、特に解説するところはない
このページは、次回「Wicket Sessionを使う」で活躍します

↑

ReceitPage?.html †

<?xml version="1.0" encoding="UTF-8"?>
<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:wicket="http://wicket.apache.org/">
<head>
<title>Result Page</title>
</head>
<body>

<p>Are you sure you recite this magic? </p>

<form wicket:id="f">
  Name: <span wicket:id="name">Name will be here</span><br/>
  Effect: <span wicket:id="effect">Effect will be here</span><br/>
  Use MP: <span wicket:id="mp">Magic Point will be here</span><br/>
  <input type="submit" wicket:id="sure" value="sure"/>
  <input type="submit" wicket:id="cancel" value="cancel"/>
</form>

</body>
</html>

↑

RecitePage?.java †

package com.snail.wicket.exam.list;

import com.snail.wicket.exam.MenuPage;
import com.snail.wicket.exam.diary.DiaryPage;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Button;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.CompoundPropertyModel;

public class RecitePage extends WebPage {
  private MagicVO magic;

  public RecitePage(MagicVO pMagic) {
    magic = pMagic;

    Form form = new Form("f", new CompoundPropertyModel(magic));
    add(form);

    form.add(new Label(MagicVO.NAME_COL));
    form.add(new Label(MagicVO.EFFECT_COL));
    form.add(new Label(MagicVO.MP_COL));

    form.add(new Button("cancel") {
        @Override
        public void onSubmit() {
          setResponsePage(new ListPage());
        }
      });

    form.add(new Button("sure") {
        @Override
        public void onSubmit() {
          setResponsePage(new ListPage());
        }
      });
  }
}

Java#Wicket