ページの先頭行へ戻る
 Apcoordinatorユーザーズガイド

F.1.9 入力項目やボタンの色、サイズ、フォントを指定したい

コンポーネントタグで入力項目やボタンを作成すると、色、サイズ、フォントなどを簡単に指定できます。また、これらの表示属性をビジネスクラスで動的に変更することも可能です。

なお、以下で説明する方法で表示属性を指定しても、ブラウザの機能レベルによって指定が有効にならないものがあります。“UJIタグリファレンス”には、各アトリビュートのブラウザでの対応状況をまとめてあります。

タグのアトリビュートで指定する

表示属性を静的に決定できる場合は、タグのアトリビュートで指定します。

<uji:fieldString bean="body" property="strData"
        width="120" height="40" background="yellow" foreground="blue"
borderWidth="3" fontSize="12pt" />

この例では、文字列入力フィールドの幅、高さ、背景色、文字色、枠の線幅、文字サイズを指定しています。

各タグで指定可能なアトリビュートの詳細は“UJIタグリファレンス”を参照してください。

項目クラスで指定する

表示属性を動的に変更する場合は、項目クラスを使用します。項目クラスは、タグで入力や表示を行なうデータが格納されるクラスです。表示属性を設定することもできます。コンポーネントタグのうち、入力を行なうもの(uji:fieldStringやuji:comboBoxなど)やボタン、リンクを表示するもの(uji:pushButton, uji:anchor)には、それぞれ対応する項目クラスが用意されています。

uji:fieldStringタグで項目クラスを使用する場合を例に説明します。

データBeanには項目クラスを値とするプロパティを作成します。uji:fieldStringの場合に使用する項目クラスは、com.fujitsu.uji.compo.FieldStringクラスです。

package sample;
import com.fujitsu.uji.compo.FieldString;

public class BodyBean extends DataBean {
    protected FieldString strData = new FieldString();

    public FieldString getStrData() {
        return strData;
    }

    ...
}

ここでは、FieldString型のプロパティとしてstrDataプロパティを作成しています。

JSPではuji:fieldStringのbean, propertyアトリビュートで、前述のデータBeanのstrDataプロパティを指定してタグに関連付けます。

<uji:fieldString bean="body" property="strData" />

項目クラスには表示属性を設定するためのプロパティがあり、ビジネスクラスなどから表示属性を指定することができます。以下は、文字色と文字サイズを指定する例です。

BodyBean dataBean = ...;
dataBean.getStrData().setForeground("red");
dataBean.getStrData().setFontSize("12pt");

各タグで使用する項目クラスと、指定可能な表示属性については“UJIタグリファレンス”、“APIリファレンス”を参照してください。

スタイルシートで一括して指定する

入力を行なうコンポーネントタグは、実行時にHTMLのINPUTタグやSELECTタグなどを出力します。これらのタグにスタイルシートで表示属性を指定することができます。UJIタグが出力するHTMLのタグにクラスの指定 (classアトリビュート) が必要な場合は、UJIタグにcssアトリビュートでクラスを指定してください。

<style type="text/css">
<!--
INPUT.option  { color: blue; }
-->
</style>
....

<uji:fieldString bean="body" property="strData" css="option"/>

uji:fieldStringが出力するINPUTタグには、アトリビュートclass="option"が追加されます。

各タグでcssアトリビュートが使用できるかどうかは“UJIタグリファレンス”を参照してください。

スタイルシートの詳細は、カスケーディングスタイルシート関連のドキュメントを参照してください。

関連項目