本ページではWicketを利用したプログラムのミニサンプル集を一覧表示しています。
(注)各Wicket関連のパッケージのimport文は省略しています。
WebApplicationクラスの設定(プロジェクト全体)
|
WebApplicationクラス
|
トップページの設定
|
public Class<? extends Page> getHomePage() {
//最初に表示されるページを設定
return TopPage.class;
}
|
エンコーディングの設定
|
protected void init() {
//エンコーディングの設定
getMarkupSettings().setDefaultMarkupEncoding("UTF-8");
getRequestCycleSettings().setResponseRequestEncoding("UTF-8");
}
|
ブックマーク可能ページの設定
|
Wicketを使うとウェブページのURLが複雑になってしまうので、ブックマーク可能ページに対してはURL設定を行う
protected void init() {
mountBookmarkablePage("/home", TopPage.class);
}
|
稼動モードの変更
|
@Override
public String getConfigurationType() {
//DEVELOPMENT(開発モード) または DEPLOYMENT(配備モード)
return Application.DEPLOYMENT;
}
|
表示
|
htmlファイル
|
WebPageクラス(.javaファイル)
|
ラベル
|
<span wicket:id="label1">abc</span>
|
add(new Label("label1", "Hello!"));
|
ラベル (条件により表示内容を変更)
|
<span wicket:id="label1">abc</span>
|
add(new Label("label1", new Model<String>(){
@Override
public String getObject(){
if (条件){
return "Good morning!";
} else {
return "Good evening!";
}
}
}));
|
ラベル (複数行)
|
<div wicket:id="result"></div>
|
add(new MultiLineLabel("result", "(改行コードを含む文章も可)"));
|
画像
|
<img src="" wicket:id="image1" alt="xxx" />
|
add(new Image("image1", new ResourceReference(TopPage.class, "dog.gif")));
|
リストビュー (繰り返し表示)
|
<div wicket:id="list1">
<span wicket:id="listitem1"></span>
<br />
</div>
|
//表示するリストをあらかじめ用意
List<String> list = new ArrayList<String>();
list.add("dog");
list.add("cat");
ListView<String> itemlist = new ListView<String>("list1", list) {
@Override
protected void populateItem(ListItem<String>
item) {
String str = item.getModelObject();
item.add(new Label("listitem1", str));
}
};
add(itemlist);
|
リストビュー (表形式)
|
<table>
<tr><td>col1</td><td>col2</td></tr>
<tr wicket:id="tabel1">
<td wicket:id="col1"></td>
<td wicket:id="col2"></td>
</tr>
</table>
|
List<TableData> table = new
ArrayList<TableData>();
table.add(0, new TableData("a", "b"));
table.add(0, new TableData("c", "d"));
ListView<TableData> itemtable = new
ListView<TableData>("tabel1", table) {
@Override
protected void populateItem(ListItem
<TableData> item) {
TableData data = item.getModelObject();
item.add(new Label("col1", new
PropertyModel<String>(data, "col1")));
item.add(new Label("col2", new
PropertyModel<String>(data, "col2")));
}
};
add(itemtable);
//テーブルデータクラス
final class TableData implements Serializable {
private String col1;
private String col2;
public TableData(String key, String item) {
this.col1 = key;
this.col2 = item;
}
}
|
リンク
|
htmlファイル
|
WebPageクラス(.javaファイル)
|
リンク (文字列固定)
|
<a href="#" wicket:id="link1">home</a>
|
add(new BookmarkablePageLink<Void>("link1", TopPage.class));
|
リンク (文字列をプログラムから指定)
|
<a href="#" wicket:id="link1">
<span wicket:id="label1" style="text-
decoration: underline;">abc</span>
</a>
|
Link link1 = new Link("link1"){
@Override
public void onClick(){
(リンクをクリックされたときの処理を実装)
setResponsePage(TopPage.class);
}
};
add(link1);
link1.add(new Label("label1", "Go to toppage"));
|
画像によるリンク
|
<a href="#" wicket:id="link1">
<img src="#" wicket:id="image1"
alt="xxx" />
</a>
|
Link link1 = new BookmarkablePageLink("link1", TopPage.class);
add(link1);
link1.add(new Image("image1", new ResourceReference(TopPage.class, "home.gif")));
|
データの入力・取得(フォーム)
|
htmlファイル
|
WebPageクラス(.javaファイル)
|
フォームの基本構成
(テキストフィールドと送信ボタンの例)
|
<form wicket:id="form1" method="post">
<input type="text" wicket:id="text1" />
<input type="submit" />
</form>
result:<span wicket:id="result"></span>
|
public class TestPage extends WebPage {
private String inputtext = "(初期値)";
public TestPage() {
Form<Void> form = new Form<Void>("form1");
form.add(new TextField<String>("text1", new
PropertyModel<String>(this, "inputtext")));
add(form);
}
}
//送信時、テキストフィールドの入力値は変数inputtextに格納され、入力内容は下記のラベルに表示されます
add(new Label("result", new PropertyModel
<String>(this, "inputtext")));
|
送信ボタン押下時の処理を実装する場合
|
<form wicket:id="form1" method="post">
<input type="text" wicket:id="text1" />
<input type="submit" />
</form>
|
public class TestPage extends WebPage {
private String inputtext = "(初期値)";
public TestPage() {
final TextField<String> field = new TextField
<String>("text1", new PropertyModel
<String>(this, "inputtext"));
Form<Void> form = new Form<Void>("form1")
{
@Override
protected void onSubmit() {
//入力値を取り出す
String name = field.getModelObject();
(処理を実装)
};
};
form.add(field);
add(form);
}
}
|
テキストフィールド
|
1行のテキストフィールド:
<input type="text" wicket:id="id1" />
複数行のテキストフィールド:
<textarea wicket:id="area1" rows="10" cols="60" wrap="soft" ></textarea>
パスワードフィールド:
<input type="password" wicket:id="p1" />
隠しフィールド:
<input type="hidden" wicket:id="h1" />
|
form.add(new TextField<Integer>("id1", new
PropertyModel<Integer>(this, "idno"),
Integer.class));
form.add(new TextArea<String>("area1", new
PropertyModel<String>(this, "message")));
form.add(new PasswordTextField("p1", new
PropertyModel<String>(this, "password")));
form.add(new HiddenField<String>("h1", new
PropertyModel<String>(this, "hidden")));
|
ドロップダウンリスト
|
<select wicket:id="drop1"></select>
|
private String choice = "dog";
--------------------------
List<String> list = new ArrayList<String>();
list.add("");
list.add("dog");
list.add("cat");
form.add(new DropDownChoice<String>("drop1",
new PropertyModel<String>(this, "choice"),
list));
|
ラジオボタン
|
<div wicket:id="radio1">
<input type="radio" wicket:id="r1">
standard</input>
<input type="radio" wicket:id="r2">
custom</input>
</div>
|
private String type = "standard";
--------------------------
RadioGroup<String> rg = new RadioGroup<String>
("radio1", new PropertyModel<String>(this,
"type"));
rg.add(new Radio<String>("r1",
Model.of("standard")));
rg.add(new Radio<String>("r2",
Model.of("custom")));
form.add(rg);
|
チェックボックス
|
<input type="checkbox" wicket:id="c1">
dog</input>
<input type="checkbox" wicket:id="c2">
cat</input>
|
private boolean dog = false;
private boolean cat = false;
--------------------------
form.add(new CheckBox("c1",
new PropertyModel<Boolean>(this, "dog")));
form.add(new CheckBox("c2",
new PropertyModel<Boolean>(this, "cat")));
|
ボタンが複数の場合
|
<input type="submit" wicket:id="button1" value="function1" />
<input type="submit" wicket:id="button2" value="function2" />
|
Button firstButton = new Button("button1") {
@Override
public void onSubmit() {
(1つ目のボタン押下時の処理を実装)
}
};
form.add(firstButton);
Button secondButton = new Button("button2") {
//ボタンの表題をプログラムから変更する場合
@Override
protected void onComponentTag
(ComponentTag tag) {
super.onComponentTag(tag);
tag.getAttributes().put("value", "機能2");
}
@Override
public void onSubmit() {
(2つ目のボタン押下時の処理を実装)
}
};
form.add(secondButton);
|
Ajax(ウェブページの部分更新)
|
htmlファイル
|
WebPageクラス(.javaファイル)
|
ボタン押下時の画面部分更新
|
<form wicket:id="form1" method="post">
<input type="text" wicket:id="text1" />
<br />
<input type="text" wicket:id="text2" />
<br />
<input type="submit" wicket:id="b1"
value="入力欄を1つに" />
</form>
<span wicket:id="info"></span>
|
public class TestPage extends WebPage {
private String inputtext1 = "入力1";
private String inputtext2 = "入力2";
private String information = "";
public TestPage() {
final Form<Void> form = new Form<Void>
("form1");
//部分更新可能になるよう設定
form.setOutputMarkupId(true);
//入力欄1
final TextField<String> field1 = new TextField
<String>("text1", new PropertyModel
<String>(this, "inputtext1"));
field1.setOutputMarkupId(true);
form.add(field1);
//入力欄2
final TextField<String> field2 = new TextField
<String>("text2", new PropertyModel
<String>(this, "inputtext2"));
field2.setOutputMarkupId(true);
form.add(field2);
//ラベル
final Label label = new Label("info", new
PropertyModel<String>(this, "information"));
label.setOutputMarkupId(true);
add(label);
//Ajaxボタン
final AjaxButton button = new
AjaxButton("b1", form) {
@Override
protected void onSubmit(AjaxRequestTarget
target, Form<?> form){
(ボタン押下時の処理を実装)
//入力欄2を消してみる
field2.setVisible(false);
//ラベル表示更新
information = "入力欄2を消しました";
//再描画
target.addComponent(field2);
target.addComponent(label);
}
};
form.add(button);
add(form);
}
}
|
リンク押下時の画面部分更新
|
<a href="#" wicket:id="link1">
<span wicket:id="label1" style="text-
decoration: underline;"></span>
</a>
|
private String result = "クリックしてください";
--------------------------
//ラベル
final Label label = new Label("label1", new
PropertyModel<String>(this, "result"));
label.setOutputMarkupId(true);
//リンク
AjaxLink link = new AjaxLink("link1"){
@Override
public void onClick(AjaxRequestTarget target){
//リンク文字を再描画
result = "クリックされました";
target.addComponent(label);
}
};
add(link);
link.add(label);
|
ページ・コントロールの再利用
|
htmlファイル
|
WebPageクラス(.javaファイル)
|
ページの 継承
|
雛形にするページ↓ Template.html
----------------------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
これより上は共通部分です
<wicket:child>
↑
(この部分は各ページで実装します。)
↓
</wicket:child>
これより下は共通部分です
</body>
</html>
----------------------------------------
雛形を利用して作成するページ↓ TestPage.html
----------------------------------------
<html>
<head>
</head>
<body>
(ここより上の部分は使用されません)
<wicket:extend>
↑
この部分にページごとのコンテンツを作成します
↓
</wicket:extend>
(ここより下の部分は使用されません)
</body>
</html>
----------------------------------------
|
雛形にするページ↓ Template.java
----------------------------------------
public class Template extends WebPage {
public Template() {
(共通部分を実装)
}
}
----------------------------------------
雛形を利用して作成するページ↓ TestPage.java
----------------------------------------
//WebPageではなくTemplate(雛形ページ)を継承する
public class TestPage extends Template {
public TestPage() {
(各ページごとの処理を実装)
}
}
----------------------------------------
|
コントロールをグループ化 (コンテナ)
|
<div wicket:id="container1">
<span wicket:id="label1"></span>
<input type="text" wicket:id="text1" />
<span wicket:id="label2"></span>
<input type="text" wicket:id="text2" />
</div>
<form wicket:id="form1" method="post">
<input type="submit" value="一括消去" />
</form>
|
private String inputtext1 = "";
private String inputtext2 = "";
--------------------------
final WebMarkupContainer cont = new
WebMarkupContainer("container1");
cont.add(new Label("label1", "入力欄1"));
cont.add(new TextField<String>("text1", new
PropertyModel<String>(this, "inputtext1")));
cont.add(new Label("label2", "入力欄2"));
cont.add(new TextField<String>("text2", new
PropertyModel<String>(this, "inputtext2")));
add(cont);
add(new Form<Void>("form1") {
@Override
protected void onSubmit() {
cont.setVisible(false);
}
});
|
再利用可能なユーザコントロール
|
再利用するユーザコントロール↓ Input1.html
----------------------------------------
<body">
(wicket:panelタグに囲まれた部分がユーザコントロールになる)
<wicket:panel>
<span wicket:id="label1"></span>
<input type="text" wicket:id="text1" />
<span wicket:id="label2"></span>
<input type="text" wicket:id="text2" />
</wicket:panel>
</body>
----------------------------------------
ユーザコントロールを利用するページ1↓ TestPage1.html
----------------------------------------
<span wicket:id="input1"></span>
----------------------------------------
ユーザコントロールを利用するページ2↓ TestPage2.html
----------------------------------------
<span wicket:id="input1"></span>
----------------------------------------
|
再利用するユーザコントロール↓ Input1.java
----------------------------------------
//WebPageではなくWicketのPanelクラスを継承する
public class Input1 extends Panel {
private String inputtext1 = "";
private String inputtext2 = "";
public Input1(String id) {
super(id);
add(new Label("label1", "入力欄1"));
add(new TextField<String>("text1", new
PropertyModel<String>(this, "inputtext1")));
add(new Label("label2", "入力欄2"));
add(new TextField<String>("text2", new
PropertyModel<String>(this, "inputtext2")));
}
(ユーザコントロール独自の処理などを実装する)
public void setText1(String text) {
this.inputtext1 = text;
}
}
----------------------------------------
ユーザコントロールを利用するページ1↓ TestPage1.java
----------------------------------------
Input1 input1 = new Input1("input1");
add(input1);
input1.setText1("TestPage1の入力欄1初期値");
----------------------------------------
ユーザコントロールを利用するページ2↓ TestPage2.java
----------------------------------------
Input1 input1 = new Input1("input1");
add(input1);
input1.setText1("TestPage2の入力欄1初期値");
----------------------------------------
|
◇ ◇ ◇
次章ではメールサーバを構築します。
|