ヘッダーをスキップ

Oracle Enterprise Pack for Eclipse Oracle Mobile Application Framework (OEPE Edition)でのモバイル・アプリケーションの開発 リリース2.1.2 E64870-01 |
| 目次

前 | 次 |

# 19 カスタムMAF AMX UIコンポーネントの作成

この章では、カスタムMAF AMX UIコンポーネントの作成方法および開発環境の一環としてそれらを指定する方法について説明します。

この章には次の項が含まれます:

- 第19.1項「カスタムUIコンポーネントの作成の概要」

- 第19.2項、「MAF APIを使用したカスタム・コンポーネントの作成」

- 第19.3項「カスタム・コンポーネントの作成」

## 19.1 カスタムUIコンポーネントの作成の概要

JavaScriptおよびMAFで提供されるAPIの組合せを使用して、新しい完全に機能するインタラクティブUIコンポーネントを作成でき、MAF AMXアプリケーション機能で使用されるタグ・ライブラリにそれらを追加できます。

## 19.2 MAF APIを使用したカスタム・コンポーネントの作成

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.2.1 静的APIの使用方法

表19-1に、カスタムUIコンポーネントの作成に使用できる静的APIを示します。

表19-1 静的API

戻り型 | 関数名 | パラメータ | 説明
--- | --- | --- | ---
`Function` | `adf.mf.api.amx.TypeHandler.register` | `String namespaceUrl,` `String tagName,` `adf.mf.api.amx.TypeHandler precreatedClass` | `TypeHandler` クラスをタグ・ネームスペースおよび名前で登録します。 プロトタイプの関数を追加できるように、登録された`adf.mf.api.amx.TypeHandler`サブクラスを返します。 `precreatedClass`はオプションですが、`adf.mf.api.amx.TypeHandler`を継承するクラスを最初に作成した場合は使用できます。
`void` | `adf.mf.api.amx.addBubbleEventListener` | `Node domNode,` `String eventType,` `Function listener,` `Object eventData` | バブル・イベント・リスナーを登録します(tap、taphold、keydown、touchstart、touchmove、touchend、focus、blur、resizeなど)。 WebブラウザはすべてのDOMノード上ですべてのイベント・タイプをサポートしないことに注意してください(詳細は、ブラウザのドキュメントを参照してください)。 `eventData`はオプションで、そのリスナー機能で使用可能にするための追加データとして機能します。
`void` | `adf.mf.api.amx.removeBubbleEventListener` | `Node domNode,` `String eventType,` `Function listener` | `adf.mf.api.amx.addBubbleEventListener`を介して追加されたバブル・イベント・リスナーを登録解除します。 メタ・イベントのtapおよびtapholdを削除すると、削除される指定されたリスナーからのみではなく、すべてのtouchstartリスナーおよびtouchendリスナー(その他のメタ・イベントのものを含む)が要素から削除されることになります。
`void` | `adf.mf.api.amx.addDragListener` | `Node domNode,` `Object payload,` `Object eventData` | 要素に対して、MAF AMXドラッグ・イベントのトリガーを許可します。 `Object` `payload`は、`start`、`drag`、`end`の3つのメンバー関数を定義します。各関数の最初のパラメータはDOMイベントで、2番目のパラメータは、次のメンバーを伴う`dragExtra` `Object`です。 `eventSource`: DOMイベント・ソース。 `pageX`: イベントの`x`座標。 `pageY`: イベントの`y`座標。 `startPageX`: 元の`pageX`。 `startPageY`: 元の`pageY`。 `deltaPageX`: `pageX`での変更。 `deltaPageY`: `pageY`での変更。 `originalAngle`: 定義されている場合、これはドラッグする際の基準となる角度(度単位)で、0度は東、90が北、-90が南、180が西です。 変更可能なメンバー・フラグは次のとおりです。 `preventDefault` `stopPropagation` `eventData`はオプションで、そのリスナー機能で使用可能にするための追加データとして機能します。
`void` | `adf.mf.api.amx.removeDomNode` | `Node domNode` | DOMノードおよびその子を削除しますが、その前に`adf.mf.api.amx.addBubbleEventListener`を介して追加したイベント・リスナーを削除します。
void | `adf.mf.api.amx.emptyHtmlElement` | `Node domNode` | 子DOMノードを削除し、それぞれの子ノード上で`adf.mf.api.amx.removeDomNode`をコールすることによってHTML要素を空にします。
`void` | `adf.mf.api.amx.processAmxEvent` | `adf.mf.api.amx.AmxNode amxNode,` `String amxEventType,` `String attributeValueName,` `String newValue,` `AmxEvent amxEvent,` `Function finishedCallback` | `AmxEvent`を処理します。 `attributeValueName`が定義されている場合は値を変更し、適切な`setPropertyListener`サブタグおよび`actionListener`サブタグを処理した後に`[amxEventType]Listener`属性を処理します。完了コールバックが指定されている場合は、イベントが処理されると起動されます。
`void` | `adf.mf.api.amx.acceptEvent` | なし | その関数に渡す必要のある可能性があるものを準備しないように、`adf.mf.api.amx.processAmxEvent`の起動を開始しても安全かどうかを判断します(たとえば、ページ遷移の途中やデザインタイム・プレビューなどの環境にある場合)。
`void` | `adf.mf.api.amx.invokeEl` | `String expression,` `Array<String> params,` `String returnType,` `Array<String> paramTypes,` `Function successCallback,` `Function failureCallback` | ELメソッドの起動用の`adf.mf.el.invoke()`と同様のユーティリティを表しますが、デザインタイム・プレビューなどの環境では実行されない点が異なります。
`void` | `adf.mf.api.amx.enableAmxEvent` | `adf.mf.api.amx.AmxNode amxNode,` `Node domNode,` `String eventType` | DOMノードに対して、`amx:showPopupBehavior`や`amx:setPropertyListener`などの`tapHold`、`swipe`などのカスタムMAF AMXイベントのトリガーを許可します。
`void` | `adf.mf.api.amx.doNavigation` | `String outcome` | 指定された結果に対してナビゲーションを実行する予定であることをコントローラに伝えます。
`void` | `adf.mf.api.amx.validate` | `Node domNode,` `Function successCallback` | 不十分なバリデータ(必須または`amx:validationBehavior`)がある場合に、ナビゲーションなどの操作を回避します。 続行が許可された場合は、`successCallback`が起動されます。
`void` | `adf.mf.api.amx.showLoadingIndicator` | `Number failSafeDuration,` Function failSafeClientHandler | ビジー・インジケータを表示します。 パラメータは次のとおりです。 failSafeDuration: ローディング・インジケータの表示および非表示の間にMAFが待機するおよその期間(ミリ秒を表す負でない整数) (他のトリガーがすでにインジケータを表示していないと仮定した場合)。このパラメータが指定されない場合、または`null`に設定された場合、MAFは10000 (10秒)を使用します。 failSafeClientHandler: `failSafeDuration`に達した場合に起動されるオプションのJavaScript関数。この関数は続行方法の決定に使用できます。この関数は、次のいずれかの値によって定義された`String`を返す必要があります。 - `hide`: デフォルトのフェイルセーフのようにインジケータを非表示にします。 - `repeat`: 関数を再び起動できるように別の期間についてのタイマーを再起動します。 - `freeze`: インジケータを起動させたまま無限に待機させるため、ページは再起動されるまでフリーズ状態で停止します。 必要以上に長くインジケータを表示しないためには、非表示にします。
`void` | `adf.mf.api.amx.hideLoadingIndicator` | なし | ローディング・インジケータの1つのインスタンスを非表示にします。
`Object` | `adf.mf.api.amx.createIterator` | `Object dataItems` | オブジェクトのJavaScript配列またはツリー・ノード・イテレータ(コレクション・モデル)を反復するイテレータのいずれかをサポートするイテレータを作成します。 `next`、`hasNext`および`isTreeNodeIterator`の関数でイテレータの`Object`を返しますが、ここで、これ以上のオブジェクトが使用可能でない場合に`next`は未定義を返します。
`void` | `adf.mf.api.amx.bulkLoadProviders` | `Object treeNodeIterator,` `Number startingPoint,` `Number maximumNumberOfRowsToLoad,` `Function successCallback,` `Function failCallback` | キャッシュされ、ローカルでアクセスできるようにデータ・プロバイダのセットをバルクロードします。
`String` | `adf.mf.api.amx.buildRelativePath` | `String url` | 現在のMAF AMXページを基準にしているものと想定して、指定されたリソースを基に相対パスを構築します。リソースにプロトコルがある場合、これは絶対パスであると考えられるため変更されません。
`void` | `adf.mf.api.amx.markNodeForUpdate` | `adf.mf.api.amx.AmxNodeUpdateArguments args` | ノードおよびその下で`AmxNode`階層の更新が必要な`AmxNode`に対する状態変更をMAFに通知する`TypeHandler`インスタンスの関数。 カスタム`createChildrenNodes`メソッドが`TypeHandler`に存在する場合、この関数はこれらの`AmxNode`インスタンスに対して再度コールされます。これにより、子をスタンプする`AmxNode`インスタンスに対して、ユーザー変更に起因する新しいスタンプの追加が許可されます。`AmxNode`のレンダリングの準備ができると、`refresh`メソッドは`AmxNode`上で指定されたプロパティを使用してコールされます。`AmxNode`でレンダリングの準備が完了していない場合は、MAFはすべてのELが解決されるまで待機し、すべてのデータが使用可能になると`refresh`メソッドがコールされます。

注意: その他のパブリックAPIは`adf.mf.el`パッケージにあり、ロギング、変換およびデータ・チャネルに使用できます。

### 19.2.2 AmxEventクラスの使用方法

表19-2に、カスタムUIコンポーネントの作成時に使用できる`AMXEvent`クラスをリストします。

表19-2 AMXEventクラス

クラス名 | パラメータ | 説明
--- | --- | ---
`adf.mf.api.amx.ActionEvent` | なし | 結果ベースのナビゲーションをトリガーするイベント。 `Oracle Mobile Application Framework Java APIリファレンス`のoracle.adfmf.amx.event.ActionEventも参照してください。
`adf.mf.api.amx.MoveEvent` | `Object rowKeyMoved,` `Object rowKeyInsertedBefore` | 指定された行が移動されたことを通知するイベント。移動された行のキーが、これが挿入される前の行のキーとともに含まれています。 Oracle Mobile Application Framework Java APIリファレンスの`oracle.adfmf.amx.event.MoveEvent`も参照してください。
`adf.mf.api.amx.SelectionEvent` | `Object oldRowKey,` `Array<Object> selectedRowKeys` | コンポーネントの選択の変更についてのイベント。 Oracle Mobile Application Framework Java APIリファレンスの`oracle.adfmf.amx.event.SelectionEvent`も参照してください。
`adf.mf.api.amx.ValueChangeEvent` | `Object oldValue,` `Object newValue` | コンポーネントの値の変更についてのイベント。 Oracle Mobile Application Framework Java APIリファレンスの`oracle.adfmf.amx.event.ValueChangeEvent`も参照してください。

### 19.2.3 TypeHandlerの使用方法

表19-3に、カスタムUIコンポーネントの作成に使用できる`TypeHandler`のAPIをリストします。

表19-3 TypeHandler API

戻り型 | 関数名 | パラメータ | 説明
--- | --- | --- | ---
`HTMLElement` | `render` | `adf.mf.api.amx.AmxNode amxNode,` `String id` | 初期DOM構造を作成し、その構造のルート要素を返します。 このメンバー関数は必須であり、定義する必要があります。
`void` | `init` | `HTMLElement rootElement,` `adf.mf.api.amx.AmxNode amxNode` | このコンポーネントを使用して作成されたコンポーネントのセットに属するすべての`create`関数が起動された後に起動されるハンドラを表します。
`void` | `postDisplay` | `HTMLElement rootElement,` `adf.mf.api.amx.AmxNode amxNode` | このコンポーネントを使用して作成されたコンポーネントのセットに属するすべての`init`関数が起動された後に起動されるハンドラを表します。
`Boolean` | `createChildrenNodes` | `adf.mf.api.amx.AmxNode amxNode` | 処理のために`AmxNode`の子を選択的に追加します。子のうちの1つが表示されている場合、この関数を使用すると他の子が処理されないことに注意してください。 カスタム実装ではなくMAFが子ノードを作成する予定の場合は、`false`を返す必要があります。 この関数はオプションです。
`adf.mf.api.amx.AmxNodeChangeResult` | `updateChildren` | `adf.mf.api.amx.AmxNode amxNode,` `adf.mf.api.amx.AmxAttributeChange attributeChanges` | 次のいずれかに対するハンドラを表します。 任意の古い子を削除し、任意の新しい子を作成し、`AmxNode`に追加します。 戻り値を介して、`adf.mf.api.amx.AmxNodeChangeResult`アクションを実行する必要のある対象を宣言します。 この関数はオプションです。
`adf.mf.api.amx.AmxNodeChangeResult` | `getDescendentChangeAction` | `adf.mf.api.amx.AmxNode amxNode,` `adf.mf.api.amx.AmxDescendentChanges descendentChanges` | タイプ・ハンドラに対して、子孫`AmxNode`インスタンスの変更の処理のカスタマイズを許可します。
`void` | `refresh` | `adf.mf.api.amx.AmxAttributeChange attributeChanges,` `adf.mf.api.amx.AmxDescendentChanges descendentChanges` | タイプ・ハンドラに対して、変更に反応してHTMLを選択的にリフレッシュすることを許可します。このメソッドは、`updateChildren`メソッドの後にコールされます。 `attributeChanges`は、変更された属性を定義します。`descendentChanges`が`null`でない場合、リフレッシュが必要なすべての子孫ノードに対する変更を定義します。
`Boolean` | `isFlattenable` | なし | `AmxNode`がフラット化可能かどうかを宣言します。フラット化されたAmxNodeには、レンダリングに関連する動作がない可能性があるため、フラット化されたAmxNodeのタイプ・ハンドラのみが子ノードを作成および訪問できますが、レンダリングに影響を与えることはできません。
`Boolean` | `visit` | `adf.mf.api.amx.VisitContext visitContext,` `Function visitCallback` | この`AmxNode`から開始される`AmxNode`ツリー訪問を処理します。 訪問でパラメータ`visitContext`および`AmxNode`が使用される場合に起動される`visitCallback`関数。訪問が完了し、継続すべきでないかどうかを返します。
`Boolean` | `visitChildren` | `adf.mf.api.amx.AmxNode amxNode,` `adf.mf.api.amx.VisitContext visitContext,` `Function visitCallback` | この`AmxNode`の子から開始される`AmxNode`ツリー訪問を処理します。 訪問でパラメータ`visitContext`および`AmxNode`が使用される場合に起動される`visitCallback`関数。訪問が完了し、継続すべきでないかどうかを返します。
`void` | `preDestroy` | `HTMLElement rootElement,` `adf.mf.api.amx.AmxNode amxNode` | 新しいビューにナビゲートしようとするときなどに、現在のビューが削除される直前のすべてを処理します。通常、スクロール位置などのクライアント状態を保存するために使用されます(`adf.mf.api.amx.setClientState`を参照)。
`void` | `destroy` | `HTMLElement rootElement,` `adf.mf.api.amx.AmxNode amxNode` | 新しいビューが表示された後および古いビューが削除された後のすべてを処理します。

### 19.2.4 AmxNodeの使用方法

表19-4に、カスタムUIコンポーネントの作成に使用できる`AmxNode`のAPIをリストします。

表19-4 AmxNode API

String | 関数名 | パラメータ | 説明
--- | --- | --- | ---
`String` | `getId` | なし | この`AmxNode`の一意の識別子を取得します。この値は、ルートDOM要素上のIDを構成します。
`adf.mf.api.amx.AmxTag` | `getTag` | なし | この`AmxNode`を作成した`AmxTag`を取得します。
`adf.mf.api.amx.TypeHandler` | `getTypeHandler` | なし | この`AmxNode`に関連付けられた`TypeHandler`オブジェクトを取得します。
`void` | `setClientState` | `Object payloadJsonObject` | 指定された`AmxNode` IDのクライアント状態を格納および置換します。 状態変更が発生した場合に、タイプ・ハンドラはこの関数をコールする必要があります(たとえば、ユーザーが新しいページに移動した後に戻るときにリストアされるスクロール位置のようなキャッシュする必要のあるもの)。しかし、状態変更が発生したことを検出することは必ずしも可能であるとはいえないため、ビューが廃棄される直前にコンポーネントの状態を更新する必要がある場合があります。検討する必要のある2つのシナリオは次のとおりです。 `refresh`: DOM構造の断片を再描画する場合(同一ビュー内)。 `preDestroy`: 新しいビューに移動し、後で戻る場合。 `payloadJsonObject`は、このビュー・インスタンスの存続期間中に格納されるクライアント状態データです。
`Object` | `getClientState` | なし | このビュー・インスタンス中に`setClientState`関数を介して以前に格納された`payloadJsonObject`を取得します(使用できない場合は未定義)。
`void` | `setVolatileState` | `Object payloadJsonObject` | 指定された`AmxNode` IDのクライアント状態を格納および置換します。揮発状態変更が発生した場合に、タイプ・ハンドラはこの関数をコールする必要があります(たとえば、新しいMAF AMXページに移動する際に無視する必要があるが、コンポーネントの再描画に備えて保持する必要のあるもの)。 `payloadJsonObject`は、ナビゲーションが発生するまで格納する揮発状態データです。
`Object` | `getVolatileState` | なし | 最後のナビゲーション以降に`setVolatileState`関数を介して以前に格納された`payloadJsonObject`を取得します(使用できない場合は未定義)。
`Object` | `getConverter` | なし | 可能な場合、この`AmxNode`のコンバータを取得します。
`void` | `setConverter` | `Object converter` | この`AmxNode`のコンバータを設定します。
`String` | `storeModifyableEl` | `String nameOfTheAttribute` | 属性に対しては、EL式を作成および格納し、この式はEL値をモデルに設定するために使用される可能性があります。 この値はコンテキストを区別しないため、値の設定に常に使用できます。ユーザーの操作に基づいて値の設定に使用することが一般的です。 この関数は、タイプ・ハンドラによってコールされる場合があります。 サブジェクト属性がEL値にバインドされていない場合は`null`を返します。
`Object` | `getStampKey` | なし | `AmxNode`のスタンプ・キーを取得します。スタンプ・キーは、反復コンテナ内で作成された`AmxNode`インスタンスを特定します。 これは親`AmxNode`によって提供されます。スタンプ・キーを使用するタグの例として、`amx:iterator`タグがあります。 `AmxNode`がスタンプされていない場合は、`null`が返されます。
`Array<String>` | `getDefinedAttributeNames` | なし | このノードに対して定義されている属性名のリストを取得します。
`Object` | `getAttribute` | `String name` | 指定された名前の属性の属性値を取得します。 戻り値が`null`の場合があります。 属性が設定されていないかまだロードされていない場合は、未定義が返されます。
`void` | `setAttributeResolvedValue` | `String name,` `Object value` | `AmxNode`上の属性の属性値を格納するためにタイプ・ハンドラまたはMAFによって使用されます。 この関数はモデルを更新しません。
`void` | `setAttribute` | `String name,` `String value` | 属性の値をモデルに設定します。 この値は、EL値を更新するためにJava側に送信されます。`AmxNode`上の値はこのコールによって更新されません。かわりに、データ変更イベントで`AmxNode`が更新される必要があります。
`Boolean` | `isAttributeDefined` | `String name` | 属性がユーザーによって定義されているかどうかをチェックします。
`adf.mf.api.amx.AmxNode` | `getParent` | なし | 親`AmxNode`または最上位の場合は`null`を取得します。
`void` | `addChild` | `adf.mf.api.amx.AmxNode child,` `String facetName` | 子`AmxNode`をこの`AmxNode`に追加します。 子がファセットに属していない場合は、`facetName`を`null`にする必要があります。
`Boolean` | `removeChild` | `adf.mf.api.amx.AmxNode child` | この`AmxNode`から子`AmxNode`を削除します。 子は階層からは削除されますが、そのDOMは削除されません。DOMの削除はコール元が対応する必要があります。 これにより、DOMが置き換えられたときにタイプ・ハンドラによるアニメーションおよびその他の遷移の処理が可能になります。 子が見つかり、削除されたかどうかが返されます。
`Boolean` | `replaceChild` | `adf.mf.api.amx.AmxNode oldChild,` `adf.mf.api.amx.AmxNode newChild` | 既存の子を別の子で置き換えます。 古い子が見つかり、置き換えられたかどうかが返されます。
`Array<adf.mf.api.amx.AmxNode>` | `getChildren` | `String facetName,` `Object stampKey` | 子`AmxNode`を取得します。 2つのパラメータはオプションです。非ファセットの子を取得するには`facetName`に`null`を指定できます。 子が存在しないか、指定された修飾子の子が存在しない場合は、空の配列が返されます。
`Map<String, Array<adf.mf.api.amx.AmxNode>>` | `getFacets` | `Object stampKey` | `AmxNode`のすべてのファセットを取得します。 `stampKey`はオプションですが、指定した場合、指定されたスタンプ・キーの`AmxNode`インスタンスを取得します。
`Boolean` | `visit` | `adf.mf.api.amx.VisitContext visitContext,` `Function visitCallback` | この`AmxNode`からツリー訪問を実行します。 `visitCallback`は、`visitContext`および`AmxNode`を引数として受け入れる必要があります。 訪問が完了し、継続すべきでないかどうかを返します。
`Boolean` | `visitChildren` | `adf.mf.api.amx.VisitContext visitContext,` `Function visitCallback` | この`AmxNode`の子からツリー訪問を実行します。 `visitCallback`は、`visitContext`および`AmxNode`を引数として受け入れる必要があります。 訪問が完了し、継続すべきでないかどうかを返します。
`Boolean` | `visitStampedChildren` | `Object stampKey,` `Array<String> facetNamesToInclude,` `Function filterCallback,` `adf.mf.api.amx.VisitContext visitContext,` `Function visitCallback` | カスタム`visitChildren`関数内から子`AmxNode`を訪問するために子をスタンプするタイプ・ハンドラにとって便利な関数。 `facetNamesToInclude`が空の場合、このスタンプで処理されるファセットはありません。`facetNamesToInclude`が`null`の場合は、このスタンプに対してすべてのファセットが処理されます。 `filterCallback`は`null`にできます。`filterCallback`は、`Boolean`の`true`(子の作成にタグが使用される)または`false`(タグは処理されない)を返す必要があります。 `visitCallback`関数は、`visitContext`および`AmxNode`を引数として受け入れる必要があります。 訪問が完了し、継続すべきでないかどうかを返します。
`Array<adf.mf.api.amx.AmxNode>` | `getRenderedChildren` | `String facetName,` `Object stampKey` | `AmxNode`のレンダリングされた子を取得します。 `facetName`は、レンダリングされた子の取得元のファセットを、非ファセットの子の場合は`null`を示します。 `stampKey`を指定した場合、指定されたスタンプ・キーの子`AmxNode`インスタンスを取得します。 指定されたスタンプ・キーに対してレンダリングされる子を返します。フラット化できる(フラット化可能)すべてのコンポーネントをフラット化し、レンダリングされないコンポーネントは返しません。
`Boolean` | `isFlattenable` | なし | `AmxNode`がフラット化可能かどうかを特定します。 フラット化されたAmxNodeには、レンダリングに関連する動作がない可能性があるため、フラット化されたAmxNodeのタイプ・ハンドラのみが子ノードを作成および訪問できますが、レンダリングに影響を与えることはできません。
`adf.mf.api.amx.AmxNodeStates` | `getState` | なし | `AmxNode`の現在の状態を取得します(`adf.mf.api.amx.AmxNodeStates`の定数値として)。
`void` | `setState` | `state` | `AmxNode`の`adf.mf.api.amx.AmxNodeStates`状態を移動します。MAFまたは`AmxNode`のタイプ・ハンドラによってのみコールされる必要があります。
`HTMLElement` | `render` | なし | `AmxNode`をレンダリングします。 レンダリングされたルート要素または子がレンダリングされていない場合やこの`AmxNode`のタイプ・ハンドラがない場合は`null`が返されます。
`Array<HTMLElement>` | `renderDescendants` | `String facetName,` `Object key` | この`AmxNode`のサブノードをレンダリングします(可能な場合は、一番近い子孫にフラット化します)。 `facetName`が`null`でない場合、そのファセットの子をレンダリングします。facetNameが`null`の場合は、非ファセットの子がレンダリングされます。 そのスタンプ・キーに対する子`AmxNode`インスタンスのレンダリングには、オプションのキーが使用されます。 各`subNode`にルート要素の配列が返されます。
`void` | `rerender` | なし | `AmxNode`を再レンダリングします。
`Boolean` | `isRendered` | なし | レンダリングすべきかどうかを確認するために、`AmxNode`の状態をチェックします。 `AmxNode`が`ABLE_TO_RENDER, RENDERED`または`PARTIALLY_RENDERED`の状態の場合、レンダリング可能とみなされます。
`void` | `refresh` | `adf.mf.api.amx.AmxAttributeChange attributeChanges,` `adf.mf.api.amx.AmxDescendentChanges descendentChanges` | `AmxNode`のDOMをリフレッシュします。 このメソッドは`updateChildren`メソッドの後にコールされ、変更に応じてDOMを更新するタイプ・ハンドラによって実装される必要があります。
`void` | `createStampedChildren` | `Object stampKey,` `Array<String> facetNamesToInclude,` `Function filterCallback` | カスタム`createChildrenNodes`関数内から子`AmxNode`インスタンスを作成するために子をスタンプするタイプ・ハンドラにとって便利な関数。 この関数は、任意のUIタグに子を作成します。 `facetNamesToInclude`が空の場合、このスタンプに対してファセットは処理されません。`facetNamesToInclude`が`null`の場合は、すべてのファセットが処理されます。`facetNamesToInclude`が配列内に`null`値を含む場合は、非ファセット・タグの子が作成されます。 `filterCallback`は、作成される子をフィルタ処理するためのオプションの関数です。`filterCallback`関数は、`AmxNode`、`stampKey`、子タグおよびファセット名(非ファセットの場合は`null`)を使用して起動されます。`filterCallback`関数は、`boolean`を返す必要があります。`true`の場合、子を作成するためにタグが使用され、`false`の場合、タグは処理されません。

### 19.2.5 AmxTagの使用方法

表19-5に、カスタムUIコンポーネントの作成に使用できる`AmxTag`のAPIをリストします。

表19-5

戻り型 | 関数名 | パラメータ | 説明
--- | --- | --- | ---
`String` | `getNamespace` | なし | タグのXMLネームスペースURIを取得します。
`String` | `getNsPrefixedName` | なし | ネームスペースを含むタグ名をその接頭辞(ローカルの`xmlns`接頭辞ではなく)として返します。 これは、`http://xmlns.example.com/custom:custom`などのXML完全名です。
`String` | `getName` | なし | タグ名を取得します。 これは、接頭辞なしのローカルXMLタグ名です。
a`df.mf.api.amx.AmxTag` | `getParent` | なし | 親タグまたは最上位の場合は`null`を取得します。
`String` | `getTextContent` | なし | タグのテキスト・コンテンツを返します。
`Array<adf.mf.api.amx.AmxTag>` | `findTags` | `String namespace,` `String tagName` | 指定されたネームスペースおよびタグ名を使用して、タグ階層でタグを再帰的に検索します。 一致する場合は現在のタグを返します。
`Array<adf.mf.api.amx.AmxTag>` | `getChildren` | `String namespace,` `String tagName` | タグの子を取得します。 子のネームスペースおよびタグ名に対するオプションのフィルタ処理を指定します。ネームスペースが`null`の場合、すべての子が返されます。`tagName`が`null`の場合、子はタグ名でフィルタ処理されません。
`Array<adf.mf.api.amx.AmxTag>` | `getChildrenFacetTags` | なし | すべての子ファセット・タグを取得します。 この関数は、`AmxNode`処理の作成を支援します。
`adf.mf.api.amx.AmxTag` | `getChildFacetTag` | `String name` | 指定された名前のファセット・タグを取得します。 この関数は、ファセットの存在がタイプ・ハンドラの動作を変更する場合にコードを支援します。 ファセットが見つからない場合は`null`を返します。
`Array<adf.mf.api.amx.AmxTag>` | `getChildrenUITags` | なし | UIタグであるすべての子タグを取得します。 この関数は、`AmxNode`処理の作成に役立ちます。 この関数はファセット・タグを返しません。
`Array<String>` | `getAttributeNames` | なし | タグで指定されている属性の属性名をすべて取得します。
`Boolean` | `isAttributeElBound` | `String name` | 指定されている属性がEL式にバインドされているかどうか(静的値ではなく)を特定します。
`String` | `getAttribute` | `String name` | 指定された名前の属性の属性値(EL文字列の場合があります)を取得します。 属性が指定されていない場合は、未定義が返されます。
`Map<String, String>` | `getAttributes` | なし | 属性値およびその値のキーと値のペアのマップを取得します。
`Boolean` | `isUITag` | なし | ノードがタイプ・ハンドラを使用するUIかどうか、およびコンテンツをレンダリングするかどうかを特定します。
`Object{name:string, children:Array<adf.mf.api.amx.AmxTag>}` | `getFacet` | なし | このファセットの子のタグを、およびこのタグがファセット・タグの場合はファセットの名前を取得します。 これは、`AmxNode`ツリーの構築に役立つ便利な関数です。 ファセットの名前およびファセットの子タグとともにオブジェクトを返します。ファセットが`amx:facet`タグでない場合は`null`を返します。
`adf.mf.api.amx.AmxNode` | `buildAmxNode` | `adf.mf.api.amx.AmxNode parentNode,` `Object stampKey` | このタグの`AmxNode`の新しいインスタンスを指定されたスタンプIDで作成します。 タグがファセット・タグの場合、このタグは子タグの`AmxNode`を作成します。 この関数は`AmxNode`を初期化しません。かわりに、初期化されていない`AmxNode`または非UIタグの場合は`null`を返します。
`adf.mf.api.amx.TypeHandler` | `getTypeHandler` | なし | このタグのタイプ・ハンドラを取得します。

### 19.2.6 VisitContextの使用方法

表19-6に、カスタムUIコンポーネントの作成時に使用できる`VisitContext`のAPIをリストします。

表19-6 VisitContext API

戻り型 | 関数名 | パラメータ | 説明
--- | --- | --- | ---
`Boolean` | `isVisitAll` | なし | すべてのノードが訪問可能かどうかを特定します。
`Array<adf.mf.api.amx.AmxNode>` | `getNodesToWalk` | なし | 訪問の際に訪問する必要のあるノードを取得します。 このリストには、訪問すべきノード(コールバックが起動されました)を含む必要はありません。
`Array<adf.mf.api.amx.AmxNode>` | `getNodesToVisit` | なし | 訪問するノードのリストを取得します。
`Array<adf.mf.api.amx.AmxNode>` | `getChildrenToWalk` | `adf.mf.api.amx.AmxNode parentAmxNode` | 指定された親`AmxNode`の訪問すべき子AmxNodeインスタンス(存在する場合はファセットを含む)を特定します。 タイプ・ハンドラに対して、すべての子を訪問しない場合の子の訪問方法の最適化を許可します。 `null`を返す場合があります。

### 19.2.7 AmxAttributeChangeの使用方法

表19-7に、カスタムUIコンポーネントの作成時に使用できる`AmxAttributeChange`のAPIをリストします。

表19-7 AmxAttributeChange API

戻り型 | 関数名 | パラメータ | 説明
--- | --- | --- | ---
`Array<String>` | `getChangedAttributeNames` | なし | 現在の変更に影響を受けた属性の名前を取得します。
`Boolean` | `isCollectionChange` | `String name` | 属性の変更がコレクション変更かどうかを特定します。
`adf.mf.api.amx.AmxCollectionChange` | `getCollectionChange` | `String name` | 属性のコレクション・モデルの変更情報を取得します。使用できる変更オブジェクトがない場合はnullを返します。
`String` | `getOldValue` | `String name` | 変更が実行される前の属性の値を取得します。
`Boolean` | `hasChanged` | `String name` | 指定された名前の属性が変更されたかどうかを特定します。
`Number` | `getSize` | なし | 属性の変更数を取得します。

### 19.2.8 AmxDescendentChangesの使用方法

表19-8に、カスタムUIコンポーネントの作成時に使用できる`AmxAttributeChange`のAPIをリストします。

表19-8 AmxDescendentChanges API

戻り型 | 関数名 | パラメータ | 説明
--- | --- | --- | ---
`Array<adf.mf.api.amx.AmxNode>` | `getAffectedNodes` | なし | レンダリング前の変更済の子孫`AmxNode`インスタンスを取得します。
`adf.mf.api.amx.AmxAttributeChange` | `getChanges` | `adf.mf.api.amx.AmxNode amxNode` | 指定されたAmxNodeの変更を取得します。
`adf.mf.api.amx.AmxNodeStates` | `getPreviousNodeState` | `adf.mf.api.amx.AmxNode amxNode` | 変更が適用される前の子孫AmxNodeの状態を取得します。

### 19.2.9 AmxCollectionChangeの使用方法

表19-9に、カスタムUIコンポーネントの作成時に使用できる`AmxCollectionChange`のAPIをリストします。

表19-9 AmxCollectionChange API

戻り型 | 関数名 | パラメータ | 説明
--- | --- | --- | ---
`Boolean` | `isItemized` | なし | コレクションに対する変更が項目化される可能性があるかどうかを特定しますが、そのコレクションのキーおよび要素は識別されているため、`TypeHandler`は、リスト全体を最初から再レンダリングするのではなく、適切な項目のみを更新できます。
`Array<String>` | `getCreatedKeys` | なし | 作成されたキーの配列、または変更を項目化できない場合は`null`を取得します。
`Array<String>` | `getDeletedKeys` | なし | 削除されたキーの配列、または変更を項目化できない場合はnullを取得します。
`Array<String>` | `getUpdatedKeys` | なし | 更新されたキーの配列、または変更を項目化できない場合はnullを取得します。
`Array<String>` | `getDirtiedKeys` | なし | ダーティな状態のキーの配列、または変更を項目化できない場合はnullを取得します。

### 19.2.10 AmxNodeChangeResultの使用方法

表19-10に、カスタムUIコンポーネントの作成時に使用できる`AmxNodeChangeResult`のAPIをリストします。

表19-10 AmxNodeChangeResult API

メンバー | 説明
--- | ---
`adf.mf.api.amx.AmxNodeChangeResult["NONE"]` | レンダリングされていない子孫`AmxNode`上の属性変更に対応してアクションは行いません。
`adf.mf.api.amx.AmxNodeChangeResult["REFRESH"]` | 属性およびその子AmxNodeインスタンスはタイプ・ハンドラによって更新済で、DOMはタイプ・ハンドラの`refresh`関数によって更新されます。
`adf.mf.api.amx.AmxNodeChangeResult["RERENDER"]` | AmxNodeおよびその子AmxNodeインスタンスがタイプ・ハンドラによって更新済ですが、DOMは、`AmxNode`階層を変更する必要がないため、`refresh`関数がタイプ・ハンドラでコールされない場合にのみ再作成する必要があります。
`adf.mf.api.amx.AmxNodeChangeResult["REPLACE"]` | タイプ・ハンドラは変更を処理できません。DOMおよび`AmxNode`階層は再作成される必要があります。 この値は、タイプ・ハンドラ上の`updateChildren`メソッドからのみ返され、`getDescendentChangeAction`メソッドからは返すことができません。

### 19.2.11 AmxNodeStatesの使用方法

表19-11に、カスタムUIコンポーネントの作成時に使用できる`AmxNodeStates` APIを示します。

表19-11 AmxNodeStates API

メンバー | 説明
--- | ---
`adf.mf.api.amx.AmxNodeStates["INITIAL"]` | 初期状態。`AmxNode`は作成されましたが移入されていません。
a`df.mf.api.amx.AmxNodeStates["WAITING_ON_EL_EVALUATION"]` | レンダリングに必要なELベースの属性はまだ完全にロードされていません。
`adf.mf.api.amx.AmxNodeStates["ABLE_TO_RENDER"]` | EL属性はロードされましたが、`AmxNode`はまだレンダリングされていません。
`adf.mf.api.amx.AmxNodeStates["PARTIALLY_RENDERED"]` | ELはまだ完全にロードされていませんが、`AmxNode`は部分的にレンダリングされました(今後の使用のために予約済)。
`adf.mf.api.amx.AmxNodeStates["RENDERED"]` | `AmxNode`は完全にレンダリングされました。
`adf.mf.api.amx.AmxNodeStates["UNRENDERED"]` | AmxNodeはレンダリングされません。

### 19.2.12 AmxNodeUpdateArgumentsの使用方法

表19-12に、カスタムUIコンポーネントの作成時に使用できる`AmxNodeUpdateArguments`のAPIをリストします。

表19-12 AmxNodeUpdateArguments API

戻り型 | 関数名 | パラメータ | 説明
--- | --- | --- | ---
`Array<adf.mf.api.amx.AmxNode>` | `getAffectedNodes` | なし | 影響を受ける`AmxNode`インスタンスの配列を取得します。
`Map<String,Boolean>` | `getAffectedAttributes` | `String amxNodeId` | 指定されたAmxNode IDの影響される属性を表すオブジェクトを取得します。
`Map<String,adf.mf.api.amx.AmxCollectionChange>` | `getCollectionChanges` | `String amxNodeId` | 指定されたAmxNodeおよびプロパティのコレクション変更を取得します。 返されるマップは、属性名によってキー設定されます。 `AmxNode`に変更がない場合は未定義が返されます。
`void` | `setAffectedAttribute` | `adf.mf.api.amx.AmxNode amxNode,` `String attributeName` | AmxNodeの属性を影響を受けたとマークします。
`void` | `setCollectionChanges` | `String amxNodeId,` `String attributeName,` `adf.mf.api.amx.AmxCollectionChange collectionChanges` | 指定された`AmxNode`の属性のコレクション変更を設定します。

## 19.3 カスタム・コンポーネントの作成

JavaScriptおよびMAF APIを使用して、カスタムUIコンポーネントを作成できます。このコンポーネントのJavaScriptファイルは、アプリケーション機能レベルの包含を介して、プロジェクトに追加できます。カスタム・タグ・ライブラリを追加すると、「コンポーネント」ウィンドウのタグ・ライブラリのリストに組み込まれ、このライブラリが選択されると、カスタム・コンポーネントが「コンポーネント」ウィンドウで使用可能になり、その属性が「プロパティ」ウィンドウに表示されます。

始める前に:

第19.2項、「MAF APIを使用したカスタム・コンポーネントの作成」に記載されているAPIを確認してください。

カスタム・コンポーネントを作成するには、次の手順を実行します。

1. `adf.mf.api.amx.TypeHandler.register` APIを使用して、タグ・ネームスペースおよび一連の1つ以上のタイプ・ハンドラを登録するJavaScriptファイルを作成します(表19-1「静的API」およびこの項の後続の例を参照)。

2. タイプ・ハンドラごとにレンダリング・メンバー関数を実装します。

3. オプションで、その他の関数を実装します。

4. 1つ以上のJavaScriptファイルおよびCSSファイルをMAF AMXアプリケーション機能にアタッチします。たとえば、「ファイル」→「新」→「MAFサンプル」にある次のサンプル・アプリケーションを参照してください。

   - CompGalleryというMAFサンプル・アプリケーションに含まれている`custom.js`ファイルおよび`custom.css`ファイル。

   - WorkBetterサンプル・アプリケーションには、カスタムの検索コンポーネントが含まれています。

   または、デザインタイム・パッケージングを実行できます。

5. カスタム・コンポーネントのうちの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サンプル」にあります。