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?

プラグインを使用した作業

Zen Mojo プラグインは、いくつかの一般的なサードパーティ製の JavaScript ライブラリおよびフレームワークへのアクセスを提供するレイアウト・オブジェクトを含むユーティリティ・クラスです。Zen Mojo は、現在、Twitter Bootstrap ライブラリ、Chart.js ライブラリ、ChocolateChip-UI フレームワーク、Dojo Toolkit、Google Maps API、Highcharts ライブラリ、jQuery Mobile フレームワーク、および HTML5 標準に対応したプラグインを提供しています。また、他のサードパーティ製のライブラリに対応するユーザ独自のプラグインを作成することで、Zen Mojo を拡張することもできます。

この章では、以下のトピックについて説明します。

概要

Zen Mojo アプリケーションは以下の主要なコンポーネントで構成されています。

  • 1 つまたは複数のテンプレート・クラス。ウェブ・ページ上に表示されるものを決定します。

  • プラグイン・クラスのセット。テンプレートによって使用されるレイアウト・オブジェクトを定義します。

  • ページ・クラス。テンプレート・クラスで使用可能なプラグイン・クラスとその他のリソースを指定します。

プラグイン・セットは、ページ・クラスの pageContents XData ブロックで定義された各 documentView に対して指定する必要があります (詳細については、この章で後述する “ページ・クラスへのプラグインの追加” を参照してください)。

各 documentView 要素は、1 つまたは複数のヘルパー・プラグインを含む、単一のページ・マネージャ・プラグインを指定する必要があります。各ヘルパー・プラグインがレイアウト・オブジェクト・セットを定義します。これらの要素は、以下の機能を実行します。

  • ページ・マネージャ・プラグインは、テンプレートとヘルパー・プラグイン・セットとの間のインタフェースを提供します。

    ページ・マネージャは、指定されたヘルパー・プラグインのリストに定義されているすべてのレイアウト・オブジェクトのリストを作成し、名前の競合を解決します (例えば、2 つのヘルパー・プラグインが 2 つの異なる button レイアウト・オブジェクトを定義することがあります)。また、ページ・マネージャは、特定の JavaScript ライブラリまたはフレームワークに関連付けられたすべてのレイアウト・オブジェクトが使用できる、ライブラリ固有のユーティリティ関数を提供している場合もあります。

  • ヘルパー・プラグインは、テンプレート・クラスによって使用されるレイアウト・オブジェクトとその他のライブラリ固有のリソースを定義します。

    ページ・クラスにヘルパー・プラグインを指定すると、そのヘルパーに定義されたレイアウト・オブジェクトがテンプレート・クラスで使用可能になります。ヘルパー・プラグインは、一般的なタスク向けのユーティリティ・メソッドなど、追加のリソースも提供しています。

  • レイアウト・オブジェクトは、ライブラリ関数を使用して HTML 文字列を生成します。

    テンプレート・クラスは、1 つまたは複数のレイアウト・オブジェクトを使用して、ウェブ・ページの外観を決定します。一般的なレイアウト・オブジェクトは、通常、JavaScript ライブラリ内の対応する要素を使用することで、グラフィカル要素をレンダリングします。例えば、button レイアウト・オブジェクトは、ライブラリ内の button 関数を呼び出すことで、それ自身をレンダリングします。

アプリケーションに対応するプラグインの選択

Zen Mojo は、いくつかの一般的な JavaScript ライブラリおよびフレームワークに対応したプラグインを提供しています。Zen Mojo アプリケーションを設計する場合は、必要となるヘルパーを選択してから、それらをすべてサポートしているページ・マネージャを選択します。

以下のヘルパー・プラグインは、任意のアプリケーションで使用できます。

  • Zen Mojo の既定のヘルパー — ほとんどのヘルパー・プラグインによって使用されるユーティリティ・レイアウト・オブジェクトを提供します。任意のページ・マネージャで使用することができます (既定のページ・マネージャのみではありません)。

  • HTML5 ヘルパー — ほとんどの標準 HTML5 要素に対応するレイアウト・オブジェクトを提供します。

  • Bootstrap ヘルパー — Twitter Bootstrap の拡張バージョンの HTML5 要素の多くに対応したレイアウト・オブジェクトを提供します。

  • Chart.js ヘルパー — 軽量な Chart.js ライブラリに対応したレイアウト・オブジェクトを提供します。

  • Highcharts ヘルパー — Chart.js と同様ですが、Highcharts はより多様なグラフを提供します。

  • Google Maps ヘルパー — Google Maps API へのオンライン接続をサポートするレイアウト・オブジェクトを提供します。

これらのヘルパー・プラグインは、任意のページ・マネージャで使用できます。

他のすべてのヘルパー・プラグインは、特定の JavaScript ライブラリまたはフレームワークをサポートする機能が必要で、そのサポートを提供するページ・マネージャによってのみ使用できます。以下のページ・マネージャおよび専用のヘルパーが使用可能です。

  • 既定のページ・マネージャは、前述のヘルパーのみをサポートします。

  • ChocolateChip-UI ページ・マネージャは、ChocolateChip-UI の拡張バージョンの HTML5 要素に対応したレイアウト・オブジェクトを含むヘルパーをサポートします。このページ・マネージャは、比較的単純なモバイル・アプリケーションに最適です。

  • jQuery Mobile ページ・マネージャは、多数の jQuery Mobile 拡張 HTML5 要素に対応したレイアウト・オブジェクトを含むヘルパーをサポートします。このページ・マネージャは、複雑なモバイル・アプリケーションに適している場合があります。

  • Dojo ページ・マネージャは、Dojo Toolkit 内の異なる 3 つの API に対応した 3 つのヘルパーをサポートします。このページ・マネージャは、複雑なデスクトップ アプリケーションに最適です。

ページ・クラスへのプラグインの追加

プラグインは、ページ・クラス内の以下の項目をいくつかまたはすべて指定することで、アプリケーションに追加されます。

  • 外部 JavaScript および CSS ファイル

    ほとんどのヘルパー・プラグインは、外部 JavaScript および CSS ファイルに依存しています。すべての必要なファイルは、<install-dir>/csp/broker 内またはその下に配置する必要があります (ここで、<install-dir> は Caché がインストールされているディレクトリです)。インストールされているファイルのリストは、JSINCLUDES および CSSINCLUDES (または、CSS3INCLUDES) パラメータで、コンマ区切りの文字列として指定されます。以下の例は、Bootstrap ヘルパー・プラグインに必要なファイルをリストする方法を示しています。

    Parameter JSINCLUDES As STRING = "jquery-1.11.3.min.js,bootstrap-3.3.5/js/bootstrap.min.js"
Parameter CSSINCLUDES As STRING = "bootstrap-3.3.5/css/bootstrap.min.css"

    Caché では、/csp/broker がこれらのパスおよびファイル名のそれぞれのルート・ディレクトリであることを想定しています。

    JSINCLUDES リストの順序によって、JavaScript ライブラリがロードされる順序 (左から右) が決まります。この例では、Bootstrap ライブラリは jQuery ライブラリに依存するため、jQuery ライブラリが最初にロードされる必要があります。

  • プラグイン・ページ・マネージャおよびヘルパー・クラス

    ページ・クラスの pageContents XData ブロックでは、各 documentView で使用するための 1 つまたは複数のプラグインを登録する必要があります ("Zen Mojo の使用法" の “Zen Mojo ページの基本的な定義” を参照)。そのためには、以下の操作を実行します。

    • 1 つのページ・マネージャ・プラグインのみを <mojo:documentView> の子要素として含めます。

    • 1 つまたは複数のヘルパー・プラグインをページ・マネージャ・プラグインの子要素として含めます。

    以下の例は、一般的な構造を示しています (わかりやすくするために、オプションのインデントを使用)。

      <mojo:documentView id="mainView" ongetlayout = "return zenPage.getContent('layout',key);">
    <mojo:mojoDefaultPageManager>
      <mojo:bootstrap-3.3.x-Helper/>
      <mojo:mojoDefaultHelper/>
    </mojo:mojoDefaultPageManager>
  </mojo:documentView>

    ヘルパー・プラグをリストする順序が重要です。2 つのプラグインがレイアウト・オブジェクトに対して同じ名前を使用している場合、アプリケーションは最初にリストされているプラグインのレイアウト・オブジェクトを使用します。同じ名前のレイアウト・オブジェクトの後のインスタンスは無視されます。詳細については、“プラグイン競合の検出および解決” を参照してください。

  • 必須のページ・メソッド

    選択したプラグインに応じて、ページ・クラスが特定の必須メソッドを実装しなければならない場合があります。詳細については、“ページ・クラスでの必須メソッドの実装” を参照してください。

このドキュメントでは、各プラグインまたはプラグイン・セットについて、関連する章の最初の部分ですべてのページ・クラス要件を説明しています。前述の例で使用された情報については、Bootstrapに関する章を参照してください。

プラグイン競合の検出および解決

プラグイン競合の場合は、ヘルパー・プラグインをリストする順序を考慮することが重要です。プラグイン競合は、単一の documentView が複数のヘルパー・プラグインを使用し、それらのプラグインが同じ名前のレイアウト・オブジェクトを保持している場合に発生します。プラグイン競合はエラー状態ではなく、むしろ、特別な処理が必要な状況です。既定の動作とそれをオーバーライドする方法があります。

プラグイン競合の場合、既定では、Zen Mojo は最初にリストされているヘルパー・プラグインで指定されたレイアウト・オブジェクト・レンダリング・ロジックを使用します。既定の動作を希望しない場合は、それを変更できます。

既定の処理をオーバーライドするには、以下を実行します。

  • documentView の onresolvepluginconflicts コールバック属性を指定します。以下のような値を使用します。

      onresolvepluginconflicts="zenPage.onResolvePluginConflicts(zenThis, conflicts);"

    このコールバックでは、Zen Mojo が提供する変数 conflicts を使用できます。この変数は、複数のプラグインによって定義されたレイアウト・オブジェクトの名前を含む配列です。

  • コールバック属性が参照するメソッドを実装します。このメソッドでは、documentView インスタンスの setPluginMapping() メソッドを使用します。以下に簡単な例を示します。

      ClientMethod onResolvePluginConflicts(docView, conflicts) [ Language = javascript ]
  {
    for (prop in conflicts) {
        if (conflicts[prop].indexOf('HTML5') > -1) {
            docView.setPluginMapping(prop, 'HTML5');
        }
        else if (conflicts[prop].indexOf('html5') > -1) {
            docView.setPluginMapping(prop, 'html5');
        }
    }
  }

    どのレイアウト・オブジェクト・タイプでも、実装によって、指定されたレイアウト・オブジェクト・タイプのレンダリングを実行するヘルパー・プラグインを指定できます。

ページ・クラスでの必須メソッドの実装

以下で説明するとおり、アプリケーションは、選択されたプラグインに応じて、adjustContentSize() メソッドまたは onPageShow() コールバックを実装しなければならない場合があります。

  • adjustContentSize() メソッドのオーバーライド — このメソッドは各 documentView のサイズと位置を指定します。これは、既定または Dojo ページ・マネージャを使用している場合に、オーバーライドが必要な既存のページ・メソッドです。

  • onPageShow() コールバックの実装 — このコールバック・メソッドは、ページが表示される前に、追加の処理を実行します。Google Maps ヘルパーを使用している場合には必須ですが、他のすべての場合にはオプションです。

adjustContentSize() ページ・メソッドのオーバーライド

basePage.adjustContentSize() ページ・メソッドのオーバーライドは、既定のページ・マネージャまたは Dojo ページ・マネージャを使用している場合に、ページ・クラスで実装する必要があります。

adjustContentSize() メソッドの目的は、pageContents ペインの現在の幅と高さに基づいて (これは画面サイズと現在の回転によって変化します)、各 documentView のサイズと位置を指定することです。このメソッドは、basePage.onlayoutHandler() イベントがトリガされると呼び出されます。以下のシグニチャを保持しています。

  ClientMethod adjustContentSize(load, width, height) [ Language = javascript ]

ここで、load はページがロードされているかどうかを示しています。ページがロードされている場合、この引数は 1 です。それ以外の場合は 0 です。width と height は、それぞれ、pageContents ペインの現在の幅と高さ (ピクセル単位) です。

このメソッドでは、通常、このページの documentView ごとに以下を実行する必要があります。

  • documentView への参照を取得し、その setSize() メソッドを呼び出します。以下の例では、documentView のインスタンスとともに ID mainView を取得し、adjustContentSize() が onlayoutHandler() から呼び出されたときに受信した width 引数と height 引数を使用しています。 

      var mainView = zen('mainView');
  mainView.setSize(width, height);

    ここで、width と height は必要な幅と高さ (ピクセル単位) です。

  • ページに複数の documentView がある場合は、各 documentView の左上隅の位置を指定します。documentView.getEnclosingDiv() インスタンス・メソッドを使用して、インスタンスを含む <div> を取得します。その後、<div> の style.top および style.left プロパティを指定します。'nnnpx' として値を指定します。ここで、nnn は整数です。以下に例を示します。

      var mainDiv = mainView.getEnclosingDiv();
  mainDiv.style.top =  '0px';
  mainDiv.style.left = '0px';
例：2 つの documentView インスタンスがあるページの adjustContentSize() の実装

以下の例では、2 つの documentView インスタンスがあります。左側は、pageContents 領域の幅の 1/4 で、右側が残りのスペースを使用します。

ClientMethod adjustContentSize(load, width, height) [ Language = javascript ]
{
    var leftView = zen('leftView');
    var mainView = zen('mainView');
    var leftWidth = Math.floor(width/4);

    // This method should have an if{} block for each component.

    if (leftView) {
        leftView.setSize(leftWidth-2,height);
        var leftDiv = leftView.getEnclosingDiv();
        leftDiv.style.top = '0px';
    }
    if (mainView) {
        mainView.setSize(width - leftWidth - 2, height);
        var mainDiv = mainView.getEnclosingDiv();
        mainDiv.style.top = '0px';
        mainDiv.style.left = leftWidth + 'px';
    }
}

onPageShow() コールバックの実装

以下の例に示すとおり、pageContents XData ブロックのページ・マネージャ要素でオプションの onPageShow コールバック要素を指定できます。

  <mojo:chui-3.5.2-PageManager onPageShow="zenPage.onPageShow(layoutkey,documentkey);">

この属性は、プラグインに対応するレイアウト・オブジェクトのレンダリング後に呼び出されるコールバック・メソッドを定義します。例えば、異なるプラグインによって提供されるレイアウト・オブジェクトの表示を調整するメソッドを実装できます。各ページ・マネージャ・プラグインには、コールバックが定義されている場合にそれを呼び出すための適切なコードが含まれています。

現在、コールバックは、Google Maps プラグインを使用している場合のみ必要です。Google Maps プラグインは、他のページの項目をレンダリングした後にマップのサイズを変更できなければならないからです。以下の例では、Google Maps サイズ変更イベントをトリガするコールバック・メソッドを実装しています。

例：Google Maps の onPageShow() の実装

ページ・マネージャ要素の onPageShow コールバック属性を指定します。この例では、jQuery Mobile ページ・マネージャを使用しています。

  <mojo:jQM-1.4.5-PageManager onPageShow="zenPage.onPageShow(layoutkey,documentkey);">

ページ・クラスで、以下と同様のメソッドを実装します。

  ClientMethod onPageShow(layoutkey, documentkey) [ Language = javascript ]
  {
    if (layoutkey == 'maps-demo') {
      zen('mainView').getPluginByLayoutObjectType('$map').resizeMap();
    }
}

この例では、アプリケーションが 'maps-demo' レイアウト・キーを定義し、documentView id 属性が 'mainView' であることを前提としています。resizeMap() メソッドの詳細については、“カスタム Google Maps ヘルパー・プラグイン・メソッド” を参照してください。

テンプレート・クラスでのプラグイン・リソースの使用

以下で説明するとおり、ヘルパー・プラグインとレイアウト・オブジェクトはどちらも、オブジェクト固有のユーティリティを提供するメソッドを含んでいることがあります。

ヘルパー・プラグイン・メソッド

いくつかのプラグイン・クラスは、サポートしている JavaScript ライブラリで定義されたユーティリティを直接呼び出す特別なメソッドを提供しています。それらを使用するには、プラグイン・オブジェクトのインスタンスを取得し (getPluginByLayoutObjectType() や getPluginByName() などの documentView メソッドを介して)、その後、プラグイン・メソッドを呼び出します。以下の例では、Google Maps プラグイン・オブジェクトを取得して、その resizeMap() メソッドを呼び出しています。その後、プラグイン・メソッドは現在のマップ・インスタンスを使用して、Google Maps API に直接アクセスし、resize イベントをトリガします。

  zen('mainView').getPluginByLayoutObjectType('$map').resizeMap();

プラグインごとに、使用可能なプラグイン メソッドに関する情報が、関連する章の “<プラグイン名> ヘルパー・プラグイン・メソッド” の見出しの下にリストされています。一部の章では、より詳細な “カスタム <プラグイン名> ヘルパー・プラグイン・メソッド” の節も含まれています (例えば、この例で使用されている resizemap() 関数は、Google Maps の章の “カスタム Google Maps ヘルパー・プラグイン・メソッド” で説明されています)。

レイアウト・オブジェクト・メソッド

個々のレイアウト・オブジェクトに、特別なメソッドが含まれる場合もあります。例えば、多数のレイアウト・オブジェクトが $refresh メソッドを保持しています。以下の呼び出しは、キー 'person1' によって識別されるレイアウト・オブジェクトの表示を更新します。

  zen('mainView').getItemByKey('person1').$refresh();

プラグインごとに、使用可能なレイアウト・オブジェクト・メソッドに関する詳細が、関連する章の “カスタム <プラグイン名> レイアウト・オブジェクト・メソッド” の見出しの下にリストされています。

Next sectionZen Mojo の既定のページ・マネージャおよびヘルパー・プラグイン
Previous sectionこのドキュメントについて
FeedbackOpens in a new tab