| Oracle® Fusion Middleware Oracle Mobile Application Frameworkでのモバイル・アプリケーションの開発 2.0 E56274-01 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Mobile Application Frameworkでのモバイル・アプリケーションの開発 2.0 E56274-01 |
|
前 |
次 |
この章では、カスタムMAF AMX UIコンポーネントを作成し、それらを開発環境の一部として指定する方法について説明します。
この章には次の項が含まれます:
MAFによって提供されるJavaScriptとAPIの組合せを使用して、完全に機能する新しいインタラクティブなUIコンポーネントを作成し、それらをタグ・ライブラリに追加して、MAF AMXアプリケーション機能で使用できます。
MAFでは、カスタム・コンポーネントの作成用に次のAPIが提供されています。
静的API (第12.2.1項「静的APIの使用方法」を参照)
AmxEventクラス(第12.2.2項「AmxEventクラスの使用方法」を参照)
TypeHandler (第12.2.3項「TypeHandlerの使用方法」を参照)
AmxNode (第12.2.4項「AmxNodeの使用方法」を参照)
AmxTag (第12.2.5項「AmxTagの使用方法」を参照)
VisitContext (第12.2.6項「VisitContextの使用方法」を参照)
AmxAttributeChange (第12.2.7項「AmxAttributeChangeの使用方法」を参照)
AmxDescendentChanges (第12.2.8項「AmxDescendentChangesの使用方法」を参照)
AmxCollectionChange (第12.2.9項「AmxCollectionChangeの使用方法」を参照)
AmxNodeChangeResult (第12.2.10項「AmxNodeChangeResultの使用方法」を参照)
AmxNodeStates (第12.2.11項「AmxNodeStatesの使用方法」を参照)
AmxNodeUpdateArguments (第12.2.12項「AmxNodeUpdateArgumentsの使用方法」を参照)
表12-1に、カスタムUIコンポーネントの作成に使用できる静的APIを示します。
表12-1 静的API
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
|
タグの名前空間および名前を指定して プロトタイプ関数を追加できるように、登録されている
|
|
|
|
|
バブル・イベント・リスナー(tap、taphold、keydown、touchstart、touchmove、touchend、focus、blur、resizeなど)を登録します。 Webブラウザが、すべてのDOMノードのすべてのイベント・タイプをサポートしているわけではないことに注意してください(詳細は、ブラウザのドキュメントを参照)。
|
|
|
|
|
メタ・イベントtapおよびtapholdを削除すると、指定されたリスナーだけが削除されるのではなく、すべてのtouchstartおよびtouchendリスナー(他のメタ・イベントのこれらのリスナーも含む)が要素から削除されることに注意してください。 |
|
|
|
|
要素に対して、MAF AMXドラッグ・イベントのトリガーを許可します。
次の変更可能なメンバー・フラグがあります。
|
|
|
|
|
DOMノードおよびその子を削除しますが、その前に、 |
|
void |
|
|
子DOMノードを削除し、それらの各子ノードで |
|
|
|
|
|
|
|
|
なし |
|
|
|
|
|
ELメソッドを呼び出す点で |
|
|
|
|
DOMノードに対して、 |
|
|
|
|
指定された結果へのナビゲーションを実行することをコントローラに指示します。 |
|
|
|
|
不十分なバリデータ(必須または 続行が許可されると、 |
|
|
|
Function failSafeClientHandler |
ビジー・インジケータを示します。 パラメータは次のとおりです。
インジケータが必要以上に表示されるのを回避するには、非表示にします。 |
|
|
|
なし |
ローディング・インジケータの1つのインスタンスを非表示にします。 |
|
|
|
|
3ノード・イテレータ(コレクション・モデル)に対するオブジェクトのJavaScript配列またはイテレータをサポートするイテレータを作成します。
|
|
|
|
|
一連のデータ・プロバイダをバルクロードして、これらがキャッシュされてローカルでアクセスできるようにします。 |
|
|
|
|
現在のMAF AMXページに対して相対的であると想定して、指定されたリソースに基づく相対パスを作成します。リソース上にプロトコルがある場合は、絶対パスであると想定され、変更されません。 |
|
|
|
|
カスタム |
|
注意:
|
表12-2に、カスタムUIコンポーネントの作成時に使用できるAMXEventクラスを示します。
表12-2 AMXEventクラス
| クラス名 | パラメータ | 説明 |
|---|---|---|
|
|
なし |
結果ベースのナビゲーションをトリガーするイベント。 Oracle Fusion Middleware Oracle Mobile Application Framework Java APIリファレンスの |
|
|
|
指定された行が移動されたことを通知するイベント。移動された行のキー、および移動済行がその前に挿入された行のキーが含まれます。 Oracle Fusion Middleware Oracle Mobile Application Framework Java APIリファレンスの |
|
|
|
コンポーネントの選択変更のイベント。 Oracle Fusion Middleware Oracle Mobile Application Framework Java APIリファレンスの |
|
|
|
コンポーネントの値変更のイベント。 Oracle Fusion Middleware Oracle Mobile Application Framework Java APIリファレンスの |
表12-3に、カスタムUIコンポーネントの作成に使用できるTypeHandler APIを示します。
表12-3 TypeHandler API
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
|
初期DOM構造を作成し、その構造のルート要素を返します。 このメンバー関数は必須であり、定義されている必要があります。 |
|
|
|
|
このコンポーネントで作成される一連のコンポーネントに属するすべての |
|
|
|
|
このコンポーネントで作成される一連のコンポーネントに属するすべての |
|
|
|
|
処理する子 MAFがカスタム実装ではなく子ノードを作成する場合は、 この関数はオプションです。 |
|
|
|
|
次のいずれかのハンドラを表します。
この関数はオプションです。 |
|
|
|
|
タイプ・ハンドラに対して、子孫 |
|
|
|
|
タイプ・ハンドラに対して、変更に応答したHTMLの選択的リフレッシュを許可します。このメソッドは、
|
|
|
|
なし |
|
|
|
|
|
この アクセスでパラメータ |
|
|
|
|
この アクセスでパラメータ |
|
|
|
|
現在のビューが破棄される直前、つまり新しいビューに移動しようとするときにすべてを処理します。通常は、スクロール位置などのクライアント状態を保存するために使用されます( |
|
|
|
|
新しいビューが表示され、古いビューが削除された後にすべてを処理します。 |
表12-4に、カスタムUIコンポーネントの作成に使用できるAmxNode APIを示します。
表12-4 AmxNode API
| 文字列 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
なし |
この |
|
|
|
なし |
この |
|
|
|
なし |
この |
|
|
|
|
指定された タイプ・ハンドラは、状態変更が発生するたびにこの関数をコールする必要があります(たとえば、ある状態をキャッシュしておき、ユーザーが新しいページに移動してから戻ってきたときに、スクロール位置のように復元できるようにする必要があります)。つまり、状態変更の発生を常に検出できるとはかぎらないため、ビューが破棄される直前にコンポーネントの状態を更新する必要がある場合があります。考慮する必要があるシナリオとして次の2つが考えられます。
|
|
|
|
なし |
このビュー・インスタンス時に |
|
|
|
|
指定された
|
|
|
|
なし |
最後のナビゲーション以降、 |
|
|
|
なし |
適用可能な場合、この |
|
|
|
|
この |
|
|
|
|
属性に関して、EL値をモデルに設定するために使用できるEL式を作成して格納します。 この値は状況非依存で、値を設定するためにいつでも使用できます。一般的な用途は、ユーザーとの対話に基づいて値を設定することです。 この関数は、タイプ・ハンドラによってコールされる場合があります。 サブジェクト属性がEL値にバインドされていない場合は、 |
|
|
|
なし |
これは、親
|
|
|
|
なし |
このノードに定義された属性名のリストを取得します。 |
|
|
|
|
指定された名前の属性の属性値を取得します。 戻り値は 属性が設定されていない、またはまだロードされていない場合は、undefinedを返します。 |
|
|
|
|
タイプ・ハンドラまたはMAFが属性の属性値を この関数では、モデルは更新されません。 |
|
|
|
|
モデルの属性の値を設定します。 この値は、EL値を更新するためにJava側に送信されます。 |
|
|
|
|
属性がユーザーによって定義されているかどうかをチェックします。 |
|
|
|
なし |
最上位の場合は、親 |
|
|
|
|
この 子がファセットに属していない場合、 |
|
|
|
|
この 子は階層から削除されますが、そのDOMは削除されないことに注意してください。DOMの削除は、コール元の責任です。 これにより、タイプ・ハンドラは、DOMの置換時にアニメーションやその他の遷移を処理できます。 子が検出されて削除されたかどうかを返します。 |
|
|
|
|
既存の子を別の子に置換します。 古いものが検出されて置換されたかどうかを返します。 |
|
|
|
|
子 これら2つのパラメータはオプションです。 子が存在しないか、または指定された修飾子の子が存在しない場合は、空の配列を返します。 |
|
|
|
|
|
|
|
|
|
この
アクセスが完了し、続行する必要がないかどうかを返します。 |
|
|
|
|
この
アクセスが完了し、続行する必要がないかどうかを返します。 |
|
|
|
|
カスタム
アクセスが完了し、続行する必要がないかどうかを返します。 |
|
|
|
|
指定されたスタンプ・キーでレンダリングされる子を返します。フラット化できる(フラット化可能な)あらゆるコンポーネントをフラット化し、レンダリングされないコンポーネントは返しません。 |
|
|
|
なし |
フラット化されたAmxNodeにはレンダリング関連の動作が含まれていない可能性があること、つまり、フラット化されたAmxNodeのタイプ・ハンドラは子の作成およびアクセスのみを制御でき、レンダリングには影響しないことに注意してください。 |
|
|
|
なし |
|
|
|
|
|
|
|
|
|
なし |
レンダリングされたルート要素、または |
|
|
|
|
この
オプションのキーが、そのスタンプ・キーの子 各 |
|
|
|
なし |
|
|
|
|
なし |
|
|
|
|
|
このメソッドは、 |
|
|
|
|
カスタム この関数では、任意のUIタグの子が作成されます。
|
表12-5に、カスタムUIコンポーネントの作成に使用できるAmxTag APIを示します。
表12-5
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
なし |
タグのXML名前空間URIを取得します。 |
|
|
|
なし |
(ローカル これは、 |
|
|
|
なし |
タグ名を取得します。 これは、接頭辞がないローカルXMLタグ名です。 |
|
|
|
なし |
親タグ、または |
|
|
|
なし |
タグのテキスト・コンテンツを返します。 |
|
|
|
|
指定された名前空間とタグ名を使用して、タグのタグ階層を再帰的に検索します。 一致した場合は現在のタグを返します。 |
|
|
|
|
タグの子を取得します。 子の名前空間およびタグ名のオプションのフィルタリングを提供します。名前空間が |
|
|
|
なし |
すべての子ファセット・タグを取得します。 この関数の目的は、 |
|
|
|
|
指定された名前のファセット・タグを取得します。 この関数の目的は、ファセットの存在によりタイプ・ハンドラの動作が変更される場合のコードを支援することです。 ファセットが見つからない場合は |
|
|
|
なし |
UIタグであるすべての子タグを取得します。 この関数の目的は、 この関数では、ファセット・タグは返されません。 |
|
|
|
なし |
タグで指定されている属性のすべての属性名を取得します。 |
|
|
|
|
指定された属性が(静的値ではなく) EL式にバインドされているかどうかを決定します。 |
|
|
|
|
指定された名前の属性の属性値(EL文字列である場合があります)を取得します。 属性が指定されていない場合はundefinedを返します。 |
|
|
|
なし |
属性およびその値のキー/値ペア・マップを取得します。 |
|
|
|
なし |
ノードがタイプ・ハンドラを持つUIタグであるかどうかを決定し、コンテンツをレンダリングします。 |
|
|
|
なし |
このファセットの子のタグ、およびこのタグがファセット・タグである場合はファセットの名前を取得します。 これは、 そのファセットの名前、およびファセットの子タグを持つオブジェクトを返します。タグが |
|
|
|
|
スタンプIDを設定してこのタグの タグがファセット・タグである場合、タグは子タグの この関数では、 |
|
|
|
なし |
このタグのタイプ・ハンドラを取得します。 |
表12-6に、カスタムUIコンポーネントの作成時に使用できるVisitContext APIを示します。
表12-6 VisitContext API
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
なし |
すべてのノードがアクセスされるかどうかを決定します。 |
|
|
|
なし |
アクセス時に移動する必要があるノードを取得します。 このリストには、アクセスされる(コールバックが呼び出される)必要があるノードは必ずしも含まれていません。 |
|
|
|
なし |
アクセスするノードのリストを取得します。 |
|
|
|
|
指定された親 タイプ・ハンドラに対して、すべての子に移動するわけではない場合に、子への移動方法の最適化を許可します。
|
表12-7に、カスタムUIコンポーネントの作成時に使用できるAmxAttributeChange APIを示します。
表12-7 AmxAttributeChange API
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
なし |
現在の変更時に影響を受けた属性の名前を取得します。 |
|
|
|
|
属性の変更がコレクション変更であるかどうかを決定します。 |
|
|
|
|
属性のコレクション・モデル変更情報を取得します。使用可能な変更オブジェクトがない場合はnullを返します。 |
|
|
|
|
変更が行われる前に、属性の値を取得します。 |
|
|
|
|
指定された名前の属性が変更されたかどうかを決定します。 |
|
|
|
なし |
属性の変更数を取得します。 |
表12-8に、カスタムUIコンポーネントの作成時に使用できるAmxAttributeChange APIを示します。
表12-8 AmxDescendentChanges API
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
なし |
レンダリング前の変更済の子孫 |
|
|
|
|
指定されたAmxNodeの変更を取得します。 |
|
|
|
|
変更が適用される前の子孫AmxNodeの状態を取得します。 |
表12-9に、カスタムUIコンポーネントの作成時に使用できるAmxCollectionChange APIを示します。
表12-9 AmxCollectionChange API
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
なし |
コレクションに対する変更を項目化できるかどうか、つまりそのコレクションのキーと要素が特定されることで、 |
|
|
|
なし |
作成されたキーの配列、または変更を項目化できない場合は |
|
|
|
なし |
削除されたキーの配列、または変更を項目化できない場合はnullを取得します。 |
|
|
|
なし |
更新されたキーの配列、または変更を項目化できない場合はnullを取得します。 |
|
|
|
なし |
ダーティにされたキーの配列、または変更を項目化できない場合はnullを取得します。 |
表12-10に、カスタムUIコンポーネントの作成時に使用できるAmxNodeChangeResult APIを示します。
表12-10 AmxNodeChangeResult API
| メンバー | 説明 |
|---|---|
|
|
レンダリング前の子孫 |
|
|
属性およびその子AmxNodeインスタンスがタイプ・ハンドラによって更新済で、DOMはタイプ・ハンドラの |
|
|
AmxNodeおよびその子AmxNodeインスタンスがタイプ・ハンドラによって更新済ですが、DOMは、 |
|
|
タイプ・ハンドラは変更を処理できません。DOMおよび この値は、タイプ・ハンドラの |
表12-11に、カスタムUIコンポーネントの作成時に使用できるAmxNodeStates APIを示します。
表12-11 AmxNodeStates API
| メンバー | 説明 |
|---|---|
|
|
初期状態。 |
|
a |
レンダリングに必要なELベースの属性がまだ完全にロードされていません。 |
|
|
EL属性がロードされていますが、 |
|
|
ELはまだ完全にロードされていませんが、 |
|
|
|
|
|
AmxNodeはレンダリングされません。 |
表12-12に、カスタムUIコンポーネントの作成時に使用できるAmxNodeUpdateArguments APIを示します。
表12-12 AmxNodeUpdateArguments API
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
なし |
影響を受ける |
|
|
|
|
指定されたAmxNode IDの影響を受ける属性を表すオブジェクトを取得します。 |
|
|
|
|
指定されたAmxNodeおよびプロパティのコレクション変更を取得します。 返されるマップは属性名によってキー設定されます。
|
|
|
|
|
影響を受けたとしてAmxNodeの属性をマークします。 |
|
|
|
|
指定された |
JavaScriptおよびMAF APIを使用して、カスタムUIコンポーネントを作成できます。このコンポーネントのJavaScriptファイルは、アプリケーション機能レベル包含を使用して、プロジェクトに追加できます。カスタム・タグ・ライブラリを追加すると、タグ・ライブラリの「コンポーネント」ウィンドウのリストに入力され、このライブラリが選択された場合は、カスタム・コンポーネントが「コンポーネント」ウィンドウで使用可能になり、その属性が「プロパティ」ウィンドウに表示されます。
始める前に
第12.2項「MAF APIを使用したカスタム・コンポーネントの作成」で説明されているAPIについて理解しておいてください。
カスタム・コンポーネントを作成するには、次の手順を実行します。
adf.mf.api.amx.TypeHandler.register API (表12-1「静的API」および例12-1「カスタム・コンポーネントのJavaScriptファイル」を参照)を使用して、タグ名前空間および1つ以上の一連のタイプ・ハンドラを登録するJavaScriptファイルを生成します。
各タイプ・ハンドラで、レンダリング・メンバー関数を実装します。
オプションで、他の関数を実装します。
1つ以上のJavaScriptおよびCSSファイルをMAF AMXアプリケーション機能に添付します。たとえば、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイルに配置されている、次のサンプル・アプリケーションを参照してください。
CompGalleryという名前のMAFサンプル・アプリケーションに含まれるcustom.jsおよびcustom.cssファイル。
WorkBetterサンプル・アプリケーションにはカスタム検索コンポーネントが含まれています。
または、デザインタイム・パッケージ化を実行できます。
いずれかのカスタム・コンポーネントを使用する各MAF AMXページで、view要素のxmlnsエントリを追加します。
xmlns:custom="http://xmlns.example.com/custom"
例12-1は、カスタム・コンポーネントを宣言するJavaScriptファイルを示しています。
例12-1 カスタム・コンポーネントのJavaScriptファイル
(function() {
// TypeHandler for custom "x" elements
var x = adf.mf.api.amx.TypeHandler.register("http://xmlns.example.com/custom",
"x");
x.prototype.render = function(amxNode) {
var rootElement = document.createElement("div");
rootElement.appendChild(document.createTextNode("Hello World"));
return rootElement;
};
// TypeHandler for custom "y" elements
var y = adf.mf.api.amx.TypeHandler.register("http://xmlns.example.com/custom",
"y");
y.prototype.render = function(amxNode) {
var rootElement = document.createElement("div");
rootElement.appendChild(document.createTextNode("Goodbye World"));
return rootElement;
};
})();
カスタムUIコンポーネントの作成方法の例については、CompGalleryという名前のMAFサンプル・アプリケーションに含まれるcustom.amx、customOther.amx、exampleEvents.amxおよびexampleList.amxの各ファイルを参照してください。これらのサンプル・アプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
