Oracle APEXとのOracle JETの統合の理解

10.1 Oracle APEXとのOracle JETの統合の理解

Oracle APEXには、Oracle JET (JavaScript Extension Toolkit)ライブラリが含まれています。この項では、JETに関する情報と、そのAPEXとの統合方法を示します。

10.1.1 Oracle JETについて

Oracle JET (JavaScript Extension Toolkit)は、OracleがコントリビュートしたJavaScriptライブラリのセットを含むオープン・ソースのJavaScriptライブラリのコレクションです。Oracle JETは、中級および上級のJavaScript開発者を対象としており、APEXに容易に統合できるUIコンポーネントの豊富なセットを提供します。Oracle JETは、開発者が必要なだけ機能を使用できるモジュール化されたツールキットです。

10.1.2 Oracle JETがOracle APEXと統合する仕組み

現在、APEXは、Oracle JETのいくつかの部分、主に「チャート」リージョン・タイプおよび「オートコンプリートが有効なテキスト・フィールド」アイテム・タイプと統合します。

ノート:

Oracle JETには双方向データ・バインディング(knockout.jsを使用)が用意されていますが、現在のAPEXでは、ツールキットのこの側面はネイティブに使用されません。

Oracle JETでは、モジュール・ローダー(RequireJS)は、特定の機能を機能させるために必要なモジュールをロードするためにのみ使用されます。これは、特定の機能のためにOracle JETライブラリ全体をロードする必要がないことを意味し、さらに、これによって各モジュールで独自の依存関係を定義できます。実行時に、モジュールがリクエストされると、モジュール・ローダーで、他のモジュールへの依存性に対してリクエストされているモジュールが参照されます。依存性がある場合、それらもロードされます。

ただし、モジュール・ローダーで、多数の追加リソースが実行時に個々にロードされて、パフォーマンスに悪影響を与える可能性があります。このため、APEXでは、RequireJS Optimization Toolを使用しますが、これは次のとおりです。

設計時または標準のビルド・プロセスの一部として、モジュールのすべての依存性を確認する方法を提供します
組み合された1つの縮小ファイルにバンドルします

すべての追加リクエストが必要なくなるように、RequireJS Optimization Toolが実行時にロードされます。

ChartおよびText field with Autocompleteのネイティブ・タイプに対して使用されるバンドルのリストを検索します。

jetCommonBundle.min.js
inputSearchBundle.min.js
chartBundle.min.js

jetCommonBundle.min.js

ノート:

プラグインで共通バンドルjetCommonBundle.min.jsを利用できます。この共通バンドルは、ファイルがプラグインに含まれるとすぐにAPEXのページに含まれ、[require jet]接頭辞が定義されます。これは、すでに共通バンドルに含まれているプラグインで使用するすべてのモジュールが、requireJSによって再フェッチする必要がないことを意味します。

ディレクトリ: /images/libraries/apex/minified/
含まれるタイミング: APEXの[require jet]接頭辞を使用して、JETを必要とするようにそれ自体を定義するJavaScriptファイルがリクエストされ、ページがデバッグ・モードではないとき
デバッグ時は、バンドルがロードされずに、requireJSですべての個々のリソースが個別にロードされます。

inputSearchBundle.min.js

ディレクトリ: /images/libraries/apex/minified/
含まれるタイミング: Text Field with Autocompleteアイテムがページに含まれ、ページがデバッグ・モードではない。

デバッグ時は、バンドルがロードされずに、requireJSですべての個々のリソースが個別にロードされます。

chartBundle.min.js

ディレクトリ: /images/libraries/apex/minified/
含まれるタイミング: JETチャートがページに含まれ(たとえば、ChartリージョンまたはInteractive Gridリージョンがページに追加されたとき)、ページがデバッグ・モードではない。

デバッグ時は、バンドルがロードされずに、requireJSですべての個々のリソースが個別にロードされます。