ページの先頭行へ戻る
 ApcoordinatorUJIタグリファレンス
第5章 コンポーネントタグ > 5.11 uji:pushButton
前次

5.11 uji:pushButton

uji:pushButtonについて説明します。uji:pushButtonには、以下の機能があります。

また、ブラウザによる対応状況についても説明します。

基本機能

uji:pushButtonタグは、プッシュボタンを作成します。

beanとpropertyで指定されたデータBeanのプロパティがPushButtonModelインタフェースを持つ場合は、データBean側で文字色などのいくつかの書式を指定することができます。データBean側とアトリビュートと双方で書式を設定した場合は、データBeanの指定が優先されます。 PushButtonModelインタフェースの代わりに外付け属性を利用する方法については、“Apcoordinatorユーザーズガイド”を参照してください。

uji:pushButtonをsubmitボタンとして使用する場合、ボタンがクリックされたときに、そのボタンを識別する値を送信できます。例えば、uji:listタグやuji:tableタグのコンテントでuji:pushButtonを使用し、そのボタンの値として行番号やセル座標を送信することにより、行やセルを選択するボタンが容易に作成できます。ボタンの値を送信するには以下のようにJSPとクラスを作成します。

  1. uji:formタグまたはuji:mcFormタグでフォームを作成します。

  2. bean, propertyアトリビュートでボタンの値として使用するオブジェクトを指定します。指定したオブジェクトがValuedPushButtonModelインタフェースを持つ場合、そのgetValue()メソッドの値がボタンの値として使用されます。そうでない場合、オブジェクトのtoString()の値が使用されます。

  3. ボタンがクリックされたときにボタンの値が格納されるプロパティを、selectedPropertyアトリビュートで指定します。指定できるのは、uji.idまたはuji.beanリクエストパラメタで指定したデータBeanのプロパティです。

アトリビュート

uji:pushButtonタグのアトリビュートは以下を指定します。

アトリビュート名

省略

意味

省略時の動作

bean

可

データBeanのJSP変数名を指定します。

画面部品タグのカレントオブジェクトを使用します。カレントオブジェクトがない場合、タグのアトリビュートに従ってボタンを作成します。

property

可

データBeanのプロパティ名を指定します。

データBean自体がPushButtonModelインタフェースを持つオブジェクトとして使用されます。

width

可

ボタンの幅を指定します。(*)

標準の幅となります。

height

可

ボタンの高さを指定します。(*)

標準の高さとなります。

borderColor

可

ボタン枠の色を指定します。(*)

標準の色となります。

borderType

可

ボタン枠の形式を指定します。(*)

標準の形式となります。

borderWidth

可

ボタン枠の線幅を指定します。(*)

標準の線幅となります。

insets

可

ボタン内側の余白の幅を指定します。(*)

標準の余白となります。

background

可

ボタンの背景色を指定します。(*)

標準の背景色となります。

foreground

可

文字色を指定します。(*)

標準の文字色となります。

fontStyle

可

文字スタイルを指定します。(*)

標準の文字スタイルとなります。

fontWeight

可

文字の太さを指定します。(*)

標準の太さとなります。

fontSize

可

文字の大きさを指定します。(*)

標準の大きさとなります。

textDecoration

可

文字の装飾形式を指定します。(*)

標準の装飾形式となります。

enabled

可

項目の操作の可否をtrue/falseで指定します。

true

alignmentHorizontal

可

ボタン内の文字列の横位置を指定します。left、center、rightのいずれかを指定します。

center

verticalAlignment

可

ボタンの縦位置合わせ方法を指定します。(*)

標準値となります。

tabIndex

可

タブ順を数値で指定します。

配置順となります。

tipText

可

マウスポイント時に表示するティップの文字列を指定します。

表示しません。

label

可

ラベルテキストを指定します。

表示しません。

type

可

ボタンの種別を以下の3つから指定します。

  • submit: 送信ボタンです。

  • reset: リセットボタンです。

  • scrollTable: スクロールボタンです。uji:tableViewと連携して動作します。

scrollTableを指定した場合、scrollアトリビュートとtableアトリビュートの指定が必要です。

submit

name

可


submit時のボタン名を指定します。

typeにsubmitを指定した場合必須です。

selectedProperty

可


ボタンがクリックされた際にボタンの値を格納するプロパティを指定します。指定できるのは、フォームのuji.beanまたはuji.idリクエストパラメタで指定したデータBeanのプロパティです。(**)

ボタンの値はデータBeanに保存されません。

css

可

class属性の属性値を指定します。以下のタグにclass属性を設定します。
INPUT

class属性を出力しません。

skipScript

可

フォーム送信時のJavaScriptの実行をスキップする場合はtrueを指定します。(***)

false

scroll

可

スクロールボタンを作成する場合に、スクロールの動作を以下から指定します。

  • forward: 次へ進む

  • backward: 前へ戻る

  • last: 末尾へ進む

  • first: 先頭へ戻る

typeにscrollTableを指定した場合必須です。

table

可

スクロールボタンを作成する場合に、スクロールさせるテーブルの名前を指定します。テーブルの名前は、uji:tableViewタグのtableNameアトリビュートで指定した値です。

typeにscrollTableを指定した場合必須です。

visible

可

項目の表示の有無をtrue/falseで指定します。

true

event

可

イベント発生時に実行するJavaScriptを記述します。

イベント発生時にJavaScriptを実行しません。

(*)“7.7.1 項目の指定方法”を参照してください。

(**) typeアトリビュートにsubmitを指定し、uji:formタグまたはuji:mcFormタグのコンテントで使用した場合のみ有効です。

(***) uji:formタグまたはuji:mcFormタグのコンテントで使用した場合のみ有効です。

コンテント

uji:pushButtonタグのコンテントは記述できません。

使用例

単独で使用する

 <uji:pushButton bean="body" property="buttonAttr"
        width="100" height="40" />

画面部品タグと連携する

<uji:form name="order" verbs="buy,cancel" beanId="body">
  ...
  <uji:list bean="body" property="list">
    <uji:listRenderer type="element">
      <uji:composite>
        <uji:compositeRenderer>
          ...
          <uji:pushButton name="buy" property="btn" 
                          selectedProperty="selectedItem"/>
        </uji:compositeRenderer>
      </uji:composite>
    </uji:listRenderer>
  </uji:list>
</uji:form>

上記例では、リストの要素としてデータBeanを使用しています。また、"body"と名付けられたデータBeanはプロパティfooを持ちます。リストの要素数と同じだけラジオボタンが表示されますが、それぞれに、リストの要素(データBean)が対応付けられます。

注意事項

  • HTMLに展開されるときに改行コードが挿入されます。改行コードが不要な場合は本タグは使用しないでください。

  • 各ブラウザでそれぞれのアトリビュートが有効かどうかは“ブラウザ対応状況”を参照してください。

  • Mccoordinatorではtype属性にtableを指定することはできません。

XML連携機能

uji:pushButtonタグはプッシュボタンを作成します。

イベントモデルではXML連携機能は利用できません。

アトリビュート

uji:pushButtonタグでは、XML連携機能を使用する際に以下のアトリビュートを指定します。これ以外のアトリビュートについては、“基本機能”を参照してください。

アトリビュート名

省略

意味

省略時の動作

bean

可

データBeanまたはXMLデータBeanのJSP変数名を指定します。(*)

カレントオブジェクトを使用します。

property

可

ボタンに対応付ける要素を、ルート要素の子要素名で指定します。(*)

propertyまたはxpathいずれかの指定が必要です。

xpath

可

ボタンに対応付ける要素または属性を、ルート要素からの相対パスで指定します。(*)

propertyまたはxpathいずれかの指定が必要です。

labelXPath

可

ボタンのラベルテキストとなる単純要素または属性を指定します。ルート要素からの相対パスで指定します。

labelアトリビュートに従います。

selectedProperty

可

ボタンが押された際にボタンの値を格納する単純要素の要素名を指定します。指定できるのは、フォームのuji.beanまたはuji.idリクエストパラメタで指定したXMLデータBeanの子要素です。(**)

ボタンの値はXMLデータBeanに保存されません。

(*)“7.6.1 使用するXML要素の指定方法”を参照してください。

(**) typeアトリビュートにsubmitを指定し、uji:formタグのコンテントで使用した場合のみ有効です。

XMLデータの構造

  • propertyまたはxpathは単純要素または属性を指定します(*1)。

  • selectedPropertyは単純要素を指定します(*1)。

  • labelXPathには単純要素または属性を指定します(*1)。

(*1) 要素の集合を指定した場合の動作は“7.6.3 要素や属性の集合を指定した場合の動作”を参照してください。

使用例

画面部品タグと連携する

XML

<root>
  <list>
    <item code="SA10203"><name>えんぴつ</name><price>100</price></item>
    <item code="LT22432"><name>クリップ</name><price>250</price></item>
    <item code="NN43390"><name>カッター</name><price>510</price></item>
  </list>
</root>

JSP

<uji:form name="order" verbs="buy,cancel" beanId="body">
  <uji:list bean="body" xpath="list">
    <uji:listRenderer type="list">
      <TABLE border="1"><uji:children/></TABLE>
    </uji:listRenderer>
    <uji:listRenderer type="element">
      <TR>
        <uji:composite>
          <uji:compositeRenderer>
            <TD>
              <uji:pushButton name="buy" xpath="@code" 
                              labelXPath="name"
                              selectedProperty="selectedItem"/>
            <TD>
              <uji:getProperty xpath="price"/>円
          </uji:compositeRenderer>
        </uji:composite>
      </TR>
    </uji:listRenderer>
  </uji:list>
  ...
</uji:form>

この例では、uji:listタグは、リストの要素としてXMLデータのitem要素を使用します。uji:listRendererタグのコンテントでは、item要素をルート要素としたXMLデータBeanがカレントオブジェクトとなります。item要素のcode属性の値をボタンの値として使用するため、uji:pushButtonタグにxpath="@code"を指定します。また、item要素のコンテントにあるname要素のコンテントをラベルテキストとして使用するため、labelXPath="name"を指定します。

表示画面

イベントモデル

uji:pushButtonタグは、プッシュボタンを作成します。

uji:pushButtonタグは、uji:formタグの中に記述します。

uji:pushButtonタグの動作については、“基本機能”を参照してください。

アトリビュート

uji:pushButtonタグは、イベントモデルで使用する際に以下のアトリビュートを指定します。これ以外のアトリビュートについては、“基本機能”を参照してください。

アトリビュート名

省略

意味

省略時の動作

bean

可

managed beanの名前を指定します。

画面部品タグのカレントオブジェクトを使用します。カレントオブジェクトがない場合、タグのアトリビュートに従ってボタンを作成します。

property

可

managed beanのプロパティ名を指定します。

managed bean自体がPushButtonModelインタフェースを持つオブジェクトとして使用されます。

action

可

アクションを処理するメソッドをメソッドバインディング式で指定します。

アクションを処理するメソッドを使用しません。

actionListener

可

アクションリスナメソッドをメソッドバインディング式で指定します。

アクションリスナメソッドを使用しません。

selectedValue

可

ボタンがクリックされた際にボタンの値を保存する場所をバリューバインディング式で指定します。

ボタンの値を保存しません。

immediate

可

値の変換と検証を処理するフェーズを指定します。

  • trueの場合、Apply Request Valuesで処理されます。

  • falseの場合、Process Validatorsで処理されます。

false

id

可

コンポーネントのIDを指定します。

自動的に付与されます。

イベントモデルで使用する際に以下のアトリビュートは指定できません。

selectedProperty、name
コンテント

uji:pushButtonタグのコンテントには以下のタグが記述できます。

  • f:actionListener(0個以上)

使用例

単独で使用する

<f:view>
  <uji:form name="myform" >
    <uji:pushButton bean="myBean" property="buttonAttr"
                       width="100" height="40" />
  </uji:form>
</f:view>

画面部品タグと連携する

<f:view>
  <uji:form name="myform" >
    ...
    <uji:list bean="myBean" property="list">
      <uji:listRenderer type="element">
        <uji:composite>
          <uji:compositeRenderer>
            ...
            <uji:pushButton property="btn" 
                           selectedValue="#{myBean.selectedItem}"/>
          </uji:compositeRenderer>
        </uji:composite>
      </uji:listRenderer>
    </uji:list>
  </uji:form>
</f:view>

上記例では、リストの要素としてmanaged beanを使用しています。また、"myBean"と名付けられたmanaged beanはプロパティlistを持ちます。リストの要素数と同じだけプッシュボタンが表示されますが、それぞれに、リストの要素が対応付けられます。

注意事項

注意事項については、“基本機能”を参照してください。

ブラウザ対応状況

アトリビュート

IE5.5

IE6

IE7

IE8

Firefox2.0

Firefox3.0

Safari2.0

width

○

○

○

○

○

○

○

height

○

○

○

○

○

○

×

borderColor

○

○

○

○

○

○

×

borderType

○

※1

※1

※1

×

×

×

borderWidth

○

○

○

○

×

×

×

insets

○

○

○

○

○

○

×

background

○

○

○

○

○

○

×

foreground

○

○

○

○

○

○

×

fontStyle

○

○

○

○

○

○

×

fontWeight

○

○

○

○

○

○

×

fontSize

○

○

○

○

○

○

×

textDecoration

※2

※2

※2

※2

○

○

×

enabled

○

○

○

○

○

○

×

alignmentHorizontal

○

○

○

○

○

○

×

verticalAlignment

※3

※3

※3

※3

○

○

×

tabIndex

○

○

○

○

○

○

×

tipText

○

○

○

○

○

○

○

label

○

○

○

○

○

○

○

type

○

○

○

○

○

○

○

name

○

○

○

○

○

○

○

css

※4

※4

※4

※4

※4

※4

※4

visible

○

○

○

○

○

○

○

※1: Windows XPまたはWindows Vistaで、画面のテーマを[Windows XP]または[Windows Vista]に設定している場合は有効になりません。

※2: blinkは指定できません。

※3: bottomは、指定できません。

※4: CSSを使った設定が実際に表示に反映されるかどうかはブラウザの仕様に依存します。

前次
Copyright FUJITSU LIMITED 2000-2009