| Oracle Enterprise Pack for Eclipse Oracle Mobile Application Framework (OEPE Edition)でのモバイル・アプリケーションの開発 リリース2.2.1 E72511-01 |
|
 前 |
 次 |
| Oracle Enterprise Pack for Eclipse Oracle Mobile Application Framework (OEPE Edition)でのモバイル・アプリケーションの開発 リリース2.2.1 E72511-01 |
|
前 |
次 |
この章では、カスタムMAF AMX UIコンポーネントの作成方法および開発環境の一環としてそれらを指定する方法について説明します。
この章には次の項が含まれます:
JavaScriptおよびMAFで提供されるAPIの組合せを使用して、新しい完全に機能するインタラクティブUIコンポーネントを作成でき、MAF AMXアプリケーション機能で使用されるタグ・ライブラリにそれらを追加できます。
MAFには、カスタム・コンポーネントを作成するための次のAPIが用意されています。
静的API (第19.2.1項「静的APIの使用方法」を参照)
AmxEventクラス(第19.2.2項「AmxEventクラスの使用方法」を参照)
TypeHandler (第19.2.3項「TypeHandlerの使用方法」を参照)
AmxNode (第19.2.4項「AmxNodeの使用方法」を参照)
AmxTag (第19.2.5項「AmxTagの使用方法」を参照)
VisitContext (第19.2.6項「VisitContextの使用方法」を参照)
AmxAttributeChange (第19.2.7項「AmxAttributeChangeの使用方法」を参照)
AmxDescendentChanges (第19.2.8項「AmxDescendentChangesの使用方法」を参照)
AmxCollectionChange (第19.2.9項「AmxCollectionChangeの使用方法」を参照)
AmxNodeChangeResult (第19.2.10項「AmxNodeChangeResultの使用方法」を参照)
AmxNodeStates (第19.2.11項「AmxNodeStatesの使用方法」を参照)
AmxNodeUpdateArguments (第19.2.12項「AmxNodeUpdateArgumentsの使用方法」を参照)
表19-1に、カスタムUIコンポーネントの作成に使用できる静的APIを示します。
表19-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つのインスタンスを非表示にします。 |
|
|
|
|
オブジェクトのJavaScript配列またはツリー・ノード・イテレータ(コレクション・モデル)を反復するイテレータのいずれかをサポートするイテレータを作成します。
|
|
|
|
|
キャッシュされ、ローカルでアクセスできるようにデータ・プロバイダのセットをバルクロードします。 |
|
|
|
|
現在のMAF AMXページを基準にしているものと想定して、指定されたリソースを基に相対パスを構築します。リソースにプロトコルがある場合、これは絶対パスであると考えられるため変更されません。 |
|
|
|
|
ノードおよびその下で カスタム |
|
注意: その他のパブリックAPIはadf.mf.elパッケージにあり、ロギング、変換およびデータ・チャネルに使用できます。 |
表19-2に、カスタムUIコンポーネントの作成時に使用できるAMXEventクラスをリストします。
表19-2 AMXEventクラス
| クラス名 | パラメータ | 説明 |
|---|---|---|
|
|
なし |
結果ベースのナビゲーションをトリガーするイベント。
|
|
|
|
指定された行が移動されたことを通知するイベント。移動された行のキーが、これが挿入される前の行のキーとともに含まれています。 Oracle Mobile Application Framework Java APIリファレンスの |
|
|
|
コンポーネントの選択の変更についてのイベント。 Oracle Mobile Application Framework Java APIリファレンスの |
|
|
|
コンポーネントの値の変更についてのイベント。 Oracle Mobile Application Framework Java APIリファレンスの |
表19-3に、カスタムUIコンポーネントの作成に使用できるTypeHandlerのAPIをリストします。
表19-3 TypeHandler API
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
|
初期DOM構造を作成し、その構造のルート要素を返します。 このメンバー関数は必須であり、定義する必要があります。 |
|
|
|
|
このコンポーネントを使用して作成されたコンポーネントのセットに属するすべての |
|
|
|
|
このコンポーネントを使用して作成されたコンポーネントのセットに属するすべての |
|
|
|
|
処理のために カスタム実装ではなくMAFが子ノードを作成する予定の場合は、 この関数はオプションです。 |
|
|
|
|
次のいずれかに対するハンドラを表します。
この関数はオプションです。 |
|
|
|
|
タイプ・ハンドラに対して、子孫 |
|
|
|
|
タイプ・ハンドラに対して、変更に反応してHTMLを選択的にリフレッシュすることを許可します。このメソッドは、
|
|
|
|
なし |
|
|
|
|
|
この 訪問でパラメータ |
|
|
|
|
この 訪問でパラメータ |
|
|
|
|
新しいビューにナビゲートしようとするときなどに、現在のビューが削除される直前のすべてを処理します。通常、スクロール位置などのクライアント状態を保存するために使用されます( |
|
|
|
|
新しいビューが表示された後および古いビューが削除された後のすべてを処理します。 |
表19-4に、カスタムUIコンポーネントの作成に使用できるAmxNodeのAPIをリストします。
表19-4 AmxNode API
| String | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
なし |
この |
|
|
|
なし |
この |
|
|
|
なし |
この |
|
|
|
|
指定された 状態変更が発生した場合に、タイプ・ハンドラはこの関数をコールする必要があります(たとえば、ユーザーが新しいページに移動した後に戻るときにリストアされるスクロール位置のようなキャッシュする必要のあるもの)。しかし、状態変更が発生したことを検出することは必ずしも可能であるとはいえないため、ビューが廃棄される直前にコンポーネントの状態を更新する必要がある場合があります。検討する必要のある2つのシナリオは次のとおりです。
|
|
|
|
なし |
このビュー・インスタンス中に |
|
|
|
|
指定された
|
|
|
|
なし |
最後のナビゲーション以降に |
|
|
|
なし |
可能な場合、この |
|
|
|
|
この |
|
|
|
|
属性に対しては、EL式を作成および格納し、この式はEL値をモデルに設定するために使用される可能性があります。 この値はコンテキストを区別しないため、値の設定に常に使用できます。ユーザーの操作に基づいて値の設定に使用することが一般的です。 この関数は、タイプ・ハンドラによってコールされる場合があります。 サブジェクト属性がEL値にバインドされていない場合は |
|
|
|
なし |
これは親
|
|
|
|
なし |
このノードに対して定義されている属性名のリストを取得します。 |
|
|
|
|
指定された名前の属性の属性値を取得します。 戻り値が 属性が設定されていないかまだロードされていない場合は、未定義が返されます。 |
|
|
|
|
この関数はモデルを更新しません。 |
|
|
|
|
属性の値をモデルに設定します。 この値は、EL値を更新するためにJava側に送信されます。 |
|
|
|
|
属性がユーザーによって定義されているかどうかをチェックします。 |
|
|
|
なし |
親 |
|
|
|
|
子 子がファセットに属していない場合は、 |
|
|
|
|
この 子は階層からは削除されますが、そのDOMは削除されません。DOMの削除はコール元が対応する必要があります。 これにより、DOMが置き換えられたときにタイプ・ハンドラによるアニメーションおよびその他の遷移の処理が可能になります。 子が見つかり、削除されたかどうかが返されます。 |
|
|
|
|
既存の子を別の子で置き換えます。 古い子が見つかり、置き換えられたかどうかが返されます。 |
|
|
|
|
子 2つのパラメータはオプションです。非ファセットの子を取得するには 子が存在しないか、指定された修飾子の子が存在しない場合は、空の配列が返されます。 |
|
|
|
|
|
|
|
|
|
この
訪問が完了し、継続すべきでないかどうかを返します。 |
|
|
|
|
この
訪問が完了し、継続すべきでないかどうかを返します。 |
|
|
|
|
カスタム
訪問が完了し、継続すべきでないかどうかを返します。 |
|
|
|
|
指定されたスタンプ・キーに対してレンダリングされる子を返します。フラット化できる(フラット化可能)すべてのコンポーネントをフラット化し、レンダリングされないコンポーネントは返しません。 |
|
|
|
なし |
フラット化されたAmxNodeには、レンダリングに関連する動作がない可能性があるため、フラット化されたAmxNodeのタイプ・ハンドラのみが子ノードを作成および訪問できますが、レンダリングに影響を与えることはできません。 |
|
|
|
なし |
|
|
|
|
|
|
|
|
|
なし |
レンダリングされたルート要素または子がレンダリングされていない場合やこの |
|
|
|
|
この
そのスタンプ・キーに対する子 各 |
|
|
|
なし |
|
|
|
|
なし |
レンダリングすべきかどうかを確認するために、
|
|
|
|
|
このメソッドは |
|
|
|
|
カスタム この関数は、任意のUIタグに子を作成します。
|
表19-5に、カスタムUIコンポーネントの作成に使用できるAmxTagのAPIをリストします。
表19-5
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
なし |
タグのXMLネームスペースURIを取得します。 |
|
|
|
なし |
ネームスペースを含むタグ名をその接頭辞(ローカルの これは、 |
|
|
|
なし |
タグ名を取得します。 これは、接頭辞なしのローカルXMLタグ名です。 |
|
a |
|
なし |
親タグまたは最上位の場合は |
|
|
|
なし |
タグのテキスト・コンテンツを返します。 |
|
|
|
|
指定されたネームスペースおよびタグ名を使用して、タグ階層でタグを再帰的に検索します。 一致する場合は現在のタグを返します。 |
|
|
|
|
タグの子を取得します。 子のネームスペースおよびタグ名に対するオプションのフィルタ処理を指定します。ネームスペースが |
|
|
|
なし |
すべての子ファセット・タグを取得します。 この関数は、 |
|
|
|
|
指定された名前のファセット・タグを取得します。 この関数は、ファセットの存在がタイプ・ハンドラの動作を変更する場合にコードを支援します。 ファセットが見つからない場合は |
|
|
|
なし |
UIタグであるすべての子タグを取得します。 この関数は、 この関数はファセット・タグを返しません。 |
|
|
|
なし |
タグで指定されている属性の属性名をすべて取得します。 |
|
|
|
|
指定されている属性がEL式にバインドされているかどうか(静的値ではなく)を特定します。 |
|
|
|
|
指定された名前の属性の属性値(EL文字列の場合があります)を取得します。 属性が指定されていない場合は、未定義が返されます。 |
|
|
|
なし |
属性値およびその値のキーと値のペアのマップを取得します。 |
|
|
|
なし |
ノードがタイプ・ハンドラを使用するUIかどうか、およびコンテンツをレンダリングするかどうかを特定します。 |
|
|
|
なし |
このファセットの子のタグを、およびこのタグがファセット・タグの場合はファセットの名前を取得します。 これは、 ファセットの名前およびファセットの子タグとともにオブジェクトを返します。ファセットが |
|
|
|
|
このタグの タグがファセット・タグの場合、このタグは子タグの この関数は |
|
|
|
なし |
このタグのタイプ・ハンドラを取得します。 |
表19-6に、カスタムUIコンポーネントの作成時に使用できるVisitContextのAPIをリストします。
表19-6 VisitContext API
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
なし |
すべてのノードが訪問可能かどうかを特定します。 |
|
|
|
なし |
訪問の際に訪問する必要のあるノードを取得します。 このリストには、訪問すべきノード(コールバックが起動されました)を含む必要はありません。 |
|
|
|
なし |
訪問するノードのリストを取得します。 |
|
|
|
|
指定された親 タイプ・ハンドラに対して、すべての子を訪問しない場合の子の訪問方法の最適化を許可します。
|
表19-7に、カスタムUIコンポーネントの作成時に使用できるAmxAttributeChangeのAPIをリストします。
表19-7 AmxAttributeChange API
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
なし |
現在の変更に影響を受けた属性の名前を取得します。 |
|
|
|
|
属性の変更がコレクション変更かどうかを特定します。 |
|
|
|
|
属性のコレクション・モデルの変更情報を取得します。使用できる変更オブジェクトがない場合はnullを返します。 |
|
|
|
|
変更が実行される前の属性の値を取得します。 |
|
|
|
|
指定された名前の属性が変更されたかどうかを特定します。 |
|
|
|
なし |
属性の変更数を取得します。 |
表19-8に、カスタムUIコンポーネントの作成時に使用できるAmxAttributeChangeのAPIをリストします。
表19-8 AmxDescendentChanges API
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
なし |
レンダリング前の変更済の子孫 |
|
|
|
|
指定されたAmxNodeの変更を取得します。 |
|
|
|
|
変更が適用される前の子孫AmxNodeの状態を取得します。 |
表19-9に、カスタムUIコンポーネントの作成時に使用できるAmxCollectionChangeのAPIをリストします。
表19-9 AmxCollectionChange API
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
なし |
コレクションに対する変更が項目化される可能性があるかどうかを特定しますが、そのコレクションのキーおよび要素は識別されているため、 |
|
|
|
なし |
作成されたキーの配列、または変更を項目化できない場合は |
|
|
|
なし |
削除されたキーの配列、または変更を項目化できない場合はnullを取得します。 |
|
|
|
なし |
更新されたキーの配列、または変更を項目化できない場合はnullを取得します。 |
|
|
|
なし |
ダーティな状態のキーの配列、または変更を項目化できない場合はnullを取得します。 |
表19-10に、カスタムUIコンポーネントの作成時に使用できるAmxNodeChangeResultのAPIをリストします。
表19-10 AmxNodeChangeResult API
| メンバー | 説明 |
|---|---|
|
|
レンダリングされていない子孫 |
|
|
属性およびその子AmxNodeインスタンスはタイプ・ハンドラによって更新済で、DOMはタイプ・ハンドラの |
|
|
AmxNodeおよびその子AmxNodeインスタンスがタイプ・ハンドラによって更新済ですが、DOMは、 |
|
|
タイプ・ハンドラは変更を処理できません。DOMおよび この値は、タイプ・ハンドラ上の |
表19-11に、カスタムUIコンポーネントの作成時に使用できるAmxNodeStates APIを示します。
表19-11 AmxNodeStates API
| メンバー | 説明 |
|---|---|
|
|
初期状態。 |
|
a |
レンダリングに必要なELベースの属性はまだ完全にロードされていません。 |
|
|
EL属性はロードされましたが、 |
|
|
ELはまだ完全にロードされていませんが、 |
|
|
|
|
|
AmxNodeはレンダリングされません。 |
表19-12に、カスタムUIコンポーネントの作成時に使用できるAmxNodeUpdateArgumentsのAPIをリストします。
表19-12 AmxNodeUpdateArguments API
| 戻り型 | 関数名 | パラメータ | 説明 |
|---|---|---|---|
|
|
|
なし |
影響を受ける |
|
|
|
|
指定されたAmxNode IDの影響される属性を表すオブジェクトを取得します。 |
|
|
|
|
指定されたAmxNodeおよびプロパティのコレクション変更を取得します。 返されるマップは、属性名によってキー設定されます。
|
|
|
|
|
AmxNodeの属性を影響を受けたとマークします。 |
|
|
|
|
指定された |
JavaScriptおよびMAF APIを使用して、カスタムUIコンポーネントを作成できます。このコンポーネントのJavaScriptファイルは、アプリケーション機能レベルの包含を介して、プロジェクトに追加できます。カスタム・タグ・ライブラリを追加すると、「コンポーネント」ウィンドウのタグ・ライブラリのリストに組み込まれ、このライブラリが選択されると、カスタム・コンポーネントが「コンポーネント」ウィンドウで使用可能になり、その属性が「プロパティ」ウィンドウに表示されます。
始める前に:
第19.2項、「MAF APIを使用したカスタム・コンポーネントの作成」に記載されているAPIを確認してください。
カスタム・コンポーネントを作成するには、次の手順を実行します。
adf.mf.api.amx.TypeHandler.register APIを使用して、タグ・ネームスペースおよび一連の1つ以上のタイプ・ハンドラを登録するJavaScriptファイルを作成します(表19-1「静的API」およびこの項の後続の例を参照)。
タイプ・ハンドラごとにレンダリング・メンバー関数を実装します。
オプションで、その他の関数を実装します。
1つ以上のJavaScriptファイルおよびCSSファイルをMAF AMXアプリケーション機能にアタッチします。たとえば、「ファイル」→「新」→「MAFサンプル」にある次のサンプル・アプリケーションを参照してください。
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の各ファイルを参照してください。このサンプル・アプリケーションは、「ファイル」→「新」→「MAFサンプル」にあります。
