グローバル関数としてのJavaScriptモジュールの追加
アプリケーションの様々な部分で、同じようなJavaScript関数を定期的に使用してデータを変換または操作する場合は、それらの関数をグローバル関数として抽出して再利用できます。
これらの関数をページで再利用可能にするには、その実装をグローバル関数として定義し、すべてのページ(フラグメントまたはその他のコンテナ)(ただし、ビジュアル・アプリケーションの1つのWebアプリケーション内でのみ)で使用できるようにします。
たとえば、webappAは、Webアプリケーションでコンテナ(ページ、フラグメントおよび動的レイアウト・アーティファクト)によって共有される2つのJavaScriptユーティリティdateUtils.jsおよびstandardUtils.jsを定義するとします。 ユーティリティのコードを同じロジックを必要とするすべてのコンテナにコピーするのではなく、それらをグローバル関数として(webApps/webAppName/resources/レベルで)追加し、関連するfunctions.jsonメタデータ・ファイルで使用するためのルールを宣言できます。 このように、依存コンテナは、関数をリソースとしてインポートし、最小限の労力でそれらを使用できます。
JavaScriptモジュールをグローバル関数としてWebアプリケーションに追加するには:
functionsフォルダがWebアプリケーションに作成されると、必要に応じてファイルを追加または削除できます。 次に、calculator.jsおよびfunctions.jsonファイルとともにインポートされたfunctions.zipの例を示します:
- ビジネス・ルール、検証ルールおよびデフォルト値用の拡張式エディタで、アクション・パレットからこれらの関数をドラッグできます。
コードを直接編集するには、
$modules.module-id.function-name(...)という形式(たとえば、$modules.calculator.add(baseAmount, additionalAmount))を使用します。 式の作成方法の詳細は、「拡張式の作成」を参照してください。 - JavaScriptアクション・チェーン・エディタで、「アクション」パレットから次の関数をドラッグできます。
コードを直接編集するには、
$modules.module-id.function-name(...)という形式(たとえば、$modules.calculator.add(10, 20))を使用します。 コール・ファンクション・アクションの使用方法の詳細は、「関数呼出しアクションの追加」を参照してください。
- モジュールを自動的にインポートするには、パレットから関数をドラッグし、式またはアクション・チェーンを作成します。
- モジュールを手動でインポートするには:
- 設定エディタでコンテナの「インポート」タブを開きます。
- 「モジュール・インポート」の下の「+モジュール」をクリックし、モジュール名(計算機能など)を入力し、
{application}:{resourceType}/{resourceAlias}の形式でモジュールへのパスを入力します。ここでは:{application}は、リソースが属する現在のWebアプリケーションを示します。{resourceType}は、/functionsリソース用の特別なキーワードです(たとえば、$functions){resourceAlias}は、functions.jsonで定義されたJavaScript別名です。
たとえば、
application:$functions/calculatorモジュール・パスはvisualAppRoot/webApps/webAppName/resources/functions/calculator.jsに解決されます。 - 「作成」をクリックします。
グローバル関数の管理
ファンクション・エディタを使用して、Webアプリケーションに追加されたグローバル関数を管理します。このエディタでは、functions.jsonファイルを編集したり、グローバル関数を含む新しいJavaScriptファイルを作成できます。
- 「Webアプリケーション」ペインで、Webアプリケーションの「リソース: 関数」フォルダを展開し、
functions.jsonを選択して「関数」タブでファイルを開きます。「機能」タブは、functions.jsonに追加されたJSファイルと各ファイル内の関数を管理できる直感的なインタフェースを提供します。 JSONを使用する場合は、いつでもJSONタブに切り替えることができます。 functions.jsonに関連付けられているJSファイル(および関数)を更新します:- JSファイルのメタデータを更新するには、ファイル(
calculatorなど)を選択し、「プロパティ」ペインでそのメタデータを更新します。ファイル・パス以外は、必要なものを変更できます。 詳細は「ファイル・メタデータ・オブジェクト」を参照してください。
- JSファイルにファンクションを追加するには、ファイルを選択して「関数の追加」をクリックします。 ファンクションのIDを入力し、「作成」をクリックします。 「プロパティ」ペインを使用して、入力パラメータの追加や編集を含む関数のメタデータを定義できるようになりました。 詳細は、「関数メタデータ・オブジェクト」および「パラメータ・メタデータ・オブジェクト」を参照してください。
- JSファイルの既存のファンクションを更新するには、ファイルを選択して「ファイルに移動」をクリックします。 このオプションは、ファイルのコンテキスト・メニューとその「プロパティ」ペインの「アクション」メニューにも表示されます。
- ファンクションのメタデータまたは入力パラメータを更新するには、JSファイル内のファンクション(たとえば、
calculatorの下のadd)を選択し、「プロパティ」ペインでその詳細を更新します。ファンクションの入力パラメータを管理するには、パラメータの下のパラメータにマウス・ポインタを重ね、
をクリックしてパラメータのメタデータを更新します: 
図global-functions-editparameter.pngの説明必須パラメータは、「プロパティ」ペインの*で示され、通常はデフォルト値がないパラメータです。 オプションのパラメータを追加するには、パラメータのデフォルト値を設定します。 デフォルト値が定義されていない場合( 「
functions.jsonでのdefaultValueの使用」)は、パラメータの「プロパティ」ペインでその値を設定できます。新しい入力パラメータを追加するには、「パラメータ」の横にある「追加」をクリックします。
- JSファイルまたはJSファイル内の関数を削除するには、ファイルまたは関数を右クリックして「削除」を選択します。 ファイルを削除しても、
functions.jsonからのみ削除され、functionsフォルダからファイルは削除されません。
- JSファイルのメタデータを更新するには、ファイル(
例JSグローバル関数として定義されたモジュール
3つのグローバル関数を定義するcalculator.jsモジュールの例を次に示します:
define([], () => {
'use strict';
function add(num1, num2) {
return num1 + num2;
}
function multiply(num1, num2) {
return num1 * num2;
}
function log(number, base=10) {
// some calculation
return 0;
}
return { add, multiply, log };
});このcalculator.jsモジュールは、2つの数値の合計を戻すadd関数、2つの数値を乗算するmultiply関数、および指定されたベースを持つ数値の対数を計算するlog関数を定義します。
functions.jsonファイルには、filesセクションのJSモジュールのリストにcalculator.jsファイルが含まれます。
グローバル関数を宣言するfunctions.jsonの例
functions.jsonファイルは、JavaScriptモジュールをグローバル関数として宣言するために使用され、モジュール名、関数名、パラメータ、および実装ファイル・パスなどの関数のメタデータを指定します。 次に、calculator.jsモジュールを参照するfunctions.jsonファイルの例を示します:
{
"files": {
"calculator": {
"path": "oracle/calculator",
"label": "Calculator",
"description": "Calculator Utilities",
"iconClass": "oj-ux-ico-airport",
"functions": {
"add": {
"label": "Add Numbers",
"description": "Add two numbers",
"params": {
"num1": {
"label": "First Number",
"description": "First Number",
"type": "number"
},
"num2": {
"label": "Second Number",
"description": "Second Number",
"type": "number"
}
},
"return": "number"
},
"multiply": {
"label": "Multiply Numbers",
"description": "Multiply two numbers",
"params": {
"num1": {
"label": "First Number",
"description": "First Number",
"type": "number"
},
"num2": {
"label": "Second Number",
"description": "Second Number",
"type": "number"
}
},
"return": "number"
},
"log": {
"label": "Logarithm Of",
"description": "Logarithm of given number",
"params": {
"number": {
"label": "Number",
"description": "Number",
"type": "number"
},
"base": {
"label": "Base",
"description": "Log Base",
"type": "number",
"defaultValue": 10
}
},
"return": "number"
}
}
}
}
}ファイル・メタデータ・オブジェクト
filesセクションには、1つ以上のJSファイルを含めることができます。 各ファイル・パス(dynamicLayouts/self/resources/functions/に対する相対パス)は、関数のグループを記述するメタデータ・オブジェクトにマップされます。
| 名前 | タイプ | 説明 |
|---|---|---|
path |
文字列 | 実装ファイルの相対パス。 前述の例では、.jsファイルへのパスはoracle/calculatorです。 ファイルがRequireJSモジュールの場合、.jsファイル拡張子を削除できます。
|
label |
文字列 | この関数グループの名前を指定する文字列。 |
description |
文字列 | この関数グループを説明する文字列。 |
functions |
Object<String,Function> | (必須)ファンクション名をファンクション・メタデータにマップするオブジェクト。 「関数メタデータ・オブジェクト」を参照してください。 |
関数メタデータ・オブジェクト
functionsセクションは、コール元が使用できる関数をリストするために使用できます。
| 名前 | タイプ | 説明 |
|---|---|---|
label |
文字列 | この関数グループの名前を指定する文字列。 |
description |
文字列 | この関数グループを説明する文字列。 |
params |
Object<String,Function> | (必須)パラメータ名をパラメータ・オブジェクトにマップするオブジェクト。 「パラメータ・メタデータ・オブジェクト」を参照してください。 |
return |
文字列 | 関数の戻り型。 プリミティブ型、配列、オブジェクトおよびanyのみがサポートされています。
|
パラメータ・メタデータ・オブジェクト
| 名前 | タイプ | 説明 |
|---|---|---|
label |
文字列 | この関数グループの名前を指定する文字列。 |
description |
文字列 | この関数グループを説明する文字列。 |
type |
文字列 | パラメータ・タイプ プリミティブ型、配列、オブジェクトおよびanyのみがサポートされています。 デフォルトはanyです。
|
defaultValue |
文字列 | (オプション)パラメータのデフォルト値。パラメータが必須かオプションかを示すために使用されます。 デフォルト値を指定しない場合、パラメータは必須とみなされます。 |