テンプレートを作成する

Infrastructure Studioでフレキシブル Web レイアウトを作成するときは、多数のテンプレートのいずれかをベースにすることができます(Aqua テンプレートなど)。これらのテンプレートは多くのアプリケーションで動作し、必要に応じてカスタマイズできます。ただし、新しいテンプレートを作成する必要がある場合に備えて、このセクションでその方法を説明します。

フレキシブル Web レイアウトのテンプレートには、テンプレートの外観や機能に影響を与えるさまざまな相互関連部分が含まれます。特定のテンプレートのファイルは、すべて web_server_extensions¥www¥fusion¥templates¥mapguide フォルダに格納されます。いくつかの重要な部分は、次の表で説明しています。

名前 説明
テンプレート情報 XML ファイル テンプレートについての情報や、テンプレートで使用できるパネルのリストが含まれています。これらは、Web レイアウト エディタのInfrastructure Studioセクションでの、Infrastructure Studio で表示されるタブに対応します。

テンプレート XML ファイルは、そのテンプレートと同じ名前を持ちます。たとえば、アクア テンプレートでは aqua.xml を使用します。

注:

テンプレート XML ファイルは、Infrastructure Studio によって内部的に使用されます。このファイルは、フレキシブル Web レイアウトをブラウザに表示する際には必要ありません。Infrastructure Studio は、テンプレート XML ファイルから必要なデータをアプリケーション定義に保存します。

ApplicationDefinition Infrastructure Studio によって生成され、サイト リポジトリに格納されます。アプリケーション定義によって、特定のテンプレートで使用できるコンポーネント(メニューやウィジェット)を定義します。

アプリケーション定義では、ApplicationDefinition.xsd スキーマを使用します。

注:

デフォルト テンプレートには、それぞれ ApplicationDefinition.xml という名前のファイルが含まれます。これはアプリケーション定義のための別の場所です。 詳細は、「アプリケーション定義」を参照してください。

index.html フレキシブル Web レイアウトをブラウザに表示するためのホーム ページ。index.html ファイルは、アプリケーション定義のコンポーネントの配置や処理を定義します。たとえば選択パネルは、index.html での初期化内容によって、ドッキングまたはフローティングの状態にさせることもできますし、最初から非表示または表示にさせることもできます。
CSS ファイル テンプレートのスタイル定義。
イメージ ファイル ボタン、アイコン、および関連アイテム。

フレキシブル Web レイアウト内のファイルを理解する最も簡単な方法は、既存のテンプレートで実験することです。以下の手順に従って新しいテンプレートを作成するか、既存のテンプレートをコピーしてください。

  1. web_server_extensions¥www¥fusion¥templates¥mapguide フォルダの直下にサブフォルダを 1 つ作成します(web_server_extensions は Infrastructure Map Server Web Server Extensions がインストールされるフォルダであり、通常は C:\Program Files\Autodesk\Autodesk Infrastructure Web Server Extension 2016 です)。この新しいフォルダに、新規テンプレートの名前を付けます(HelloMap など)。
  2. 既存テンプレートの CSS ファイルを新規テンプレートのフォルダにコピーするか、または新規に CSS ファイルを作成します。
  3. 既存テンプレートの images フォルダを新規テンプレートのフォルダにコピーするか、または独自のアイコンを作成します。
  4. 新規テンプレートのプレビュー グラフィックスを作成して、そのテンプレートのフォルダに保存します。このグラフィックスは、Infrastructure Studioでフレキシブル Web レイアウトを作成するときに、テンプレート一覧に表示されます。このグラフィックスの名前は自由に付けられます。大きさは 126 x 96 ピクセルにします。この名前は、後で TemplateInfo ファイルを作成するときに使用します。
  5. 新規テンプレートのフォルダに、index.html という HTML ファイルを作成します。このファイルで、テンプレートのレイアウトを定義します。
    • 新規テンプレートのページに合った有効かつ厳密な doctype (ドキュメントタイプ)を使用します。doctype を省略したり、無効な doctype を使用したり、暫定的な doctype を使用すると、ほとんどのブラウザは「互換モード」に戻ります。レイアウトは正しく機能しているように見えますが、いくつかの小さな問題に遭遇したり、アプリケーションの表示がブラウザによって異なる可能性があります。HTML または XHTML の有効な doctype を使用することにより、ブラウザは「標準準拠モード」を使用し、アプリケーションの動作はブラウザ間で一貫したものになります。
    • <Head> セクションで、1 つまたは複数の CSS ファイルをインポートします。

      次に例を示します。 

      <style type="text/css">
  @import url(template.css);
</style>

      既定の CSS スタイルはすべてのコンポーネントを初期状態で非表示に設定するため、これは重要です。

    • <Head> セクションで、fusion.js ライブラリを組み込みます。

      次に例を示します。 

      <script type="text/javascript"
  src="../../../lib/fusion.js">
</script>

      fusion.js を指すスクリプト タグの src が有効なパスであることを確認します。このパスには相対パス(上記の例)または絶対パス(http:// で始まるもの)を使用できます。絶対パスの場合、その URL はアプリケーションのロードに使用する URL と同じサーバを指している必要があります。

    • <Head> セクションで、window.onload 関数を定義します。その中で、JavaScript と Jx library を使用して、コンポーネントを含むレイアウトの要素を配置します。また、FUSION_ERROR および FUSION_INITIALIZED イベントの登録も行います。

      次に例を示します。 

      <script type="text/javascript">
  window.onload = function() {
    Fusion.initializeLocale();
 
    var main = new Jx.Layout('AppContainer', 
      {left: 0, right: 0, top: null, bottom: null});
    new Jx.Layout('Help', {height: 25, left: 0, 
      right: 0, top: 34, bottom: null});
    new Jx.Layout('Map', {width: null, height: null, 
      left: 25, right: 0, top: 59, bottom: 21});
    main.resize();
    $('AppContainer').style.visibility = 'visible';
 
    Fusion.registerForEvent(
      Fusion.Event.FUSION_ERROR, fusionError);
    Fusion.registerForEvent(
      Fusion.Event.FUSION_INITIALIZED, fusionInitialized);
    Fusion.initialize();
  }
</script>

      Fusion オブジェクトの詳細は、「Fusion オブジェクト API」を参照してください。

      イベントに関する詳細は、「イベント」を参照してください。

    • <Head> セクションで、fusionError 関数と fusionInitialized 関数を定義します。次に例を示します。 
      <script type="text/javascript">
  var fusionError = function(eventId, error) {
    console.log('Fusion Error: \n' + error.toString());
}
 
var fusionInitialized = function() {
}
</script>

      fusioninitialized 関数が使用されているテンプレートの例については、web_server_extensions¥www¥fusion¥templates¥mapguide¥aqua¥index.html を参照してください。

    • <Body> セクションに <div> 要素を挿入して、テンプレートに表示されるコンポーネントを指定します。コンポーネント ID と一致する ID を持つ HTML 要素はすべて、そのコンポーネントに置き換えられます。たとえば、<DIV id=”Help”> はヘルプ コンポーネントに置き換えられます。<DIV id=”Toolbar”> はツールバーに置き換えられ、そのツールバーに表示されるコンポーネントは Infrastructure Studio で設定されます。使用可能な ID を表示するには、Infrastructure Studioでフレキシブル Web レイアウトを編集しているときにInfrastructure Studioをクリックします。

      コンポーネントは、一致する ID を持つ DOM コンテナ オブジェクト に挿入されます。これは <DIV> だけではありません。したがって、Jx.Panel や Jx.Layout などの Jx メソッドを使用して、ページを作成することもできます。たとえば、この方法で凡例が挿入されたオブジェクトを作成します。 

      var p1 = new Jx.Panel({label: 'Legend'});

      ID に一致するコンポーネントがない場合、ユーザがフレキシブル Web レイアウトを設定すると、Infrastructure Studio は(コンポーネントが追加されていない)空のタブを表示します。その後、ユーザは Infrastructure Studio でコンポーネントを追加できます。この ID はタブのタイトルとして使用されるため、ユーザが何を設定中であるか分かりやすい ID を使用します。

    • そのため、この例では、完成した index.html ファイルは次のようになります。 
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Hello Map</title>
 
  <meta http-equiv="Content-type" 
    content="text/html; charset=UTF-8">
 
  <style type="text/css">
    @import url(template.css);
  </style>
 
  <script type="text/javascript" 
    src="../../../lib/fusion.js"></script>
 
  <script type="text/javascript">
    window.onload = function() {
      Fusion.initializeLocale();
 
      var main = new Jx.Layout('AppContainer', 
        {left: 0, right: 0, top: null, bottom: null});
      new Jx.Layout('Help', {height: 25, left: 0, 
        right: 0, top: 34, bottom: null});
      new Jx.Layout('Map', {width: null, height: null, 
        left: 25, right: 0, top: 59, bottom: 21});
      main.resize();
      $('AppContainer').style.visibility = 'visible';
 
      Fusion.registerForEvent(
        Fusion.Event.FUSION_ERROR, fusionError);
      Fusion.registerForEvent(
       Fusion.Event.FUSION_INITIALIZED, fusionInitialized);
      Fusion.initialize();
    }
 
    var fusionError = function(eventId, error) {
      console.log('Fusion Error: \n' + error.toString());
    }
 
    var fusionInitialized = function() {
    }
 
  </script>
</head>
 
<body>
  <div id="AppContainer" style="visibility: hidden;">
    <div id="Help"></div>
    <div id="Map"></div>
  </div>
</body>
</html>
  6. ApplicationDefinitionInfo XML スキーマに基づいて、<TemplateInfo> XML ファイルを作成します。(XML スキーマは、 Autodesk Infrastructure Map Server 2016 \Schemaは、インストールされます。 ( Autodesk Infrastructure Map Server 2016 は、Infrastructure Map server のインストール先フォルダです。通常は、C:\Program Files\Autodesk\Autodesk Infrastructure Map Server 2016 です)。
    • このファイルに、新規テンプレートの名前と .xml を付けます(HelloMap.xml など)。
    • このファイルを新規テンプレートの親フォルダに保存します。つまり、このファイルを web_server_extensions¥www¥fusion¥templates¥mapguide に保存します。
    • LocationUrl 要素で、新規テンプレートの index.html ファイルの場所を指定します。
    • PreviewImageUrl 要素で、前の手順で作成したプレビュー グラフィックスの名前を使用します。
    • テンプレート内の各コンポーネント(ツールバーなど)に対して、<Panel> 要素を作成します。各パネルは、このテンプレートがInfrastructure Studioで設定されるときにタブとして表示されます。

      <Panel> の順序は問題ではありません。レイアウトは index.html ファイルによって制御されます。

      HelloMap の例では、TemplateInfo ファイルは次のようになります。 

      <TemplateInfo>
  <Name>HelloMap</Name>
  <LocationUrl>
    fusion/templates/mapguide/HelloMap/index.html
  </LocationUrl>
  <Description>HelloMap template</Description>
  <PreviewImageUrl>
    fusion/templates/mapguide/HelloMap/preview.png
  </PreviewImageUrl>
  <Panel>
    <Name>Help</Name>
    <Label>Help</Label>
    <Description>The help button</Description>
  </Panel>
  <Panel>
    <Name>Map</Name>
    <Label>Map</Label>
    <Description>The main map display</Description>
  </Panel>
</TemplateInfo>

これで、このテンプレートを既定のテンプレートと同様にInfrastructure Studioで使用できるようになります。

このテンプレートに基づいてフレキシブル Web レイアウトを作成すると、次のようになります。

注:

テンプレートの index.html ファイルを編集する場合は、Infrastructure Studio でプレビュー イメージを右クリックし、[再表示]を選択して変更を確認します。<Panel> 要素の修正や追加など、その他のテンプレート ファイルのいずれかを変更する場合も、いずれかのパネル タブを右クリックし、[パネルを再表示]を選択してパネル定義を更新します。

このセクションの内容
親トピック: フレキシブル Web レイアウト