| Oracle® Fusion Middleware Oracle ADFモバイル・ブラウザ・アプリケーションの開発 12c (12.2.1.1) E77401-01 |
|
 前 |
 次 |
この章では、ADFモバイル・ブラウザでサポートされているApache MyFaces Trinidadコンポーネントについて説明します。
この章には次の項が含まれます:
ADFモバイル・ブラウザでは、60を超えるApache MyFaces Trinidadコンポーネントがサポートされているため、モバイル・デバイスの画面に適切にレンダリングする豊富なコンポーネント・セットを使用してアプリケーションを構築できます。詳細は、Apache MyFaces Trinidadのサイト(http://myfaces.apache.org/trinidad/)を参照してください。
待機時間が長く帯域幅が小さいネットワークを使用するモバイル環境では、モバイル・ユーザー向けのアプリケーションの応答性が低下します。画面のリフレッシュは遅くなり、モバイル・ユーザーの操作性は低くなります。ADFモバイル・ブラウザでサポートされている部分ページ・レンダリング(PPR)を使用すると、モバイル・デバイスの画面更新時に全体をリフレッシュする必要がなくなるため、サーバーからのリクエスト・データ量を最小化することによって低速な接続による画面更新への悪影響を抑えることができます。AJAX (Asynchronous JavaScript and XML)がサポートされていないブラウザでは、PPRのかわりにページ全体のレンダリングが使用されます。たとえば、(JavaScriptがサポートされていない)基本的なHTMLブラウザでページを送信すると、ページ全体がリフレッシュされます。
|
注意: BlackBerry 4.5(およびそれ以前のバージョン)のブラウザでは、PPRがサポートされていません。特定のフォーム関連コンポーネントにautosubmit属性を指定すると、ユーザーがフィールドから出た後にページが送信されます。その後で、ページの部分リフレッシュではなく、完全リフレッシュが行われます。 |
ADFモバイル・ブラウザでは、ダイアログ(ユーザー入力を取得するためにアプリケーションで使用されるページ)がサポートされています。モバイル・ブラウザではダイアログ・ボックス(ポップアップ・ウィンドウ)を含む新しいウィンドウを開くことができないため、現在のページの状態が自動的に保存された後、ブラウザのメイン・ウィンドウ内に新しいページとしてダイアログ・ボックスが表示されます。
BlackBerry 4.5以前のバージョン用のブラウザでは、リスト・サブレベル内の箇条書き(tr:panelListコンポーネント内のものなど)がインデントされずに大きく表示されます。BlackBerryの表処理では、ブラウザで水平スクロールがサポートされていないため、複雑なレイアウトが影響を受ける可能性があります。かわりに表の行が折り返されて複数の表示行になるため、レイアウトが崩れる場合があります。詳細は、第6章「BlackBerry 4.2から4.5向けの設計ガイドライン」を参照してください。
ADFモバイル・ブラウザでは、ユーザー入力をサポートするコア・コンポーネントである、入力テキスト・フィールドおよびリストがサポートされています。
次のコンポーネントを使用して入力フィールドを作成できます。
tr:inputColor
|
注意: モバイル・ブラウザでは、tr:inputColorコンポーネント用のインラインchooseColorまたはcolorダイアログはサポートされていません。 |
tr:inputDate
tr:inputHidden
tr:inputText
|
注意: 基本的なHTMLブラウザでは、tr:inputTextコンポーネントのautosubmit属性がサポートされていません。 |
|
注意: 幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:inputTextコンポーネントが最適化されます。詳細は、第7章「幅が狭い画面のサポートおよびユーザー・エージェントの詳細のサポート」を参照してください。 |
次のコンポーネントを使用してリストを作成できます。
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属性がサポートされていません。 |
ADFモバイル・ブラウザでは、モバイル・デバイス・アプリケーションでの出力をサポートするApache MyFaces Trinidadのコア・コンポーネントが使用されます。これらのコンポーネントには、テキストおよびイメージを表示するコンポーネント、さらにテキストを表示または非表示にするコンポーネントがあります。
次のコンポーネントを使用すると、テキストを表示できます。
tr:iterator
tr:message
tr:messages
|
注意: コンポーネント固有のメッセージは、デスクトップ・ブラウザで表示されるのと同じようにモバイル・ブラウザで表示されるのではありません。そうではなく、メッセージ・コンポーネント(tr:messageまたはtr:messages)がWebページに配置された領域に表示されます。 |
tr:outputDocument
tr:outputForwarded
tr:outputLabel
tr:outputText
次のコンポーネントを使用すると、イメージを表示できます。
tr:icon
tr:image
tr:panelTip
次のコンポーネントを使用すると、アイテムの表示または非表示が可能になります。
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属性はサポートされていません。 |
ADFモバイル・ブラウザでサポートされているレイアウト・コンポーネントには、ページ自体を管理するコンポーネント(tr:document、tr:formなど)や、tr:group、tr:panelFormLayout、tr:panelGroupLayoutのようなページの各セクションをレイアウトするコンポーネントがあります。
次のコンポーネントを使用すると、ページを管理できます。
tr:document
tr:form
|
注意: ADFモバイル・ブラウザでは、tr:formコンポーネントのdefaultCommand属性はサポートされていません。 |
tr:page
|
注意: ADFモバイル・ブラウザでは、tr:pageコンポーネントのtr:pageファセットはサポートされていません。 |
次のADF Facesのコア・タグでは、モバイル・デバイス・アプリケーション用のページ・レイアウトがサポートされています。
tr:group
tr:panelBorderLayout
|
注意: tr:panelBorderLayoutコンポーネントでは、topおよびbottomファセットのみがサポートされています。ADFモバイル・ブラウザでは、次のファセットはサポートされていません。
これらのサポートされていないファセットを使用している場合、 |
tr:panelBox
tr:panelFormLayout
tr:panelGroupLayout
tr:panelHeader
tr:panelHorizontalLayout
|
注意: ADFモバイル・ブラウザでは、tr:panelHorizontalLayoutコンポーネントのhalign=end属性はサポートされていません。 |
tr:panelLabelAndMessage
|
注意: 幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:panelLabelAndMessageコンポーネントが最適化されます。詳細は、7.1項「幅が狭い画面のサポートの特定」を参照してください。 |
tr:panelPage
tr:panelPageHeader
|
注意: ADFモバイル・ブラウザでサポートされているのは、tr:panelPageHeaderコンポーネントの次のファセットのみです。
|
tr:panelRadio
|
注意: 幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:panelRadioコンポーネントが最適化されます。詳細は、7.1項「幅が狭い画面のサポートの特定」を参照してください。 |
tr:panelCaptionGroup
次のコンポーネントは、ページの領域割当てを制御します。
tr:separator
tr:spacer
tr:subform
ADFモバイル・ブラウザでは、ユーザーがアプリケーションの他のページや外部の場所にナビゲートできるようにする、ボタン、リンク、ブレッドクラムなどのコンポーネントがサポートされています。
ADFモバイル・ブラウザでは、次のボタン・タイプがサポートされています。
tr:commandButton
|
注意: icon属性を設定するとtext属性が表示されなくなるため、ボタンにはテキストまたはイメージのいずれかを定義できますが、両方は定義できません。disabled属性をtrueに設定すると、icon属性が設定されたtr:commandButtonコンポーネントがリンクを持たない静的イメージとしてレンダリングされます。 |
tr:goButton
tr:goButtonコンポーネントを使用して電子メール、電話およびGoogleマップをアプリケーションに統合する方法の詳細は、第8章「ADFモバイル・ブラウザ・アプリケーションの拡張」を参照してください。
ADFモバイル・ブラウザでは、ハイパーリンクを作成するための次のコンポーネントがサポートされています。
tr:commandLink
|
注意: 基本的なモバイルHTMLブラウザではtr:commandLinkコンポーネントが入力要素としてレンダリングされるため、その子コンポーネントはレンダリングできません。基本的なモバイルHTMLブラウザでの入力要素の詳細は、5.2項「基本的なHTMLモバイル・ブラウザ用のアプリケーションの開発」を参照してください。 |
tr:goLink
tr:goLinkコンポーネントを使用して電子メール、電話およびGoogleマップをアプリケーションに統合する方法の詳細は、第8章「ADFモバイル・ブラウザ・アプリケーションの拡張」を参照してください。
ADFモバイル・ブラウザでは、次のナビゲーション・コンポーネントがサポートされています。
tr:breadcrumbs
|
注意: 幅が狭い画面のデバイス(画面の幅が240ピクセル未満であるデバイス)では、Trinidadによりtr:breadcrumbsコンポーネントが最適化されます。詳細は、第7章の「幅が狭い画面のサポートの特定」を参照してください。 |
tr:commandNavigationItem
|
注意: 次のコンポーネントでdisabled属性をtrueに設定した場合、tr:commandNavigationItemはレンダリングされません。
|
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章の「幅が狭い画面のサポートの特定」を参照してください。 |
ADFモバイル・ブラウザでは、『Oracle Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされたADFデータ視覚化コンポーネントの作成に関する項に記載されたデータ視覚化ツール(DVT)がサポートされています。
ADFモバイル・ブラウザでは、次のグラフ・タイプがサポートされています。
面
棒
棒(横)
バブル
組合せ(横棒および折れ線)
ファンネル
折れ線
パレート
円
レーダー
散布図/極
スパーク
株価
ADFモバイル・ブラウザでは、次のゲージ・タイプがサポートされています。
ダイアル
ステータス・メーター
ステータス・メーター(垂直)
LED
Oracle JDeveloperにはDVTが組み込まれているため、グラフおよびゲージをすばやく追加できます。これらのコンポーネントをアプリケーションに追加するには、まずドラッグ・アンド・ドロップ操作によりデータ・コントロールをエディタ・ウィンドウに移動し、続いてコンテキスト・メニューから「トリニダード・ゲージ」または「トリニダード・グラフ」を選択します。たとえば、図3-1は、コレクションをエディタにドラッグするときに表示されるコンテキスト・メニューを示しています。
「トリニダード・グラフ」または「トリニダード・ゲージ」オプションを選択すると、図3-2に示すように、DVTウィザードが表示されて「コンポーネント・ギャラリ」ページが開きます。このページで、DVTのタイプを選択します。
|
注意: ADFモバイル・ブラウザは、静的グラフおよびゲージのみをサポートしており、これらは、PNGイメージとしてレンダリングされます。このイメージ形式がサポートされているすべてのモバイル・デバイスで、グラフおよびゲージを表示できます。 |
ADFモバイル・ブラウザ・アプリケーションでは、構造化データを表の行および列または階層ツリーとして表示できます。
ADFモバイル・ブラウザでは、次のコンポーネントで構成される表がサポートされています。
tr:table
|
注意: ADFモバイル・ブラウザでは、tr:tableコンポーネントのallDetailsEnabled属性がサポートされていません。この属性は常にfalseに設定されます。 |
tr:column
|
注意: tr:columnタグをネストして列グループを作成した場合、列グループのヘッダー・ファセットはレンダリングされません。 |
単一列を持つ表を作成すれば、モバイル・デバイスでの表の表示を最適化できます。
ADFモバイル・ブラウザでは、tr:treeコンポーネントがサポートされています。
|
注意: tr:treeは、基本的なHTMLブラウザではレンダリングされない可能性があります。 |
<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固有のメタ・タグ・キーの説明を参照してください。このドキュメントは、iOS開発者ライブラリ(http://developer.apple.com/library/ios/navigation/)から入手できます。
<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>
一般的にWebページでは、ページの両側が空白になるように、ハードコード化された幅が指定されています。デスクトップ・ブラウザでページを表示する場合にはこれは問題ではありませんが、同じページをモバイル・デバイスで表示するとこの空白が原因で文字が小さくなってしまうことがあります。さらに、表示されるページ・コントロールもユーザーが指先で操作するには小さすぎる場合があるため、ページを拡大してから操作することが必要になります。Apple社(iOS)、Google社(Android)、Microsoft社(Windows Phone 7)の各オペレーティング・システムでは、標準的なビュー・ポート幅が想定されてページが小さな画面に収まるようにレンダリングされるため、Webページをモバイル・デバイスで表示したときにこのサイズ調整が行われます。
モバイル・デバイスのネイティブ解像度で適切にページを表示できるようにするため、例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でも物理的に同じ長さであるとみなされます。 |
ADFモバイル・ブラウザは、一部のApache MyFaces Trinidadコンポーネントまたは特定のコンポーネント属性をサポートしていません。
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
ADFモバイル・ブラウザは、いずれのApache MyFaces Trinidadコンポーネントでも次の属性をサポートしていません。
accessKey
shortDesc (tooltip)
