第7章: リピータ (Repeater Components)

import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.list.ListView;
import org.apache.wicket.markup.html.list.ListItem;

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

public class FruitPage extends WebPage {
    public FruitPage() {
        List<String> fruits = Arrays.asList(
            "りんご", "みかん", "ぶどう", "バナナ");

        add(new ListView<>("fruitList", fruits) {
            @Override
            protected void populateItem(
                    ListItem<String> item) {
                item.add(new Label("name",
                    item.getModelObject()));
            }
        });
    }
}

<wicket:extend>
  <h2>果物リスト</h2>
  <ul>
    <li wicket:id="fruitList">
      <span wicket:id="name">果物名</span>
    </li>
  </ul>
</wicket:extend>

public class EmployeeListPage extends WebPage {
    public EmployeeListPage() {
        List<Employee> employees = Arrays.asList(
            new Employee("田中太郎", "開発部", 30),
            new Employee("佐藤花子", "営業部", 25),
            new Employee("鈴木一郎", "人事部", 35),
            new Employee("高橋美咲", "開発部", 28)
        );

        add(new ListView<>("empList", employees) {
            @Override
            protected void populateItem(
                    ListItem<Employee> item) {
                Employee emp = item.getModelObject();
                item.add(new Label("name",
                    emp.getName()));
                item.add(new Label("dept",
                    emp.getDepartment()));
                item.add(new Label("age",
                    String.valueOf(emp.getAge())));
            }
        });
    }
}

<wicket:extend>
  <h2>従業員一覧</h2>
  <table>
    <thead>
      <tr>
        <th>名前</th>
        <th>部署</th>
        <th>年齢</th>
      </tr>
    </thead>
    <tbody>
      <tr wicket:id="empList">
        <td wicket:id="name">名前</td>
        <td wicket:id="dept">部署</td>
        <td wicket:id="age">年齢</td>
      </tr>
    </tbody>
  </table>
</wicket:extend>

import org.apache.wicket.markup.repeater.RepeatingView;
import org.apache.wicket.markup.html.WebMarkupContainer;

public class ItemPage extends WebPage {
    public ItemPage() {
        List<String> items = Arrays.asList(
            "項目A", "項目B", "項目C");

        RepeatingView rv = new RepeatingView("items");
        add(rv);

        for (String item : items) {
            // newChildId() で一意の ID を自動生成
            WebMarkupContainer container =
                new WebMarkupContainer(
                    rv.newChildId());
            rv.add(container);
            container.add(
                new Label("label", item));
        }
    }
}

<wicket:extend>
  <div>
    <div wicket:id="items">
      <span wicket:id="label">
        項目
      </span>
    </div>
  </div>
</wicket:extend>

import org.apache.wicket.markup.repeater.data.DataView;
import org.apache.wicket.markup.repeater.Item;
import org.apache.wicket.markup.html.navigation.paging.PagingNavigator;

public class EmployeeDataPage extends WebPage {
    public EmployeeDataPage() {
        DataView<Employee> dataView =
          new DataView<>("employees",
              new EmployeeDataProvider(),
              10) {
            @Override
            protected void populateItem(
                    Item<Employee> item) {
                Employee emp =
                    item.getModelObject();
                item.add(new Label("name",
                    emp.getName()));
                item.add(new Label("dept",
                    emp.getDepartment()));
            }
        };
        add(dataView);

        // ページングナビゲータを追加
        add(new PagingNavigator(
            "navigator", dataView));
    }
}

<wicket:extend>
  <h2>従業員一覧</h2>
  <table>
    <thead>
      <tr>
        <th>名前</th>
        <th>部署</th>
      </tr>
    </thead>
    <tbody>
      <tr wicket:id="employees">
        <td wicket:id="name">名前</td>
        <td wicket:id="dept">部署</td>
      </tr>
    </tbody>
  </table>

  <!-- ページングナビゲータ -->
  <div wicket:id="navigator">
    ページング
  </div>
</wicket:extend>

import org.apache.wicket.extensions.markup.html.repeater.data.table.*;
import org.apache.wicket.model.Model;

import java.util.ArrayList;
import java.util.List;

public class EmployeeTablePage
        extends WebPage {
    public EmployeeTablePage() {
        List<IColumn<Employee, String>>
            columns = new ArrayList<>();

        // PropertyColumn: プロパティ名で値を取得
        // 第1引数=ヘッダー表示名
        // 第2引数=ソートキー
        // 第3引数=プロパティ式
        columns.add(new PropertyColumn<>(
            Model.of("名前"),
            "name", "name"));
        columns.add(new PropertyColumn<>(
            Model.of("部署"),
            "department", "department"));
        columns.add(new PropertyColumn<>(
            Model.of("年齢"),
            "age", "age"));

        // DefaultDataTable は
        // ヘッダー + ページングを自動付与
        DataTable<Employee, String> table =
            new DefaultDataTable<>(
                "employeeTable",
                columns,
                new EmployeeDataProvider(),
                20);
        add(table);
    }
}

<wicket:extend>
  <h2>従業員マスタ</h2>

  <!-- DataTable が自動的に
       thead/tbody/ページングを生成 -->
  <table wicket:id="employeeTable">
  </table>
</wicket:extend>