第24章 Seam JSF コントロール

Seam には Seam での作業に便利な JSF コントロールがいくつか含まれています。 JSF コントロールにおけるビルドの補完が目的で、 他のサードパーティのライブラリからの管理を行います。 Seam と併用する際は、 Ajax4JSF 及び ADF (現在は Trinidad) タグライブラリの使用を推奨します。 Tomahawk タグライブラリの使用はお薦めできません。

これらのコントロールを使用するには、 以下のように使用するページで "s" ネームスペースを定義します (facelets 固有)。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:s="http://jboss.com/products/seam/taglib">
  

この例ではタグをいくつか使用している例を示しています。

表 24.1. Seam JSF コントロールの参照例

<s:validate>

詳細

非視覚的なコントロールです。 Hibernate Validator を使用してバウンドプロパティに対して JSF 入力フィールドを確認します。

属性

なし

使い方

<h:inputText id="userName" required="true" value="#{customer.userName}">
  <s:validate />
</h:inputText>
<h:message for="userName" styleClass="error" />

<s:validateAll>

詳細

非視覚的なコントロールです。 Hibernate Validator を使ってそのバウンドプロパティに対しすべての子 JSF 入力フィールドを確認します。

属性

なし

使い方

<s:validateAll>
  <div class="entry">
    <h:outputLabel for="username">Username:</h:outputLabel>
    <h:inputText id="username" value="#{user.username}" required="true"/>
    <h:message for="username" styleClass="error" />
  </div>
  <div class="entry">
    <h:outputLabel for="password">Password:</h:outputLabel>
    <h:inputSecret id="password" value="#{user.password}" required="true"/>
    <h:message for="password" styleClass="error" />
  </div>
  <div class="entry">
    <h:outputLabel for="verify">Verify Password:</h:outputLabel>
    <h:inputSecret id="verify" value="#{register.verify}" required="true"/>
    <h:message for="verify" styleClass="error" />
  </div>
</s:validateAll>

<s:formattedText>

詳細

Seam Text、 ブログに便利なリッチテキストマークアップ、 リッチテキストを使う可能性がある wiki やその他のアプリケーションを出力します。 使い方の全詳細については Seam Text の章を参照してください。

属性

  • value — 表示するリッチテキストマークアップを指定する EL 表現です。

使い方

<s:formattedText value="#{blog.text}"/>

<s:convertDateTime>

詳細

Seam タイムゾーン内でデータ変換または時間変換を行います。

属性

なし

使い方

<s:convertEnum>

詳細

enum コンバータを現在のコンポーネントに割り当てます。 おもにラジオボタンコントロール及びドロップダウンコントロールに役立ちます。

属性

なし

使い方

<s:convertEntity>

詳細

エンティティコンバータを現在のコンポーネントに割り当てます。 おもにラジオボタンコントロール及びドロップダウンコントロールに役立ちます。

コンバータは 単複いずれかの @Id アノテーションを持つエンティティならいずれでも使用できます。 管理永続コンテキストentityManager と呼ばれない場合、 components.xml で設定する必要があります。

属性

なし

設定

  <component name="org.jboss.seam.ui.entityConverter">
      <property name="entityManager">#{em}</property>
  </component>

使い方

<h:selectOneMenu value="#{person.continent}" required="true">
    <s:selectItems value="#{continents.resultList}" var="continent" label="#{continent.name}" noSelectionLabel="Please Select..."/>
    <s:convertEntity />
</h:selectOneMenu>

<s:enumItem>

詳細

enum の値から SelectItem を作成します。

属性

  • enumValue — enum の値の文字列表現です。

  • labelSelectItem を表示する場合に使用されるラベルです。

使い方


<s:selectItems>

詳細

List、 Set、 DataModel または Array から List<SelectItem> を作成します。

属性

  • valueList<SelectItem> を支持するデータを指定する EL 表現です。

  • var — 対話している間、 現在のオブジェクトを保持するローカルの変数名を定義します。

  • labelSelectItem を表示する場合に使用されるラベルです。 var 変数を参照することができます。

  • disabled — true の場合、 SelectItem は disabled と表示されます。 var 変数を参照できます。

  • noSelectionLabel — (オプションの) ラベルを指定して一覧の文頭に配置します (required="true" も指定されるとこの値の選択は検証エラーの要因となる)。

  • hideNoSelectionLabel — ture の場合、 値が選択されると noSelectionLabel は表示されなくなります。

使い方


<h:selectOneMenu value="#{person.age}"  converter="#{converters.ageConverter}">
    <s:selectItems value="#{ages}" var="age" label="#{age}" />
</h:selectOneMenu>

<s:graphicImage>

詳細

拡張された <h:graphicImage> では Seam Component 内にイメージを作成できるようになり、 そのイメージに対してさらに変換を適用することができます。 Facelets 固有になります。

<h:graphicImage> のすべての属性がサポートされている他、 以下もサポートされています。

属性

  • value — 表示させるイメージです。 パスの String (クラスパスからロードされる)、 byte[]java.io.Filejava.io.InputStream または java.net.URL が使用できます。 現在サポートされているイメージ形式は image/pngimage/jpegimage/gif になります。

  • fileName — 指定されていない場合、 提供されるイメージには生成されたファイル名が付きます。 ファイルに名前を付けたい場合には、 ここで指定します。 この名前は固有でなければなりません。

変換

イメージに変換を適用するには、 適用する変換を指定するタグをネストさせます。 Seam は現在、 次のような変換をサポートしています。

<s:transformImageSize>
  • width — イメージに新たに設定する幅です

  • height — イメージに新たに設定する高さです

  • maintainRatiotrue であり width/height のひとつが指定されている場合、 そのイメージは指定されたものではなく縦横の比率を維持するよう計算された寸法でリサイズされます。

  • factor — 特定の要素でイメージを縮小/拡大します。

<s:transformImageBlur>
  • radius — 特定の半径でコンボリューションブラーを行います。

<s:transformImageType>
  • contentType — イメージタイプを image/jpeg または image/png に変更します。

独自の変換を作成するのも簡単です。 implementsorg.jboss.seam.ui.graphicImage.ImageTransform を行う UIComponent を作成します。 applyTransform() メソッド内で、 オリジナルのイメージを取得するためにimage.getBufferedImage() 、 変換されたイメージをセットするために image.setBufferedImage() をそれぞれ使用します。 このビュー内で指定されている順序に従って変換は適用されます。

使い方


<s:decorate>

詳細

検証に失敗した場合または required="true" が設定されている場合、 JSF 入力フィールドを "Decorate" します。

属性

なし

使い方


<s:layoutForm>

詳細

標準のフォームレイアウトを生成するためのレイアウトコンポーネントです。 各子コンポーネントは 1 列で処理され、 子コンポーネントが <s:decorate> の場合は追加のフォーマット化が適用されます。

  • Label — label ファセットが <s:decorate> にある場合、 そのコンテンツがこのフィールドのラベルとして使用されます。 ラベルはコラム内に右詰めで表示されます。

    他にもサポートされているファセットがいくつかあります。 beforeLabelafterLabelaroundLabelbeforeInvalidLabelafterInvalidLabelaroundInvalidLabel などです。

  • Other text — belowLabel ファセットまたは belowField ファセットのいずれかあるいは両方が <s:decorate> にある場合、 そのコンテンツがラベルまたはフィールドの下に配置されます。

  • Required — フィールドに required="true" がセットされている場合、 aroundRequiredFieldbeforeRequiredFieldafterRequiredFieldaroundRequiredLabelbeforeRequiredLabel 及び afterRequiredLabel が適用されます。

属性

なし

使い方

<s:layoutForm>
   <f:facet name="aroundInvalidField">
       <s:span styleClass="error"/>
   </f:facet>
   <f:facet name="afterInvalidField">
       <s:message />
   </f:facet>
   <f:facet name="beforeRequiredLabel">
   	<s:span>&lowast;</s:span>
   </f:facet>
   <f:facet name="aroundLabel">
   	<s:span style="text-align:right;" />
   </f:facet>
   <f:facet name="aroundInvalidLabel">
   	<s:span style="text-align:right;" styleClass="error" />
   </f:facet>
   <s:decorate>
        <f:facet name="label">
		    <h:outputText value="Name" />
        </f:facet>
        <h:inputText value="#{person.name}" required="true"/>
        <f:facet name="belowField">
            <h:outputText styleClass="help" 
               value="Enter your name as it appears 
                  on your passport" />
        </f:facet>
    </s:decorate>
</s:layoutForm>

<s:message>

詳細

検証エラーのメッセージで JSF 入力フィールドを "Decorate" します。

属性

なし

使い方


<s:span>

詳細

HTML <span> をレンダリングします。

属性

なし

使い方


<s:div>

詳細

HTML <div> をレンダリングします。

属性

なし

使い方


<s:fragment>

詳細

レンダリングされないコンポーネントです。 その子コンポーネントのレンダリングを有効/無効にする場合に便利です。

属性

なし

使い方


<s:cache>

詳細

JBoss Cache を使用してレンダリングされるページフラグメントの Cache です。 <s:cache> は実際にはビルトインの pojoCache コンポーネントで管理される JBoss Cache のインスタンスを使用するので注意してください。

属性

  • key — レンダリングされたコンテンツをキャッシュするキーです。 値式 である場合がほとんです。 たとえば、 あるドキュメントを表示しているページフラグメントをキャッシュする場合は、 key="Document-#{document.id}" を使うことができます。

  • enabled — キャッシュが使用される必要があるかどうかを定義する値式です。

  • region — 使用する JBoss Cache ノードです (ノード別に異なる有効期限ポリシーを持たせることができる)。

使い方


<s:link>

詳細

対話伝搬の制御付きアクションの起動をサポートするリンクです。 フォームはサブミットしません。

属性

  • value — ラベルです。

  • action — アクションリスナーを指定するメソッドバインディングです。

  • view — リンク先の JSF view id です。

  • fragment — リンク先のフラグメント識別子です。

  • disabled — 無効にしたリンクです。

  • propagation — 対話伝搬のスタイルを定義します、 beginjoinnestnone あるいは end などです。

  • pageflow — 開始するページフロー定義です。 (propagation="begin" または propagation="join" の場合にのみ役立ちます。)

使い方


<s:button>

詳細

対話伝搬の制御付きアクションの起動をサポートするボタンです。 フォームはサブミットしません。

属性

  • value — ラベルです。

  • action — アクションリスナーを指定するメソッドバインディングです。

  • view — リンク先の JSF view id です。

  • fragment — リンク先のフラグメント識別子です。

  • disabled — 無効にしたリンクです。

  • propagation — 対話伝搬のスタイルを定義します、 beginjoinnestnone あるいは end などです。

  • pageflow — 開始するページフロー定義です。 (propagation="begin" または propagation="join" の場合にのみ役立ちます。)

使い方


<s:selectDate>

詳細

指定された入力フィールドの対して日付を選択する動的なデートピッカーコンポーネントを表示します。 selectDate エレメントのボディにはテキストやイメージなどの HTML エレメントが含まれるはずで、 ユーザーがデートピッカーを表示するためにクリックするよう指示します。 デートピッカーは CSS を使って表さなければなりません。 サンプルの CSS ファイルは date.css で Seam ブッキングデモ内にあります。 または、 seam-gen を使って生成することもできます。 デートピッカーの外観の制御に使用される CSS スタイルも以下に示します。

属性

  • for — 選択された日付がデートピッカーにより挿入される挿入先入力フィールドの ID です。

  • dateFormat — 日付形式の文字列です。 入力フィールドの日付形式と一致しなければなりません。

  • startYear — ポップアップの年度選択範囲はこの年から開始します。

  • endYear — ポップアップの年度選択範囲はこの年で終わります。

使い方

  <div class="row">
    <h:outputLabel for="dob">Date of birth<em>*</em></h:outputLabel>
    <h:inputText id="dob" value="#{user.dob}" required="true">
      <s:convertDateTime pattern="MM/dd/yyyy"/>
    </h:inputText>
    <s:selectDate for="dob" startYear="1910" endYear="2007"><img src="img/datepicker.png"/></s:selectDate>
    <div class="validationError"><h:message for="dob"/></div>
  </div>           

CSS スタイリング

次の一覧では日付選択コントロールのスタイルを制御する目的で使用される CSS クラス名を示します。

  • seam-date — ポップアップカレンダーを含んでいるアウター div に適用されます。 (1) カレンダーのインナーレイアウトを制御する table に対しても適用されます。 (2)

  • seam-date-header — このクラスはカレンダーのヘッダテーブル列 (tr) とヘッダテーブルのセル (td) に適用されます。 (3)

  • seam-date-header-prevMonth — このクラスは「先月」のテーブルセル (td) に適用され、 クリックするとカレンダーは現在表示されている月の 1 ヶ月前の月を表示します。 (4)

  • seam-date-header-nextMonth — このクラスは「来月」のテーブルセル (td) に適用され、 クリックするとカレンダーは現在表示されている月の 1 ヶ月先の月を表示します。 (5)

  • seam-date-headerDays — このクラスはカレンダーの曜日ヘッダ列 (tr) に適用され、 1 週間の曜日が含まれます。 (6)

  • seam-date-footer — このクラスはカレンダーのフッタ列 (tr) に適用され、 現在の日付を表示します。 (7)

  • seam-date-inMonth — このクラスは現在表示されている月の日付を含むテーブルセル (td) のエレメントに適用されます。 (8)

  • seam-date-outMonth — このクラスは現在表示されている月に含まれない日付を含むテーブルセル (td) のエレメントに適用されます。 (9)

  • seam-date-selected — このクラスは現在選択されている日付を含むテーブルセル (td) のエレメントに適用されます。 (10)

  • seam-date-dayOff-inMonth — このクラスは現在選択されている月の「休日」となる日付 (週末、土曜日および日曜日) を含むテーブルセル (td) のエレメントに適用されます。 (11)

  • seam-date-dayOff-outMonth — このクラスは現在選択されている月に含まれない「休日」 (週末、土曜日および日曜日) を含むテーブルセル (td) のエレメントに適用されます。 (12)

  • seam-date-hover — このクラスはカーソルが指しているテーブルセル (td) のエレメントに適用されます。 (13)

  • seam-date-monthNames — このクラスはポップアップの月選択を含む div コントロールに適用されます。 (14)

  • seam-date-monthNameLink — このクラスはポップアップの月の名前を含むアンカー (a) コントロールに適用されます。 (15)

  • seam-date-years — このクラスはポップアップの年選択を含む div コントロールに適用されます。 (16)

  • seam-date-yearLink — このクラスはポップアップの年を含むアンカー (a) コントロールに適用されます。 (15)

<s:conversationPropagation>

詳細

コマンドリンクやボタン (または JSF コントロールのようなもの) に対する対話伝搬をカスタマイズします。 Facelets 固有です。

属性

  • propagation — 対話伝搬のスタイルを定義します、 beginjoinnestnone あるいは end などです。

  • pageflow — 開始するページフロー定義です。 (propagation="begin" または propagation="join" の場合にのみ役立ちます。)

使い方


<s:conversationId>

詳細

対話 ID を出力リンク (または JSF コントロールのようなもの) に追加します。 Facelets 固有です。

属性

なし

使い方


<s:taskId>

詳細

タスクが #{task} で使用できる場合、 タスク ID を出力リンク (または JSF のようなもの) に追加します。 Facelets 固有です。

属性

なし

使い方


<s:fileUpload>

詳細

ファイルアップロードコントロールをレンダリングします。 このコントロールはエンコーディングタイプ multipart/form-data を使用してフォーム内で使用する必要があります。

                       
        <h:form enctype="multipart/form-data">
                       
                     

マルチパートのリクエストの場合、 Seam Multipart サーブレットフィルタも web.xml 内で設定しなければなりません。

                       
  <filter>
    <filter-name>Seam Filter</filter-name>
    <filter-class>org.jboss.seam.web.SeamFilter</filter-class>
  </filter>

  <filter-mapping>
    <filter-name>Seam Filter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
                       
                     

設定

components.xml では、 次のようなマルチパートリクエスト用の設定オプションが設定できます。

  • createTempFiles — このオプションが true に設定されると、 アップロードされたファイルはメモリ内ではなくテンポラリファイルにストリームされます。

  • maxRequestSize — ファイルアップロードリクエストの最大サイズをバイト単位で設定できます。

例を示します。

                       
  <component class="org.jboss.seam.web.MultipartFilter">
      <property name="createTempFiles">true</property>
      <property name="maxRequestSize">1000000</property>
  </component>
                       
                     

属性

  • data — この値バインディングはバイナリファイルデータを受け取ります。 受信フィールドは byte[] または InputStream で宣言されなければなりません (必須)。

  • contentType — この値バインディングはファイルの昆展とタイプを受け取ります (オプション)。

  • fileName — この値バインディングはファイル名を受け取ります (オプション)。

  • accept — 承認するコンテントタイプをコンマで区切った一覧です。 "images/png,images/jpg""images/*" などのようなブラウザではサポートされていない場合があります。

  • style — コントロールのスタイルです。

  • styleClass — コントロールのスタイルクラスです。

使い方