サンプル 3: ダイアログとイベント

選択パネルや凡例といった標準ウィジェットの多くは、個別のダイアログです。それらはテンプレートに応じて、ある程度異なる動作が可能です。たとえば、アクア テンプレートではダイアログが浮動表示され、Slate テンプレートでは多くのダイアログがマップ表示の横にドッキングされます。

サンプル 3 では、現在の選択内容に関する詳細をいくつか表示するダイアログを作成します。このダイアログは選択内容が変化すると自動的に更新されます。C:\Program Files\Autodesk\Autodesk Infrastructure Web Server Extension 2016\www\fusion フォルダの次のファイルを使用します:

このサンプルには、いくつかの異なる概念が示されています。

ダイアログ

Jx ライブラリには、多くの異なるタイプのダイアログに対する完全なサポートが含まれます。使用されるスタイルは、index.html の window.onload() 関数でテンプレートによって定義されます。浮動ダイアログの場合は、次のように Jx.Dialog オブジェクトを作成します。 

dExample3 = new Jx.Dialog({
  id: 'dialogExample3',
  label: OpenLayers.i18n('Example 3'),
  modal: false,
  resize: true,
  horizontal: '50 left',
  vertical: '85 top',
  width: 400,
  height: 400,
  contentId: 'Example3'
  });

その他のタイプのダイアログのサンプルについては、その他の標準テンプレートの index.html を参照してください。

Jx.Dialog コンストラクタに渡されるプロパティによって、サイズや場所など、ダイアログの初期状態が定義されます。ContentID プロパティの値は、HTML 内の <div> 要素に対応している必要があります。たとえば、前述の定義されたダイアログでは、index.html に以下の要素が含まれている必要があります。 

<div id="Example3"></div>

この ContentID も、JavaScript ファイルで定義されたウィジェットのクラス名に対応している必要があります。Example3.js には次のクラス定義が含まれています。 

Fusion.Widget.Example3 = OpenLayers.Class(Fusion.Widget, 
  {
  // ...
  }
);
注:

Jx.Dialog コンストラクタ(上記のサンプル内の dialogExample3)の id プロパティは、ダイアログ全体(外枠やタイトル バーなどのパーツ)が含まれている <div> 要素を参照します。Jx ライブラリは、ダイアログを初期化する際に、この外部要素を作成します。ウィジェット コードはほとんどの場合、ContentID プロパティで識別されるダイアログのコンテンツ領域でのみ動作します。

Infrastructure Studio では、ダイアログであるウィジェットは、メニューから実行されるウィジェットとは別に扱われます。サンプル 3 のウィジェット情報ファイル「widgets¥widgetinfo¥example3.xml」には、次の情報が含まれています。 

<WidgetInfo>
  <Type>Example3</Type>
  <LocalizedType>Example3</LocalizedType>
  <Description>Displays selection information</Description>
  <Location></Location>
  <Label>Example3</Label>
  <Tooltip></Tooltip>
  <StatusText></StatusText>
  <ImageUrl></ImageUrl>
  <ImageClass></ImageClass>
  <StandardUi>false</StandardUi>
  <ContainableBy></ContainableBy>
</WidgetInfo>

このウィジェットは個別のダイアログであり、メニューには追加できないため、<ContainableBy> 要素は空です。Infrastructure Studio では、このウィジェットはツールバーや他のコンテナのコンポーネント リストには表示されません。

テンプレート定義ファイル「templates¥mapguide¥examples.xml」には、ダイアログやコンテナを保持できる <Panel> 要素が含まれています。 

<Panel>
<Name>Example3</Name>
<Label>Example3</Label>
<Description>The dialog displaying example 3</Description>
</Panel>

既定では、Infrastructure Studio は名前が一致するウィジェットを該当するパネルに配置します。パネル名は、index.html ファイル内の <div> ID と一致します。テンプレートがダイアログ形式のウィジェットを使用している場合、そのテンプレートは一致する <div> 要素を備えている必要があります。<Panel> 要素は、Infrastructure Studio の UI にタブを作成します。

イベント

多くのダイアログやその他のウィジェットは、ユーザによるフィーチャの選択など、マップ内のイベントに反応します。

イベントを処理するウィジェットでは、次の 2 つのステップを行う必要があります。

サンプル 3 では、選択内容が変わったときに発行される Fusion.Event.MAP_SELECTION_ON イベントと Fusion.Event.MAP_SELECTION_OFF イベントを使用します。

Example3.js 内にある、Example3 ウィジェットの初期化コードは、これら両方のイベント用のイベント ハンドラを次のように登録します。 

this.getMap().registerForEvent(
  Fusion.Event.MAP_SELECTION_ON, 
  OpenLayers.Function.bind(this.updateSelection, this));
this.getMap().registerForEvent(
  Fusion.Event.MAP_SELECTION_OFF, 
  OpenLayers.Function.bind(this.clearSelection, this));

Fusion.Event.MAP_SELECTION_OFF 用のイベント ハンドラはシンプルです。 

clearSelection: function() {
  this.showInformation('No features are selected.');
},

Fusion.Event.MAP_SELECTION_ON 用のイベント ハンドラは、選択内容を処理する必要があるため、やや複雑です。このハンドラはコールバック ルーチンとともに getSelection() を呼び出し、現在の選択内容を処理します。選択内容の処理に関する詳細は、「サンプル 2: 選択」を参照してください。 

updateSelection: function() {
  this.getMap().getSelection(this.listSelection.bind(this));
},
ヒント:
使用可能なイベントのクイック リストについては、Firebug エクステンションの[スクリプト]タブを開いてください。ウォッチ式として Fusion.Event を入力します。

サンプルの実行

index.html に記述されている Example3 ウィジェットの初期化コードによって、ダイアログが非表示になります。ダイアログを表示するためのメニュー オプションがあります([サンプル]メニュー [Example3])。これは、次の JavaScript ルーチンを呼び出す[スクリプトを起動]コマンドとして、Application Definition で定義されています。 

var showExample3 = function() {
    dExample3.open();
}

このルーチンは index.html で定義され、そこで[スクリプトを起動]コマンドによって使用できます。

ダイアログが開くと、選択内容の変更に反応します。選択内容が変わるたびに、ダイアログは更新され、現在選択されているフィーチャのリストが表示されます。

親トピック: フレキシブル Web レイアウトのサンプル