Fight the Future

Java言語とJVM、そしてJavaエコシステム全般にまつわること

IT勉強会での初プレゼンなどお助けします!

勉強会でスピーカーをやりたいけど、プレゼンが初めて、苦手という方に無償でコーチできます。スライドのレビューや録画したリハへのアドバイスなどなど。Twitter@jyukutyoまでメンションでもDMでもお気軽にご連絡ください。

私はIT講師の経験があり、プレゼンはデブサミやJJUG CCCなど200人規模の経験が豊富で最大800人の前でプレゼンしました。海外ではDevoxxUSで。デブサミ2017では公募スピーカー1位、デブサミ関西2012アワードで5位となりました。

Introducing Apache Wicketの超意訳(12)

http://www.theserverside.com/tt/articles/article.tss?l=IntroducingApacheWicket

The final components we add to the form are two Buttons.

最後にボタンを2つフォームに追加します。

add(new Button("save") {
    public void onSubmit() {
        Contact c = (Contact) getForm().getModelObject();
        WicketApplication.get().getContactDao().save(c);
        setResponsePage(ListContacts.class);
    }
});
add(new Button("cancel") {
    public void onSubmit() {
        setResponsePage(ListContacts.class);
    }
}.setDefaultFormProcessing(false));

The first button saves the contact and forwards the user to the ListContacts page.
The second button cancels the edit and forwards the user to the ListContacts page.
The difference between the two buttons, other than the behavior in the onSubmit() event handler, is default processing has been disabled by calling setDefaultFormProcessing(false).
When a submit button is clicked in Wicket, the following process occurs:

  • Input is validated.
  • If input is valid, the model object is updated with the input. Any necessary conversions occur to populate the model object properties.
  • The body of onSubmit() is executed.


By disabling default processing, the input isn't validated and no updates are made to the model object.
This allows us to easily add a cancel button to our form with no complicated handling for the developer.


Now that we've explored the EditContact class, let's look at the markup.
At this point, the markup shouldn't have any surprises:

1つめのボタンはコンタクトを保存し、ListContactsページへユーザを転送します。
2つめのボタンは編集をキャンセルし、ListContactsページへユーザを転送します。
onSubmit()イベントハンドラにおける振る舞い以外の2つのボタンの違いはsetDefaultFormProcessing(false)を呼び出してデフォルトの処理を無効にするところです。
Wicketでサブミットボタンをクリックしたとき、以下の処理が発生します。

  • 入力を検証します。
  • もし入力が正しければ、モデルオブジェクトを入力した値で更新します。モデルオブジェクトのプロパティにセットするために必要な変換をすべて行います。
  • onSubmit()の内容を実行します。


デフォルトの処理を無効にすることで、入力は検証されず、モデルオブジェクトへの更新もありません。
これにより開発者は複雑な処理をすることなくフォームにキャンセルボタンを簡単に追加できます。

さて、EditContactクラスに迫りました。マークアップを見てみましょう。
今となっては、マークアップには何のサプライズもありません。

<wicket:extend>
    <span wicket:id="feedback"></span>

    <form wicket:id="form">
        <div id="contacts">
            <div class="contact">
                <table>
                    <tr>
                        <td>
                            First Name
                        </td>
                        <td>
                            <input wicket:id="firstName" type="text"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Last Name
                        </td>
                        <td>
                            <input wicket:id="lastName" type="text"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Email
                        </td>
                        <td>
                            <input wicket:id="email" type="text" size="40"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Notes
                        </td>
                        <td>
                            <textarea wicket:id="notes" rows="4" cols="40"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Group
                        </td>
                        <td>
                            <select wicket:id="group"> </select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" align="center">
                            <input wicket:id="save" type="submit" value="Save"/>
                            <input wicket:id="cancel" type="submit" value="Cancel"/>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </form>
</wicket:extend>

Other than the wicket:id attributes, we're looking at standard HTML that corresponds to our Wicket components.
Users can fill in the form and click the save button to create or update a contact, or cancel to easily abandon the process.

wicket:id属性以外、Wicketコンポーネントと一致した標準的なHTMLです。
ユーザはフォームを埋めてsaveボタンをクリックしコンタクトを作成あるいは更新します。もしくはキャンセルして簡単に処理を中止します。

That completes our example application exploring Apache Wicket.
We've covered quite a bit of ground, but all of it can be applied to developing your own web applications.

Apache Wicketに迫るサンプルアプリケーションの完成です。
ほんの一部分をカバーしただけですが、あなたのWebアプリケーション開発にすべて適用できます。

Summary(まとめ)

This article has introduced you to Wicket's core concepts and solidified those concepts with an example application.
The concepts essential to successful Wicket development are components and models.


Components are isolated pieces of Java code with supporting markup.
Most components are abstract classes designed to be subclassed with your domain-specific logic and requirements.
Pages and panels are components, as well as Links, Forms and ListViews.


Models provide an abstraction between your domain object and the Wicket components.
Models come in various flavors and can be combined to maximize functionality.
Ideally, your components should always access your domain models using models instead of directly.


I hope you've enjoyed this article and that it's made you want to explore Wicket further.
I've found it to be a very productive framework for both client and internal development projects.

この記事ではWicketの核となるコンセプトを紹介し、サンプルアプリケーションでそのコンセプトを固めました。
うまくいくWicket開発の基礎となるコンセプトはコンポーネントとモデルです。


コンポーネントはサポートするマークアップとともにあるJavaコードの分離した一部分です。
ほとんどのコンポーネントはドメイン特有のロジックと要求をサブクラスに実装するように設計された抽象クラスです。
LinkやForm、ListViewと同様にPageとPanelもコンポーネントです。


モデルはドメインオブジェクトとWicketコンポーネントの間を抽象化します。
モデルはさまざまな特色を加え、機能性を最大化するために組み合わせます。
理想的には、コンポーネントは常に直接ではなくモデルを使ってドメインモデルにアクセスするべきです。


この記事を読んでWicketをより知りたくなってもらえればと思います。
Wicketはクライアントと内部の開発プロジェクトの両方にとってとても生産的なフレームワークだと思います。

About the Example(サンプルについて)

The source code for the example application can be downloaded from http://www.systemmobile.com/code/wicketintro.zip.
There is a README included to get started.

サンプルアプリケーションのソースコードhttp://www.systemmobile.com/code/wicketintro.zipからダウンロードできます。
始めるにあたってREADMEを読んでください。

About the Author(著者について)

Nick Heudecker is the founder and principal of System Mobile, a Chicago-based software consulting firm specializing in Java web application development.

Nick HeudeckerはSystem Mobileの創始者であり社長です。System Mobileはシカゴを拠点とするJavaのWebアプリケーション開発に特化したソフトウェアコンサルティングファームです。