Wicket Benchをつかってみる

teeda+S2DAOseasar2をさわっていたのですが、あのサクサク感はDoltengによるものが大きいじゃないかと思う。wicketにもWicket Benchというのがあるのですが、はじめからこういうPluginを使ってしまうと結局フレームワークの仕組みがブラックボックスになってしまって、「なんだかよくわからなけど出来る」という結局中身は全然理解出来ていない状態になってしまう。なので、ちょっとしたイレギュラーなことにも対応できない知識になってしまいそうで敬遠していたのですが、ちょっと興味を持ったのでこの機会に使ってみることにしました。
使い方は基本的にこのページにすべて載っているので、ここを参考に進めます。

インストール

環境
MacOS X 10.5
jdk 1.5.0_13
Eclipse 3.3
wicket 1.3.3
wicket-bench 0.5.1

更新マネージャからのインストールします。
[ヘルプ]→[ソフトウエア更新]→[検索およびインストール]
[インストール/更新]→[インストールする新規フィーチャーを選択する]→[次へ]
[新規リモートサイト]を選択して、以下を入力して[終了]

名前: wicket-bench
URL: http://www.laughingpanda.org/svn/wicket-bench/trunk/wicket-bench-site

後は,wicket-benchにチェックして[次へ]をクリックして指示に従って進める
インストール後、eclipseを再起動して完了。

Wicket Editor

これは便利かも。
wicket-jaのHomePage.javaWicket Editorで見たところ。
f:id:yamkazu:20080416003650j:image
option + command + . で次のタブ
option + command + , で前のタブ
JavaとHTMLが並んでみれたらもっと便利なのになぁ。

Wizards

Create Wicket Project

新規プロジェクトでWicketプロジェクトが作成できる。
wicketのライブラリが1.3.0になっていて今はあんまり使わないかな。

Create Wicket Panel

[ファイル]-[新規]-[その他]でWicket Panelを選択。
以下のようなコードが自動生成される。

package com.example;

import org.apache.wicket.markup.html.panel.Panel;

/**
 * @author kazu
 */
public class SamplePannel extends Panel {

}
<html xmlns:wicket>
<wicket:panel>
  
</wicket:panel>
</html>

最低限って感じですね。

Create Wicket WebPage

[ファイル]-[新規]-[その他]でWicket WebPageを選択。
以下のようなコードが自動生成される。

package com.exaple.page;

import org.apache.wicket.markup.html.WebPage;

/**
 * @author kazu
 */
public class SamplePage extends WebPage {

}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
  
</body>
</html>

Pannelと同様最低限のコードですね。でもこれはそこそこ使えるか?
ってしょぼいと思ってたらテンプレートがあって編集できるみたいです。次へ

Templates Edited

[Eclipse]-[Perferences...]-[wicket]-[テンプレート]
で編集可能

Form generation

wicket:idをhtmlでソースを全部選択して右クリック[generation wicket form code]を選択。
PropertyModelかComBoundPropertyModelが選択可能。
ComBoundPropertyModelで試してみる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <span wicket:id="mainNavigation"/>
    <form wicket:id="inputForm" class="inputForm">
     <div>
        <wicket:message key="use.locale">Use locale:</wicket:message>
        <select wicket:id="localeSelect" />
        <wicket:link><img src="flag.gif" /></wicket:link>
        <a href="#" wicket:id="defaultLocaleLink">[<wicket:message key="default" />]</a>
     </div>
      <p>
      <fieldset>
        <legend><wicket:message key="input" /></legend>
        <table id="inputFormTable">
          <tr>
          <td valign="top">
              <label for="stringProperty"><wicket:message key="string" /></label>
              <input wicket:id="stringProperty" id="stringProperty" type="text" size="40"/>
              <label for="integerProperty"><wicket:message key="integer" /></label>
              <input wicket:id="integerProperty" id="integerProperty" type="text" size="40"/>
              <label for="doubleProperty"><wicket:message key="double" /></label>
              <input wicket:id="doubleProperty" id="doubleProperty" type="text" size="40"/>   
              
              <label>ListView</label>             
              <ul>
               <li wicket:id="lines">
                <input type="text" wicket:id="lineEdit" /> 
               </li>
              </ul>
              <label for="booleanProperty"><wicket:message key="boolean" /></label>
              <input wicket:id="booleanProperty" id="booleanProperty" type="checkbox"/>
              <br /><br />
              <span wicket:id="multiply">[multiply]</span>
              = <span wicket:id="multiplyLabel">[result]</span>
          </td>
          <td valign="top">
              
              <label for="integerInRangeProperty"><wicket:message key="value.between.0.and.100" /></label>
              <input wicket:id="integerInRangeProperty" id="integerInRangeProperty" type="text" size="40"/>
              <label for="urlProperty"><wicket:message key="valid.url" /></label>
              <input wicket:id="urlProperty" id="urlProperty" type="text" size="40"/>
              <label for="phoneNumberUS"><wicket:message key="us.phone.number.mask" /></label>
              <input wicket:id="phoneNumberUS" id="phoneNumberUS" type="text" size="40"/>        
              <label for="numberRadioChoice"><wicket:message key="select.a.number" /> (RadioChoice)</label>
              <span valign="top" wicket:id="numberRadioChoice" id="numberRadioChoice">
                <input type="radio">foo</input>
                <input type="radio">bar</input>
              </span>
              <span wicket:id="numbersGroup">
              <label><wicket:message key="select.a.number" /> (RadioGroup)</label>            
                <span wicket:id="numbers">
                    <input type="radio" wicket:id="radio"/>
                    <span wicket:id="number"></span>
                </span>
              </span>
              <span wicket:id="numbersCheckGroup">
              <label><wicket:message key="select.one.or.more.numbers" /> (CheckGroup)</label>             
                <span wicket:id="numbers">
                    <input type="checkbox" wicket:id="check"/>
                    <span wicket:id="number"></span>
                </span>
              </span>
              <label for="siteSelection"><wicket:message key="your.favorite.sites" /></label>
              <select wicket:id="siteSelection" id="siteSelection">
                <option>foo</option>
                <option>bar</option>
              </select>
          </td>
          </tr>
          <tr>
          <td colspan="2">
              <input type="submit" wicket:id="saveButton" value="save" />
              <input type="submit" wicket:id="resetButton" value="reset" />
          </td>
          </tr>
         </table>
      </fieldset>
    </form>

    <div id="feedbackPanel">
        <span wicket:id="feedback"/>
    </div>
</body>
</html>

このHTMLからこんなコードが生成された。

class AForm extends Form {
    public AForm(String id, IModel model) {
        super(id, model);
        Select select = new Select("localeSelect");
        IOptionRenderer renderer = new IOptionRenderer() {
            public String getDisplayValue(Object object) {
                return object.toString();
            }
            public IModel getModel(Object value) {
                return new Model((Serializable) value);
            }
        };
        select.add(new SelectOptions("options", createOptions(), renderer));
        add(select);
        add(new TextField("stringProperty"));
        add(new TextField("integerProperty"));
        add(new TextField("doubleProperty"));
        add(new TextField("lineEdit"));
        add(new CheckBox("booleanProperty"));
        add(new TextField("integerInRangeProperty"));
        add(new TextField("urlProperty"));
        add(new TextField("phoneNumberUS"));
        add(new CheckBox("check"));
        Select select = new Select("siteSelection");
        IOptionRenderer renderer = new IOptionRenderer() {
            public String getDisplayValue(Object object) {
                return object.toString();
            }
            public IModel getModel(Object value) {
                return new Model((Serializable) value);
            }
        };
        select.add(new SelectOptions("options", createOptions(), renderer));
        add(select);
    }
}

Quick fixes


つかれたー気が向いたら続き書く