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

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

この章は次の項を含みます:

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

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

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

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

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

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

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

• 3.8項「HTML <meta>タグの生成」

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

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の表処理では、ブラウザで水平スクロールがサポートされていないため、複雑なレイアウトが影響を受ける可能性があります。かわりに表の行が折り返されて複数の表示行になるため、レイアウトが崩れる場合があります。詳細は、第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は、「BalanceView1」というイテレータをエディタ・ウィンドウにドラッグ・アンド・ドロップしたときに表示されるコンテキスト・メニューを示しています。

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

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

注意: Oracle Fusion Middleware 11g リリース2の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 HTML <meta>タグの生成

<meta>タグでは、ブラウザ内でページを表示する方法を指定します。例3-1に示す<meta>タグの使用例では、アプリケーションを全画面モードで表示するように設定するとともに、Apple社のiPhoneおよびiPadなどのデバイス用にビュー・ポートの幅を設定しています。また、この例では、<meta>タグを使用して、指定したセクションの数の後にページをリロードする方法を設定しています。

例3-1 <meta>タグを使用したページ動作の設定

<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="refresh" content="2;url=./test/index.jspx">

Appleデバイス上で動作するアプリケーションにおける<meta>タグの使用の詳細は、『Safari HTML Reference』の「Supported Meta Tags」の項にある「Apple-Specific Meta Tag Keys」を参照してください。このドキュメントは、http://developer.apple.comから入手できます。

3.8.1 <trh:meta>を使用したHTML <meta>タグの生成

<trh:meta>コンポーネント・タグでは、HTML <meta>タグを生成できます。例3-2では、このコンポーネントを使用して次の処理を行っています。

• モバイル・デバイスでのビュー・ポート・ディメンションを構成します。

• ユーザーによるモバイル・デバイスでのビュー・ポートのサイズ変更を無効化します。

• iOSデバイスのホーム画面にあるブックマークを使用してWebページをSafari内からではなく独自のプロセスで起動できるように有効化します。

• 2秒後に別のページにナビゲートするようにページを構成します。

例3-2 <trh:meta>を使用した各種HTML <meta>タグの生成

<af:document ...>
  <f:facet name="metaContainer">
    <af:group id="metaContainer">
      <trh:meta name="viewport" content="width=device-width, user-scalable=no"/>
      <trh:meta name="apple-mobile-web-app-capable" content="yes"/>
      <trh:meta type="httpEquiv" name="refresh"
content="2;url=./test/index.jspx"/>
    </af:group>
   </f:facet>
</af:document>

3.8.1.1 モバイル・デバイスでのデフォルト・ビュー・ポート・サイズについて

一般的にWebページでは、ページの両側が空白になるように、ハードコード化された幅が指定されています。デスクトップ・ブラウザでページを表示する場合にはこれは問題ではありませんが、同じページをモバイル・デバイスで表示するとこの空白が原因で文字が小さくなってしまうことがあります。さらに、表示されるページ・コントロールもユーザーが指先で操作するには小さすぎるため、ページを拡大してから操作することが必要になります。Webページをモバイル・デバイスで表示したときにこのサイズ調整が必要になりますが、これは、Apple社(iOS)、Google社(Android)、Microsoft社(Windows Phone 7)の各オペレーティング・システムにおいて標準的なビュー・ポート幅が想定されてページが小さな画面に収まるようにレンダリングされるためです。

モバイル・デバイスのネイティブ解像度で適切にページを表示できるようにするため、例3-3に示すように、<trh:meta>タグ内でviewportメタ・キーを使用してビュー・ポート・ディメンションを指定できます。

例3-3 ビュー・ポート・ディメンションの設定

<af:document ...>
   <f:facet name="metaContainer">
     <trh:meta name="viewport" content="width=device-width"/>
   </f:facet>
   ...
 </af:document>

viewportメタ・キーのwidthプロパティには特定のピクセル数を設定できる他、例3-3に示すようにdevice-width定数を使用することもできます。Apple(iOS)システムでは、ページの幅に設定された値が縦方向と横方向の両方で同じになります(つまり、Safariブラウザでは縦の幅に設定された値が横の幅に使用されます)。

注意: iPhone 4のRetinaなどの高解像度ディスプレイ上にあるピクセルは、iPhone 3GSなどの低解像度デバイス上にあるピクセルと1対1では対応していません。このようにiPhone 4のディスプレイ上により多くのピクセルが存在しても、iPhone 3GS用のwidthプロパティに定義されたピクセル数は、iPhone 4でも物理的に同じ長さであるとみなされます。

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

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

3.9.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.9.2 サポートされない属性

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

• accessKey

• shortDesc(tooltip)