Wicket Paletteの例
Wicketエクステンションには、2つの選択ボックスを表示する特別な「
Palette
」コンポーネントが付属しています。また、ユーザーは1つの選択ボックスから別の選択ボックスにアイテムを移動できます。
Figure:パレットコンポーネント
….//Java
import org.apache.wicket.extensions.markup.html.form.palette.Palette;
final Palette<Hosting> palette = new Palette<Hosting>(“palette”,
new ListModel<Hosting>(selected),
new CollectionModel<Hosting>(listHosting),
renderer, 10, true);
//HTML <span wicket:id="palette"></span>
=== パレットの署名
Palette(String id,
IModel<List<T>> model,
IModel<? extends Collection<? extends T>> choicesModel,
IChoiceRenderer<T> choiceRenderer,
int rows, boolean allowOrder)
. id - コンポーネントID . モデルモデル - ユーザーの選択のコレクションを表す . choicesModel Model - 使用可能なすべての選択肢のコレクションを表す . choiceRenderer - 選択肢のレンダリングに使用されるレンダー. 固有のものを使用する必要があります インデックスではなくオブジェクトのID 。 rows - 画面に表示される選択肢の数。 スクロール 。 allowOrder - ユーザーが選択範囲を上下に移動できるようにする ** 注意** かなり理解しにくいですよね?気にしないで、完全なWicket Paletteの例を読んでください。 === 1. Wicket Extension "** Palette ** "を使用するには、 "** wicket-extensions ** " jarが必要です。 __File:pom.xml__
<project …>
<dependencies>
<dependency> <groupId>org.apache.wicket</groupId> <artifactId>wicket-extensions</artifactId> <version>1.4.17</version> </dependency>
</dependencies>
</project>
=== 2.パレットのモデル モデルクラスを作成し、選択ボックスで選択肢を表します。
package com.mkyong.user;
import java.io.Serializable;
public class Hosting implements Serializable {
String id; String name;
//getter, setter, constructor and toString() methods
}
=== 3.パレットの例 上記のモデルをパレットコンポーネントに配置し、 `ChoiceRenderer`を使用して表示するものを決定する例それは自明でなければなりません。
package com.mkyong.user;
import java.util.ArrayList;
import java.util.List;
import org.apache.wicket.PageParameters;
import org.apache.wicket.extensions.markup.html.form.palette.Palette;
import org.apache.wicket.markup.html.form.ChoiceRenderer;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.IChoiceRenderer;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.model.util.CollectionModel;
import org.apache.wicket.model.util.ListModel;
public class PalettePage extends WebPage {
private static final List<Hosting> listHosting; static { listHosting = new ArrayList<Hosting>(); listHosting.add(new Hosting("1", "Shared")); listHosting.add(new Hosting("2", "VPS")); listHosting.add(new Hosting("3", "Dedicated")); }
private List<Hosting> selected = new ArrayList<Hosting>();
public PalettePage(final PageParameters parameters) {
add(new FeedbackPanel("feedback"));
Form<?> form = new Form<Void>("form") { @Override protected void onSubmit() {
info("Selected language : " + selected);
} };
add(form);
//make VPS selected by default //selected.add(new Hosting("2", "VPS"));
IChoiceRenderer<Hosting> renderer = new ChoiceRenderer<Hosting>("name","id");
final Palette<Hosting> palette = new Palette<Hosting>("palette", new ListModel<Hosting>(selected), new CollectionModel<Hosting>(listHosting), renderer, 10, true);
form.add(palette);
} }
** デフォルトで選択された特定の値を作る方法** この場合、 "VPS"をデフォルトで選択させるには、これを "** selected ** "変数に追加します:
selected.add(new Hosting("2", "VPS"));
=== 4. HTMLページ 完全なHTMLソースコード。
<html>
<head>
<style>
.feedbackPanelINFO {
color: green;
}
</style>
</head>
<body>
<h1>Wicket palette example</h1>
<div wicket:id="feedback"></div> <form wicket:id="form"> <p> <label>Select your hosting types </label> <br/>
<span wicket:id="palette"></span>
</p> <input type="submit" value="Display"/> </form>
</body>
</html>
=== 5.デモ 開始と訪問 - http://localhost:8080/Wicket例/__ 一部の項目を選択して移動し、表示ボタンをクリックします。 image://wp-content/uploads/2011/05/wicket-palette-example2.png[wicketパレット、title = "wicket-palette-example2"、width = 640、height = 478] __P.Sソート・アップ/ソート・ダウン・ボタンは、選択した項目(右の選択ボックス)にのみ適用されます。 ダウンロードする - リンク://wp-content/uploads/2011/05/Wicket-Palette-Example.zip[Wicket-Palette-Example.zip](8KB) === 参考文献 . http://wicket.apache.org/apidocs/1.4/org/apache/wicket/extensions/markup/html/form/palette/Palette.html[Wicket パレットJavadoc]。 http://wicket.apache.org/apidocs/1.4/org/apache/wicket/markup/html/form/ChoiceRenderer.html[Wicket ChoiceRenderer Javadoc] link://tag/wicket/[wicket]