YouTube上に、Reactive Web AppにJavaScriptファイルを取り込んで利用するチュートリアル動画が公開されたので手順を確認してみます。
この動画には簡単な手順のみが示されていて、JavaScriptをReactive Web Appに組み込むための注意事項等はありません。DOMを扱う際の注意事項などについては後続の情報待ち。
対象動画は以下
How to Use External JavaScript in Your OutSystems Web Application
確認環境
Personal Environment(Version 11.8.0 (Build 12006))
Service Studio(Version 11.7.15)
組み込むJavaScriptファイル
動画中では10数行の簡単なJavaScriptファイルを組み込む手順が示されています。
せっかくなので、ちょっと違うJavaScriptファイルを作ってみました。
Random.randomInt()で1-100の範囲の整数をランダムに返します。
var Random = (function(){
'use strict';
var randomInt = function() {
return Math.floor(Math.random() * 100) + 1;
}
return {
randomInt: randomInt
}
})();
このJavaScriptコードをRandom.jsという名前でコンピュータ内に保存しておいてください。
テスト画面を用意
まず、Reactive Web Appアプリケーション、その内部にReactive Web Appモジュールを作ります。
用意したモジュールを開き、Emptyテンプレートを使って画面（Screen）を1つ作ります。
ここは普通と違うところがないので省略。
目標は読み込んだJavaScriptファイルの関数呼び出しをテストすることです。
そのため、処理の呼び出し用Buttonを1つと、結果を表示するExpressionを1つ配置してみました。
「乱数」というテキストを表示するボタンは、ダブルクリックしてOn Clickイベントに空のScreen Actionを紐付けておき（以下の画像ではOnClick Action）、ExpressionのValueプロパティにはローカル変数のNumber (Integer型) を設定しておきます。
後で、ボタンをクリックしたら、JavaScript関数を実行し、結果をNumber変数に格納してExpressionに表示するようにします。
JavaScriptファイルをインポートする
JavaScriptコードが独立したファイル形式の場合、Scriptsフォルダにインポートして使います。
こうすれば、モジュール内の複数の画面で簡単に使い回せるので。
- Service StudioのInterfaceタブを開く
- 一番下のScriptsフォルダを右クリック
- コンピュータに保存しておいたRandom.jsを選択して「開く」ボタン
インポートが終わると、以下のようになり、以降はJavaScriptプロパティで編集します。
インポートしたJavaScriptファイルを利用する
まずは、画面にJavaScriptファイルを取り込む設定をします。
画面のプロパティエディタの一番下に、Required Scriptsというプロパティがあるので、右のドロップダウンリストを展開し、インポートしたScripts.Randomを選択。
この設定を入れておくと、画面表示時に自動でJavaScriptファイルを読み込んでくれるようです。
準備ができたので、上で作っておいたButtonのScreen ActionにJavaScript要素を配置してください。
JavaScript1の中で、出力変数Out1 (Integer型) を定義し、JavaScriptファイルに定義したRandom.randomInt()の結果を格納しています。
その後のAssignで、Expressionに紐付けたNumber変数にその結果を渡すという流れ。
$parameters内には、JavaScript要素で定義した各種変数が自動的に入ります。
$parameters.Out1 = Random.randomInt();
テスト
以下の通り、ボタンをクリックするたびにJavaScriptファイル内の関数が実行され、結果が表示されます。
