フォームとバリデーション
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>というタグの中に記述をします。これは、画面に表示されないオブジェクトを定義するための専用タグです。
