rurihabachi
Last update: 2013/11/25  
    仮 想 マ シ ン で Fedora サ ー バ       ◇◇◇  お金をかけずに簡単簡潔  ◇◇◇  サーバ構築公開手順 覚書き  ◇◇◇
 
 
サーバ構築メニュー  
     1. はじめに
     2. 構築前の準備
     3. サーバの役割り
  » 4. サーバの計画
  » 5. 仮想マシンの準備
  » 6. Fedoraの準備
  » 7. サーバの基本設定
  » 8. ファイアウォール
  » 9. ウェブサーバ
  « 10. Apache Wicket
       開発環境の作成
       開発の流れ
       ミニサンプル集
  » 11. メールサーバ
  » 12. セキュリティ
     13. サーバの公開


  サーバ構築Top  > 10.Wicketによるウェブサイト開発  > (3)Wicketミニサンプル集
    10. Apache Wicketによるウェブサイト開発
本ページではWicketを利用したプログラムのミニサンプル集を一覧表示しています。

    (3) 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初期値");
----------------------------------------


 ◇     ◇     ◇

次章ではメールサーバを構築します。



前のページへ <    メニューへ戻る    > 11.メールサーバ へ

10.Wicketによるウェブサイト開発:
 
   (1)開発環境の作成
   (2)Wicketによる開発の流れ
  ›(3)Wicketミニサンプル集
 
Copyright (C) 2011-2024 rurihabachi. All rights reserved.