サンプル 1: ウィジェットを作成する

ウィジェットは、フレキシブル Web レイアウトに追加できる機能的なコードです。ほとんどのウィジェットは自己完結型であるため、他の機能に影響せずにレイアウトに追加できます。各ウィジェットはクライアント側の対話に JavaScript を使用し、そのウィジェットのいくつかは、Infrastructure Map Server Web API に関してサポートされている言語で記述された Web 層のページを必要とします。

サンプル 1 は、メニューからコマンドとして呼び出されるように設計されたウィジェットです。このウィジェットは「Hello World: シンプルな[スクリプトを起動]」のような JavaScript の警告を表示しますが、外部の JavaScript ファイルを使用します。このウィジェットは WebServerExtensionsInstallDir¥www¥fusion フォルダにある次のファイルを使用します。

JavaScript ファイル「Example1.js」には、ウィジェットのクラス定義が含まれています。すべてのウィジェットは、基本クラス「Fusion.Widget」を継承する必要があります。これはシンプルなウィジェットであるため、初期化メソッドとアクティブ化メソッドのみを備えています。さらに複雑なウィジェットは、追加のメソッドを必要とします。

Fusion.Widget.Example1 = OpenLayers.Class(Fusion.Widget, 
  {
    uiClass: Jx.Button,
  
    initializeWidget: function(widgetTag) 
    {
      this.enable();
    },
  
    /**
     * Function: execute
     *
     * Says hello
     * 
     */
    activate: function() 
    {
      console.log('Example1.execute');
      alert("Hello World!");
    }
  }
);
注:

クラス名は、JavaScript ファイルの名前と一致する必要があります。このサンプルでは、クラス名は「Fusion.Widget.Example1」であり、ファイル名は「Example1.js」です。

ウィジェット情報ファイル widgetinfo¥example1.xml は、Infrastructure Studio によってウィジェットを表すために使用されます。このウィジェットはメニューに組み込まれるように設計されているため、<ContainableBy> 要素は Any に設定されます。スタンドアロン ダイアログであるウィジェットのサンプルについては「サンプル 3: ダイアログとイベント」を参照してください。

<WidgetInfo>
  <Type>Example1</Type>
  <LocalizedType></LocalizedType>
  <Description>Simple Hello World example</Description>
  <Location></Location>
  <Label>Example1</Label>
  <Tooltip>Click to say hello</Tooltip>
  <StatusText></StatusText>
  <ImageUrl></ImageUrl>
  <ImageClass></ImageClass>
  <StandardUi>true</StandardUi>
  <ContainableBy>Any</ContainableBy>
</WidgetInfo>
注:

ウィジェット タイプは、JavaScript ファイル内のクラス名と一致する必要があります。

ウィジェット情報ファイルは、マスター ウィジェット タイプを定義します。Infrastructure Studio はこのタイプを使用してウィジェットのインスタンスを作成し、それらをフレキシブル Web レイアウトに追加します。サンプルのフレキシブル Web レイアウトでは、既にこのウィジェットがメニューに追加されています。新しいインスタンスをフレキシブル Web レイアウトの別の場所に追加したい場合は、次の手順を実行します。

  1. 新しいコンポーネントを配置するコンテナのタブを選択します。
  2. [この画層で使用できるコンポーネント]セクションで、[新規作成]をクリックします。
  3. マスター ウィジェット タイプのリストが表示されます。マスター タイプを選択して[OK]をクリックします。
  4. これにより、マスター タイプの新しいインスタンスが作成されます。必要に応じて、ウィジェットのパラメータを変更します。
  5. このウィジェットをコンテナ内のアイテムのリストにドラッグして、レイアウトに追加します。

ウィジェットの 1 つのインスタンスは複数の場所で参照できます。ウィジェットのパラメータはすべてのインスタンスで同じです。たとえばサンプル 1 のウィジェットは、マップのコンテキスト メニューと[サンプル]メニューに追加できます。このウィジェットは、どこで呼び出されても同じ機能を実行します。

同じマスター タイプの異なるインスタンスは、異なる動作が可能です。たとえば標準テンプレートは、異なる処理を実行する InvokeScript ウィジェットの各種インスタンスを備えています。

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