D ADF Facesを使用したタッチ装置のWebアプリケーションの作成

この付録では、タッチ装置のWebベースのアプリケーションを実装する方法について説明します。

この付録では次の項について説明します。

D.1項「ADF Facesを使用したタッチ装置のWebアプリケーションの作成の概要」
D.2項「タッチ装置上のモバイル・ブラウザでのADF Facesの動作」
D.3項「モバイル・ブラウザでADF Facesコンポーネントを使用する場合のベスト・プラクティス」

D.1 ADF Facesを使用したタッチ装置のWebアプリケーションの作成の概要

ADF Facesフレームワークは、Safariなどのモバイル・ブラウザで実行するように最適化されています。フレームワークは、タッチ装置上のモバイル・ブラウザがページをリクエストすると認識し、モバイル・デバイスに適用可能なJavaScriptとピア・コードのみを提供します。ただし、標準ADF Faces Webアプリケーションはモバイル・ブラウザで実行されますが、ユーザーの対話が異なり、スクリーン・サイズが制限されるため、アプリケーションをモバイル・ブラウザで実行する必要がある場合、タッチ装置に固有のバージョンのページを作成する必要があります。

この付録では、タッチ装置上のモバイル・ブラウザでのADF Facesの機能と、タッチ装置専用のWebページを実装するためのベスト・プラクティスについて説明します。

D.2 タッチ装置上のモバイル・ブラウザでのADF Facesの動作

タッチ装置では、ユーザーはマウスをクリックするかわりに画面にタッチします。ネイティブ・ブラウザは、これらのタッチ・イベントをマウス・イベントに変換して処理します。ADF Facesでは、コンポーネント・ピアが変換を処理します。タッチ・デバイスとデスクトップ・デバイスとの変換の相違の処理方法を改善するために、ADF Facesでは、変換が必要なコンポーネントごとに、タッチ・デバイス固有のピアとデスクトップ固有のピアの両方を提供しています(ピアの詳細は、第4.1項「ADF Facesアーキテクチャの使用について」を参照)。

これらのピアにより、コンポーネントは装置に固有のイベントを処理できます。たとえば、デスクトップのピアは、マウス・オーバー・イベントやマウス・アウト・イベントを処理し、タッチ装置のピアは、タッチ開始イベントとタッチ終了イベントを処理します。基本のピアは、共通の対話をすべて処理します。この区別によって、どちらの装置でも処理が最適化されます(タッチ・イベントの詳細は、表6-3「ADF Facesクライアント・イベント」を参照)。

タッチ装置のピアでは、タッチ固有のジェスチャを使用して、デスクトップでの対話をシミュレートするロジックが提供されます。表D-1に、デスクトップのジェスチャとタッチ装置のジェスチャの対応状況を示します。

表D-1 サポートされるモバイル・ブラウザのユーザー・ジェスチャ

マウスによる対話	タッチ・ジェスチャ	視覚状況	例
クリック	タップ	マウス・ダウン	ボタンを実行
選択	タップ	選択済	表の行を選択
複数を選択	タップでオブジェクトを選択、タップで別のオブジェクトを選択、選択済オブジェクトのタップで選択解除	選択済	複数のグラフ・バーを選択
簡単なインタフェースでのドラッグ・アンド・ドロップ	指で指す+ドラッグ	マウス・ダウン	スライダ・サムまたはスプリッタをドラッグ
ドラッグ・アンド・ドロップとデータ・チップの両方が必要な場合のドラッグ・アンド・ドロップ	指で指す+短く保留+ドラッグ	マウス・ダウン	ガント・チャートでタスク・バーを移動
カーソルを置いてデータ・チップを表示	指で指す+保留	カーソルを置く(マウスオーバー)	グラフのデータ・チップを表示
カーソルを置いてポップアップを表示	指で指す+保留	カーソルを置く(マウスオーバー)	カレンダからポップアップを表示
グラフにデータ・カーソルを配置	指で指す+保留	カーソルを置く	グラフのX軸に沿ってトレースし、Y軸の交差地点でデータ値をチップに表示。
右クリックでコンテキスト・メニューを起動	指で指す+保留または指で指す+保留+指を上げる(別の指で指す+保留ジェスチャとのジェスチャの競合がある場合)		グラフまたはカレンダ・アクティビティのコンテキスト・メニューを表示。指を上げた場合のコンテキスト・メニューの例: グラフ: 指で指す+保留=データ・チップ、指を上げる=コンテキスト・メニュー。グラフ(バブル: 指で指す+保留+移動=ドラッグ・アンド・ドロップ、指を上げる=コンテキスト・メニュー。ガント(タスク・バー): 指で指す+保留=データ・チップ、指で指す+保留+移動=ドラッグ・アンド・ドロップ、指を上げる=コンテキスト・メニュー
パン	1本の指でスワイプ(他のジェスチャとの競合がない場合)。それ以外は、2本の指でスワイプ	有効	マップのパン
ズーム・イン/ズーム・アウト	2回タップ(ブラウザのズーム)。最大化の状態では、ピンチ・イン/ピンチ・アウトでズームを実行可能	有効	ブラウザ画面をズームグラフまたはマップをズーム
ダブルクリックで階層ビューア・コンポーネントにアンカーを設定	2回タップ。	`setAnchorListener`に値がある場合、ノードがツリーのルートになります。値が設定されない場合、2回タップすると、ブラウザがズームされます。	階層内でノードを2回タップすると、それがルート・ノードになります。
階層ビューア・コンポーネントで分離アイコンをクリック	ノードをタップしてから、分離アイコンをタップ	パネル・カードが分離された状態	カードの上部をタップしてから、分離アイコンをタップすると、そのカードと直接レポートのみが表示されます。
階層ビューア・コンポーネントで折りたたみアイコンをクリック	カードを上にスワイプ	パネル・カードが折りたたまれた状態	パネル・カードの折りたたみ
階層ビューア・コンポーネントで展開アイコンをクリック	カードを下にスワイプ	パネル・カードが展開された状態	折りたたまれたパネル・カードを展開。
カーソルを置いて、階層ビューアのポップアップ・ボタンを表示	カードをタップ	ポップアップ・ボタンが表示された状態	カードをタップして、ポップアップ・ボタンを表示
階層ビューア・コンポーネントで右矢印ボタンまたは左矢印ボタンをクリック	カードを左または右にスワイプ	パネル・カードの切替え	左にスワイプして住所を表示、または右にスワイプしてコンテンツを表示。
ナビゲーション・ボタンをクリックして、階層を横方向に移動	横方向ナビゲーション行で左または右にスワイプするか、矢印をタップするか、タッチして短く保留で指を上げてナビゲーション・ボタンを表示	階層をトラバース	ルート・ノードの子孫を表示。
	最大化アイコンを1回タップ	コンポーネントを最大化
	最大化アイコンを2回タップするか、階層ビューアの背景を2回タブで移動	コンポーネントを最大化し、ズームで調整
円、長方形、ポリゴン・ツールをマップで使用して、領域をドラッグおよび選択	指で指す、形を描画	選択済	指で、マップ上の領域を選択
マップで測定ツールを使用して、開始点と終了点をクリック	測定ツールをタップ、指で指す、線を描画	描画された線と計算された距離が表示された状態	指で測定ツールを選択し、タップしてA点を選択、B点までの線を描画
マップでエリア・ツールを使用して、開始点と終了点をクリック	エリア・ツールをタップ、指で指す、線を描画	描画された線と計算されたエリアが表示された状態	指でエリア・ツールを選択、タップしてA点を選択、B点までの線を描画など。

さらに最適化するために、タッチ装置のJavaScriptがデスクトップのJavaScriptと区別されるようにADF FacesはJavaScriptをパーティション化します。ページをレンダリングすると、必要なJavaScriptのみがダウンロードされます。また、タッチ装置が検出されると、タッチ装置に固有のCSSコンテンツがページに送信されます。たとえば、タッチ装置では、シャトル・コンポーネントのアイテムにチェック・ボックスが表示されるため、ユーザーは簡単にアイテムを選択できます。デスクトップ装置では、チェック・ボックスは表示されません。

デバイス固有のピア、JavaScriptおよびCSSを使用すると、コンポーネントはデスクトップ装置とタッチ装置で別々に機能します。表D-2に、その違いを示します。

表D-2 モバイル・ブラウザでのコンポーネントの相違

コンポーネント	機能	デスクトップ・コンポーネントとの相違
`selectManyShuttle`および`selectOrderShuttle`	選択項目	選択ボックスが表示され、ユーザーは移動するアイテムを選択できます。
`table`	選択項目	行をタップして選択し、再度タップしてその行の選択を解除します。選択する行をタップすることで、複数の行を簡単に選択できます。つまり、2番目の行を選択しても、最初の行の選択が自動で解除されるわけではありません。
`table`	スクロール	表コンポーネントには、スクロールバーのかわりにページ番号が付けられており、次に示すように、ユーザーが行の特定のページにジャンプできるフッターが表示されます。 1ページの行数は`fetchSize`属性によって決まります。
ADF Facesダイアログ・フレームワーク	Windows	ダイアログ・フレームワークの起動に使用されるコマンド・コンポーネントで、`windowEmbedStyle`属性が`window`(別のウィンドウを起動)に設定されている場合、ADF Facesはこの値をオーバーライドして`inlineDocument`に設定するため、ダイアログはかわりに親ウィンドウ内にインラインで起動されます。
`menu`	連結解除可能メニュー	連結解除可能メニューはサポートされません。`detachable`属性は無視されます。
`inlineFrame`	ジオメトリ管理	タッチ装置では、`iFrame`コンポーネントはディメンションを無視し、常にそのコンテンツと同じ高さになります。そのため、`inlineFrame`がその親によってストレッチされる場合、スクロール・バーはタッチ装置で使用されないため、コンテンツは切り捨てられます。 `inlineFrame`がその親によってストレッチされる場合、40ピクセルのパディングとオーバーフローがインライン・スタイルに追加されます。
各種コンポーネント	アイコン、ボタンおよびリンク	アイコンとボタンは比較的大きく、リンク間のスペースは、指に対応するように比較的大きくなっています。

一部のタッチ装置ではFlashがサポートされないため、ADF Facesコンポーネントでは、アニメーションの遷移などにHTML5が使用されます。この規格によって、コンポーネントはすべての装置で表示されます。

D.3 モバイル・ブラウザでADF Facesコンポーネントを使用する場合のベスト・プラクティス

アプリケーションがタッチ装置で動作することがわかれば、その装置に固有のページを作成する作業がベスト・プラクティスになります。例D-1と同様のコードを使用すると、アプリケーションが動作する装置を決定し、その装置に正しいページを提供できます。

例D-1 プラットフォームの決定

public boolean isMobilePlatform()
{
  RequestContext context = RequestContext.getCurrentInstance();
  Agent agent = context.getAgent();
 
  return
  Agent.TYPE_PDA.equals(agent.getType()) ||
  Agent.TYPE_PHONE.equals(agent.getType()) ||
  (
  Agent.AGENT_WEBKIT.equals(agent.getAgentName()) &&
    (
// iPad/iPhone/iPod touch will come in as a desktop type and an iphone platform:
      "iphone".equalsIgnoreCase(agent.getPlatformName())
    )
  );
}

タッチ装置アプリケーションはほとんどのADF Facesコンポーネントを使用できますが、タッチ装置上では、特定の機能が制限されるか失敗することがあります。表D-3に、タッチ装置のアプリケーションの開発で従うベスト・プラクティスを示します。

表D-3 モバイル・ブラウザでのADF Facesコンポーネントのベスト・プラクティス

コンポーネント/機能	ベスト・プラクティス
ジオメトリ管理	ページのルート・パネル・コンポーネントの場合、`dimensionsFrom`属性を`children`に設定し、その他に`dimensionsFrom`属性を使用するコンポーネントの場合、この属性を常に`auto`に設定します。これらの設定により、ページはストレッチではなく自由に動作します。詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
部分ページ・ナビゲーション	部分ページ・ナビゲーションを使用すると、ページ間でJavaScriptなどのクライアント・コードをダウンロードする必要がないため、パフォーマンスが向上します。詳細は、8.4項「部分ページ・ナビゲーションの使用」を参照してください。
ナビゲーション	コンテンツの各部分への直接アクセスを提供します。適切なルールでは、1つのページに多くの領域を使用してスプリッタで分割するのではなく、ページごとに1つのタスクのみが使用されます。たとえば、左ペインのツリーで`panleSplitter`を使用してナビゲートするのではなく、リストベースのナビゲーション・モデルを提供します。
表	デフォルトでは、タブレット・デバイスでレンダリングする場合、表にはユーザーが行の特定のページにジャンプできるフッターが表示されます。タブレット・デバイスですべての表を表示するには、次のようにしてください。表コンポーネントをフロー・コンテナ(つまり、子を拡張しないコンポーネント)の中に配置してください。 `autoHeightRows`属性を`0`に設定してください。 `scrollPolicy`属性を`auto`に(ページがデスクトップ・デバイスでも実行される場合)、または`page`に(ページがタブレットのみで実行される場合)設定してください。表がフロー・コンテナの中にない場合、または属性が正しく設定されていない場合は、ページのかわりにスクロールバーが表示されます。表属性の詳細は、第12.3.2項「表のフォーマット化」を参照してください。レイアウトと表のフローの詳細は、第12.2.7項「ジオメトリ管理と表、ツリー、およびツリー表のコンポーネント」を参照してください。