Oracle® Mobile Application Framework Oracle Mobile Application Frameworkでのモバイル・アプリケーションの開発 2.3.3 E82940-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の使用方法」を参照)
表21-1に、カスタムUIコンポーネントの作成に使用できる静的APIを示します。
表21-1 静的API
|
注意:
その他のパブリックAPIはadf.mf.el
パッケージにあり、ロギング、変換およびデータ・チャネルに使用できます。
表21-2に、カスタムUIコンポーネントの作成時に使用できるAMXEvent
クラスをリストします。
表21-2 AMXEventクラス
|
表21-3に、カスタムUIコンポーネントの作成に使用できるTypeHandler
のAPIをリストします。
表21-3 TypeHandler API
|
表21-4に、カスタムUIコンポーネントの作成に使用できるAmxNode
のAPIをリストします。
表21-4 AmxNode API
|
表21-5に、カスタムUIコンポーネントの作成に使用できるAmxTag
のAPIをリストします。
表21-5 AmxTag API
|
表21-6に、カスタムUIコンポーネントの作成時に使用できるVisitContext
のAPIをリストします。
表21-6 VisitContext API
|
表21-7に、カスタムUIコンポーネントの作成時に使用できるAmxAttributeChange
のAPIをリストします。
表21-7 AmxAttributeChange API
|
表21-8に、カスタムUIコンポーネントの作成時に使用できるAmxAttributeChange
のAPIをリストします。
表21-8 AmxDescendentChanges API
|
表21-9に、カスタムUIコンポーネントの作成時に使用できるAmxCollectionChange
のAPIをリストします。
表21-9 AmxCollectionChange API
|
表21-10に、カスタムUIコンポーネントの作成時に使用できるAmxNodeChangeResult
のAPIをリストします。
表21-10 AmxNodeChangeResult API
|
表21-11に、カスタムUIコンポーネントの作成時に使用できるAmxNodeStates
APIを示します。
表21-11 AmxNodeStates API
|
表21-12に、カスタムUIコンポーネントの作成時に使用できるAmxNodeUpdateArguments
のAPIをリストします。
表21-12 AmxNodeUpdateArguments API
|
JavaScriptおよびMAF APIを使用して、カスタムUIコンポーネントを作成できます。このコンポーネントのJavaScriptファイルは、アプリケーション機能レベルの包含を介して、プロジェクトに追加できます。カスタム・タグ・ライブラリを追加すると、「コンポーネント」ウィンドウのタグ・ライブラリのリストに組み込まれ、このライブラリが選択されると、カスタム・コンポーネントが「コンポーネント」ウィンドウで使用可能になり、その属性が「プロパティ」ウィンドウに表示されます。
始める前に:
「MAF APIを使用したカスタム・コンポーネントの作成」で説明されているAPIについて理解しておいてください。
カスタム・コンポーネントを作成するには、次の手順を実行します。
adf.mf.api.amx.TypeHandler.register
API (表21-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
ファイル内にあります。