ダッシュボードで使用するためのカスタム・ウィジェットの作成
WSRR ダッシュボードでカスタム・ウィジェットを使用するには、XML ファイルと JavaScript ファイルを作成して、それらをダッシュボードにロードできるようにパッケージする必要があります。
始める前に
ウィジェットを開発するには、以下の概念について理解している必要があります。
- Dojo 1.9
- Extensible Markup Language (XML)
- HyperText Markup Language (HTML)
- iWidget 2.1 の仕様
- JavaScript
- Java™ 2 Platform, Enterprise Edition (J2EE)
- Representational State Transfer (REST)
ウィジェット実装ファイルは、Dojo V1.7 以降によってサポートされている 1 つ以上の Asynchronous Module Definition (AMD) モジュールを形成する必要があります。
重要: WSRR V8.5.6 ダッシュボードでは、IBM® Dojo Toolkit のインスタンスは Dojo ツールキットのバージョン 1.9 に基づいています。ただし、このバンドル・バージョンは必要に応じて時間の経過とともに更新される可能性があります。 更新には、Dojo バージョンが完全に新しくなる場合や、特定の問題が修正される場合などがあります。今後の Dojo バージョンの互換性は、Dojo プロジェクトによって定義されます。
WSRR ダッシュボードで実行できるカスタム・ウィジェットを作成するには、XML ファイルと JavaScript ファイルを作成する必要があります。これらのファイルを作成する前に、オプションで、カスタム・ウィジェットのファイルを入れるディレクトリー構造を作成できます。テキスト・エディターやその他のエディターなどの基本ツールを使用して、カスタム・ウィジェットを作成できます。
注: ダッシュボードでウィジェットを実行するには、いくつかのエレメントを示されているとおりに正確に指定する必要があります。
XML ファイルの作成
このタスクについて
手順
ウィジェット定義とそのエレメントで、次のことを定義する必要があります。
- iScope およびスキーマ
- iScope タイプ (Dojo AMD にする必要があります)
- ウィジェットがサポートするモード
- iScope を宣言する JavaScript ファイルのパスおよび名前
- ウィジェットの属性
- イベント
- ウィジェットが参照するすべてのファイル
注: ウィジェットの各部分を定義する順序は重要ではありませんが、このタスクのステップは、リストの項目の順序で示されています。
タスクの結果
<?xml version="1.0" encoding="UTF-8" ?>
<iw:iwidget
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"
iScope="sample.custom.widget.iscope.MyCustomWidget"
xmlns:cre="http://www.ibm.com/xmlns/prod/CRE"
cre:iScopeType="dojoAMD"
supportedModes="view edit">
<iw:resource src="MyCustomWidget.js" />
<iw:itemSet id="idescriptor">
<iw:item id="title" lang="en" value="My Custom iWidget"></iw:item>
<iw:item id="description" lang="en" value="Your Custom iWidget"></iw:item>
<iw:item id="defaultHeight" lang="en" value="250"></iw:item>
<iw:item id="thumbnail" value="YourThumbnailImage.png"></iw:item>
</iw:itemSet>
<iw:event id="com.ibm.sr.ui.iwidgets.events.itemSelected" handled="true" published="false" onEvent="loadData" eventDescName="desc_itemSelected"/>
<iw:eventDescription
id="desc_itemSelected"
lang="en"
payloadType="json"
title="Item selected"
description="Edit the selected data">
</iw:eventDescription>
<iw:content mode="view">
<![CDATA[
<div>Hello World</div>
]]>
</iw:content>
<iw:content mode="edit">
<![CDATA[
<Hello World>
]]>
</iw:content>
</iw:iwidget>JavaScript ファイルの作成
このタスクについて
手順
タスクの結果
define([
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/request/xhr",
"com/ibm/sr/ui/helpers/CustomWidgetHelper"
], function(declare, lang, xhr, CustomWidgetHelper) {
var CustomIWidget = declare("sample.custom.widget.CustomIWidget", null, {
/*This event signals that the iWidget has been loaded. You might use
this to initialize your dependencies.
*/
onLoad:function() {
// get an instance of the dashboard helper
this.customWidgetHelper = CustomWidgetHelper.getInstance();
...
},
/*
This event signals that the iWidget is about to be unloaded (commonly
due to a page transition). This notification is intended to allow the
iWidget to store any transient data such that it can be recovered by
future uses of the iWidget
*/
onUnload:function() {
//TODO save state
},
/*
This event signals that the mode for the iWidget has changed to VIEW
*/
onView:function() {
//TODO Add any HTML markup to the iWidget XML for the view mode
...
this.doXhrRetrieve(<SOME_BSRURI>, lang.hitch(this, function(data) {
// handle the data
}, function(error, response) {
// handle the error
});
...
},
/*This event signals that the mode for the iWidget has changed to EDIT
*/
onEdit:function() {
//TODO implement any settings that the user might want to change
//TODO Add any HTML markup to the iWidget XML for the edit mode
},
/*This event signals that the size for the iWidget has changed
*/
onSizeChanged:function(event) {
var newWidth = event.payload.newWidth;
var newHeight = event.payload.newHeight;
//TODO Any resizing code, once/if it is needed
},
/*Uses the helper to get the REST service endpoint.
@returns the WSRR REST URL
*/
getWSRRRestEndpoint: function() {
var baseUrl = this.customWidgetHelper.getWsrrRestEndpoint();
baseUrl = dojo.trim(baseUrl);
// add on the API version - check for ending slash or not
if (baseUrl.lastIndexOf("/") != -1 && baseUrl.lastIndexOf("/") == baseUrl.length - 1) {
baseUrl += "8.5";
} else {
baseUrl += "/8.5";
}
return baseUrl;
},
doXhrRetrieve:function(bsrURI, successFunc, errorFunc) {
var restUrl = this.getWSRRRestEndpoint() + "/Content/" + bsrURI;
// use the dojo asynchronous HTTP GET method to call the REST API
var def = xhr(this.proxifyEndpoint(restUrl), {
method: "GET",
timeout: 300000
}, true);
def.then(successFunc, function(err) {
errorFunc(err, def.response);
});
},
/*If an endPoint is remote then we need to use the proxy service (/common/proxy)
to access the URL so that we do not break the browsers' security requirements.
@param endPoint - the endpoint you want to use a proxy for
@returns {String} the proxified endpoint if remote, or the endpoint if local.
*/
proxifyEndpoint: function(endPoint) {
return this.iContext.io.rewriteURI(endPoint);
}
}); // declare
return CustomIWidget;
}); // defineパッケージ化
手順
次のタスク
CustomWidgetHelper は、JavaScript コードの例の中で、WSRR REST エンドポイントが取得される方法を説明するために使用されています。 CustomWidgetHelper とその用途については、CustomWidgetHelper のトピックを参照してください。
