コードウィジェットのフロントエンド実装

概要

JavaScript実装

JavaScript エントリーポイント

AbstractCodeTemplate.getJavascriptMainPath()により定義されたJavaScript ファイルです。これは、コードウィジェットがコンテンツにロードされるときにYellowfinが最初にロードするJavaScript ファイルであり、Yellowfinは様々なオプションを渡します。

Java

my_widget.js ファイルを定義し、mainJavascriptPath()として返します。

setupResources() {
addResource(“my_widget.js”, “text/javascript”);
}
 
getMainJavascriptPath() {
    return “my_widget.js”;
}

JavaScript

my_widget.js
define(function() {
 
    class myWidget {
        constructor(options) {
            //This will be called by YF when the code widget is rendered.
}
}
 
return myWidget;
});

依存関係がある場合は、それを配列内で定義し、定義した関数に渡すことができます。従属配列内のファイル位置は、渡された引数としての位置と一致します。

my_widget.js
define([‘my_example_dependency.js’], function(MyExampleDependencyObject) {
    class myWidget {
        constructor(options) {
            //This will be called by YF when the code widget is rendered.
}
}
 
return myWidget;
});

オプション

コンストラクタに渡されるオプションオブジェクトは次を含みます。

API
Element
ResourceLoader
Messenger

アイテム	説明	JavaScriptの例
API	次を含むオブジェクトです。 DashboardAPI WidgetAPI CanvasAPI Filters	constructor(options) { options.apis.dashboards.name; options.apis.filters; }
Element	これは、レンダリングされるコードウィジェットにYellowfinが生成するDOM要素です。生成するすべてのHTMLは、この要素に追加する必要があります。	constructor(options) { options.element.innerHTML = ‘Hello World’; }
ResourceLoader	コードウィジェット定義から追加のリソースをロードするために使用できるヘルパークラスです。これにより、コードウィジェット定義から他のアイテムをロードしたり、最初のコードウィジェットをロードした後に、必要なサードパーティ製ライブラリをロードしたりできます。注意：AbstractCodeTemplate.setupResourcesで定義したリソースのうち、isLibraryとして定義されていないものは、CodeWidgetの初期化時にロードされます。これは、コードウィジェットがロードされるときに実行されるリクエスト数を削減するために行われます。	options.resourceLoader.load(‘my_second_file.js’, function(MySecondFile) { //Do something with MySecondFile ));
Messenger	このオブジェクトは、キャンバスのステータスを取得し、オプションを保存するのに役立つ関数とフラグを含みます。例： edit このコードウィジェットが含まれているキャンバスが編集モードであるかどうかを定義するフラグです。これは、ウィジェットのカスタムインターフェースを作成するために使用できます。 getOptionValue(optionName) このウィジェットに定義された値を返します。 setOptionValue(optionName, optionValue) 渡されたoptionNameに対して、渡されたoptionValueを保存します。これは後ほど取得できます。これは、カスタムセットアップに使用できます。キャンバスが編集モードではない時にこれが呼び出された場合、その呼び出しは無視されます。	*edit* if(options.messenger.edit) { //Custom Edit Code } else { //Published Code } *getOptionValue(optionName)* console.log(options.messenger.getOptionValue(‘myOption’)); *setOptionValue(optionName, optionValue)* options.messenger.setOptionValue(‘myOption’, ‘myOptionValue’); console.log(options.messenger.getOptionValue(‘myOption’)); //Value will be ‘myOptionValue’

その他のJS ファイル

コードウィジェットによりロードされたすべてのJS ファイルは、それ自体の依存関係として複数のJavaScript ファイルをロードすることもできます。これを使用してサードパーティ製JS ライブラリを含めたり、コードウィジェットが使用できる独自コードの論理的に整理されたモジュールの作成に使用できます。

例えば、ユーザーがフリーテキストやイメージ、ラジオボタンを使用してフィルターを適用できるフィルター一覧ウィジェットを記述した場合、それぞれの要素のロジックを別々のファイルに保存することができます。JS エントリーポイントは、どちらを使用して関連するファイルをロードするかを決定することができます。

Yellowfinは、自動的にメインのJSファイルを呼び出すだけなので、ファイルが複数ある場合は、明示的に呼び出すことを忘れないでください。

Java

addResource(“my_second_file.js”, “text/javascript”);

JavaScript

my_widget.js
define([‘my_second_file.js’], function(SecondFile) {
     
});
 
my_second_file.js
define(function() {
    return class SecondFile {
        //My Class
    }
});

Yellowfinと他のコードウィジェットとの衝突を避けるために、これらのファイルから返されるクラス、またはオブジェクトを作成することを推奨します。しかしこれらは、必要に応じて、何も返さずにウィンドウに機能を追加するユーティリティファイルにすることができます。このように使用する場合は、慎重にアプローチし、徹底的に衝突をテストする必要があります。これらのファイルをこのように使用する場合は、setupResources関数にリソースを登録するときに、isLibrary フラグをtrueに設定します。

サードパーティ製JSライブラリ

コードウィジェットにサードパーティ製ライブラリが必要な場合は、コードウィジェットにバンドルすることができます。AbstractCodeTemplate実装でリソースを登録する場合は、isLibrary フラグを使用します。

Java

addResource(new Resource(“jquery.js”, “text/javascript”, true));

JavaScript

define([‘jquery.js’], function($) {
 
});

HTML実装

コードウィジェットにHTMLを含めることができます。これは、StringとしてJavaScript 関数に提供されます。

Java

addResource(“my_html.html”, “text/html”);

JavaScript

define([‘my_html.html’], function(MyHTML) {
    console.log(MyHTML); //HTML String
});

CSS実装

コードウィジェットにCSSを含めることができます。これは、コードウィジェットが最初にレンダリングされたときにページに追加されます。

Java

addResource(“my_css.css”, “text/css”);

JavaScript

define([‘resource/my_css.css’], function(css) {
    //The CSS variable will be undefined, however you should still include it in your function header to ensure other inclusions aren’t ignored
}

次のステップ

バックエンドコードおよびフロントエンドコードの記述が完了したら、オプション設定として、コードウィジェットプロパティパネルをカスタマイズできます。パネルのカスタマイズが必要ない場合は、jarファイルにコードをバンドルし、Yellowfinへアップロードする手順へ進んでください。

コードウィジェット開発をさらにサポートする、サンプルコードやAPIリンク、より詳細な説明は、こちらからご確認いただけます。