Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル・ブラウザ開発者ガイド

11g リリース2 (11.1.2.3.0)

B66158-03(原本部品番号:E16178-04)

目次

タイトルおよび著作権情報

はじめに

- ドキュメントのアクセシビリティについて

- 対象読者

- 関連ドキュメント

- 表記規則

1 Oracle ADFモバイル・ブラウザの概要

- 1.1 ADFモバイル・ブラウザについて

- 1.1.1 Java Server FacesおよびApplication Development Frameworkについて

- 1.1.2 ADFモバイル・ブラウザを使用したモバイル・アプリケーションの開発

- 1.2 サポートされているモバイル・ブラウザ

2 ADFモバイル・ブラウザ環境の構成

- 2.1 ADFモバイル・ブラウザの開発環境について

- 2.2 ADFモバイル・ブラウザの開発環境の構成

- 2.2.1 モバイル・アプリケーションおよびプロジェクトの作成方法

- 2.2.2 モバイル・アプリケーションおよびプロジェクト作成時の処理内容

- 2.3 ADFモバイル・ブラウザ・アプリケーションの開発

- 2.3.1 モバイルJSFページの開発方法

- 2.3.2 モバイルJSFページ作成時の処理内容

- 2.4 ADFモバイル・ブラウザ・アプリケーションのテスト

- 2.4.1 エミュレータでのADFモバイル・ブラウザ・アプリケーションのテスト方法

- 2.4.2 ブラウザの設定についての考慮事項

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

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

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

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

- 3.1.3 ダイアログ

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

- 3.2 入力コンポーネント

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

- 3.2.2 リストの作成

- 3.3 出力コンポーネント

- 3.3.1 テキストの表示

- 3.3.2 イメージの表示

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

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

- 3.4.1 ページの管理

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

- 3.4.3 空白の挿入

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

- 3.5.1 ボタンの作成

- 3.5.2 リンクの作成

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

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

- 3.7 表およびツリー

- 3.7.1 表の作成

- 3.7.2 ツリーの作成

- 3.8 HTML <meta>タグの生成

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

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

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

- 3.9.1 サポートされないコンポーネント

- 3.9.2 サポートされない属性

4 スキニング

- 4.1 ADFモバイル・ブラウザのスキニングについて

- 4.2 ADFモバイル・ブラウザのスキニングの実装

- 4.2.1ADFモバイル・スキンの拡張

- 4.2.2 実行時の処理内容

- 4.3 ADFモバイル・ブラウザのスキニングの適用

- 4.3.1 ヘッダー

- 4.3.1.1 タイトルのみのヘッダーの作成

- 4.3.1.2 タイトルおよびリンク付きのヘッダーの作成

- 4.3.2 表コンポーネント

- 4.3.2.1 複数列の表

- 4.3.2.2 イメージおよびリンク付きの主要な詳細の追加

- 4.3.2.3 リンク付きの主要な詳細の作成

- 4.3.2.4 リンクなしの主要な詳細の作成

- 4.3.3 パネル・リスト・コンポーネント

- 4.3.4 panelFormLayout

- 4.3.5 パネル・アコーディオン

5 基本的なHTMLモバイル・ブラウザのサポート

- 5.1 基本的なHTMLモバイル・ブラウザのサポートについて

- 5.1.1 基本的なHTMLモバイル・ブラウザのサポート要件

- 5.2 基本的なHTMLモバイル・ブラウザ用のアプリケーションの開発

- 5.3 基本的なHTMLモバイル・ブラウザのスタイル設定

6 BlackBerry 4.2から4.5向けの設計ガイドライン

- 6.1 BlackBerryブラウザの表示動作について

- 6.2 折返しを回避するための表の書式設定

- 6.2.1 表内におけるフィールドの折返しの回避方法

- 6.3 ラベルおよびメッセージ・パネルの書式設定

- 6.4 列幅の書式設定

- 6.5 BlackBerryスマートフォンでの表示の差異についての考慮事項

- 6.5.1 最小フォント・サイズの変更

- 6.5.2 フォーム・ファクタの違い

7 幅が狭い画面のサポートおよびユーザー・エージェントの詳細のサポート

- 7.1 幅が狭い画面のサポートの特定

- 7.1.1 Trinidadによる幅が狭い画面の最適化の特定方法

- 7.2 EL式を使用したユーザー・エージェント機能の特定

- 7.2.1 ユーザー・エージェントの詳細の特定方法

- 7.2.2 ブラウザの機能の特定方法

8 ADFモバイル・ブラウザ・アプリケーションの拡張

- 8.1 電子メール、電話およびGoogleマップを使用するためのアプリケーション拡張の概要

- 8.2 電子メール・クライアントの統合

- 8.2.1 メールのプロパティの追加

- 8.3 電話の統合

- 8.4 Googleマップの統合

- 8.4.1 ルート案内のプログラミング

- 8.4.2 iPhone上でのGoogleマップのサポート

- 8.5 ページ表示ディメンションについての考慮事項

- 8.5.1 iPhone用のビュー・ポートの設定

Oracle® Fusion Middleware

Oracle Application Development Frameworkモバイル・ブラウザ開発者ガイド

11g リリース2 (11.1.2.3.0)

B66158-03(原本部品番号:E16178-04)

2012年8月

Oracle JDeveloperを使用して、Apache MyFaces Trinidad Webクライアント・コンポーネントで構成されるモバイル・ブラウザ・ベースのアプリケーションを作成する方法について説明する、Oracle Application Development Framework (Oracle ADF)の開発者のためのドキュメント。

Oracle Fusion Middleware Oracle Application Development Frameworkモバイル・ブラウザ開発者ガイド 11g リリース2 (11.1.2.3.0)

B66158-03

Copyright © 2012, Oracle and/or its affiliates.All rights reserved.

原本著者: John Bassett

原本協力著者: Mamallan Uthaman

このソフトウェアおよび関連ドキュメントの使用と開示は、ライセンス契約の制約条件に従うものとし、知的財産に関する法律により保護されています。ライセンス契約で明示的に許諾されている場合もしくは法律によって認められている場合を除き、形式、手段に関係なく、いかなる部分も使用、複写、複製、翻訳、放送、修正、ライセンス供与、送信、配布、発表、実行、公開または表示することはできません。このソフトウェアのリバース・エンジニアリング、逆アセンブル、逆コンパイルは互換性のために法律によって規定されている場合を除き、禁止されています。

ここに記載された情報は予告なしに変更される場合があります。また、誤りが無いことの保証はいたしかねます。誤りを見つけた場合は、オラクル社までご連絡ください。

このソフトウェアまたは関連ドキュメントが、米国政府機関もしくは米国政府機関に代わってこのソフトウェアまたは関連ドキュメントをライセンスされた者に提供される場合は、次のNoticeが適用されます。

U.S. GOVERNMENT RIGHTS Programs, software, databases, and related documentation and technical data delivered to U.S. Government customers are "commercial computer software" or "commercial technical data" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations.As such, the use, duplication, disclosure, modification, and adaptation shall be subject to the restrictions and license terms set forth in the applicable Government contract, and, to the extent applicable by the terms of the Government contract, the additional rights set forth in FAR 52.227-19, Commercial Computer Software License (December 2007).Oracle America, Inc., 500 Oracle Parkway, Redwood City, CA 94065.

このソフトウェアまたはハードウェアは様々な情報管理アプリケーションでの一般的な使用のために開発されたものです。このソフトウェアまたはハードウェアは、危険が伴うアプリケーション(人的傷害を発生させる可能性があるアプリケーションを含む)への用途を目的として開発されていません。このソフトウェアまたはハードウェアを危険が伴うアプリケーションで使用する際、このソフトウェアまたはハードウェアを安全に使用するために、適切な安全装置、バックアップ、冗長性(redundancy)、その他の対策を講じることは使用者の責任となります。このソフトウェアまたはハードウェアを危険が伴うアプリケーションで使用したことに起因して損害が発生しても、オラクル社およびその関連会社は一切の責任を負いかねます。

OracleおよびJavaはOracle およびその関連企業の登録商標です。その他の名称は、それぞれの所有者の商標または登録商標です。

Intel、Intel Xeonは、Intel Corporationの商標または登録商標です。すべてのSPARCの商標はライセンスをもとに使用し、SPARC International, Inc.の商標または登録商標です。AMD、Opteron、AMDロゴ、AMD Opteronロゴは、Advanced Micro Devices, Inc.の商標または登録商標です。UNIXはThe Open Groupの登録商標です。

このソフトウェアまたはハードウェアおよびドキュメントは、第三者のコンテンツ、製品、サービスへのアクセス、あるいはそれらに関する情報を提供することがあります。オラクル社およびその関連会社は、第三者のコンテンツ、製品、サービスに関して一切の責任を負わず、いかなる保証もいたしません。オラクル社およびその関連会社は、第三者のコンテンツ、製品、サービスへのアクセスまたは使用によって損失、費用、あるいは損害が発生しても、一切の責任を負いかねます。

はじめに

Oracle Application Development Frameworkモバイル・ブラウザ開発者ガイドへようこそ

ドキュメントのアクセシビリティについて

オラクル社のアクセシビリティへの取組みの詳細は、Oracle Accessibility ProgramのWebサイトhttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=docaccを参照してください。

Oracleサポートへのアクセス

Oracleのお客様は、My Oracle Supportにアクセスして電子サポートを受けることができます。詳細は、http://www.oracle.com/pls/topic/lookup?ctx=acc&id=infoまたはhttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=trs (聴覚障害者向け)を参照してください。

対象読者

このドキュメントは、モバイル・デバイス用ブラウザ・アプリケーションの開発者を対象としています。

関連ドキュメント

詳細は、次の項を参照してください。

- 『Oracle Fusion Middleware Oracle Application Development FrameworkのためのFusion開発者ガイド』

- 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』

- Oracle Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド

表記規則

このマニュアルでは次の表記規則を使用します。

規則

意味

太字

太字は、操作に関連するGraphical User Interface要素、または本文中で定義されている用語および用語集に記載されている用語を示します。

イタリック体

イタリックは、ユーザーが特定の値を指定するプレースホルダ変数を示します。

固定幅フォント

固定幅フォントは、段落内のコマンド、URL、サンプル内のコード、画面に表示されるテキスト、または入力するテキストを示します。

1 Oracle ADFモバイル・ブラウザの概要

この章では、Oracle Application Development Frameworkモバイル(ADFモバイル)・ブラウザの概要について説明します。

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

- 1.1項「ADFモバイル・ブラウザについて」

- 1.2項「サポートされているモバイル・ブラウザ」

1.1 ADFモバイル・ブラウザについて

Oracle Application Development Frameworkモバイル(ADFモバイル)・ブラウザは、エンタープライズ・モバイル・アプリケーションの迅速な開発を可能にする標準ベースのフレームワークです。Oracle Fusion Middleware 11g リリース2のADFモバイル・ブラウザは、Oracle ADFを、モバイル・デバイス上で実行されるブラウザに拡張するものです。ADFモバイル・ブラウザはJava Server Faces(JSF)のコンポーネント・モデルに基づいて構築されているため、モバイル・ブラウザ用のアプリケーションを迅速に開発できます。ADFモバイル・ブラウザのモバイル固有の機能がJSFに拡張されたことで、デスクトップ用にJSFアプリケーションを開発するのと同じ方法を使用してモバイル・アプリケーションを開発できるようになりました。

ADFモバイル・ブラウザ・アプリケーションを開発する場合、ADFモバイル・ブラウザによって、異なるブラウザ・タイプで適切に動作するアプリケーションの開発が可能になるため、異なるブラウザの制限または機能に集中する必要はありません。ADFモバイル・ブラウザのレンダラにより、確実にターゲット・ブラウザがコンテンツを正しく使用できるようになります。このレンダラでは、HTML、JavaScript、CSS、DOM、XMLHttpRequestに関するブラウザ実装の差異、およびシステム・パフォーマンスの違いが処理されます。たとえば、ブラウザでXMLHttpRequestがサポートされていないためサーバーに部分的なページ・リクエストを送信できない場合、ADFモバイル・ブラウザのAJAX(Asynchronous JavaScript and XML)のサポートにより、アプリケーションで自動的にページ全体の送信に戻してページを機能させることができます。

注意:

Oracle Fusion Middleware 11g リリース2では、ADFモバイル・ブラウザにHTMLおよびJavaScriptサポートが必要です。

1.1.1 Java Server FacesおよびApplication Development Frameworkについて

Java Server Faces(JSF)は、機能および動作を定義する事前作成コンポーネントを使用して開発者がアプリケーションを作成できるようにするための標準であり、JSR-127によって規定されています。図1-1に示すように、JSFでは、Webアプリケーションの開発を単純化するModel-View-Controller(MVC)メカニズムが採用されています。そのレンダーキットは、コンポーネントを特定のマークアップ言語に変換したり、特定のマークアップ言語をコンポーネントに変換したりします。レンダラでは、コンポーネントのマークアップ表現およびそれらによるブラウザ・リクエストの解釈方法を生成することによって、マークアップおよびブラウザ・リクエストに対するレスポンスの作成を抽象化します。

JSF開発では、マークアップではなくコンポーネントに焦点を当てます。JSFを使用して、JSFコンポーネント・タグを含むJSPページを作成します。(FacesServletを介して)ユーザーがこのページにアクセスすると、JSFではユーザーのデバイスで指定したレンダーキットが使用され、出力が適切になるようにマークアップがエンコードされます。たとえば、ユーザーのデバイスでデスクトップ・ブラウザに対しHTMLを指定すると、レンダーキットのマークアップ・エンコーディングがHTMLページになります。適切なコンテンツのレンダリングに加え、JSFではユーザーによる操作がサポートされています。

図1-1 ADFモバイル・ブラウザ・アーキテクチャ

Application Development Framework(ADF)は標準的なJSFテクノロジに基づいて構築されており、次のものを提供します。

- 大規模なコンポーネント・セット(JSFでは基本的なコンポーネントのみが提供されるため)。

- これらのコンポーネントをHTMLブラウザでサポートするレンダラ(AJAXテクノロジを使用したアプリケーション用のレンダーキットを含む)。

- コンバータ、バリデータおよびイベント。

1.1.2 ADFモバイル・ブラウザを使用したモバイル・アプリケーションの開発

デスクトップ・ブラウザ・アプリケーションを開発する場合と同じプログラミング・モデルとコンポーネント・セットを使用して、モバイル・デバイス用のモバイル・ブラウザ・アプリケーションを開発できます。ADFモバイル・ブラウザ・アプリケーションの開発方法は、ADF Webアプリケーションの開発方法とほぼ同じですが、ADFモバイル・ブラウザ・アプリケーションの開発ではApache MyFaces Trinidadコンポーネントで構成されるモバイルJSFページのみを使用する点が異なります。ADF Webアプリケーションの開発の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』を参照してください。

注意:

ADFモバイル・ブラウザ・アプリケーションの開発に、ADF Facesコンポーネントを使用することはできません。Apache MyFaces Trinidadコンポーネントを使用する必要があります。

ADFモバイル・ブラウザを使用してモバイル・デバイス用のモバイル・ブラウザ・アプリケーションを開発する場合は、デスクトップ用のJSFアプリケーションを開発する場合と同じ方法を利用しながら、特定のモバイル拡張機能をいくつか持たせます。60を超えるApache MyFaces Trinidadコンポーネントがサポートされているため、画面が小さいモバイル・デバイスに適切にレンダリングされる豊富なコンポーネント・セットを使用してアプリケーションを構築できます。このようにして、デスクトップ・ブラウザ・アプリケーションのモデル・レイヤーおよびコントローラ・レイヤーを再利用して、同様のApache MyFaces Trinidadコンポーネントからモバイル・デバイス用の新しいビュー・レイヤーを作成できます。

ADFモバイル・ブラウザによるパフォーマンス向上方法

PDAコンポーネントのレンダラは、ワイヤレス・ネットワーク上でモバイル・デバイスに送信するWebページのペイロードを最小化することによって、パフォーマンスが向上するように最適化されています。待機時間が長く帯域幅が小さいワイヤレス・ネットワークを使用するモバイル環境では、エンド・ユーザーに効率的なアプリケーションを提供するうえで、部分ページ・レンダリング(PPR)が不可欠です。AJAXがサポートされているモバイル・ブラウザの場合、ADFモバイル・ブラウザでは、サーバーからリクエストされたデータの軽量化と、アプリケーションの応答性の向上を実現する、特定のコンポーネントのPPRがサポートされます。3.1.2項「部分ページ・レンダリング」も参照してください。

1.2 サポートされているモバイル・ブラウザ

ADFモバイル・ブラウザでは、表1-1にリストされているブラウザでApache MyFaces Trinidadコンポーネントがサポートされています。Trinidadの新しいバージョンはOracle JDeveloperに統合でき、Oracle Fusion Middleware 11g リリース2のADFモバイル・ブラウザとともに使用できます。

表1-1 サポートされているブラウザおよびサポートされているモバイル機能

ブラウザ

JavaScriptサポート

CSSサポート

PPRサポート

BlackBerryバージョン4.6以上

あり

あり

あり

BlackBerryバージョン4.2から4.5

なし

あり

なし

Microsoft Windows Mobile 5

あり

あり

あり(相違点あり)

Microsoft Windows Mobile 6

あり

あり

あり

Apple iPhone Safari

あり

あり

あり

Nokia s60シリーズ

あり

あり

なし

単純なHTML(Opera Mini、Opera MobileおよびSkyfireなど)

なし

あり

なし

2 ADFモバイル・ブラウザ環境の構成

この章では、ADFモバイル・ブラウザ・アプリケーションに適した開発環境を構成する方法およびモバイル・ブラウザ・アプリケーションを構築してテストする方法について説明します。

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

- 2.1項「ADFモバイル・ブラウザの開発環境について」

- 2.2項「ADFモバイル・ブラウザの開発環境の構成」

- 2.3項「ADFモバイル・ブラウザ・アプリケーションの開発」

- 2.4項「ADFモバイル・ブラウザ・アプリケーションのテスト」

2.1 ADFモバイル・ブラウザの開発環境について

ADFモバイル・ブラウザ・アプリケーションの開発方法は、ADF Webアプリケーションの開発方法とほぼ同じですが、ADFモバイル・ブラウザ・アプリケーションの開発ではApache MyFaces Trinidadコンポーネントで構成されるモバイルJSFページのみを使用する点が異なります。

注意:

ページ・フラグメント、ダイアログ内のポップアップおよびリージョン・サポートを除き、ADFモバイル・ブラウザ・アプリケーションの開発にはADFタスク・フローを使用できます。ADFタスク・フローを使用するADFモバイル・ブラウザ・アプリケーションでは、trinidad-simpleスキン・ファミリのみがサポートされます。

ADFモバイル・ブラウザ・アプリケーションを作成するには、次の手順を実行します。

- アプリケーションおよびプロジェクトの作成による環境の構成

- Webプロジェクトの追加

- Apache MyFaces Trinidadコンポーネントを使用したJSFページの追加

2.2 ADFモバイル・ブラウザの開発環境の構成

ADFモバイル・ブラウザ・アプリケーションとデスクトップ・ブラウザ用のADF Webアプリケーションの開発方法は、Webプロジェクトの作成の点でのみ異なります。詳細は、2.3項「ADFモバイル・ブラウザ・アプリケーションの開発」を参照してください。

2.2.1 モバイル・アプリケーションおよびプロジェクトの作成方法

環境を構成するには、まず、ADFモバイル・ブラウザ・テクノロジを備えたプロジェクトを含むADFモバイル・ブラウザ・アプリケーションを作成します。

ADFモバイル・ブラウザ・アプリケーションおよびADFモバイル・ブラウザ・プロジェクトを作成するには、次の手順を実行します。

1. 「ファイル」を選択し、「新規」を選択します。

図2-1 新規ギャラリ

2. 「新規ギャラリ」で「一般」を展開し、「アプリケーション」、続いて「Fusion Webアプリケーション(ADF)」を選択し、「OK」をクリックします。

3. 図2-2に示すように、「Fusion Webアプリケーション(ADF)の作成」ウィザードの「アプリケーションの名前付け」ページでアプリケーションの名前を入力し、必要に応じて「ディレクトリ」フィールドにアプリケーションの場所を入力します。

図2-2 「アプリケーションの名前付け」ページ

4. 「終了」をクリックします。
「Fusion Webアプリケーション(ADF)」を選択すると、モバイル・ビュー・プロジェクトによって使用されるモデル・プロジェクトが作成されます。図2-3は、「アプリケーション・ナビゲータ」に表示された、アプリケーションのModelプロジェクトおよびその生成済View Controllerプロジェクトを示しています。

図2-3 「アプリケーション・ナビゲータ」に表示されたFusion Webアプリケーションとそのプロジェクト

注意:

生成されたView Controllerプロジェクトを使用してModelプロジェクト内でビジネス・ロジックを設計しないでください。かわりに、次の手順を実行してモバイルModel View Controllerプロジェクトを作成します。

5. 次のように、モバイルModel View Controllerを作成します。

1. 「ファイル」、「新規」を選択して作成します。「新規」ギャラリが表示されます。

2. 「新規ギャラリ」で「カテゴリ」を展開し、「プロジェクト」、続いて「カスタム・プロジェクト」を選択し、「OK」をクリックします。

3. 「カスタム・プロジェクトの作成」ウィザードで、まずプロジェクト名を入力します。たとえば、mvc(Model View Controllerの省略名)と入力します。

ヒント:

モバイル・デバイスへのURLの入力を簡単にするために、アプリケーションとプロジェクトの両方に対して、小文字で短い名前を入力します。

4. 「ADFモバイル・ブラウザ」を「選択可能」リストから「選択済」リストに移動することによって、プロジェクト用にADFモバイル・ブラウザ機能を選択します。

図2-4 ADFモバイル・ブラウザ・プロジェクト用のADFモバイル・ブラウザ・テクノロジの選択

図2-4は、「選択可能」ウィンドウ内の「ADFモバイル・ブラウザ」機能を示しています。「ADFモバイル・ブラウザ」機能を「選択済」ウィンドウに移動すると、Java、JavaServer Faces(JSF)、JSPおよびサーブレット・テクノロジがプロジェクトで使用可能になり、図2-5に示すようにこれらも「選択済」ウィンドウに表示されます。

図2-5 ADFモバイル・ブラウザ・プロジェクト用に選択されたADFモバイル・ブラウザおよびサポート機能

5. アプリケーションでADFタスク・フローを使用する場合は、「ADFページ・フロー」機能を「選択済」ウィンドウに追加します。図2-6に示すように、「ADFページ・フロー」機能により、ADF Faces、ADFページ・フロー、TrinidadおよびXMLテクノロジが追加されます。

図2-6 ADFモバイル・ブラウザ・プロジェクトへの「ADFページ・フロー」機能の追加

6. 「次へ」をクリックして「Java設定の構成」ページをナビゲートし、「終了」をクリックします。

2.2.2 モバイル・アプリケーションおよびプロジェクト作成時の処理内容

図2-7に示すように、「アプリケーション・ナビゲータ」のFusion Webアプリケーション(adfm)内に、モバイルModel View Controllerプロジェクト(mvc)が表示されます。

図2-7 「アプリケーション・ナビゲータ」のモバイルADF Model View Controllerプロジェクト

Model View Controllerプロジェクトを作成することで、モバイル・アプリケーションのページ・フロー定義ファイルfaces-config.xmlも作成されます。ページ・フロー作成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』「ページ・フローの定義」を参照してください。

ADFモバイル・ブラウザ機能を追加したため、Apache MyFaces Trinidadライブラリが自動的にワークスペースにロードされており、図2-10に示すように、モバイルJSFページの作成時にはTrinidadコンポーネント・パレットがロードされます。

2.3 ADFモバイル・ブラウザ・アプリケーションの開発

モバイル・ブラウザ・アプリケーションの開発では、Webプロジェクト内にWebページを作成します。その他の、モバイル・ブラウザ・アプリケーションの開発方法は、デスクトップ・ブラウザ用のADF Webアプリケーションの開発方法と同じです。通常、アプリケーションには、ユーザー・インタフェースを実装する場合はWebプロジェクトを、ビジネス・レイヤーを実装する場合はADFビジネス・コンポーネントまたはOracle EclipseLinkプロジェクトを作成します。

2.3.1 モバイルJSFページの開発方法

ADFモバイル・ブラウザ・アプリケーションの開発では、最初にJSPページを作成してから、そこにApache MyFaces Trinidadコンポーネントを移入します。

モバイルJSFページを作成するには、次の手順を実行します。

1. 「ファイル」を選択し、「新規」を選択します。

2. 「新規ギャラリ」で「カテゴリ」を展開し、「Web層」、続いて「JSF/Facelets」を選択し、「ページ」を選択します。「OK」をクリックします。

注意:

「フィルタ条件」リストから、「プロジェクト・テクノロジ」(デフォルト)を選択する必要があります。

図2-8 JSFページの場合の「新規ギャラリ」

3. 図2-9に示すように、「JSFページの作成」ダイアログでJSFページの名前を入力します。必要に応じて、ページのディレクトリの場所を入力します。

注意:

アプリケーションに「ADFモバイル・ブラウザ」機能を追加済であるため、図2-9に示すように、デフォルトで「モバイル機器での表示」オプションが選択されます。

4. 図2-9 「JSFページの作成」ダイアログ・ボックス

図2-10は、page1.jspというモバイルJSPページのデザイナを示しています。

5. 「コンポーネント・パレット」で、図2-10のように「Trinidad」を選択してから、Apache MyFaces Trinidadコンポーネントを使用してページを作成します。ページの作成方法は、デスクトップ用のADF Webページの作成方法と同じです。

図2-10 Trinidadコンポーネント・パレットの使用

2.3.2 モバイルJSFページ作成時の処理内容

「モバイル機器での表示」オプションがデフォルトで選択されているため、ビジュアル・エディタのページ・デザイナでは、図2-10のようにモバイル・デバイスのサイズが反映されます。このオプションにより、次のADFスキン関連の構成ファイルとスタイルシートも作成され、ADFモバイル・ブラウザに構成されます。表2-1は、ADFモバイル・ブラウザView ControllerプロジェクトのWebコンテンツ・フォルダにある、これらのファイルを示しています。

表2-1 スキニング関連のアーティファクト

スキニング・ファイル

場所

説明

trinidad-config.xml

モバイルView ControllerプロジェクトのWEB-INFノード

ADFモバイル・ブラウザ・アプリケーションで使用されるスキンを定義します。このファイルをモバイル・コンテキストで使用する場合の詳細は、4.2項「ADFモバイル・ブラウザのスキニングの実装」を参照してください。『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「trinidad-config.xmlでの構成」も参照してください。

trinidad-skins.xml

モバイルView ControllerプロジェクトのWEB-INFノード

モバイルJSFページを作成すると自動的に生成されるスキン・ファイルをリストします。デフォルトでは、これらはmobile.cssとrichmobile.cssです。『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の4.2項「ADFモバイル・ブラウザのスキニングの実装」およびtrinidad-skins.xmlでの構成に関する項も参照してください。

mobile.css

モバイルView Controllerプロジェクトのスタイル・ノード

基本的なHTMLブラウザと、古いバージョンのスマートフォンで使用されるブラウザに使用されます。

richmobile.css

モバイルView Controllerプロジェクトのスタイル・ノード

iOSまたはAndroidで動くブラウザなど、Webkitベースのスマートフォン・ブラウザに使用されます。

2.4 ADFモバイル・ブラウザ・アプリケーションのテスト

ADFモバイル・ブラウザ・アプリケーションは、モバイル・デバイス、モバイル・デバイス・エミュレータまたはデスクトップ・ブラウザでテストできます。実際のモバイル・デバイスまたはモバイル・デバイス・エミュレータを使用したテストでは、デスクトップ・ブラウザでのテストよりも正確な結果が得られます。

デスクトップ・ブラウザを使用したADFモバイル・ブラウザ・アプリケーションのテストでは、テスト環境がかなり画一的になるため、おおよその結果しか得られません。これは、どのタイプのデスクトップ・ブラウザでも、Webページの外観および動作が似ており、ビジネス・ロジックがまったく同じように実行されるためです。一方で、実際のモバイル・デバイスを使用したアプリケーションのテストでは、モバイル・ブラウザの機能によってデスクトップ・ブラウザの場合とは異なる方法で動作が制御されるため、より正確な結果が得られます。Webサーバーがモバイル・ブラウザに固有のページを生成してページのルック・アンド・フィールを最適化するため、デスクトップ・ブラウザよりも通常は小さいモバイル・ブラウザでは、デスクトップ・ブラウザとは異なる方法でページがレンダリングされます。

また、ADFモバイル・ブラウザ・アプリケーションをモバイル・デバイス上で直接テストする場合には、テストが必要なすべてのデバイスにアクセスできない可能性があります。さらに、多くのモバイル・デバイスは、インターネットのみにアクセスでき、ファイアウォールの後ろにある開発環境にはアクセスできないため、ファイアウォールによってテストが複雑になることがあります。このような場合は、モバイル・デバイス・エミュレータを使用して、代替のテスト方法を採用します。たとえば、BlackBerryスマートフォン・シミュレータ(図2-11)またはWindows Mobileデバイス・エミュレータ(図2-13)でアプリケーションをテストするには、RIM社の開発者サイト(http://us.blackberry.com/)からスマートフォン・シミュレータをダウンロードするか、Microsoft社の開発者サイト(http://www.microsoft.com)からデバイス・エミュレータをダウンロードします。その後、それらを構成してWebサーバーに接続する必要があります。ADFモバイル・ブラウザのシミュレータおよびエミュレータのダウンロードおよび構成の詳細は、Oracle Technology NetworkのOracle ADFモバイルでのモバイル・アプリケーション開発に関するページにある、ADFモバイルおよびJDeveloperでのモバイル・デバイス・シミュレータの実行に関するドキュメントを参照してください。このページにアクセスするには、Oracle Technology NetworkのOracle Application Development Frameworkの概要ページ(http://www.oracle.com/technetwork/developer-tools/adf/overview/index.html)で「Oracle ADF Mobile」を選択します。

図2-11 BlackBerryスマートフォン・シミュレータでのADFモバイル・ブラウザ・アプリケーションのテスト

2.4.1 エミュレータでのADFモバイル・ブラウザ・アプリケーションのテスト方法

アプリケーションは、デスクトップ・ブラウザでテストした後、エミュレータでテストできます。デスクトップ・ブラウザに表示されたURLを使用できますが、localhostのIPアドレス(127.0.0.1)を使用している場合は、コンピュータのネットワークIPアドレスに変更する必要があります。

ヒント:

ネットワークIPアドレスを取得するには、Windowsシステムの場合はipconfigコマンド・インタフェースを、LinuxまたはUNIXシステムの場合はifconfigコマンドを使用します。

図2-12 デスクトップ・ブラウザでのADFモバイル・ブラウザ・アプリケーションのテスト

たとえば、Windows Mobile 6エミュレータを使用してアプリケーションをテストする場合は、アドレスをデスクトップのlocalhostのIPアドレス(127.0.0.1、図2-12)からコンピュータのネットワークIPアドレス(192.0.2.253、図2-13)に変更します。

図2-13 Windows Mobileデバイス・エミュレータでのADFモバイル・ブラウザ・アプリケーションのテスト

また、ページ名の後に続くセッション指定を削除する必要があります。ページ名には通常、.jspxまたは.jspが追加されます。図2-12では、ページ名homeに.jspxが追加されています。

アプリケーションをデバッグするには、一般的に、コードのサイクルを繰り返した後でアプリケーションをテストします。変更されたアプリケーションをテストするには、次のいずれかまたは両方を実行する必要があります。

- ページのリフレッシュ

- ブラウザ・キャッシュのクリア

ヒント:

同じアプリケーションを開発する場合、URLは変化しないため、再入力する必要はありません。

2.4.2 ブラウザの設定についての考慮事項

ADFモバイル・ブラウザ・アプリケーションを適切に表示するには、Windows MobileおよびBlackBerryのブラウザ用にブラウザの設定を調整する必要があります。

Microsoft Windows Mobile 5および6、Microsoft Pocket Internet Explorer

表示を最適化するには、「Fit to Screen」表示を選択します(「Menu」、「View」、「Fit to Screen」の順に選択するとアクセスできます)。

注意:

レイアウトに問題が発生するため、「One Column」表示を選択しないでください。

BlackBerry Browser 4.x

ADFモバイル・ブラウザは、JavaScriptのサポートが有効になっている場合にのみ動作します。JavaScriptサポートが有効になっていることを確認するには、次の手順を実行します。

1. 「Options」→「Browser Configuration」を選択します。

2. 次の表が選択されていることを確認します。

- Support JavaScript

- Allow JavaScript Popup

- Support HTML Tables

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)

4 スキニング

この章では、ADFモバイル・ブラウザ・アプリケーションのスキニングについて説明します。

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

- 4.1項「ADFモバイル・ブラウザのスキニングについて」

- 4.2項「ADFモバイル・ブラウザのスキニングの実装」

- 4.3項「ADFモバイル・ブラウザのスキニングの適用」

4.1 ADFモバイル・ブラウザのスキニングについて

スキニングを使用すると、デバイスに依存したスタイルシートの自動配信を通じて、各種のデバイスで一貫したページを表示できるようになります。これらのスタイルシートにより、様々なモバイル・ブラウザで同じページ定義を共有しながら、ページを最適に表示できます。アプリケーションのルック・アンド・フィールの設定が可能なこれらのスタイルシート内では、コンポーネントのサイズ、位置および外観を設定することによってそのコンポーネントを特定のブラウザ向けに調整することに加え、ブラウザのタイプごとにコンポーネントを表示するか非表示にするかを指定します。

注意:

ブラウザでは、Cascading Style Sheets (CSS)構文がサポートされている必要があります。

4.2 ADFモバイル・ブラウザのスキニングの実装

2.3.2項「モバイルJSFページ作成時の処理内容」で述べているように、JDeveloperは2つのモバイル固有のスタイルシートmobile.cssとrichmobile.cssを、図4-1で示すようにADFモバイル・ブラウザ固有のView Controllerプロジェクト内に作成します。モバイルJSFページを作成することによりtrinidad-config.xmlにもこれらのスキニング・ファイルによって定義されたスキン・ファミリを選択するためのEL式が移入され、trinidad-skins.xmlにもADFモバイル・ブラウザ・スキンの定義が移入されます。

図4-1 モバイル・ブラウザ・スキニング・ファイル

表4-1は、ADFモバイル・ページに提供されるスキニング・ファイルを示しています。

表4-1 ADFモバイル・ブラウザのスキン

CSSファイル

スキン・ファミリ

用途

mobile.css

mobile

基本的なHTMLブラウザに使用。このファミリは、Windows MobileおよびBlackBerry、バージョン4.6以上でのレンダリングに使用します。第5章「基本的なHTMLモバイル・ブラウザのサポート」を参照してください。

richmobile.css

richmobile

Webkitレンダリング・エンジンを使用するスマートフォン・ブラウザに使用します。これらのブラウザは、Nokia S60や、iOSデバイスおよびAndroidデバイスでも使用されます。

例4-1は、ブラウザにより要求されたスキン・ファミリ・タイプを返す文字列として評価される<skin-family>要素の中にEL式が埋め込まれたtrinidad-config.xmlを示しています。

例4-1 Trinidad-config.xml内のスキン・ファミリ選択ロジック

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>#{requestContext.agent.type == 'desktop'? 'richmobile': 'mobile'}</skin-family>
</trinidad-config>

例4-2では、<skin>要素がモバイルJSFページを作成するときのデフォルトADFモバイル・ブラウザ・スキンに定義されているtrinidad-skins.xmlを示しています。

例4-2 ADFモバイル・ブラウザ<skin>定義が移入されたtrinidad-skins.xml

<?xml version="1.0" encoding="windows-1252"?>
<!-- To use mobile skin families in your app, please update trinidad-config.xml with below tags -->
<!-- <skin-family>#{requestContext.agent.type == 'desktop'?'richmobile': 'mobile'}</skin-family> -->
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>richmobile</id>
<family>richmobile</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>styles/richmobile.css</style-sheet-name>
</skin>
<skin>
<id>mobile</id>
<family>mobile</family>
<render-kit-id>org.apache.myfaces.trinidad.pda</render-kit-id>
<style-sheet-name>styles/mobile.css</style-sheet-name>
</skin>
</skins>

4.2.1 ADFモバイル・スキンの拡張

trinidad-config.xmlおよびtrinidad-skins.xmlを、他のCSSファイルをコールするよう構成できます。richmobile.cssおよびmobile.cssファイルを、特定のモバイル・デバイスまたはプラットフォームへ@ruleを使用してレンダリングするように変更することもできます。

モバイル機能を非モバイル・プロジェクトに追加するには、次の手順を実行します。

1. スキン(WEB-INFまたはMETA-INFノードにあるtrinidad-skins.xml)を作成します。

2. スタイルシートを作成します。

3. (WEB-INFノードにある)trinidad-config.xmlでのスキン・ファミリを設定します。
詳細は、Apache MyFaces Trinidadの開発ガイドライン (http://myfaces.apache.org/trinidad/devguide/skinning.html)の「Create a Skin—An Overview」を参照してください。

Apache MyFaces Trinidadでは、スキン・ファミリが1つのレンダーキットと1つの一意なCSSファイルに関連付けられます。Trinidadでは、Webkitベースのモバイル・ブラウザにはデスクトップ・レンダーキットが、そしてその他のすべてのモバイル・ブラウザにはPDAレンダーキットが使用されるため、2つのスキン・ファミリを作成してその両方がこれらのレンダーキットおよびCSSファイルの1つを参照することにより、すべてのモバイル・ブラウザをサポートできます。@agentおよび@platformセレクタ・ルールを使用して、ブラウザの名前、バージョン、またはプラットフォームに基づいたレンダリングを有効にします。詳細は、Apache MyFaces Trinidadの開発ガイドライン (http://myfaces.apache.org/trinidad/devguide/skinning.html)の「Skinning CSS Features」を参照してください。

4.2.2 実行時の処理内容

trinidad-config.xml <skin-family>要素内で定義されるEL式は、ブラウザのユーザー・エージェントに適切なレンダーキットを選択します。ADFモバイル・ブラウザ・フレームワークは、このレンダーキットに定義されたスタイルを適用します。

4.3 ADFモバイル・ブラウザのスキニングの適用

多くのコンポーネントではCSSスタイルが自動的に適用されますが、一部のコンポーネントではスタイル・クラスをそのstyleClass属性に手動で設定する必要があります。

4.3.1 ヘッダー

<tr:panelHeader>コンポーネントにstyleClass属性を追加すると、様々なブラウザでタイトルのみのヘッダーと、タイトルおよびリンク付きのヘッダーを表示できます。

4.3.1.1 タイトルのみのヘッダーの作成

タイトルのみのヘッダーを作成するには、例4-3に示すように、styleClass="af_m_toolbar"を<tr:panelHeader>コンポーネントに追加します。

例4-3 タイトルのみのヘッダーを作成するための属性の追加

<tr:panelHeader styleClass="af_m_toolbar" text="Welcome"/>

図4-2は、このADFモバイル・ブラウザ属性により、タイトルのみのヘッダーがApple iPhone上でどのように作成されるかを示しています。

図4-2 Apple iPhone上でのタイトルのみのヘッダー

表4-2は、タイトルのみのヘッダーがWindows Mobileデバイス、BlackBerryスマートフォンおよびNokia Webkit上でどのように表示されるかを示す例です。

表4-2 様々なプラットフォーム上に表示されたタイトルのみのヘッダー

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.1.2 タイトルおよびリンク付きのヘッダーの作成

図4-3に示すように、ヘッダー内にリンクおよびタイトルを追加できます。図4-3は、Apple iPhone上に表示されたこのタイプのヘッダーを示しています。

図4-3 Apple iPhone上でのヘッダー内のタイトルおよびリンク

4.3.1.1項「タイトルのみのヘッダーの作成」で説明したように、<tr:panelHeader>要素内にstyleClass="af_m_toolbar"を追加することによって、ヘッダーのタイトル(図4-3ではTransferというタイトル)を定義します。例4-4に示すように、リンクは、子である<tr:commandLink>要素内にボタン(それぞれstyleClass="af_m_backButton"およびstyleClass="af_m_button")として定義されています。例4-4の<tr:panelHeader>要素には、これらの属性(太字)が含まれています。

例4-4 ヘッダーへのタイトルおよびリンクの追加

<tr:panelHeader styleClass="af_m_toolbar"
text="Transfer">
<tr:commandLink styleClass="af_m_backButton"
text="Back"
action="back"/>
<tr:spacer rendered="#{requestContext.agent.skinFamilyType eq 'blackberryminimal'}"
height="5" width="105"/>
<tr:spacer rendered="#{requestContext.agent.skinFamilyType eq 'windowsmobile'}"
height=""
width="28"/>
<tr:commandLink styleClass="af_m_button"
text="Sign Off"
action="signoff"/>
</tr:panelHeader>

表4-3は、タイトルおよびリンクを含む<tr:panelHeader>がWindows Mobileデバイス、BlackBerryスマートフォンおよびNokia Webkit上でどのように表示されるかを示す例です。

表4-3 様々なプラットフォーム上に表示されたタイトルおよびリンク付きのヘッダー

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.2 表コンポーネント

styleClass属性を使用すると、ADFモバイル・ブラウザ・アプリケーション内の表コンポーネントを様々なブラウザ上で適切にレンダリングできます。

4.3.2.1 複数列の表

ターゲット・プラットフォーム上でスタイルを適切に適用するためにstyleClass属性を含める必要があるパネル・ヘッダーとは異なり、表の列ヘッダーには属性は必要ありません。かわりに、3.7.1項「表の作成」で説明した<tr:columns>コンポーネントを使用します。図4-4では、列ヘッダーがApple iPhoneでレンダリングされる様子を示しています。

図4-4 Apple iPhone上での列ヘッダーおよびセル

例4-5は、<tr:columns>要素(太字)の定義方法を示しています。

例4-5 列ヘッダーの作成

<tr:table  var="row" …./>
<tr:column  headerText="LastName">
<tr:outputText value="#{row.bindings.LastName.inputValue}"/>
</tr:column>
<tr:column  headerText="FirstName">
<tr:outputText value="#{row.bindings.FirstName.inputValue} "/>
</tr:column>
<tr:column headerText="Phone">
<tr:outputText value="#{row.bindings.Phone.inputValue}"/>
</tr:column>
</tr:table>

表4-4は、列ヘッダーがWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。

表4-4 様々なプラットフォーム上での列ヘッダー

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.2.2 イメージおよびリンク付きの主要な詳細の追加

図4-5は、styleClassの値af_m_listingLinkおよびaf_m_listingDetailsを使用して作成した、表内のリンクおよび詳細です。

図4-5 Apple iPhone上にレンダリングされたイメージ、リンクおよび詳細

例4-6に示すように、これらの機能を作成するには、<tr:panelGroupLayout>コンポーネントを<tr:column>コンポーネントの子として追加します。次に、styleClass="af_m_listingLink"およびstyleClass="af_m_listingDetails"属性をpanelGroupLayoutの<tr:commandLink>および<tr:outputText>サブコンポーネントに追加します。tr:panelGroupLayout、tr:commandLinkおよびtr:outputTextの詳細は、第3章「コンポーネントのサポート」を参照してください。

例4-6 詳細付きのリンクの追加

<tr:table  horizontalGridVisible="false"
var="row"
width="100%">
<tr:column>
<tr:image source="#{row.bindings.TypeIconUrl.inputValue}"/>1
</tr:column>
<tr:column inlineStyle="width:100%;">
<tr:panelGroupLayout layout="vertical">
<tr:commandLink text="#{row.bindings.DescShort.inputValue}"
action="detail"
styleClass="af_m_listingLink">
</tr:commandLink>
<tr:outputText value="#{row.bindings.Balance.inputValue}"
styleClass="af_m_listingDetails">
</tr:outputText>
</tr:panelGroupLayout>
</tr:column>
</tr:table>

表4-5は、イメージ、リンクおよび詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。

表4-5 様々なプラットフォーム上に表示されたイメージ、リンクおよび詳細

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.2.3 リンク付きの主要な詳細の作成

図4-6は、表内に主要な詳細およびリンクを作成する方法を示しています。

図4-6 Apple iPhone上にレンダリングされたリンク付きの主要な詳細

4.3.2.2項「イメージおよびリンク付きの主要な詳細の追加」で説明したイメージ付きの主要なリンクおよび詳細の追加と同様、これらの機能を作成するには、<tr:panelGroupLayout>コンポーネントを<tr:column>コンポーネントの子として追加します。次に、例4-7に示すように、styleClass="af_m_listingLink"およびstyleClass="af_m_listingDetails"属性をpanelGroupLayoutの<tr:commandLink>および<tr:outputText>サブコンポーネントに追加します。tr:panelGroupLayout、tr:commandLinkおよびtr:outputTextの詳細は、第3章「コンポーネントのサポート」を参照してください。

例4-7 主要な詳細およびリンク

<tr:table  horizontalGridVisible="false"
var="row"
width="100%">
<tr:column>
<tr:panelGroupLayout layout="vertical">
<tr:commandLink text="#{row.bindings.Email.inputValue}"
styleClass=" af_m_listingLink">
</tr:commandLink>
<tr:outputText value="#{row.bindings.FirstName.inputValue}”
styleClass="af_m_listingDetails"/>
</tr:panelGroupLayout>
</tr:column>
</tr:table>

表4-6は、リンクおよび詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。

表4-6 様々なプラットフォーム上に表示されたイメージおよびリンク

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.2.4 リンクなしの主要な詳細の作成

図4-7に示すように、af_m_listingPrimaryDetailsおよびaf_m_listingDetailsスタイル・クラスを使用すると、リンクとして機能しない詳細を作成できます。これらの動作は、4.3.2.2項「イメージおよびリンク付きの主要な詳細の追加」で説明した主要な詳細とは異なります。

図4-7 Apple iPhone上でのリンクなしの主要な詳細

例4-8に示すように、リンクなしの主要な詳細を作成するには、styleClass=af_m_listingPrimaryDetailsおよびstyleClass="af_m_listingDetails"を<tr:outputText>要素に追加します。この要素は、(<tr:column>要素の子である)<tr:panelGroupLayout>要素の子です。

例4-8 リンクなしの主要な詳細の追加

tr:table  horizontalGridVisible="false"
var="row"
width="100%">
<tr:column>
<tr:panelGroupLayout layout="vertical">
<tr:outputText value="#{row.bindings.Amount.inputValue}
styleClass="af_m_listingPrimaryDetails">
</tr:outputText>
<tr:outputText value=" #{row.bindings.FromAccountName.inputValue} “
styleClass="af_m_listingDetails"/>
</tr:panelGroupLayout>
</tr:column>
</tr:table>

表4-7は、リンクなしの詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。

表4-7 様々なプラットフォーム上に表示されたリンクなしの詳細

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.3 パネル・リスト・コンポーネント

図4-8に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClassの値をaf_m_panelBaseとして定義すると、<tr:panelList>コンポーネントにパディングが適用されます。

図4-8 Apple iPhone上でのパディングのレンダリング

例4-9に示すように、子の<tr:panelList>コンポーネントにstyleClass属性を含める必要はありません。<tr:panelList>および<tr:panelGroupLayout>の使用の詳細は、3.2.2項「リストの作成」および3.4項「レイアウト・コンポーネント」を参照してください。

例4-9 panelListコンポーネントへのパディングの追加

<tr:panelGroupLayout styleClass="af_m_panelBase">
<tr:panelList>
<tr:commandLink text="Welcome" action="welcome"/>
<tr:commandLink text="Branch" action="branch"/>
</tr:panelList>
</tr:panelGroupLayout>

表4-8は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelList>コンポーネント内のパディングを示す例です。

表4-8 様々なプラットフォーム上で適用された<tr:panelList>へのパディング

へのパディング" width="100%">

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.4 panelFormLayout

図4-9に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClass属性の値をaf_m_panelBaseとして定義すると、子の<tr:panelFormLayout>コンポーネントにパディングが適用されます。

図4-9 Apple iPhone上でpanelFormLayout内にレンダリングされたパディング

例4-10に示すように、<tr:panelFormLayout>コンポーネントにstyleClassを追加する必要はありません。

例4-10 panelFormLayoutコンポーネントへのパディングの適用

<tr:panelGroupLayout styleClass="af_m_panelBase">
<tr:panelFormLayout labelWidth="35%" fieldWidth="65%">
<tr:selectOneChoice value="#{transferBean.transferFromAccount}"
label="From:" showRequired="false">
<f:selectItems value="#{bindings.AccountView1.items}"/>
</tr:selectOneChoice>
<tr:selectOneChoice  value="#{transferBean.transferToAccount}"
showRequired="false"
unselectedLabel="- select -"
label="To:">
<f:selectItems value="#{bindings.AccountView1.items}"/>
</tr:selectOneChoice>
<tr:inputText id="amount"
columns="#{requestContext.agent.capabilities.narrowScreen ? '8' : '12'}"
required="false" showRequired="false"
value="#{transferBean.transferAmount}"
label="Amount:">
<f:converter converterId="Bank10.amountConverter"/>
</tr:inputText>
<tr:panelLabelAndMessage label="Date: ">
<tr:outputText value="#{transferBean.transferDate}"/>
</tr:panelLabelAndMessage>
<f:facet name="footer">
<tr:panelGroupLayout>
<tr:spacer rendered="#{requestContext.agent.skinFamilyType eq
'blackberryminimal'}"
height="5"
width="75"/>
<tr:commandButton text="Submit"
action="#{transferBean.validateTransferRequest}"/>
</tr:panelGroupLayout>
</f:facet>
</tr:panelFormLayout>
</tr:panelGroupLayout>

表4-9は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelList>コンポーネント内のパディングを示す例です。

表4-9 様々なプラットフォーム上で適用された<tr:panelFormLayout>コンポーネントへのパディング

コンポーネントへのパディング" width="100%">

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

4.3.5 パネル・アコーディオン

図4-10に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClassコンポーネントの値をaf_m_panelBaseとして定義すると、その<tr:panelAccordion>コンポーネントにパディングが適用されます。

図4-10 Apple iPhone上でパネル・アコーディオンに適用されたパディング

例4-11に示すように、<tr:panelAccordion>コンポーネントにstyleClass属性を追加する必要はありません。

例4-11 <tr:panelAccordion>コンポーネントへのパディングの適用

<tr:panelGroupLayout styleClass="af_m_panelBase">
<tr:panelAccordion discloseMany="true">
<tr:showDetailItem text="Name" disclosed="true">
<tr:panelFormLayout fieldWidth="70%" labelWidth="30%">
...
</tr:panelFormLayout>
</tr:showDetailItem>
<tr:showDetailItem text="Contact" disclosed="true">
<tr:panelFormLayout fieldWidth="70%" labelWidth="30%">
...
</tr:panelFormLayout>
</tr:showDetailItem>
<tr:showDetailItem text="Address">
<tr:panelFormLayout fieldWidth="70%" labelWidth="30%">
...
</tr:panelFormLayout>
</tr:showDetailItem>
</tr:panelAccordion>
</tr:panelGroupLayout>

表4-11は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelAccordion>コンポーネント内のパディングを示す例です。

表4-10 様々なプラットフォーム上での<tr:panelAccordion>

を示しています。" title="様々なプラットフォーム上での<tr:panelAccordion>" width="100%">

プラットフォーム

例

BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

5 基本的なHTMLモバイル・ブラウザのサポート

この章では、基本的なHTMLモバイル・ブラウザに対するADFモバイル・ブラウザのサポートについて説明します。

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

- 5.1項「基本的なHTMLモバイル・ブラウザのサポートについて」

- 5.2項「基本的なHTMLモバイル・ブラウザ用のアプリケーションの開発」

- 5.3項「基本的なHTMLモバイル・ブラウザのスタイル設定」

5.1 基本的なHTMLモバイル・ブラウザのサポートについて

モバイル・デバイスの基本的なHTMLブラウザではJavaScriptがサポートされないため、その強力な機能性は、BlackBerryスマートフォンやApple iPhoneのブラウザなど、ADFモバイル・ブラウザによってサポートされる他のブラウザよりも劣ります。1.2項「サポートされているモバイル・ブラウザ」にリストされているブラウザ以外にも、ADFモバイル・ブラウザでは、一般的なほとんどのブラウザが基本的なHTMLモバイル・ブラウザとみなされます。(ただし、ADFモバイル・ブラウザによって特定のモバイル・ブラウザが認識されない可能性もあります。)

5.1.1 基本的なHTMLモバイル・ブラウザのサポート要件

ADFモバイル・ブラウザのサポートの最小要件は、WAP2.xブラウザを含むXHTML BasicまたはXHTML Mobile Profileです。

注意:

ADFモバイル・ブラウザでは、XHTML BasicまたはXHTML Mobile ProfileのいずれもサポートできないWAP1.xブラウザはサポートされていません。

5.2 基本的なHTMLモバイル・ブラウザ用のアプリケーションの開発

ADFモバイル・ブラウザでは、ブラウザの機能または制限に適合したページがモバイル・ブラウザに提供されるため、基本的なHTMLモバイル・ブラウザに固有のユーザー・インタフェースを作成する必要はありません。ただし、これらのブラウザではJavaScriptサポートがないために、一部のHTML要素の機能が制限されます。

- 基本的なHTMLモバイル・ブラウザでは、autosubmit属性はサポートされていません。フォーム送信によりコンポーネントの自動送信機能に対応する場合にのみ、フォームに送信ボタンを追加してください。組込み自動送信機能を備えたコンポジット・コンポーネントでは、ユーザーがフォームを送信できるようにするため、ADFモバイル・ブラウザにより送信ボタンが追加されます。

- 基本的なHTMLモバイル・ブラウザでは、フォーム送信リンクはサポートされていません。すべての送信要素は、ボタンとしてレンダリングされます。基本的なHTMLモバイル・ブラウザでは、このような入力要素の子コンポーネントはサポートされていません。そのため、tr:commandLinkコンポーネントの子コンポーネントを基本的なHTMLモバイル・ブラウザでレンダリングすることはできません。tr:commandLinkの詳細は、3.5.2項「リンクの作成」を参照してください。

5.3 基本的なHTMLモバイル・ブラウザのスタイル設定

ADFモバイル・ブラウザでは、基本的なHTMLモバイル・ブラウザに対して基本的なCSSサポートが提供されます。これらのほとんどのブラウザではCSSがサポートされていますが、CSSがサポートされていないブラウザ上でもADFモバイル・ブラウザ・アプリケーションを実行できます。ただし、その場合はユーザー・インタフェースが使用しづらくなる可能性があります。予防措置として、できるだけ多くのブラウザ上でADFモバイル・ブラウザ・アプリケーションをテストしてください。

6 BlackBerry 4.2から4.5向けの設計ガイドライン

この章では、BlackBerryブラウザ4.2から4.5の動作に対応する方法について説明します。

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

- 6.1項「BlackBerryブラウザの表示動作について」

- 6.2項「折返しを回避するための表の書式設定」

- 6.3項「ラベルおよびメッセージ・パネルの書式設定」

- 6.4項「列幅の書式設定」

- 6.5項「BlackBerryスマートフォンでの表示の差異についての考慮事項」

6.1 BlackBerryブラウザの表示動作について

BlackBerryブラウザの動作は、水平スクロールを使用してページを表示しないという点で、他の多くのブラウザとは異なります。かわりに、ページは画面の幅にあわせて表示されます。この章では、BlackBerryスマートフォン上で適切に表示されるようにページを書式設定するのに役立つガイドラインを示します。

6.2 折返しを回避するための表の書式設定

ブラウザ上において長い単語がフィールド間で折り返されるため、表の書式設定時に、複数のフィールドを含む行で長い単語を使用しないようにします。

注意:

この章で使用している単語とは、一連の文字列のことです。この場合、単語に空白文字は含まれません。

BlackBerryブラウザのデフォルト・モードではブラウザの幅が物理的な画面の幅に制限されるため、行内に収まらないフィールドは次の行に表示されます。アプリケーションで複数の要素を1行に表示するには、フィールドの全体の幅をブラウザの幅以下にする必要があります。他のブラウザと同様、BlackBerryブラウザでは複数の行が必要に応じて折り返されます。フィールド内にある最も長い単語のサイズよりも列の幅を小さくすることはできません。

6.2.1 表内におけるフィールドの折返しの回避方法

表の行内にあるすべてのフィールドが入力フィールドである場合、フィールドが折り返されないようにするには、行のサイズ属性値の合計が次の式を満たしていることを確認します。

3*Number of columns + the Sum of the size attributes in all columns <=X, when X=48

一般的に、表の列内にあるフィールドのサイズは、次の式を満たしている必要があります。

3 * Number of Columns +
Sum of size attributes in all input field columns +
Sum of number of characters in longest words in all output field columns <=X, when X=48

これでもフィールドが折り返される場合は、行内に収まるまでXの値を小さくします。

6.3 ラベルおよびメッセージ・パネルの書式設定

プログラミングによる処理の柔軟性を維持するため、nowrap属性がサポートされており、この属性をTrinidadコンポーネントに対して明示的にプログラムすることで挿入できます。ページのプログラム時にコンポーネント定義にnowrapを追加した場合、問題が発生する可能性があります。

6.4 列幅の書式設定

列を書式設定する場合は、tr:panelFormLayoutコンポーネント内のラベルとフィールドの両方にパーセント幅を設定して、その合計の幅が100%になるようにします。

6.5 BlackBerryスマートフォンでの表示の差異についての考慮事項

この項では、異なるデバイス上で同じアプリケーションがどのように違って表示されるのかを説明します。この項のトピックは、次のとおりです。

- 最小フォント・サイズの変更

- フォーム・ファクタの違い

6.5.1 最小フォント・サイズの変更

ユーザー設定で最小フォント・サイズを変更すると、ADFモバイル・ブラウザ・レンダラの書式設定機能が影響を受けます。たとえば、図6-1に示すように、フォントがデフォルト・サイズである6ポイントに設定されている場合、入力フィールドおよびそれに対応するラベルは適切に並んで表示されます。

図6-1 デフォルト・フォント・サイズの6ポイントで表示されたアプリケーション

一方、フォント・サイズを10ポイントに拡大すると、入力フィールドがそれに対応するラベルの下に移動するため、レイアウトが崩れます。この結果、ページが読みづらくなります。

図6-2のページは、表示画面に対して大きすぎます。

図6-2 フォント・サイズの拡大

6.5.2 フォーム・ファクタの違い

画面のサイズが異なると、表示に影響が出ることがあります。(図6-1に示すように)フォント・サイズがデフォルトの6ポイントになっている場合でも、異なるデバイス上では同じアプリケーションが異なって表示されます。図6-3では、入力フィールドが辛うじてデバイスの画面に収まっていますが、同じアプリケーションを他のデバイス(図6-1)で実行したときは表示スペースにまだ余裕がありました。

図6-3 フォント・サイズ6ポイントで辛うじて画面に収まっている入力フィールドおよびラベル

さらに、あるデバイスの画面上で適切に表示された入力フィールドが、異なるタイプのデバイスの画面上では窮屈に表示される場合もあります。

図6-4に示したアプリケーションでは、表のセルの幅が不十分であるため、テキストが折り返されています。

図6-4 折り返されたテキスト

7 幅が狭い画面のサポートおよびユーザー・エージェントの詳細のサポート

この章では、Trinidadインフラストラクチャによって幅が狭い画面のサポートを特定する方法、およびEL式を使用してユーザー・エージェントの詳細を公開する方法について説明します。

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

- 7.1項「幅が狭い画面のサポートの特定」

- 7.2項「EL式を使用したユーザー・エージェント機能の特定」

7.1 幅が狭い画面のサポートの特定

モバイル・デバイスには、様々な画面の幅の機種があります。その結果、WebアプリケーションのUIコンポーネントが、画面の幅が240ピクセルであるデバイス上では適切にレンダリングされても、画面の幅が100ピクセルしかないデバイス上でのアプリケーション実行時には正しくレイアウトされないことがあります。このような場合、Trinidadでは幅が狭い画面のデバイス向けにレンダリングが最適化されます。Trinidadでは、画面の幅が240ピクセル未満であるデバイスは、幅が狭い画面のデバイスであるとみなされ、それにあわせて次のコンポーネントのレンダリングが最適化されます。

- tr:breadcrumbs

- tr:inputText

- tr:navigationPane

- tr:panelFormLayout

- tr:panelLabelAndMessage

- tr:panelRadio

- tr:processChoiceBar

- tr:selectRangeChoiceBar

7.1.1 Trinidadによる幅が狭い画面の最適化の特定方法

Trinidadでは画面の幅が240ピクセル未満であるデバイスのみが、幅が狭い画面のデバイスであるとみなされるため、240ピクセルよりも一般的に画面の幅が広いiPhone(Safariブラウザ)またはBlackBerryスマートフォン(BlackBerryブラウザ)は、これには該当しません。Windows Mobileブラウザの場合、Trinidadにより、UA-pixelsリクエスト・ヘッダーから画面の幅が特定され、画面の幅が240ピクセル未満である場合にのみ、幅が狭い画面の最適化が適用されます。一方、他のすべてのユーザー・エージェントでは、Trinidadにより幅が狭い画面のデバイス用にレンダリングが最適化されます。

7.2 EL式を使用したユーザー・エージェント機能の特定

Trinidadでは、EL式#{requestContext.agent}を使用して、リクエストしているユーザー・エージェントの詳細が開発者に公開されます。この式により、リクエストしているユーザー・エージェントを説明するagentオブジェクトが返されます。この式に詳細の名前または機能の名前のプロパティを追加することによって、Trinidadから、ユーザー・エージェントの名前、バージョン、プラットフォーム、プラットフォームのバージョン、モデル(BlackBerryのみ)、およびブラウザのJavaScriptとPPR(部分ページ・レンダリング)のサポートを含む詳細が返されるように指定できます。ユーザー・エージェント詳細の公開の詳細は、7.2.1項「ユーザー・エージェントの詳細の特定方法」を参照してください。ブラウザの機能を特定する場合の詳細は、7.2.2項「ブラウザの機能の特定方法」を参照してください。

7.2.1 ユーザー・エージェントの詳細の特定方法

Trinidadでリクエストが受信されると、タイプ、エージェントの名前とバージョン、およびエージェントのプラットフォーム名とプラットフォーム・バージョンを含む、様々なユーザー・エージェントの詳細(表7-1)を示すユーザー・エージェント文字列が解析されます。Trinidadでは、EL式#{requestContext.agent.<detail-name>}を使用してこれらの詳細が開発者に公開されます。たとえば、ユーザー・エージェントのタイプに適したカテゴリ(つまり、デスクトップ・ブラウザ用のdesktopまたはモバイル・ブラウザ用のPDA)を開発者が取得できるようにするために、Trinidadでは、EL式内で次のようにtype詳細が使用されます。

#{requestContext.agent.type}

注意:

Trinidadでは、PlatformNameやPlatformVersionのような詳細について、ユーザー・エージェント文字列からこれらを解析できなかった場合にnull値を返すことがあります。

表7-1 EL式を通じて公開されるブラウザの詳細

詳細の名前

説明

type

ユーザー・エージェントのタイプを識別します。デスクトップおよびモバイル・ブラウザについて、それぞれ値はdesktopおよびPDAです。モバイル・デバイス上でSafariを実行した場合、すべてのデスクトップ・ブラウザ機能が提供されるため、エージェント・オブジェクトによりこの詳細がデスクトップ・タイプとして公開されます。

agentName

エージェントの名前。

agentVersion

エージェントのバージョン。

platformName

エージェントが実行されるプラットフォーム。

platformVersion

エージェントが実行されるプラットフォームのバージョン。

hardwareMakeModel

モバイル・デバイスのモデル。

7.2.2 ブラウザの機能の特定方法

Trinidadでは、ユーザー・エージェントに割り当てる機能に基づいて、ユーザー・エージェントのリクエストに対するレスポンスを送信します。これらの機能には、ユーザー・エージェントのJavaScriptおよびPPRのサポートが含まれます。これらの一部の機能(表7-2)は、EL式#{requestContext.agent.capabilities}を通じて開発者に公開されます。

Trinidadによってユーザー・エージェントに割り当てられる具体的な機能を特定するには、EL式#{requestContext.agent.capabilities.<capability-name>}を使用します。たとえば、TrinidadによってJavaScript機能がユーザー・エージェントに割り当てられるかどうかを特定するには、次のEL式を使用します。

# {requestContext.agent.capabilities.scriptingSpeed!='none'}

表7-2 EL式を通じて公開されるブラウザの機能

機能の名前

詳細

narrowScreen

Trinidadで幅が狭い画面のデバイス用にレンダリングが最適化されるかどうかを示します。Trinidadで幅が狭い画面のデバイス用にレンダリングが最適化される場合は、true(ブール型)が返されます。

scriptingSpeed

ユーザー・エージェントに対するJavaScriptサポートを示します。ユーザー・エージェントによってJavaScriptがサポートされていない場合は、none(文字列型)が返されます。

partialRendering

ユーザー・エージェントに対するPPRサポートを示します。ブラウザによってPPRがサポートされている場合は、true(ブール型)が返されます。

8 ADFモバイル・ブラウザ・アプリケーションの拡張

この章では、ADFモバイル・ブラウザ・アプリケーションに電子メール、電話およびGoogleマップ機能を追加する方法について説明します。

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

- 8.1項「電子メール、電話およびGoogleマップを使用するためのアプリケーション拡張の概要」

- 8.2項「電子メール・クライアントの統合」

- 8.3項「電話の統合」

- 8.4項「Googleマップの統合」

- 8.5項「ページ表示ディメンションについての考慮事項」

8.1 電子メール、電話およびGoogleマップを使用するためのアプリケーション拡張の概要

第4章「スキニング」で説明したスタイルシートの使用に加え、tr:goButtonおよびtr:goLinkコンポーネントを使用して電話番号、電子メール・アドレスおよびGoogleマップへのリンクを統合することによって、ADFモバイル・ブラウザ・アプリケーションをさらに調整できます。

8.2 電子メール・クライアントの統合

Webアプリケーションから電子メール・アプリケーションを起動するには、次の手順を実行します。

1. tr:goButtonまたはtr:goLinkコンポーネントを使用します。

2. HTMLリンクの先頭にmailto:プロトコルを追加します。

3. HTMLリンクにdestinationプロパティを設定します(例8-1では、式言語文#{sessionScope.empDetails.Email}として記載されています)。

例8-1 mailto:プロトコルを使用したiPhoneの電子メール・クライアントの統合

<tr:goLink styleClass="messageText"
text="#{sessionScope.empDetails.Email}"
destination="mailto:#{sessionScope.empDetails.Email}"/>

8.2.1 メールのプロパティの追加

mailto:プロトコルでは、表8-1に示すメールのプロパティを追加できます。

表8-1 メールのプロパティ

プロパティ

構文

複数の受信者

各電子メール・アドレスをカンマ(,)で分割

メッセージの件名

subject =<subject text>

CC受信者

cc=<name@address.com>

BCC受信者

bcc=<name@address.com>

メッセージ・テキスト

body=<Message Text>

これらのプロパティを指定するには、例8-2の#{sessionScope.empDetails.Email}?のように電子メール・アドレスの後ろに疑問符(?)を付加し、続けてプロパティを追加します。それぞれのプロパティはアンパサンド(&)で分割します。

例8-2 電子メールのプロパティの追加

<tr:goLink styleClass="messageText"
text="#{sessionScope.empDetails.Email}"
destination="mailto:#{sessionScope.empDetails.Email}?subject=hello
&cc=myboss@oracle.com
&bcc=me@oracle.com
&body=good morning!"/>

8.3 電話の統合

アプリケーションで電話番号の呼出しダイアログ・ボックスを起動するには、HTMLリンク内の電話番号の先頭にtel:プロトコルを追加します。

注意:

この電話番号は、RFC 2806プロトコル(http://www.ietf.org/rfc/rfc2806.txt)の構成要素をサポートしている必要があり、これによりユーザーによる電話番号のダイアル後にポーズを追加したり内線番号をダイアルしたりできます。Apple社はRFC 2086のどの構成要素をサポートしているか明示していないため、各構成要素を自分でテストする必要があります。

例8-3では、EL式#{sessionScope.empDetails.PhoneNumber}が電話番号を表しています。

例8-3 呼出しダイアログ・ボックスの有効化

<tr:goLink styleClass="messageText"
text="#{sessionScope.empDetails.PhoneNumber}"
destination="tel:#{ sessionScope.empDetails.PhoneNumber}"/>

8.4 Googleマップの統合

使用可能なデータを示すマップを表示するためのリンクをアプリケーション内に作成するには、tr:goLinkコンポーネントのdestinationプロパティを次のように指定します。

1. destination=をGoogleマップのURL(例8-4に示したdestination=http://maps.google.com/maps)として定義します。

2. 場所を検索するため、GoogleマップのURLの後ろに?q=を追加します。

3. ターゲットとなる場所の住所の文字列を使用してq=を定義します。この値には、完全な住所、都市名、ランドマークなど、Googleマップによって検索して特定することが可能な任意の項目を含めることができます。複数の項目が見つかった場合、Googleマップにより複数のピンが自動的にドロップされます。

注意:

住所の文字列は、単語間にカンマを含めて適切に書式設定する必要があります。また、空白文字はプラス記号(+)文字に置き換えます。

例8-4は、Googleマップ・アプリケーションを起動して200 Oracle Parkway上にピンをドロップする、tr:goLinkコンポーネントの定義方法を示しています。

例8-4 Googleマップでの場所の指定

<tr:goLink styleClass="messageAddrText"
text="200 Oracle Parkway, Redwood City, CA, USA"
destination="http://maps.google.com/maps?q=200+Oracle+Parkway,+Redwood+City,+CA,+USA"/>

例8-5では、EL式で表された住所を使用して場所を指定しています。

例8-5 EL式を使用したGoogleマップでの場所の指定

<tr:goLink styleClass="messageAddrText"
text="#{sessionScope.empDetails.StreetAddress},
#{sessionScope.empDetails.City},
#{sessionScope.empDetails.StateProvince},
#{sessionScope.empDetails.CountryName}"
destination=" http://maps.google.com/maps?q=#{sessionScope.empDetails.StreetAddress},
+#{sessionScope.empDetails.City},
+#{sessionScope.empDetails.StateProvince},
+#{sessionScope.empDetails.CountryName}"/>

例8-4のような住所の文字列では、空白文字ではなくプラス記号(+)文字を使用する必要があります。

8.4.1 ルート案内のプログラミング

Googleマップでは、ルート案内もサポートされています。GoogleマップのURL内で、疑問符(?)の後ろの部分を、出発地点と到着地点を示す文字列(saddr=<starting address>&daddr=<destination address>)に変更します。この形式を使用して、Redwood City、200 Oracle ParkwayにあるOracle本社からCalifornia、San Francisco、1 Telegraph Hillまでのルートを表す場合は、次のように指定します。

http://maps.google.com/maps?
saddr=200+Oracle+Parkway,+Redwood+City,+CA,+USA
&daddr=1+Telegraph+Hill,+San+Francisco,+CA,+USA

注意:

現時点で、この他にApple社およびGoogle社から公開されているAPIはありません。

8.4.2 iPhone上でのGoogleマップのサポート

iPhoneのSafariでは、GoogleマップおよびYouTubeアプリケーションの両方がサポートされており、ターゲットWebサイトを使用してURLを開くかわりに、特定のURLコールを自動的に捕捉してネイティブ・アプリケーションを起動します。たとえば、ユーザーがGoogleマップのHTMLリンク(http://maps.google.com)をクリックすると、Safariでは、GoogleマップのWebサイトにナビゲートするかわりにネイティブなGoogleマップ・アプリケーションを起動します。ネイティブなGoogleマップ・アプリケーションでは、maps.google.comでサポートされている一部のURLパラメータを処理できるため、ユーザーは場所を指定してピンをドロップできます。

8.5 ページ表示ディメンションについての考慮事項

ズーム比率を正しく制御するには、ページのヘッダー内にviewportメタ・タグを追加します。viewportはデバイス固有のメタ・タグであり、ページを正しい比率で表示するために使用されます。例8-6では、iPhoneおよびBlackBerryスマートフォンの両方に対してビュー・ポートを設定しています。viewport指定の使用の詳細は、http://developer.apple.com/を参照してください。

例8-6 ビュー・ポートの設定

<trh:head title="Online Banking Demo">
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252"/>
<f:verbatim rendered="#{requestContext.agent.skinFamilyType eq 'blackberry'}">
<meta name="viewport"
content="width=device-width;
height=device-height;
initial-scale=1.0;
maximum-scale=1.0;
user-scalable=0;"/>

</f:verbatim>
<f:verbatim rendered="#{requestContext.agent.skinFamilyType eq 'iPhonewebkit'}">
<meta name="viewport"
content="width=device-width;
initial-scale=1.0;
maximum-scale=1.0;
user-scalable=0;"/>
</f:verbatim>
</trh:head>

注意:

バージョン4.6以降のBlackBerryでは、viewportに似たHandheldFriendlyメタ・タグがサポートされています。ヘッダーに次の行を追加すると、ページの比率が適切に調整されます。

<meta name="HandheldFriendly" content="True">

8.5.1 iPhone用のビュー・ポートの設定

モバイル・ブラウザ・アプリケーションによっては、デスクトップのSafariブラウザ上では正しく表示できても、画面の小さなiPhone上では正しく比率が調整されず、画面に対して表示範囲が大きすぎることがあります。この結果、iPhone上でページが縮小されて読みづらくなります。例8-6内の次の行は、iPhoneのviewport指定を<head>要素内で設定して、iPhone上でアプリケーションを適切に表示する方法を示しています。

<f:verbatim rendered="#{requestContext.agent.skinFamilyType eq 'iPhonewebkit'}">
<meta name="viewport"
content="width=device-width;
initial-scale=1.0;
maximum-scale=1.0;
user-scalable=0;"/>
</f:verbatim>

Copyright © 2012, Oracle and/or its affiliates. All rights reserved.