Javaで軽快に使える「軽量フレームワーク」特集
～アプレットベースのRIAフレームワーク「Apache Pivot」（2）

第14回

フォームとバリデーション

　1つの入力フィールドを用意する程度ならば、比較的処理も簡単ですが、複数の入力項目があるような場合、全体をまとめて扱うことができるとずいぶんと助かります。こうした場合に用意されているのが「フォーム」です。これは「Form」というクラスとして用意されています。

　また、入力を行う際、どのような値が入力されたのかをチェックする「バリデーション」も重要です。これもPivotにクラスとして用意されています。では、フォームを使って入力項目を整理し、それぞれにバリデーションの機能を追加した、より複雑な入力を行ってみることにしましょう。

　まず、WTKXファイルの修正からです。今回はフォームを設置し、その中に2つの入力フィールド、1つのチェックボックス、2個を切り替えるラジオボタンを用意してみます。

<Window title="Sample" maximized="true"
        xmlns:wtkx="http://pivot.apache.org/wtkx"
        xmlns="org.apache.pivot.wtk">
    <content>
        <BoxPane orientation="vertical">
            <Label
                wtkx:id="label"
                styles="{font:'bold 18', color:'#0000FF'}"
                text="フォームの利用：" />
            <Form wtkx:id="form1">
                <sections>
                    <Form.Section>
                        <Label wtkx:id="error" />
                    </Form.Section>
                    <Form.Section heading="Number Data">
                        <BoxPane wtkx:id="numpane"
                            Form.label="Number"
                            orientation="horizontal">
                            <TextInput
                                wtkx:id="number1" prompt="数値"
                                styles="{font:'Serif plain 14'}" />
                        </BoxPane>
                    </Form.Section>
                    <Form.Section heading="String Data">
                        <BoxPane wtkx:id="textpane"
                            Form.label="String"
                            orientation="horizontal">
                            <TextInput
                                wtkx:id="text1" prompt="テキスト"
                                styles="{font:'Serif plain 14'}" />
                        </BoxPane>
                    </Form.Section>
                    <Form.Section heading="Check Box">
                        <BoxPane wtkx:id="checkpane"
                            Form.label="Check"
                            orientation="horizontal">
                            <Checkbox buttonData="チェック!"
                                wtkx:id="check1"
                                styles="{font:'Serif plain 14'}" />
                        </BoxPane>
                    </Form.Section>
                    <Form.Section heading="Radio Button">
                        <BoxPane wtkx:id="radiopane"
                            Form.label="Radio"
                            orientation="horizontal">
                            <wtkx:define>
                                <ButtonGroup wtkx:id="group1"/>
                            </wtkx:define>
                            <RadioButton buttonData="Male" selected="true"
                                wtkx:id="radio1" buttonGroup="$group1"
                                styles="{font:'Serif plain 14'}" />
                            <RadioButton buttonData="Female"
                                wtkx:id="radio2" buttonGroup="$group1"
                                styles="{font:'Serif plain 14'}" />
                        </BoxPane>
                    </Form.Section>
                </sections>
            </Form>
        <PushButton
            wtkx:id="button1" buttonData="OK!" />
        </BoxPane>
    </content>
</Window>

　今回は、だいぶ新しいタグが増え、構成も複雑になっています。特にフォームの構成についてざっと整理しておきましょう。フォームは、整理すると次のような形で記述されています。

<Form>
    <Form.Section>
        ……コンポーネント・タグ……
    </Form.Section>
    <Form.Section>
        ……コンポーネント・タグ……
    </Form.Section>
    
    ……以下略……
</Form>

　フォームは、<Form>というタグを使って記述します。この中にコンポーネントを記述すれば、それでフォームが作成できます。今回はこれに加え、「フォームセクション」というものも利用しています。これは、フォームの中に組み込まれるコンポーネント類を必要に応じてまとめ整理するためのものです。<Form.Section>を使ってコンポーネントをまとめることで、より見やすく整理された形でレイアウトすることができます。

　また、今回は新しいコンポーネントも登場しています。Checkbox、RadioButton、そしてButtonGroupといったものです。これらについてもざっと整理しておきましょう。

新しく登場したコンポーネント

コンポーネント	説明
<Checkbox>	チェックボックス「Checkbox」クラスのタグです。
<RadioButton>	ラジボタン「RadioButton」クラスのタグです。これは、そのままではグループ化されません。「buttonGroup」属性に、次のButtonGroupを設定することでグループ化されます。
<ButtonGroup>	複数のボタンを1つのグループとして扱うためのものです。buttonGroupに同じButtonGroupを設定すると、それらのボタンは常に1つだけが選択されるようになります。

　注意したいのは、<ButtonGroup>です。これはユーザーが操作するコンポーネントとは異なりますので、そのまま<Form>内に記述するのではなく、<wtkx:define>というタグの中に記述をします。これは、画面に表示されないオブジェクトを定義するための専用タグです。