Wicketの選択例

投稿日: 2019-11-05 2019-11-05
タグ: wicket

Wicket拡張モジュールには、ドロップダウンボックスコンポーネントをレンダリングするための “Select”クラスが付属しています。関連するオプションを

<optgroup>タグでグループ化することができます

。

Figure:ドロップダウンボックスの<optgroup>:

wicket selectの例題、title = "wicket-select-example1"、width = 558、height = 376

….//Java
import org.apache.wicket.extensions.markup.html.form.select.Select;
import org.apache.wicket.extensions.markup.html.form.select.SelectOption;
…

言語の選択=新しいSelect（ “languages”、新しいPropertyModel <String>（this、 “selected”））;
    form.add（言語）;
    languages.add（新しいSelectOption <String>（ “framework1″、新しいモデル<String>（ “Wicket”）））;
    languages.add（新しいSelectOption <String>（ “framework2″、新しいモデル<String>（ “Spring MVC”）））;
    languages.add（新しいSelectOption <String>（ “framework3″、新しいモデル<String>（ “JSF 2.0″）））;
    languages.add（新しいSelectOption <String>（ “Script1″、新しいモデル<String>（ “jQuery”）））;
    languages.add（新しいSelectOption <String>（ “Script2″、新しいモデル<String>（ “プロトタイプ”）））;
                //ドロップダウンボックスのHTML
<select wicket:id = “languages”>
    <optgroup label = “Frameworks”>
        <option wicket:id = “framework1”> Wicket（1.4.7）</option>
        <option wicket:id = “framework2”> Spring MVC（3.0）</option>
        <option wicket:id = “framework3”> JSF（2.0）</option>
    </optgroup>
    <optgroup label = “JavaScript”>
        <option wicket:id = “Script1”> jQuery（1.6.1）</option>
        <option wicket:id = “Script2”>プロトタイプ（1.7）</option>
    </optgroup>
</select>

=== 1. Wicket Extension

"Select"タグを使用するには、 "**  wicket-extensions ** " jarを取得する必要があります。

ファイル:pom.xml

<プロジェクト…>

<依存関係>

</version> </version> </dependency> </li> </li> <li>

</li> </li> </li> <li> </li> </li> <li>

<！ – slf4j-log4j – > <dependency> <groupId> org.slf4j </groupId> <artifactId> slf4j-log4j12 </artifactId> <version> 1.5.6 </version> </dependency>

</dependencies>

</project>

=== 2. Wicket Selectの例

ドロップダウンボックスを表示する例、**  <optgroup> ** でグループ関連のオプションをグループ化する
タグ、 "Select"および "SelectOption"タグを介して、

インポートorg.apache.wicket.PageParameters; org.apache.wicket.extensions.markup.html.form.select.Selectをインポートします。 org.apache.wicket.extensions.markup.html.form.select.SelectOptionをインポートします。 import org.apache.wicket.markup.html.form.Form; import org.apache.wicket.markup.html.panel.FeedbackPanel; import org.apache.wicket.markup.html.WebPage; import org.apache.wicket.model.Model;インポートorg.apache.wicket.model.PropertyModel;

パブリッククラスSelectPage extends WebPage {

選択されたプライベート文字列= “jQuery”;

public SelectPage（最後のPageParametersパラメータ）{

add（新しいFeedbackPanel（ “feedback”））;

フォーム<？>フォーム=新しいフォーム<Void>（ “フォーム”）{@Override protected void onSubmit（）{

info（ “選択された言語:”が選択されています）;

}};

追加（フォーム）;

言語の選択=新しいSelect（ “languages”、新しいPropertyModel <String>（this、 “selected”））;

form.add（言語）; languages.add（新しいSelectOption <String>（ “framework1″、新しいモデル<String>（ “Wicket”）））; languages.add（新しいSelectOption <String>（ “framework2″、新しいモデル<String>（ “Spring MVC”）））; languages.add（新しいSelectOption <String>（ “framework3″、新しいモデル<String>（ “JSF 2.0″）））; languages.add（新しいSelectOption <String>（ “Script1″、新しいモデル<String>（ “jQuery”）））; languages.add（新しいSelectOption <String>（ “Script2″、新しいモデル<String>（ “プロトタイプ”）））;

}
}

=== 3. Wicket HTMLページ

Wicketコードの上に一致するHTMLコード。

<html> <head> <style> .feedbackPanelINFO {color:green; } </style> </head> <body> <h1> Wicket Selectの例</h1>

<div wicket:id = “feedback”> </div>
    <form wicket:id = “form”>
        <p>
        <label>あなたの好きな言語を選択してください</label>
        <br/>

        <select wicket:id = “languages”>
            <optgroup label = “Frameworks”>
                <option wicket:id = “framework1”> Wicket（1.4.7）</option>
                <option wicket:id = “framework2”> Spring MVC（3.0）</option>
                <option wicket:id = “framework3”> JSF（2.0）</option>
            </optgroup>
            <optgroup label = “JavaScript”>
                <option wicket:id = “Script1”> jQuery（1.6.1）</option>
                <option wicket:id = “Script2”>プロトタイプ（1.7）</option>
            </optgroup>
        </select>

        </p>
        <input type = “submit” value = “Display”/>
    </form>

</body>
</html>

=== 4.デモ

開始と訪問 -  __http://localhost:8080/WicketExamples/__

デフォルトでは「jQuery」が選択されています。

image://wp-content/uploads/2011/05/wicket-select-example1.png[wicket
例:title = "wicket-select-example1"、width = 558、height = 376]
「Spring MVC」を選択し、表示ボタンをクリックします。

image://wp-content/uploads/2011/05/wicket-select-example2.png[wicket
例:title = "wicket-select-example2"、width = 543、height = 336]
それをダウンロードする -
リンク://wp-content/uploads/2011/05/Wicket-Select-Example.zip[Wicket-Select-Example.zip]（7KB）

===参考文献

。 http://wicket.apache.org/apidocs/1.4/org/apache/wicket/extensions/markup/html/form/select/Select.html[Wicket
Javadocを選択]。 http://wicket.apache.org/apidocs/1.4/org/apache/wicket/extensions/markup/html/form/select/SelectOption.html[Wicket
SelectOption Javadoc]。 http://www.w3schools.com/tags/tag__optgroup.asp[HTML optgroupタグ]
link://tag/wicket/[wicket]

getdocs

13036