| Oracle® Mobile Application Framework Oracle Mobile Application Frameworkでのモバイル・アプリケーションの開発 2.2.1 E72509-01 |
|
 前 |
 次 |
| Oracle® Mobile Application Framework Oracle Mobile Application Frameworkでのモバイル・アプリケーションの開発 2.2.1 E72509-01 |
|
|
前 |
次 |
この章の内容は次のとおりです。
JavaScriptおよびMAFで提供されるAPIの組合せを使用して、新しい完全に機能するインタラクティブUIコンポーネントを作成でき、MAF AMXアプリケーション機能で使用されるタグ・ライブラリにそれらを追加できます。
MAFには、カスタム・コンポーネントを作成するための次のAPIが用意されています。
Static APIs (see How to Use Static APIs)
AmxEventクラス(「AmxEventクラスの使用方法」を参照)
TypeHandler (「TypeHandlerの使用方法」を参照)
AmxNode (「AmxNodeの使用方法」を参照)
AmxTag (「AmxTagの使用方法」を参照)
VisitContext (「VisitContextの使用方法」を参照)
AmxAttributeChange (「AmxAttributeChangeの使用方法」を参照)
AmxDescendentChanges (「AmxDescendentChangesの使用方法」を参照)
AmxCollectionChange (「AmxCollectionChangeの使用方法」を参照)
AmxNodeChangeResult (「AmxNodeChangeResultの使用方法」を参照)
AmxNodeStates (「AmxNodeStatesの使用方法」を参照)
AmxNodeUpdateArguments (「AmxNodeUpdateArgumentsの使用方法」を参照)
表19-1 に、カスタムUIコンポーネントの作成に使用できる静的APIを示します。
|
表19-1 静的API
|
注意:
その他のパブリックAPIはadf.mf.elパッケージにあり、ロギング、変換およびデータ・チャネルに使用できます。
表19-2 に、カスタムUIコンポーネントの作成時に使用できるAMXEventクラスをリストします。
|
表19-2 AMXEventクラス
|
表19-3 に、カスタムUIコンポーネントの作成に使用できるTypeHandlerのAPIをリストします。
|
表19-3 TypeHandler API
|
表19-4 に、カスタムUIコンポーネントの作成に使用できるAmxNodeのAPIをリストします。
|
表19-4 AmxNode API
|
表19-5 に、カスタムUIコンポーネントの作成に使用できるAmxTagのAPIをリストします。
|
表19-5 AmxTag API
|
表19-6 に、カスタムUIコンポーネントの作成時に使用できるVisitContextのAPIをリストします。
|
表19-6 VisitContext API
|
表19-7 に、カスタムUIコンポーネントの作成時に使用できるAmxAttributeChangeのAPIをリストします。
|
表19-7 AmxAttributeChange API
|
表19-8 に、カスタムUIコンポーネントの作成時に使用できるAmxAttributeChangeのAPIをリストします。
|
表19-8 AmxDescendentChanges API
|
表19-9 に、カスタムUIコンポーネントの作成時に使用できるAmxCollectionChangeのAPIをリストします。
|
表19-9 AmxCollectionChange API
|
表19-10 に、カスタムUIコンポーネントの作成時に使用できるAmxNodeChangeResultのAPIをリストします。
|
表19-10 AmxNodeChangeResult API
|
表19-11 に、カスタムUIコンポーネントの作成時に使用できるAmxNodeStates APIを示します。
|
表19-11 AmxNodeStates API
|
表19-12 に、カスタムUIコンポーネントの作成時に使用できるAmxNodeUpdateArgumentsのAPIをリストします。
|
表19-12 AmxNodeUpdateArguments API
|
JavaScriptおよびMAF APIを使用して、カスタムUIコンポーネントを作成できます。このコンポーネントのJavaScriptファイルは、アプリケーション機能レベルの包含を介して、プロジェクトに追加できます。カスタム・タグ・ライブラリを追加すると、「コンポーネント」ウィンドウのタグ・ライブラリのリストに組み込まれ、このライブラリが選択されると、カスタム・コンポーネントが「コンポーネント」ウィンドウで使用可能になり、その属性が「プロパティ」ウィンドウに表示されます。
始める前に:
「MAF APIを使用したカスタム・コンポーネントの作成」で説明されているAPIについて理解しておいてください。
カスタム・コンポーネントを作成するには、次の手順を実行します。
adf.mf.api.amx.TypeHandler.register API (表19-1 およびこの手順の後の例を参照)を使用して、タグ名前空間および1つ以上の一連のタイプ・ハンドラを登録するJavaScriptファイルを生成します。
タイプ・ハンドラごとにレンダリング・メンバー関数を実装します。
オプションで、その他の関数を実装します。
1つ以上のJavaScriptおよびCSSファイルをMAF AMXアプリケーション機能に添付します。たとえば、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイルに配置されている、次のサンプル・アプリケーションを参照してください。
CompGalleryというMAFサンプル・アプリケーションに含まれているcustom.jsファイルおよびcustom.cssファイル。
WorkBetterサンプル・アプリケーションには、カスタムの検索コンポーネントが含まれています。
または、デザインタイム・パッケージングを実行できます。
カスタム・コンポーネントのうちの1つを使用するMAF AMXページごとに、次のようにxmlnsエントリをview要素に追加します。
xmlns:custom="http://xmlns.example.com/custom"
次の例は、カスタム・コンポーネントを宣言する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ファイル。
DatePicker MAFサンプル・アプリケーション。
これらのサンプル・アプリケーションは、開発コンピュータ上のjdev_install/jdeveloper/jdev/extensions/oracle.maf/Samplesディレクトリ内のPublicSamples.zipファイル内にあります。
