NetBeans 6.0 を使うにあたってのポイントその８ - しんさんの出張所はてなブログ編

すぐに続きを書こうと思ったらもう5日もたっていた。むぅ、月日がたつのが早すぎる。納品前で忙しいというのもあるけど。

前回予定していたとおりVisual Web JSFでのコンポーネントの解説でも。

まず最初は一番使用頻度が高いテキストフィールドを。

テキストフィールドコンポーネントも標準コンポーネントとwoodstock webuiコンポーネントの２つがある。貼り付けただけでは違いはまったく見られないが、中身は大きく違う。そのため、標準コンポーネントのほうが使用が推奨されるのだが、その違いを載せてみる。

まず標準コンポーネントのテキストフィールドのプロパティ。

続いてwoodstockコンポーネントのプロパティ。

違いは

標準のvalueがwoodstockコンポーネントのtextになっている
woodstockにはJSF1.2の拡張プロパティ（詳細のメッセージ類）がない

くらいに見える。だが、触ればすぐにわかるのだが、woodstockコンポーネントはデザイナ上でサイズ変更ができない。また、標準コンポーネントはシンプルにhtmlのinputタグに置き換わるのだが、woodstockコンポーネントのほうは複数のhtmlから生成されるために、デザイナ上でスタイル設定ができない。これが致命的なのだ。その複数のhtmlから生成される例として、labelプロパティをセットするとwoodstockコンポーネントはその文字が表示されてしまうのが厄介でもある。

わかりやすい例をだしてみよう。まず、テキストフィールドの値として「123」という数値を入れてみる。さらにスタイルの設定でテキストの表示方向を右寄せに。業務アプリで数値を入力することは非常に多いのでこのようなことは頻繁に見られる。ついでに背景色をライム、文字の色をパープル設定にしてみた。ラベルプロパティにも「らべる」という文字を入れてみた。

その状態でのデザイナ画面はこのようになる。この時点でwoodstockコンポーネントは使い物にならないのがそろそろわかってくる。

レイアウトインスペクタで実際に生成されるhtmlを表示してみる。

まずは標準コンポーネント。

<input id="form1:textField2" name="form1:textField2"
    style="background-color: lime; color: purple; left: 120px; top: 24px; position: absolute; text-align: right" title="たいとる" type="text" value="123"/>

次にwoodstockコンポーネント。

<span id="form1:textField1" style="background-color: lime; color: purple; left: 120px; top: 72px; position: absolute; text-align: right">
    <label class=" LblLev2Txt_sun4" for="form1:textField1_field" id="form1:textField1:textField1_label">らべる </label>
    <img alt="" border="0" height="1" id="form1:textField1:textField1_spacer"
        src="jar:file:/C:/Program%20Files/NetBeans%206.0.1/visualweb1/modules/ext/webui-jsf-suntheme.jar!/com/sun/webui/jsf/suntheme4_1_1/images/other/dot.gif" width="10"/>
    <input class="TxtFld_sun4" id="form1:textField1_field" name="form1:textField1_field" size="20" type="text" value="123"/>
</span>

これではテキストフィールドにスタイルが適用されないのは当たり前だ。あくまでも外側のspanだけに適用されている。ラベル部分に「_label」、セパレータに「_spacer」、テキストフィールド本体には「_field」というid名が追加される仕組みのようだ。しかし、このspan内部のhtmlを手軽にデザイナ上でいじる方法はないようだ。また、ラベルプロパティの意味がラベルを表示するという意味になってしまって、バリデータやコンバータのメッセージ等で非常に使いにくくなるのが厄介だ。非表示ができればいいのだが。

では、実際にブラウザでプレビューを表示してみよう。