2007 年 4 月 22 日 23 時 58 分

複数の送信ボタン


このアーカイブは同期化されません。 mixi の日記が更新されても、このアーカイブには反映されません。


そろそろ次のステップに移るか。

次に着手するのが、一覧画面のルール管理用フォームだ。
このフォームは今までのものと少し違う。

従来のフォームは、特定の Bean の内容を編集するものであり、
フォームの項目は Bean のプロパティに対応している。
イメージとしては、プロパティダイアログボックスで、
内容を編集後、OK ボタンを押して内容を更新する。

ルール管理用のフォームは、Bean 一覧の管理を行うものであり、
フォームの項目に入力項目は少なく、ほとんどがボタンである。
イメージとしては、コレクション一覧表示のウィンドウで、
各種ボタンを使って並べ替えや移動・追加・削除を行う。

さて、1 つのフォームにボタンが複数存在する場合、
それらはすべて送信用のボタンとなるので、
どのボタンで送信されたかを検出する必要がある。

HTML で送信ボタンを作成するためには、
2 種類の要素が利用できる。
それは、<input> と <button> 要素である。

<input> を使う場合、type 属性で submit を指定すると、
送信用のボタンを表す入力項目となる。

    <input type="submit" name="add" value="追加">

送信用ボタンでは、value 属性値がボタンのラベルとなる。
そのため、上記の例では、「追加」という日本語文字列だ。

しかし、<input> 要素は、汎用の入力項目なので、
value 属性の値は、送信される値にもなっている。
これは意外に大きな制約であると考えられる。

上記の場合、このボタンを押して送信すると、
「add」という名前と「追加」という値のペアが、
フォームパラメータとして送信される。

もし「追加」と書かれたボタンが押された時に、
「command」という名前と「add」という値を送信したい場合、
value 属性に「add」を設定しなければならない。

しかし、ボタンのラベルは画面に表示されるので、
通常、言語依存の表示内容だ。
例えば、日本語なら「追加」、英語なら「Add」等としたい。

このように、value 属性が表示されるラベルであると共に、
それが送信する値として使われてるのは、不便なのである。

HTML には、これを補うものとして <button> 要素がある。
これも <input type="submit"> と同じ送信用のボタンだ。

<input type="submit"> との大きな違いは、
ボタンの見た目を要素の内容として定義することである。

    <button name="command" value="add">
        追加
    </button>

この場合、ボタンのラベルは「追加」だが、
送信されるのは、名前が「command」、値が「add」である。

<button> 要素の最大のメリットは、
要素内容の自由度が非常に高いということである。
HTML の仕様書においては、<button> 要素の内容として、
フォーム系要素以外の殆どの要素を利用できるため、
<img> を併用すれば、アイコンつきボタンを作る事ができる。

ただ、その自由度の高さゆえに、その表示方法については、
ブラウザに大きく依存しているという問題はある。
まあ、テキストだけならばほとんど大丈夫だろうが。

今回のケースでは、フォームに数多くのボタンがあるので、
それを Struts で処理することを考えながら、
ボタンの要素の設計をする必要がある。



Copyright (c) 1994-2007 Project Loafer. All rights reserved.