Skip to main content

This is documentation for Caché & Ensemble. See the InterSystems IRIS version of this content.Opens in a new tab

For information on migrating to InterSystems IRISOpens in a new tab, see Why Migrate to InterSystems IRIS?

ダッシュボードで使用するポートレットの作成

この章では、ダッシュボードにウィジェットとして追加できるポートレットを作成する方法を説明します。以下のトピックについて説明します。

ポートレットの基本

ポートレットを定義するには、以下のようにクラスを作成してコンパイルします。

  • %DeepSee.Component.Portlet.abstractPortletOpens in a new tab をスーパークラスとして使用します。

  • %DrawHTML() メソッドを実装します。このメソッドは、ポートレットの本文を HTML として描画します。

    このメソッドには、以下のシグニチャがあります。

    method %DrawHTML()
    

    また、追加のオプションについては “設定の使用” も参照してください。

  • 必要に応じて、%OnGetPortletName() メソッドを実装します。このメソッドは、[ウィジェット・ビルダ] ダイアログ・ボックスに表示するポートレットのローカライズ名を返します。

    それ以外の場合は、短いクラス名がポートレット名となります。

    このメソッドには、以下のシグニチャがあります。

    classmethod %OnGetPortletName() as %String
    
  • 必要に応じて、%OnGetPortletIcon() メソッドを実装します。このメソッドは、[ウィジェット・ビルダ] ダイアログ・ボックスに表示するポートレットのアイコンの URL を返します。

    それ以外の場合は、システムによって汎用アイコンが使用されます。

    このメソッドには、以下のシグニチャがあります。

    classmethod %OnGetPortletIcon() as %String
    
  • 必要に応じて、%OnGetPortletSettings() メソッドを実装します。このメソッドは、1 つ以上の構成可能な設定を返します。“設定の定義と使用” を参照してください。

    それ以外の場合は、ポートレットに設定はありません。

  • 必要に応じて、adjustContentSize() メソッドを実装します。このメソッドは、ポートレットを含むウィジェットをロードまたは変更するたびに呼び出されます。このメソッドには、以下のシグニチャがあります。

    ClientMethod adjustContentSize(load, width, height) [ Language = javascript ]
    
  • 必要に応じて、onApplyFilters() メソッドを実装します。このメソッドは、フィルタの変更をウィジェットに送信するたびに呼び出されます。このメソッドには、以下のシグニチャがあります。

    ClientMethod onApplyFilters(refresh) [ Language = javascript ]
    

設定の定義と使用

構成設定を提供するポートレットは簡単に定義できます。そのためには、ポートレット・クラスの %OnGetPortletSettings() メソッドを実装します。このメソッドには次の 2 つの役割があります。

  • ダッシュボード・デザイナーで、このウィジェットの [設定] メニューに表示される設定を定義すること

  • ダッシュボードの URL を介してこれらの設定の値を受け取ることURL を介して値を渡す方法については、“アプリケーションからダッシュボードへのアクセス” の章を参照してください。

%OnGetPortletSettings() メソッドには、以下のシグニチャがあります。

classmethod %OnGetPortletSettings(Output pInfo As %List, ByRef pSettings) as %Status

pInfo は、以下のノードが含まれる多次元配列である必要があります。

ノード
pInfo(integer) 以下のような、$LISTBUILD によって返される一覧 :

$LB(name,default,type,caption,tooltip)

  • name は、設定の論理名です。

  • default は、設定の既定値です。

  • type は設定のタイプです。この後のサブセクションを参照してください。

  • caption は、設定のローカライズされたキャプションです。

  • tooltip は、オプションのツールのヒントです。

pSettings はこのメソッドに渡される多次元配列であり、URL を介して渡される設定の値を格納しています。詳細は、2 番目のサブセクションを参照してください。

設定のタイプ

%OnGetPortletSettings()pInfo 引数では、各設定のタイプを指定できます。これにより、ダッシュボード・デザイナーでその設定がどのように表示されるのかが制御されます。以下のいずれかを使用します。

  • "%Integer"

  • "%Boolean"

  • "ENUM^caption1:value1,caption2:value2" または類似の形式。この文字列で、caption1caption2 はダッシュボード・デザイナーに表示するラベルであり、value1value2 は実際に使用される対応する値です。実際には、このタイプの設定は 2 ~ 3 個のオプションしか提供できず、ダッシュボード・デザイナーではスペース不足のためにそれ以上のオプションを表示できなくなります。次の項目を参照してください。

  • "DRILL^caption1:value1,caption2:value2" または類似の形式。この文字列で、caption1caption2 はダッシュボード・デザイナーに表示するラベルであり、value1value2 は実際に使用される対応する値です。

次の図は、これらの各設定タイプの例を示しています。

generated description: portlet settings

以下の %OnGetPortletSettings() の実装は、これらの設定がどのように定義されたのかを示しています。

ClassMethod %OnGetPortletSettings(Output pInfo As %List, ByRef pSettings) As %Status
{
 Kill pInfo
 set pInfo($I(pInfo)) = $LB("INTEGERSETTING","150","%Integer","Integer Setting","Sample integer setting")

 set pInfo($I(pInfo)) = $LB("BOOLEANSETTING","1","%Boolean","Boolean Setting","Sample boolean setting")

 set pInfo($I(pInfo)) = $LB("ENUMSETTING","150","ENUM^option1:150,option2:200,option3:200",
 "ENUM Setting","Sample ENUM setting")

 set pInfo($I(pInfo)) = $LB("DRILLSETTING","150",
 "DRILL^option1:150,option2:200,option3:200,option4:200,option5:200,option6:200,option7:200",
 "DRILL Setting","Sample DRILL setting")

 Quit pInfo
}

URL を介して渡される設定の受け取り

ダッシュボードの URL を介して、そのダッシュボード上の一部またはすべてのウィジェットに値を渡すことができます (任意のポートレット設定の値を含む)。これらの値を受け取るには、%OnGetPortletSettings() を実装する際に pSettings 引数を使用します。この引数は、URL を介して渡された設定の値が格納されている多次元配列です。この配列の構造は以下のとおりです。

ノード
pSettings("setting") ここで、setting は設定の名前です。 その設定の値

1 つの方法として、$GET(pSettings("setting") を各設定の既定値として使用できます。次に例を示します。

ClassMethod %OnGetPortletSettings(Output pInfo As %List, ByRef pSettings) As %Status
{
  Kill pInfo
  Set pInfo($I(pInfo)) = $LB("LOGO",$G(pSettings("LOGO")),"","Clock logo","Logo displayed on top of clock")

  Set pInfo($I(pInfo)) = $LB("STEP",$G(pSettings("STEP"),"10"),"%Integer",
 "Second hand redraw interval (msec)","milliseconds steps of second hand")

  Set pInfo($I(pInfo)) = $LB("OFFSET",$G(pSettings("OFFSET"),"0"),"%Integer",
  "Offset from base time (min)","minutes difference from base time (Local or UTC)")

  Set pInfo($I(pInfo)) = $LB("UTC",$G(pSettings("UTC"),"0"),"%Boolean","UTC","Time Base: local (default) or UTC")

  Set pInfo($I(pInfo)) = $LB("CIRCLE",$G(pSettings("CIRCLE"),"1"),"%Boolean",
  "Circle","Shape: square (default) or circle")

  Set pInfo($I(pInfo)) = $LB("SIZE",$G(pSettings("SIZE"),"150"),"%Integer","Size","Size of the clock")
     
  Quit pInfo
}

設定の使用

ポートレット内の設定を使用するには、%DrawHTML() メソッドがポートレットの settings プロパティから設定値を抽出してから、それらの値をユーザのニーズに応じた形で使用するように、このメソッドを定義します。ポートレットの settings プロパティは、以下の構造の多次元配列です。

ノード
settings("setting") ここで、setting は設定の名前です。 その設定の値

簡単な例として、%DrawHTML()SIZE と呼ばれる設定の抽出を格納できます。

 set size=$G(..settings("SIZE"))

その後このメソッドは、この値を使用してポートレットのサイズを設定できます。

以下に簡単な例を示します。

Class DeepSee.Model.Custom.MyPortlet Extends %DeepSee.Component.Portlet.abstractPortlet
{

/// Static HTML display method: draw the BODY of this component as HTML.
Method %DrawHTML()
{
  &html<<div class="portletDiv" style="overflow:hidden;">>
  &html<<div style="font-size:16px; border-bottom:1px solid gray;">My Widget</div>>
 
  Set tInfo(1) = $LB("Sales","UP","12")
  Set tInfo(2) = $LB("Costs","DOWN","-8")
  Set tInfo(3) = $LB("Profits","UP","18")

  &html<<table width="100%" cellspacing="0" border="0">>
  Set n = $O(tInfo(""))
  While (n'="") {
    Set tName = $LG(tInfo(n),1)
    Set tDir = $LG(tInfo(n),2)
    Set tPct = $LG(tInfo(n),3)
    Set clr = $S(tPct<0:"red",1:"black")
    Set bg = $S(n#2:"#FFEEEE",1:"white")
    Set tPct = tPct _ "%"
    &html<<tr style="font-size:24px; background:#(bg)#;color:#(clr)#;">
      <td style="padding:4px;">#(tName)#</td>
      <td style="padding:4px;">#(tDir)#</td>
      <td style="padding:4px;text-align:right;">#(tPct)#</td></tr>>
    Set n = $O(tInfo(n))
  }
  &html<</table>>
  &html<</div>>
}

}

ウィジェットとして使用される場合、このウィジェットには以下のコンテンツがあります。

generated description: portlet as widget

この例では静的なデータが表示されていますが、ポートレットではリアルタイム・データを表示することも可能です。

設定も定義する、より複雑な例については、SAMPLES データベース内の DeepSee.Model.PortletDemo.ClockPortlet を参照してください。

データ・ソースの使用

%DeepSee.Component.Portlet.abstractPortletOpens in a new tabZEN dataView API を実装しているため、データにアクセスするポートレットも定義できます。このオプションを活用するには、Zen に精通している必要があります。

データ・ソースが定義されていると、ポートレット・ウィジェットはデータ・ソースに適した dataController を作成し、それに接続します。そのようなポートレットを作成する最も簡単な方法は、以下のとおりです。

  • ポートレットの %DrawHTML() メソッドでは、renderFlag プロパティを強制的に変更する以外の処理は行いません。

    Method %DrawHTML()
    {
        Set ..renderFlag = ..renderFlag + 1
    }
    

    これによって、Zen はクライアントにこのコンポーネントを描画します。

  • クライアント側の renderContents() メソッドを実装します。これによって、(a) dataController に接続され、(b) 動的な HTML が作成され、それを使用してポートレットの enclosingDiv が描画されます。

    ClientMethod renderContents() [Language = javascript]
    {
        var html = [];
    
        // do we have a data controller?
        var controller = this.getController();
        if (null == controller) {
            // try to connect to dataController
            this.connectToController();
            controller = this.getController();
        }
    
        if (controller) {
            html[html.length] = controller;
    
        }
        else {
            html[html.length] = 'No data source';
        }
    
        this.getEnclosingDiv().innerHTML = html.join('');
    }
    
FeedbackOpens in a new tab