3 コンポーネントのサポート

この章では、ADFモバイル・ブラウザでサポートされているApache MyFaces Trinidadコンポーネントについて説明します。

この章の内容は次のとおりです。

• 3.1項「Apache MyFaces Trinidadコンポーネントについて」

• 3.2項「入力コンポーネント」

• 3.3項「出力コンポーネント」

• 3.4項「レイアウト・コンポーネント」

• 3.5項「ナビゲーション・コンポーネント」

• 3.6項「データの視覚化(グラフおよびゲージ)」

• 3.7項「表およびツリー」

• 3.8項「サポートされないコンポーネントおよび属性」

3.1 Apache MyFaces Trinidadコンポーネントについて

ADFモバイル・ブラウザでは、60を超えるApache MyFaces Trinidadコンポーネントがサポートされているため、モバイル・デバイスの画面に適切にレンダリングする豊富なコンポーネント・セットを使用してアプリケーションを構築できます。詳細は、Apache MyFaces Trinidadのサイト(http://myfaces.apache.org/trinidad/)を参照してください。

3.1.1 サポートされている機能

ADFモバイル・ブラウザでは、次のレンダラ固有の機能がサポートされています。

• 部分ページ・レンダリング

• ダイアログ

3.1.2 部分ページ・レンダリング

待機時間が長く帯域幅が小さいネットワークを使用するモバイル環境では、モバイル・ユーザー向けのアプリケーションの応答性が低下します。画面のリフレッシュは遅くなり、モバイル・ユーザーの操作性は低くなります。ADFモバイル・ブラウザでサポートされている部分ページ・レンダリング(PPR)を使用すると、モバイル・デバイスの画面更新時に全体をリフレッシュする必要がなくなるため、サーバーからのリクエスト・データ量を最小化することによって低速な接続による画面更新への悪影響を抑えることができます。AJAX(Asynchronous JavaScript and XML)がサポートされていないブラウザでは、PPRのかわりにページ全体のレンダリングが使用されます。たとえば、(JavaScriptがサポートされていない)基本的なHTMLブラウザでページを送信すると、ページ全体がリフレッシュされます。

注意: BlackBerry 4.5(およびそれ以前のバージョン)のブラウザでは、PPRがサポートされていません。特定のフォーム・コンポーネントにautosubmit属性を指定すると、ユーザーがフィールドから出た後にページが送信されます。その後で、ページの部分リフレッシュではなく、完全リフレッシュが行われます。

3.1.3 ダイアログ

ADFモバイル・ブラウザでは、ダイアログ(ユーザー入力を取得するためにアプリケーションで使用されるページ)がサポートされています。モバイル・ブラウザではダイアログ・ボックス(ポップアップ・ウィンドウ)を含む新しいウィンドウを開くことができないため、現在のページの状態が自動的に保存された後、ブラウザのメイン・ウィンドウ内に新しいページとしてダイアログ・ボックスが表示されます。

3.1.4 BlackBerryブラウザ4.5以前のバージョンに固有のレンダリング

BlackBerry 4.5以前のバージョン用のブラウザでは、リスト・サブレベル内の箇条書き(tr:panelListコンポーネント内のものなど)がインデントされずに大きく表示されます。BlackBerryブラウザの表処理では複雑なレイアウトが影響を受ける可能性があります。BlackBerryブラウザでは水平スクロールがサポートされていません。かわりに表の行が折り返されて複数の表示行になるため、レイアウトが崩れる場合があります。詳細は、第6章「BlackBerry 4.2から4.5向けの設計ガイドライン」を参照してください。

3.2 入力コンポーネント

ADFモバイル・ブラウザでは、ユーザー入力をサポートするコア・コンポーネントである、入力テキスト・フィールドおよびリストがサポートされています。

3.2.1 入力テキスト・フィールドの作成

次のコンポーネントを使用して入力フィールドを作成できます。

• tr:inputColor

  
  

  注意: モバイル・ブラウザでは、tr:inputColorコンポーネント用のインラインchooseColorまたはcolorダイアログはサポートされていません。

  
  

• tr:inputDate

• tr:inputHidden

• tr:inputText

  
  

  注意: 基本的なHTMLブラウザでは、tr:inputTextコンポーネントのautosubmit属性がサポートされていません。

  
  
  
  

  注意: 幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:inputTextコンポーネントが最適化されます。詳細は、第7章「幅が狭い画面のサポートおよびユーザー・エージェントの詳細のサポート」を参照してください。

  
  

3.2.2 リストの作成

次のコンポーネントを使用してリストを作成できます。

• tr:panelChoice

• tr:panelList

• tr:selectBooleanCheckBox

• tr:selectBooleanRadio

• tr:selectItem

  
  

  注意: モバイル・ブラウザでは、tr:selectItemコンポーネントのdisabled属性がサポートされていません。

  
  

• tr:selectManyCheckBox

• tr:selectManyListBox

• tr:selectOneChoice

• tr:selectOneListBox

• tr:selectOneRadio

• tr:resetButton

  
  

  注意: 基本的なHTMLブラウザでは、tr:resetButtonコンポーネントのautosubmit属性がサポートされていません。

  
  

3.3 出力コンポーネント

ADFモバイル・ブラウザでは、モバイル・デバイス・アプリケーションでの出力をサポートするApache MyFaces Trinidadのコア・コンポーネントが使用されます。これらのコンポーネントには、テキストおよびイメージを表示するコンポーネント、さらにテキストを表示または非表示にするコンポーネントがあります。

3.3.1 テキストの表示

次のコンポーネントを使用すると、テキストを表示できます。

• tr:iterator

• tr:message

• tr:messages

  
  

  注意: コンポーネント固有のメッセージは、デスクトップ・ブラウザで表示されるのと同じようにモバイル・ブラウザで表示されるのではありません。そうではなく、メッセージ・コンポーネント(tr:messageまたはtr:messages)がWebページに配置された領域に表示されます。

  
  

• tr:outputDocument

• tr:outputForwarded

• tr:outputLabel

• tr:outputText

3.3.2 イメージの表示

次のコンポーネントを使用すると、イメージを表示できます。

• tr:icon

• tr:image

• tr:panelTip

3.3.3 コンポーネントの表示(または非表示)

次のコンポーネントを使用すると、アイテムの表示または非表示が可能になります。

• tr:panelAccordion

  
  

  注意: モバイル・ブラウザは、ページ全体の更新のみをサポートします。tr:panelAccordionコンポーネントのpartialTriggers属性はサポートされていません。

  
  

• tr:panelTabbed

  
  

  注意: モバイル・デバイス上のスペースを節約するために、レンダラは意図的にtr:panelTabbedコンポーネントの上部と下部の両方にタブ・バーを表示しません。属性位置の有効な値は、topおよびbottomです。bothが指定されている場合、レンダラはタブを上部に表示します。

  
  

• tr:showDetail

  
  

  注意: tr:showDetailコンポーネントでは、詳細表示の矢印は表示されません。かわりに、[+]および[-]記号が表示されます。

  
  

• tr:showDetailHeader

  
  

  注意: tr:showDetailHeaderコンポーネントでは、モバイル・ブラウザに詳細表示の矢印は表示されません。

  
  

• tr:showDetailItem

  
  

  注意: tr:showDetailItemコンポーネントでは、モバイル・ブラウザに詳細表示の矢印は表示されず、flex属性はサポートされていません。

  
  

3.4 レイアウト・コンポーネント

ADFモバイル・ブラウザでサポートされているレイアウト・コンポーネントには、ページ自体を管理するコンポーネント(tr:document、tr:formなど)や、tr:group、tr:panelFormLayout、tr:panelGroupLayoutのようなページの各セクションをレイアウトするコンポーネントがあります。

3.4.1 ページの管理

次のコンポーネントを使用すると、ページを管理できます。

• tr:document

• tr:form

  
  

  注意: モバイル・ブラウザでは、tr:formコンポーネントのdefaultCommand属性がサポートされていません。

  
  

• tr:page

注意: モバイル・ブラウザでは、tr:pageコンポーネントのtr:pageファセットがサポートされていません。

3.4.2 ページのセクションの配置

次のADF Facesのコア・タグでは、モバイル・デバイス・アプリケーション用のページ・レイアウトがサポートされています。

• tr:group

• tr:panelBorderLayout

  
  

  注意: tr:panelBorderLayoutコンポーネントでは、topおよびbottomファセットのみがサポートされています。モバイル・ブラウザでは、次のファセットはサポートされていません。 left right start end innerLeft innerRight innerStart innerEnd これらのサポートされていないファセットを使用している場合、tr:panelBorderLayoutコンポーネントはレンダリングされません。

  
  

• tr:panelBox

• tr:panelFormLayout

• tr:panelGroupLayout

• tr:panelHeader

• tr:panelHorizontalLayout

  
  

  注意: モバイル・デバイスではtr:panelHorizontalLayoutコンポーネントのhalign=end属性がサポートされていません。

  
  

• tr:panelLabelAndMessage

  
  

  注意: 幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:panelLabelAndMessageコンポーネントが最適化されます。詳細は、7.1項「幅が狭い画面のサポートの特定」を参照してください。

  
  

• tr:panelPage

• tr:panelPageHeader

  
  

  注意: モバイル・デバイスでは、tr:panelPageHeaderコンポーネントの次のファセットのみがサポートされています。 branding brandingApp navigation1 navigation2

  
  

• tr:panelRadio

  
  

  注意: 幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:panelRadioコンポーネントが最適化されます。詳細は、7.1項「幅が狭い画面のサポートの特定」を参照してください。

  
  

• tr:panelCaptionGroup

3.4.3 空白の挿入

次のコンポーネントは、ページの領域割当てを制御します。

• tr:separator

• tr:spacer

• tr:subform

3.5 ナビゲーション・コンポーネント

ADFモバイル・ブラウザでは、ユーザーがアプリケーションの他のページや外部の場所にナビゲートできるようにする、ボタン、リンク、ブレッドクラムなどのコンポーネントがサポートされています。

3.5.1 ボタンの作成

ADFモバイル・ブラウザでは、次のボタン・タイプがサポートされています。

• tr:commandButton

  
  

  注意: icon属性を設定するとtext属性が表示されなくなるため、モバイル・デバイスのボタンには、テキストまたはイメージのいずれかを定義できますが、両方は定義できません。disabled属性をtrueに設定すると、icon属性が設定されたtr:commandButtonコンポーネントがリンクを持たない静的イメージとしてレンダリングされます。

  
  

• tr:goButton

tr:goButtonコンポーネントを使用して電子メール、電話およびGoogleマップをアプリケーションに統合する方法の詳細は、第8章「ADFモバイル・ブラウザ・アプリケーションの拡張」を参照してください。

3.5.2 リンクの作成

ADFモバイル・ブラウザでは、ハイパーリンクを作成するための次のコンポーネントがサポートされています。

• tr:commandLink

  
  

  注意: 基本的なモバイルHTMLブラウザではtr:commandLinkコンポーネントが入力要素としてレンダリングされるため、その子コンポーネントはレンダリングできません。基本的なモバイルHTMLブラウザでの入力要素の詳細は、5.2項「基本的なHTMLモバイル・ブラウザ用のアプリケーションの開発」を参照してください。

  
  

• tr:goLink

tr:goLinkコンポーネントを使用して電子メール、電話およびGoogleマップをアプリケーションに統合する方法の詳細は、第8章「ADFモバイル・ブラウザ・アプリケーションの拡張」を参照してください。

3.5.3 ナビゲーション・コンポーネント

ADFモバイル・ブラウザでは、次のナビゲーション・コンポーネントがサポートされています。

• tr:breadcrumbs

  
  

  注意: 幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:breadcrumbsコンポーネントが最適化されます。詳細は、第7章の「幅が狭い画面のサポートの特定」を参照してください。

  
  

• tr:commandNavigationItem

  
  

  注意: 次のコンポーネントでdisabled属性をtrueに設定した場合、tr:commandNavigationItemはレンダリングされません。 tr:selectOneListBox tr:selectOneChoice tr:processChoiceBar ヒント(choice)を含むtr:navigationPane tr:selectRangeChoiceBar

  
  

• tr:navigationPane

  
  

  注意: 宛先の値があるtr:navigationPane hint = "choice"は、基本的なHTMLブラウザではサポートされていません。

  
  
  
  

  注意: 幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:navigationPaneコンポーネントが最適化されます。詳細は、第7章の「幅が狭い画面のサポートの特定」を参照してください。

  
  

• tr:train

  
  

  注意: tr:trainコンポーネントでは、各アイテムが一覧表示されるのではなく、yのxとして表示されます。これはADFモバイル・ブラウザの表示専用コンポーネントであり、yのxのコンポーネントをクリックしてアプリケーション内をナビゲートすることはできません。ナビゲートできるようにするには、別個のリンクまたはボタンを追加する必要があります。

  
  

• tr:processChoiceBar

  
  

  注意: 幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:processChoiceBarコンポーネントが最適化されます。詳細は、7.1項「幅が狭い画面のサポートの特定」を参照してください。

  
  

• tr:selectRangeChoiceBar

  
  

  注意: 幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:selectRangeChoiceBarコンポーネントが最適化されます。詳細は、第7章の「幅が狭い画面のサポートの特定」を参照してください。

  
  

3.6 データの視覚化(グラフおよびゲージ)

ADFモバイル・ブラウザでは、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたADFデータ視覚化コンポーネントの作成に関する項に記載されたデータ視覚化ツール(DVT)がサポートされています。

ADFモバイル・ブラウザでは、次のグラフ・タイプがサポートされています。

• 面

• 棒

• 棒(横)

• バブル

• 組合せ(横棒および折れ線)

• ファンネル

• 折れ線

• パレート

• 円

• レーダー

• 散布図/極

• 株価

ADFモバイル・ブラウザでは、次のゲージ・タイプがサポートされています。

• ダイアル

• ステータス・メーター

• ステータス・メーター(垂直)

• LED

これらのコンポーネントをアプリケーションに追加するには、まずドラッグ・アンド・ドロップ操作によりデータ・コントロールをソース・エディタに移動し、続いてコンテキスト・メニューから「トリニダード・ゲージ」または「トリニダード・グラフ」を選択します。たとえば、図3-1はコレクションをソース・エディタのコンポーネントにドラッグするときのコンテキスト・メニューを示しています。

図3-1 DVTコンポーネントの作成

「トリニダード・グラフ」または「トリニダード・ゲージ」オプションを選択すると、図3-2に示すように、DVTウィザードが表示されて「コンポーネント・ギャラリ」ページが開きます。このページで、DVTのタイプを選択します。

注意: Oracle Fusion Middleware 11g リリース1のADFモバイル・ブラウザでは静的なグラフおよびゲージのみがサポートされていますが、これらはいずれもPNGイメージとしてレンダリングされます。このイメージ形式がサポートされているすべてのモバイル・デバイスで、グラフおよびゲージを表示できます。

図3-2 「トリニダード・グラフ」のコンポーネント・ギャラリ

3.7 表およびツリー

ADFモバイル・ブラウザ・アプリケーションでは、構造化データを表の行および列または階層ツリーとして表示できます。

3.7.1 表の作成

ADFモバイル・ブラウザでは、次のコンポーネントで構成される表がサポートされています。

• tr:table

  
  

  注意: ADFモバイル・ブラウザでは、tr:tableコンポーネントのallDetailsEnabled属性がサポートされていません。この属性は常にfalseに設定されます。

  
  

• tr:column

  
  

  注意: tr:columnタグをネストして列グループを作成した場合、列グループのヘッダー・ファセットはレンダリングされません。

  
  

単一列を持つ表を作成すれば、モバイル・デバイスでの表の表示を最適化できます。

3.7.2 ツリーの作成

ADFモバイル・ブラウザでは、tr:treeコンポーネントがサポートされています。

注意: tr:treeは、基本的なHTMLブラウザではレンダリングされない可能性があります。

3.8 サポートされないコンポーネントおよび属性

リリース11gのADFモバイル・ブラウザでは、一部のコンポーネントまたは属性がサポートされていません。

3.8.1 サポートされないコンポーネント

リリース11gのADFモバイル・ブラウザでは、次のコンポーネントがサポートされていません。

• tr:chart

• tr:chooseColor

• tr:chooseDate

• tr:inputFile

• tr:inputListOFVariables

• tr:inputNumberSpinbox

• tr:legend

• tr:media

• tr:navigationTree

• tr:panelButtonBar

• tr:panelPopup

• tr:panelSideBar

• tr:poll

• tr:progressIndicator

• tr:selectManyShuttle

• tr:selectOrderShuttle

• tr:singleStepButtonBar

• tr:statusIndicator

• tr:switcher

• tr:treeTable

3.8.2 サポートされない属性

リリース11gのADFモバイル・ブラウザでは、いずれのコンポーネントでも次のコンポーネント属性はサポートされていません。

• accessKey

• shortDesc(tooltip)