ツールチップ・インタラクター

> > > > > >

ツールチップ・インタラクターにより、グラフィック・オブジェクト上にマウスを移動するとカスタマイズしたツールチップを表示することができます。Hitmap 技術を使用して、サーバーへの往復通信を行わずにクライアント側でツールチップを構成して表示することができます。

JViews では、このインタラクター用の JavaServer™ Faces (JSF) コンポーネントが用意されています。ツールチップ・インタラクターを使用するには、まず、ツールチップ・インタラクター・タグを JSF ページに挿入する必要があります。

1 つのオブジェクトを定義する場合は、以下のタグを使用します。

<jvf:tooltipInteractor id="tooltipInteractor"/>

インタラクターは、<jvf:view> ビューで以下のように使用できます。

<jvf:view id="viewID" interactorId="tooltipInteractor" />

インタラクターは、<jvdf:mapView> ビューで以下のように使用できます。

<jvmf:mapView id="mapId" interactorId="tooltipInteractor" />

マウスをグラフィック・オブジェクト上に移動すると、ツールチップが表示されます。

ツールチップ・インタラクターは、<jvf:view> および <jvmf:mapView> で使用できます。

世界の
天気図にクウェートのツールチップが表示されています。ツールチップには、青い表に白のテキストで、その国の状況、人口クラス、国名、経度と緯度が示されています。

ツールチップが表示された地図の例。

<jvf:view> および <jvmf:mapView> でのツールチップ・インタラクターの使用方法は、前のセクションに記載されているとおりです。しかし、パン・インタラクターとツールチップ・インタラクターを両方同時に使用したい場合があります。このような目的のために、インタラクター・グループが設けられています。

2 つのインタラクターを一緒に使用できるようにするには、以下のようにします。

<jvf:tooltipInteractor id="tooltipInteractor"/>
 <jvf:panInteractor id="panInteractor" />
 <jv:interactorGroup id="panAndTooltip" interactors="panInteractor tooltipInteractor"/>
 <jvmf:mapView id="mapID" interactorId="panAndTooltip" hitmapLayers="Symbols" ... />

前の例に示されているように、JViews Maps の場合は、hitmapLayers 属性を使用して、 hitmap データおよび hitmap 情報を生成するレイヤーを決定する必要があります。

詳細は、 <installdir> /jviews-maps89/samples/jsf-maps-tiled/index.html を参照してください。

ツールチップ・テンプレートの使用

ツールチップ・テンプレートを使用することにより、ツールチップのスタイリングを簡単に効率よく行えます。ツールチップ・テンプレートを使用するには、以下の例に示されているように、ツールチップ・インタラクターのテンプレート属性の値を指定する必要があります。

<jvf:tooltipInteractor id="tooltipInteractor" template="tooltip_callback"/>

ツールチップ・テンプレート機能を使用するためには、 Hitmap 情報のツールチップ・データが有効な JSON 形式でサーバー上に生成されている必要があります。以下に例を示します。

jviews_hitInfos={
tooltip:[,
{'properties':'values','name':'node1'},
{'properties':'values','implementation':'workflow','name':'Graphics Framework','type':'workflow'},
{'properties':'values','name':'node2'},
{'properties':'values','name':'node4'}
]}

Hitmap 情報のカスタマイズに関する詳細は、「Hitmap 情報のカスタマイズ」を参照してください。

ツールチップ・テンプレートには、HTML テンプレートと JavaScript コールバックの 2 つのタイプがあります。

HTML テンプレートの使用

HTML テンプレートを使用する場合、以下の例に示されているようなテンプレートを作成できます。

<jvf:tooltipInteractor id="tooltipInteractor" 
    template="<div style='background:#333399;font-size:70%;font-weight:bold;color:white;'>properties=<%properties%></div>" />

上記のコード例で、<%properties%> は、サーバーから生成された JSON オブジェクトのキーに相当します。これは、ツールチップが表示される際に、ユーザーの JSON オブジェクトのキーの値に置き換えられます。

JavaScript コールバックの使用

JavaScript コールバックを使用するには、 JavaScript コールバックを作成して、ツールチップが表示される際に呼び出されるツールチップを示す必要があります。

独自の JavaScript コールバックを作成する場合、コールバック関数で使用するパラメーターが 2 つあります。

名前	説明
view	表示オブジェクト。
index	現在のグラフィック・エレメントのインデックス。

以下のコードは、動的ツールチップを生成する JavaScript コールバックの例です。

<script type="text/javascript">
      function tooltip_callback(view, index) {
        var message = view.getHitInfos().tooltip[index]; //retrieve the tooltip message of current index
        var msg = '<table class=\'jviews_tooltip\'>';
        for(key in message){
            msg += '<tr class=\'jviews_tooltip_title\'><td>';
            msg += key;
            msg += '</td><td>' + message[key] + '</td></tr>';
        }
        msg += '</table>';
          return msg;
      }
</script>

JavaScript コールバックを作成した後、以下のコードを作成して、ツールチップ・インタラクターでコールバックを呼び出すことができます。

<jvf:tooltipInteractor id="tooltipInteractor" template="tooltip_callback" />

詳細は、 <installdir> /jviews-maps89/samples/jsf-maps-tiled/index.html を参照してください。

現在のセクション

Hitmap 技術の使用