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

11gリリース1 (11.1.1.7.0)

B72413-01(原本部品番号:E10140-06)

目次

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

はじめに

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

- 対象読者

- 関連ドキュメント

- 表記規則

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

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

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

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

- 1.1.2.1ADFモバイル・ブラウザでパフォーマンスを向上させる方法

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

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

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

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

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

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

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

- 2.3.1 モバイルJSFページの作成によるADFモバイル・ブラウザ・アプリケーションの開発方法

- 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 サポートされないコンポーネントおよび属性

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

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

4 スキニング

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

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

- 4.2.1 ADFモバイル・ブラウザ・アプリケーションでのスキニングの実装方法

- 4.2.1.1 trinidad-config.xmlファイルで<skin-family>を定義する方法

- 4.2.1.2 trinidad-config.xmlファイルで<skin-family>を定義し、スキン間の切替えを有効にする方法

- 4.2.2 trinidad-skins.xmlファイルでのレンダーキットおよびスタイルシート名の指定方法

- 4.2.3 実行時の処理内容

- 4.3 iPhoneコンポーネントの例

- 4.3.1 iPhoneアプリケーションでのヘッダーの作成方法

- 4.3.1.1 styleClass属性を使用したヘッダー・コンポーネントの作成

- 4.3.2 iPhoneアプリケーションでのナビゲーション・パネルの作成方法

- 4.3.2.1 Panel Listスタイル・クラスを使用したナビゲーション・パネルの静的リストの作成

- 4.3.2.2 Table Listスタイル・コンポーネントを使用したナビゲーション・アイテムの動的リストの作成

- 4.3.3 iPhoneアプリケーションで詳細アイテムを作成する方法

- 4.3.3.1 フィールド・セットのスタイル・クラス

- 4.3.4 iPhoneアプリケーションのCSSクラスについての考慮事項

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.1.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リリース1 (11.1.1.7.0)

B72413-01(原本部品番号:E10140-06)

2013年3月

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

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

B72413-01

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

原本著者: John Bassett

原本協力者: Mamallan Uthaman

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

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

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

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 USA, Inc., 500 Oracle Parkway, Redwood City, CA 94065.

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

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

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

はじめに

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

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

Oracleのアクセシビリティについての詳細情報は、Oracle Accessibility ProgramのWebサイト(http://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc)を参照してください。

Oracle Supportへのアクセス

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ユーザー・インタフェース開発者ガイド』

表記規則

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

規則

意味

太字

太字は、操作に関連する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モバイル)・ブラウザは、エンタープライズ・モバイル・アプリケーションの迅速な開発を可能にする標準ベースのフレームワークです。ADFモバイル・ブラウザはJava Server Faces(JSF)のコンポーネント・モデルに基づいて構築されているため、モバイル・ブラウザ用のアプリケーションを迅速に開発できます。そのモバイル固有の機能がJSFに拡張されたことで、デスクトップ用JSFアプリケーションを開発するのと同じ方法を使用してモバイル・アプリケーションを開発できるようになりました。

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

注意:

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

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

Java Server Faces(JSF)は、機能および動作を定義する事前作成コンポーネントを使用してユーザーがアプリケーションを作成できるようにするための標準であり、JSR-127によって規定されています。JSFでは、Webアプリケーションの開発を単純化するモデル・ビュー・コントローラ(MVC)メカニズムが採用されており、そのレンダーキットにより特定のマークアップ言語との間でコンポーネントを変換できます。このキットのレンダラはコンポーネントと、それらがブラウザ要求をどのように解釈するかを表すマークアップを生成します。

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

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コンポーネントからモバイル・デバイス用の新しいビュー・レイヤーを作成できます。

1.1.2.1 ADFモバイル・ブラウザでパフォーマンスを向上させる方法

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

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

ADFモバイル・ブラウザでは、表1-1にリストされているブラウザでApache MyFaces Trinidadコンポーネントがサポートされています。Trinidadの新しいバージョンはOracle JDeveloperに統合でき、Oracle Fusion Middleware 11g リリース1の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モバイル・ブラウザ・アプリケーションを作成するには、次の手順を実行します。

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

- Webプロジェクトの追加

- Apache MyFaces Trinidadコンポーネントで構成されたJSFページの追加

- 第4章「スキニング」の説明に従って、ADFモバイル・ブラウザのスキニングを使用してページ・レイアウトを最適化します。

- シミュレータまたはデバイスでアプリケーションをテストします。

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

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

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

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

作業を始める前に、次のようにします。

必要に応じてADFモデル・プロジェクトを作成します。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は、ウィザード完了時に「アプリケーション・ナビゲータ」に表示された、アプリケーションの生成済モデルおよびビュー・コントローラ・プロジェクトを示しています。

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

注意:

モデル・プロジェクトに対してはビジネス・ロジックを定義できますが、生成したビュー・コントローラ・プロジェクトは使用しないでください。かわりに、次の手順を実行してモバイル・ビュー・コントローラ・プロジェクトを作成します。

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

6. 「新規ギャラリ」で「カテゴリ」を展開し、「プロジェクト」→「汎用プロジェクト」を選択します。「OK」をクリックします。

7. 汎用プロジェクトの作成ウィザードで、まずプロジェクト名を入力します。たとえば、図2-4に示すように、mvc (モバイル・ビュー・コントローラの省略名)と入力します。

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

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

図2-4は、「選択可能」リスト内のADFモバイル・ブラウザ・テクノロジを示しています。ADFモバイル・ブラウザ・テクノロジを「選択済」リストに移動すると、次のテクノロジがプロジェクトで使用可能になり、また、図2-5に示すように、「選択済」リストにも表示されます。

- Java

- JSF(JavaServer Faces)

- JSPおよびサーブレット

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

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

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

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

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

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

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

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

図2-7は、ビジネス・コンポーネント・プロジェクトであるmodelを含むモバイル・アプリケーション(adfm)を示しています。

図2-7 ADFモバイル・ブラウザ・アプリケーションでのビジネス・コンポーネント・プロジェクトの作成

2.3.1 モバイルJSFページの作成によるADFモバイル・ブラウザ・アプリケーションの開発方法

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

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

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

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

注意:

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

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

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

注意:

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

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

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

5. 「コンポーネント・パレット」で、「Trinidad」を選択してから、Apache MyFaces Trinidadコンポーネントを使用してページを作成します。

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

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

「モバイル機器での表示」オプションがデフォルトで選択されているため、ビジュアル・エディタのページ・デザイナでは、図2-10のようにモバイル・デバイスのサイズが反映されます。

ヒント:

「ツール」をクリックしてから「プリファレンス」、「モバイル」の順に選択して、ビジュアル・エディタでページのサイズを変更できます。

さらに、JDeveloperによりADFモバイル・ブラウザ・ビュー・プロジェクトにtrinidad-config.xmlファイルが移入されます。このファイルはアプリケーションのデフォルト・スキンを設定するために使用します。詳細は、第4章「スキニング」を参照してください。

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(http://www.oracle.com/technetwork/index.html)を参照してください。

図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」の順に選択するとアクセスできます)。

注意:

「1列」ビュー・オプションを選択すると、レイアウトに問題が生じます。このオプションは選択しないでください。

BlackBerryブラウザ4.n

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項「サポートされないコンポーネントおよび属性」

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)

4 スキニング

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

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

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

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

- 4.3項「iPhoneコンポーネントの例」

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

スキニングを使用すると、デバイスに依存したスタイルシートの自動配信を通じて、各種のデバイスで一貫したページを表示できるようになります。これらのスタイルシートにより、様々なモバイル・ブラウザで同じページ定義を共有しながら、ページを最適に表示できます。アプリケーションのルック・アンド・フィールの設定が可能なこれらのスタイルシート内では、コンポーネントのサイズ、位置および外観を設定することによってそのコンポーネントを特定のブラウザ向けに調整することに加え、コンポーネントを表示する(または非表示にする)ブラウザのタイプを指定します。詳細は、4.2項「ADFモバイル・ブラウザのスキニングの実装」を参照してください。スキニングの使用方法の例は、iPhoneスキンの例を含む4.3項「iPhoneコンポーネントの例」を参照してください。類似のスタイル・シートを、BlackBerryやWindows Mobile 6、Nokia S60など他のモバイル・ブラウザに適用できます。実装サンプルは、Oracle Technology Network (http://www.oracle.com/technetwork/index.html)から入手できます。

注意:

ブラウザでは、Cascading Style Sheets (CSS)構文がサポートされている必要があります。また、特定のブラウザに固有のスタイリング機能には、スタイル・シートのカスタマイズ以外のメソッドが必要な場合があります。

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

スキンを作成するには、『Development Guidelines for Apache MyFaces Trinidad』の「Apache Trinidad Skinning」(http://myfaces.apache.org/trinidad/devguide/skinning.html)を参照してください。このドキュメントには次の方法に関する説明が記載されています。

1. スキンの作成。これには、図4-1に示すように、ADFモバイル・ブラウザ・ビュー・プロジェクトのWEB-INFノード内でtrinidad-skins.xmlファイルを作成することが含まれています。

2. スタイル・シートの作成(.cssファイル)。

3. trinidad-config.xmlファイル(WEB-INFノードにあります)でスキン・ファミリを設定します。

図4-1 ADFモバイル・ビュー・プロジェクトのスキニング・アーティファクト

4.2.1 ADFモバイル・ブラウザ・アプリケーションでのスキニングの実装方法

ADFモバイル・ブラウザでは、次のタスクを実行することによってスキニングを実装します。

- trinidad-config.xmlファイル内で、EL(式言語)式#{requestContext.agent.skinFamilyType}(ブラウザのスキン・ファミリ・タイプを返します)を使用して<skin-family>タグを定義します。7.2.1.1項「スキン・タイプの決定」を参照してください。

- trinidad-skins.xmlでレンダーキットおよびスタイルシートを指定します。

- ADFモバイル・ブラウザ・プロジェクト内にCSSファイルをインクルードします。この場所は通常、ADFモバイル・ブラウザ・ビュー・プロジェクトのpublic_htmlディレクトリのサブディレクトリです(JDeveloper\mywork\Application\ADF Mobile Application view project\public_html\cssなど)。

4.2.1.1 trinidad-config.xmlファイルで<skin-family>を定義する方法

図4-1は、<trinidad-config>要素内での<skin-family>タグの追加を示しています。この要素には、ブラウザのスキン・ファミリ・タイプを返す文字列を評価するEL式が含まれています。

例4-1 スキン・ファミリの定義

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

4.2.1.2 trinidad-config.xmlファイルで<skin-family>を定義し、スキン間の切替えを有効にする方法

スキンを作成したら、Trinidad-config.xmlファイルの<skin-family>要素を使用することにより、デフォルトのスキンと別のスキン(例4-2に示すiPhoneスキンなど)を切り替えることができます。図4-1に示すように、JSPページを作成したことにより生成されたこのファイルはWEB-INFノードにあります。このファイルを使用して、アプリケーションにデフォルトのスキンを設定します。デフォルトのスキンと代替スキンを切り替えるには、式言語(EL)を使用します。

スキンの切替えを有効化するには、次の手順を実行します。

1. Trinidad-config.xmlファイルを開きます。

2. 例4-2に示すように、デフォルト(minimal)スキンとiPhoneスキン(iPhoneWebkit)を切り替えるためのEL式を<skin-family>要素内に定義します。

例4-2 代替スキンの設定

<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin- family>
#{requestContext.agent.skinFamilyType == 'iPhonewebkit' ?
'iPhonewebkit':'minimal'}
</skin- family>
</trinidad-config>

3. ファイルを保存します。7.2.1.1項「スキン・タイプの決定」も参照してください。

4.2.2 trinidad-skins.xmlファイルでのレンダーキットおよびスタイルシート名の指定方法

<family>要素内で識別されたブラウザ・タイプに対して<skin>タグを定義します。このタグはレンダーキットIDとスタイル・シート名(例4-3ではそれぞれ、org.apache.myfaces.trinidad.desktopとiPhone/iPhone.css)を指定します。この要素に定義される値は、trinidad-config.xmlにある<skin-family>タグのEL式で返された結果文字列です(例4-1参照)。7.2.1.1項「スキン・タイプの決定」も参照してください。

例4-3 スキンの定義

<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>iphone</id>
<family>iPhonewebkit</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name> iPhone/iPhone.css </style-sheet-name>
</skin>
<skin>
<id>symbian</id>
<family>nokiawebkit</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name> symbian/symbian.css </style-sheet-name>
</skin>
<skin>
<id>windowsMobile</id>
<family>windowsmobile</family>
<render-kit-id>org.apache.myfaces.trinidad.pda</render-kit-id>
<style-sheet-name> windowsMobile/windowsMobile.css </style-sheet-name>
</skin>
<skin>

4.2.3 実行時の処理内容

<skin-family>内に定義したEL式により、ブラウザのスキン・ファミリ・タイプが返されます。

4.3 iPhoneコンポーネントの例

CSS 3.0の機能により、ADFモバイル・ブラウザ・アプリケーションはルック・アンド・フィールをネイティブのiPhoneアプリケーションと同じにすることができます。新規スキンをiPhone用Trinidadで作成することにより、iPhone固有のコンポーネントを含めることができます。これらのコンポーネントの例を次に示します。

- ヘッダー

- ナビゲーション・パネル

- フィールド・セット

これらのコンポーネントはstyleClass属性を使用してスタイル・クラスを適用する方法を示します。

4.3.1 iPhoneアプリケーションでのヘッダーの作成方法

<tr:panelHeader>および<tr:commandLink>コンポーネントとともに使用されるbackButton、toolBar、toolBar > h1およびbuttonスタイル・クラスは、図4-2に示すようにヘッダーの外観を設定します。

図4-2 ヘッダー・コンポーネント

表4-1では、ヘッダーの作成に使用するタグ、タグに定義されるスタイル・クラス、そしてこれらのクラスのレイアウト効果を示しています。

表4-1 ヘッダー・コンポーネントのクラス

タグ

スタイル・クラス

レイアウト効果

<tr:panelHeader>

toolbar、toolbar > h1

ヘッダーの高さ、幅、枠線および背景を設定します。

<tr:commandLink>

backButton

ヘッダーの「戻る」ボタンの幅、高さ、色および位置を設定します。

<tr:commandLink>

button

ヘッダーのボタンの幅、高さ、色および位置を設定します。

toolbar

例4-4では、ヘッダーの高さ、幅、枠線および背景を設定するtoolbarスタイル・クラス・セレクタを示しています。

例4-4 toolbarスタイル・クラス・セレクタ

.toolbar {
box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
border-bottom: 1px solid #2d3642 !important;
border-top: 1px solid #000000 !important;
padding: 10px !important;
height: 45px !important;
background: url(/images/toolbar.png) #6d84a2 repeat-x !important;
display: block !important;
}

toolbar > h1

例4-5では、ツールバー・タイトルの高さ、幅、フォント・サイズおよびスタイルを設定するtoolbar > h1スタイル・クラス・セレクタを示しています。

例4-5 toolbar > h1スタイル・クラス・セレクタ

.toolbar > h1 {
position: absolute !important;
overflow: hidden !important;
left: 50% !important;
margin: 1px 0 0 -75px !important;
height: 45px !important;
font-size: 20px !important;
width: 150px !important;
font-weight: bold !important;
text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0 !important;
text-align: center !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #FFFFFF !important;
border-bottom: none !important;
}

button

例4-6では、ヘッダーのボタンの幅、高さ、色および位置を設定するbuttonスタイル・クラス・セレクタを示しています。

例4-6 buttonスタイル・クラス・セレクタ

.button {
position: absolute !important;
overflow: hidden !important;
top: 8px !important;
right: 6px !important;
margin: 0 !important;
border-width: 0 5px !important;
padding: 0 3px !important;
width: auto !important;
height: 30px !important;
line-height: 30px !important;
font-family: inherit !important;
font-size: 12px !important;
font-weight: bold !important;
color: #FFFFFF !important;
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0 !important;
text-overflow: ellipsis !important;
text-decoration: none !important;
white-space: nowrap !important;
background: none !important;
-webkit-border-image: url(/images/toolButton.png) 0 5 0 5 !important;
}

backButton

例4-7では、ヘッダーの「戻る」ボタンの幅、高さ、色および位置を設定するbackbuttonスタイル・クラス・セレクタを示しています。

例4-7 backbuttonスタイル・クラス・セレクタ

.backButton {
position: absolute !important;
overflow: hidden !important;
top: 8px !important;
left: 6px !important;
margin: 0 !important;
height: 30px !important;
max-width: 45px !important;
line-height: 30px !important;
font-family: inherit !important;
font-size: 12px !important;
font-weight: bold !important;
color: #FFFFFF !important !important;
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0 !important;
text-overflow: ellipsis !important;
text-decoration: none !important;
white-space: nowrap !important;
background: none !important;
-webkit-border-image: url(/images/toolButton.png) 0 5 0 5 !important;
padding: 0  !important;
border-width: 0 8px 0 14px !important;
-webkit-border-image: url(/images/backButton.png) 0 8 0 14 !important;
}

4.3.1.1 styleClass属性を使用したヘッダー・コンポーネントの作成

例4-8では、styleClass属性を定義してヘッダー・コンポーネントを作成する方法を示しています。

例4-8 ヘッダー・コンポーネントの定義

<tr:panelHeader id = "panelHeader" styleClass="toolbar" text="Title">
<tr:commandLink styleClass="button"  text="Forward"/>
<tr:commandLink styleClass="backButton"  text="Back"/>
</tr:panelHeader>

4.3.2 iPhoneアプリケーションでのナビゲーション・パネルの作成方法

ナビゲーション・パネルを定義するスタイル・クラスには、次の2つがあります。

- 静的リストでは、Panel Listスタイル・クラスを使用します。このスタイル・クラスは、ナビゲーション・アイテムの単純なリストを表示します。このリストの幅、位置および高さを設定します。

- 動的リストでは、Table Listスタイル・クラスを使用します。

4.3.2.1 Panel Listスタイル・クラスを使用したナビゲーション・パネルの静的リストの作成

<tr:panelList>コンポーネント内にPanel Listスタイル・クラスを、例4-9で示すように各ナビゲーション・アイテムで<tr:commandLink>タグを使用して定義します。

例4-9 ナビゲーション・アイテムの静的リストの定義

<tr:panelList styleClass="panelList">
<tr:commandLink text="commandLink 1"/>
<tr:commandLink text="commandLink 2"/>
<tr:commandLink text="commandLink 3"/>
</tr:panelList>

表4-2で示しているような式を使用すると、多くのCSS機能がこのコンポーネントで、デフォルトで適用されます。

表4-2 CSS式

CSS式

レイアウト効果

panelList ul

リストの幅、位置および高さを設定します。

panelList ul > li

リスト内の各アイテムの下部の位置および枠線を設定します。

panelList ul > li > a

<tr:commandLink>要素内に定義される各ナビゲーション・アイテムのマージン、フォント・サイズ、高さおよび背景を設定します。

図4-3は表4-2で説明されている式を示しています。

図4-3 ナビゲーション・アイテムの静的リスト

panelList ul

例4-10では、リストの幅、位置および高さを設定するpanelList ulスタイル・クラス・セレクタを示しています。

例4-10 panelList ulスタイル・クラス・セレクタ

.panelList ul {
position: absolute !important;
margin: 0  !important;
padding: 0 !important;
left: 0 !important;
top : 45px !important;
width: 100% !important;
min-height: 372px !important;
}

panelList ul > li

例4-11では、リスト内の各アイテムの下部の位置および枠線を設定するpanelList ul > liスタイル・クラス・セレクタを示しています。

例4-11 panelList ul > liスタイル・クラス・クラスタ

.panelList ul > li {
position:relative  !important;
margin:0  !important;
border-bottom:1px solid #E0E0E0 !important;
padding:8px 0 8px 10px  !important;
list-style:none  !important
}

panelList ul > li > a

例4-12では、各ナビゲーション・アイテムのマージン、フォント・サイズ、高さおよび背景を設定するpanelList ul > li > aスタイル・クラス・セレクタを示しています。

例4-12 panelList ul > li > aスタイル・クラス・セレクタ

.panelList ul > li > a {
display:block  !important;
margin:-8px 0 -8px -10px  !important;
padding:8px 32px 8px 10px !important;
text-decoration:none  !important;
color:inherit  !important;
background:url(/images/listArrow.png) no-repeat right center  !important;
min-height:34px !important;
font-size:20px;
font-weight:bold;
}

4.3.2.2 Table Listスタイル・コンポーネントを使用したナビゲーション・アイテムの動的リストの作成

Table Listコンポーネントを使用すると、例4-13で示すように、動的リンクのリストを含む表などの動的表を作成できます。Table Listコンポーネントは実際は表であるため、組込みナビゲーションを含んでいます。Panel Listとは異なり、Table Listは、図4-4で示すように、ナビゲーション・アイテムの下にイメージおよび詳細説明を含めるためのスタイル・クラスを含みます。

例4-13 動的リンクのリストの作成

<tr:table value="#{bindings.EmployeesView15.collectionModel}"
var="row"
rows="7"
width="100%"
styleClass = “iphoneTable”
emptyText="#{bindings.EmployeesView15.viewable ? 'No rows yet.' :"
id="mainTable"
horizontalGridVisible="false">
<tr:column >
<tr:panelGroupLayout layout="vertical" styleClass="listing">
<tr:outputText value="#{row.bindings.PhoneNumber.inputValue}"
styleClass="listingDetails"/>
<tr:commandLink text="#{row.bindings.LastName.inputValue} ,
#{row.bindings.FirstName.inputValue}"
styleClass="listingLink"
partialSubmit="true"
actionListener = "#{agentUtil.gotoPage2}"
id="myLink1"
disabled="#{!bindings.Execute.enabled}"
onclick='iPhone.slideFragments("page2", "page1")'>
</tr:commandLink>
<tr:image styleClass="listingImage"
source="/images/326425649.png"/>
</tr:panelGroupLayout>
</tr:column>
</tr:table>

動的リンクの表を作成するには、次の手順を実行します。

1. データ・コントロールからTrinidad読取り専用表を作成します。

2. 表のstyleClass属性を、iphoneTableとして設定します。
表4-3でリストされている式は、styleClassをiPhoneTableとして設定するときにiPhone関連のCSSプロパティを適用します。

表4-3 CSS式

式

レイアウト効果

.iphoneTable .af_table_content

表コンテンツの背景色を設定します。表のデフォルトの外側枠線スタイルを「なし」にオーバーライドします。

.iphoneTable .af_table_control-bar-top

表コントローラ(ページ付け)の背景色を設定します。

.iphoneTable .af_column_cell-text

列の背景色を設定します。

3. 表の幅を100に設定します。

4. horizontalGridVisible属性をfalseに設定します。

注意:

<tr:table>タグの中の列は1つのみである必要があります。この列の内部で、styleClassがlistingとして設定された<tr:panelGroupLayout>コンポーネントによってすべてのタグが折り返される必要があります。

表4-4は、<column>タグのサブ要素のスタイル・クラスを示しています。

表4-4 表のListingスタイル・クラス

要素

スタイル・クラス

レイアウト効果

<tr:panelGroupLayout>(layout属性は垂直方向のverticalに設定)

listing

各行の位置および枠線を設定します。

<tr:panelList>

listingImage

イメージの幅、位置および高さを設定します。

<tr:commandLink> : (ナビゲーション・アイテム)

listingLink

ナビゲーション・アイテムの位置、高さ、フォント・サイズ、文字列合わせ、背景イメージおよび色を設定します。

<tr:outputText> : (ナビゲーションの説明)

listingDetails

ナビゲーション説明の位置、高さ、フォント・サイズ、文字列合わせ、背景イメージおよび色を設定します。

図4-4 動的リンクのリスト

listing

例4-14では、各行の位置および枠線を設定するlistingスタイル・クラス・セレクタを示しています。

例4-14 listingスタイル・クラス・セレクタ

.listing {
position: relative !important;
margin: 0 !important;
border-bottom: 1px solid #E0E0E0 !important;
padding: 8px 0 8px 10px !important;
font-size: 20px !important;
font-weight: bold !important;
list-style: none !important;
}

listingLink

例4-15では、イメージの幅、位置および高さを設定するlistingLinkスタイル・クラス・セレクタを示しています。

例4-15 listingLinkスタイル・クラス・セレクタ

.listingLink  {
display: block !important;
margin: -8px 0 -8px -10px !important;
padding: 8px 32px 8px 10px !important;
text-decoration: none !important;
color: inherit !important;
background: url(/images/listArrow.png) no-repeat right center !important ;
padding-left: 54px !important;
padding-right: 40px !important;
min-height: 34px !important;
font-size: 20px !important;
font-weight: bold !important;
}

listingDetails

例4-16では、ナビゲーション・アイテムの位置、高さ、フォント・サイズ、文字列合わせ、背景イメージおよび色を設定するlistingDetailsスタイル・クラス・セレクタを示しています。

例4-16 listingDetailsスタイル・クラス・セレクタ

.listingDetails {
display: block !important;
position: absolute !important;
margin: 0 !important;
left: 54px !important;
top: 27px !important;
text-align: left !important;
font-size: 12px !important;
font-weight: normal !important;
color: #666666 !important;
text-decoration: none !important;
height: 13px !important;
padding: 3px 0 0 0 !important;

}

listingImage

例4-17では、ナビゲーション説明の位置、高さ、フォント・サイズ、文字列合わせ、背景イメージおよび色を設定するlistingImageスタイル・クラス・セレクタを示しています。

例4-17 listingImageスタイル・クラス・セレクタ

.listingImage  {
display: block !important;
position: absolute !important;
margin: 0 !important;
left: 6px !important;
top: 7px !important;
width: 35px !important;
height: 27px !important;
padding: 7px 0 10px 0 !important;
}

4.3.3 iPhoneアプリケーションで詳細アイテムを作成する方法

宛先ページで、このコンポーネントはパネル・ナビゲーションで選択されたアイテムの詳細を表示します。図4-5で示すように、これらの詳細には選択した従業員の給与、電話番号、雇用日が含まれます。

図4-5 フィールド・セット

この宛先ページ(複数のフィールド・セット・コンポーネントで構成されています)は1つ以上の行を含み、各行はラベルまたはメッセージ(単純テキストまたは他のナビゲーション・アイテムのいずれか)を含みます。例4-18で示すように、<div>タグを使用してこれらの行を作成します。<div>タグは、<tr:panelCaptionGroup>コンポーネントのサブ要素です。

例4-18 フィールド・セットの作成

<div  class="panelBase“>
<tr:panelCaptionGroup>
<div class="row">
<tr:outputText styleClass="labeltext"
value="#{agentUtil.name}"
truncateAt="0"/>
<tr:outputText styleClass="messageText"
value="#{sessionScope.FirstName}" />
</div>
<div class="row">
<tr:outputText styleClass="labeltext" value="Last Name"/>
<tr:commandLink text="#{sessionScope.LastName}"
styleClass="messageLink"
partialSubmit="true"
id="myLink2"
actionListener="#{agentUtil.gotoPage3}"
onclick='iPhone.slideFragments("page3",page2");'/>
</div>
</tr:panelCaptionGroup>
<tr:panelCaptionGroup>
<div class="row">
<tr:outputText styleClass="labeltext" value="Email"/>
<tr:outputText styleClass="messageText"
value="#{bindings.LastName}@oracle.com"/>
</div>
<div class="row">
<tr:outputText styleClass="labeltext" value="Salary"/>
<tr:outputText styleClass="messageText" }"
value="#{sessionScope.Salary}"/>
</div>
<div class="row">
<tr:outputText styleClass="labeltext"
value="Phone"
truncateAt="5"/>
<tr:outputText styleClass="messageText"
value="#{sessionScope.PhoneId}"/>
</div>
<div class="row">
<tr:outputText styleClass="labeltext"
value="Hired"
truncateAt="7"/>
<tr:outputText styleClass="messageText"
value="#{sessionScope.HireDate}"/>
</div>
<div class="row">
<tr:outputText styleClass="labeltext"
value="Phone"
truncateAt="5"/>
<tr:outputText styleClass="messageText"
value="#{sessionScope.PhoneId}"/>
</div>
<div class="row">
<tr:outputText styleClass="labeltext"
value="Hired"
truncateAt="7"/>
<tr:outputText styleClass="messageText"
value="#{sessionScope.HireDate}"/>
</div>
<div class="row">
<tr:outputText styleClass="labeltext"
value="Hired"
truncateAt="7"/>
<tr:outputText styleClass="messageText"
value="#{sessionScope.HireDate}"/>
</div>
</tr:panelCaptionGroup>
</div>

フィールド・セット・コンポーネントを作成するには、次の手順を実行します。

1. 例4-18に示すように、<div>タグを必要なだけ<tr:panelCaptionGroup>コンポーネント内に挿入します。

2. 行を作成するには、各々の<div>タグをrowクラス属性によって定義します。次に例を示します。

<div class="row">

row属性は、各行の位置、高さおよび枠線を設定します。

3. 各<div>タグ内で、ラベル要素を次のように作成します。

1. <tr:outputText>タグを作成します。

2. StyleClassをlabeltextとして定義して、ラベル要素の位置、幅、フォントおよび色を設定します。

次に例を示します。

<tr:outputText styleClass="labeltext"
value="Phone"
truncateAt="5"/>

4. 次のように<tr:outputText>タグかまたは<tr:commandLink>コンポーネントを使用して、メッセージ要素を作成します。

- styleClassがmessageTextに設定された<tr:outputText>コンポーネント。次に例を示します。

<tr:outputText styleClass="messageText"
value="#{sessionScope.PhoneId}"/>

messageTextスタイル・クラスは、ラベル要素の位置、幅、フォントおよび色を設定します。

- 例4-19では、styleClassがmessageLinkに設定された<tr:commandLink>コンポーネントを示しています。

例4-19 styleClass属性をmessageLinkとして設定する

<tr:commandLink text="#{sessionScope.LastName}"
styleClass="messageLink"
partialSubmit="true"
id="myLink2"
actionListener="#{agentUtil.gotoPage3}"
onclick='iPhone.slideFragments("page3", "page2");'/>

messageLink要素は、メッセージ要素の位置、幅、フォント、高さおよび色を設定します。

5. パネル・ベース背景では、<div>タグをpanelBaseクラス属性で折り返します(例4-18を参照)。

注意:

panelBase fieldsetクラスは、丸いエッジを設定します。fieldset要素は、<tr:panelCaptionGroup>コンポーネントのレンダラによって追加されます。

4.3.3.1 フィールド・セットのスタイル・クラス

この項では、フィールド・セット・コンポーネントのスタイル・クラスと、それらのレイアウト・プロパティを示しています。

labeltext

例4-19では、ラベル要素の位置、幅、フォントおよび色を設定するlabeltextスタイル・クラス・セレクタを示しています

例4-20 labeltextスタイル・クラス・セレクタ

.labeltext {
position: absolute !important;
margin: 0 0 0 14px !important;
line-height: 42px !important;
font-weight: bold !important;
color: #7388a5 !important;
text-align: right !important;
width: 90px !important;
white-space: nowrap !important;
}

messageText

例4-21では、メッセージ要素の位置、幅、フォントおよび色を設定するmessageTextスタイル・クラス・セレクタを示しています。

例4-21 messageTextスタイル・クラス・セレクタ

.messageText {
display: block !important;
margin: 0 !important;
border: none !important;
padding: 12px 10px 0 110px !important;
text-align: left !important;
font-weight: bold !important;
text-decoration: inherit !important;
height: 42px !important;
color: inherit !important;
box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
}

messageLink

例4-22では、メッセージ・リンク要素の位置、幅、フォントおよび色を設定するmessageLinkスタイル・クラス・セレクタを示しています。

例4-22 messageLinkスタイル・クラス・セレクタ

.messageLink  {
display: block !important;
text-align: left !important;
text-decoration: none !important;
color: inherit !important;
background: url(/images/listArrow.png) no-repeat right center !important ;
padding-top: 12px !important;
padding-left: 111px !important;
padding-right: 40px !important;
min-height: 34px !important;
font-size: 16px !important;
font-weight: bold !important;
}

panelBase

例4-23では、パネル・ベースの背景を設定するpanelBaseスタイル・クラス・セレクタを示しています。

例4-23 panelBaseスタイル・クラス・セレクタ

.panelBase {
box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
padding: 10px !important;
background: #c8c8c8 url(/images/pinstripes.png) !important;
}

panelBase fieldset

例4-24では、丸いエッジを設定するpanelBase fieldsetスタイル・クラス・セレクタを示しています。<fieldSet>要素は、<tr:panelCaptionGroup>コンポーネントのレンダラによってレンダリングされます。

例4-24 panelBase fieldsetスタイル・クラス・セレクタ

.panelBase fieldset {
position: relative;
margin: 0 0 20px 0;
padding: 0;
background: #FFFFFF;
-webkit-border-radius: 10px;
border: 1px solid #999999;
text-align: right;
font-size: 16px;
}

row

例4-25では、各行の位置、高さおよび枠線を設定するrowスタイル・クラス・セレクタを示しています。

例4-25 rowスタイル・クラス・セレクタ

.row {
position: relative !important;
min-height: 42px !important;
border-top: 1px solid #999999 !important;
-webkit-border-radius: 0 !important;
text-align: right !important;
}

row:first-child

例4-26では、row:first-childスタイル・クラス・セレクタを示しています。

例4-26 row:first-childスタイル・クラス・セレクタ

.row:first-child {
border-top: none !important;

}

4.3.4 iPhoneアプリケーションのCSSクラスについての考慮事項

ほとんどのCSSクラスはstyleClass属性を使用して特定のコンポーネントへ手動で適用しますが(例4-8を参照)、いくつかのCSS機能はiPhoneスキンを使用するときにデフォルトで適用されます。

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

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

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

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

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

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

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

ADFモバイル・ブラウザではJavaScriptサポートを持たない基本的なHTMLモバイル・ブラウザがサポートされています。こうしたJavaScript未対応のため、これらのブラウザはBlackBerryスマートフォンやApple iPhoneで使用される競合製品よりも堅牢性が低くなっています。1.2項「サポートされているモバイル・ブラウザ」にリストされているブラウザ以外にも、ADFモバイル・ブラウザでは、一般的なほとんどのブラウザが基本的なHTMLモバイル・ブラウザとみなされます。ただし、ADFモバイル・ブラウザは特定のモバイル・ブラウザを認識しないことがあります。

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

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

注意:

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

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ブラウザの動作は、水平スクロールを使用してページを表示しないという点で、他のブラウザとは異なります。かわりに、ページは画面の幅にあわせて表示されます。

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 ラベルおよびメッセージ・パネルの書式設定

プログラミングによる処理の柔軟性を維持するため、ADFモバイルではTrinidadコンポーネントでのnowrap属性がサポートされています。ページングをサポートするアプリケーションのプログラム時に、コンポーネント定義にnowrapを追加した場合、問題が発生する可能性があります。

6.4 列幅の書式設定

列を書式設定する場合は、tr:panelFormLayoutコンポーネント内のLabelWidthとFieldWidth属性の両方に対してパーセント幅を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

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

skinFamilyType

Trinidadでは各モバイル・ブラウザをそのCSS機能に基づき、さまざまなスキン・タイプに分類しています。詳細は、7.2.1.1項「スキン・タイプの決定」を参照してください。

7.2.1.1 スキン・タイプの決定

TrinidadではCSSサポートに基づき、着信ユーザー・エージェントをさまざまなスキン・ファミリ・タイプに分類しています。スキン・ファミリ・タイプは#{requestContext.agent.skinFamilyType} EL式を使用して公開されています。たとえば、TrinidadはこのEL式を使用して、Windowsプラットフォームで実行されているSafariユーザー・エージェント用にwindowswebkitの値を導出します。Symbianデバイスで実行中のSafariブラウザの場合は、この式はNokia Webkit (nokiawebkit)を返します。表7-2は、ユーザー・エージェント、プラットフォームおよびプラットフォーム・バージョンに従って#{requestContext.agent.skinFamilyType}により返されるスキン・ファミリ・タイプをリストしています。

表7-2 SkinFamilyType属性により返されるスキン・ファミリ・タイプ

ユーザー・エージェント

プラットフォーム

スキン・ファミリ・タイプ

Windowsモバイル

windowsmobile

Safari

iPhone/iPod

iPhonewebkit

Safari

Linux

linuxwebkit

Safari

Macintosh

macwebkit

Safari

Symbian

nokiawebkit

Safari

Windows

windowswebkit

Safari

未知のプラットフォーム

defaultwebkit

Blackberry

blackberryminimal

Blackberry (バージョン4.5以上)

blackberry

他のすべてのモバイル・ブラウザ

genericpda

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

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

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

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

表7-3 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章「スキニング」で説明したスタイルシートの使用に加え、EL (式言語)式を使用してtr:goButtonおよびtr:goLinkコンポーネントを定義することにより、ADFモバイル・ブラウザ・アプリケーションをさらに調整して電子メール、電話およびGoogleマップのサポートを含めるようにできます。

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

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

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

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

3. HTMLリンクにdestinationプロパティを設定します(例8-1では、EL式#{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}?subject=helloのように電子メール・アドレスの後ろに疑問符(?)を付加し、続けてプロパティを追加します。それぞれのプロパティはアンパサンド(&)で区切ります。

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

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

8.3 電話の統合

電話番号の呼出しダイアログ・ボックスを起動するには、次の手順を実行します。

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

2. tel:プロトコルを、電話番号の前に付加します。

注意:

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

3. 電話番号にdestinationプロパティを設定します(例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. tr:goButtonまたはtr:goLinkコンポーネントを使用します。

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

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

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

注意:

text文字列に記載されるアドレスは、場所と場所の間のカンマを含め、正しい書式になっている必要があります。destination文字列では、スペースをプラス符号(+)文字に置き換えます。

例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}"/>

アドレス文字列内の各EL式は、例8-4に示すようにプラス符号(+)で連結する必要があります。EL式とEL式の間にスペースが含まれていてはなりません。

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

Googleマップで提供されるルート案内を使用するためにADFモバイル・アプリケーションを有効にするには、GoogleマップのURL内で、疑問符(?)の後ろの部分を、出発地点と到着地点を示す文字列(saddr=<starting address>&daddr=<destination address>)に変更します。この形式を使用して、California、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スマートフォンの両方に対してビュー・ポートを設定しています。ビューポートの詳細は、iOS Developer Library(http://developer.apple.com/library/ios/navigation/)から入手可能な『iOS Human Interface Guidelines』を参照してください。

例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 © 2013, Oracle and/or its affiliates. All rights reserved.