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?

Bootstrap のヘルパー・プラグイン

Bootstrap ヘルパー・プラグインは、Twitter Bootstrap ライブラリのサポートを提供します。このプラグインは、任意のページ・マネージャと共に使用でき、モバイル・デバイスでの使用に最も適しています。Bootstrap の詳細は、http://getbootstrap.com/getting-started/Opens in a new tab を参照してください。

ページ・クラスへの Bootstrap の追加

必要な Bootstrap ファイルの追加

このセクションにリストされているファイルは、Bootstrap 3.3.5 リリースおよび jQuery 1.11.3 リリースに含まれています。これらがまだシステムにインストールされていない場合、Bootstrap は https://github.com/twbs/bootstrap/archive/v3.3.5.zipOpens in a new tab で、jQuery は https://code.jquery.com/jquery/Opens in a new tab で入手できます。

説明では、Bootstrap ファイルは、<install-dir>/csp/broker のサブディレクトリ (名前は bootstrap-3-3-5) にあることを前提としています (詳細は、“ページ・クラスへのプラグインの追加” を参照)。Bootstrap zip ファイルの上位ディレクトリ名は bootstrap-3.3.5 です。この名前は、/csp/broker では bootstrap-3-3-5 に変更する必要があります。以下のファイルが使用可能である必要があります。

  • dist/js/bootstrap.min.js

  • dist/css/bootstrap.min.css

Bootstrap は jQuery ライブラリも必要とします。以下のファイルが /csp/broker に含まれている必要があります。

  • jquery-1.11.3.min.js

以下のファイル名文字列を、ページ・クラスの JSINCLUDES および CSSINCLUDES (または CSS3INCLUDES) パラメータに追加します。Caché では、/csp/broker がすべての相対パスのルート・ディレクトリであると想定しています。

  • CSSINCLUDES ファイル名は以下のとおりです。

    "bootstrap-3-3-5/dist/css/bootstrap.min.css"

  • JSINCLUDES ファイル名は以下のとおりです。

    "jquery-1.11.3.min.js, bootstrap-3-3-5/dist/js/bootstrap.min.js"

    ファイルは、パラメータにリストされる順序でロードされることに注意してください。この場合、Bootstrap ライブラリは jQuery ライブラリに依存するため、jQuery ライブラリを最初にリストする必要があります。

Bootstrap ヘルパー・プラグインの登録

以下の例は、Bootstrap ヘルパーを pageContents XData ブロックで登録する方法を示しています (詳細は、“ページ・クラスへのプラグインの追加” を参照)。この例では、既定のページ・マネージャを使用しますが、Bootstrap ヘルパーはどのページ・マネージャでも機能します。

  <mojo:mojoDefaultPageManager>
    <mojo:bootstrap-3.3.x-Helper/>
    <mojo:mojoDefaultHelper/>
  </mojo:mojoDefaultPageManager>

既定のヘルパー・プラグインは、ほとんどの Bootstrap ヘルパー・レイアウト・オブジェクトで必要ですが、常にリスト内の最後のヘルパーでなければなりません。他のヘルパーをリストに追加することもできます。

Bootstrap ヘルパーが、拡張 HTML5 要素も提供する他のヘルパー (HTML5 や ChocolateChip-UI など) と共に使用されると、プラグイン競合が生じる可能性があります。Bootstrap に有利になるようにすべてのプラグイン競合を解決するには、Bootstrap ヘルパーを最初にリストします (“プラグイン競合の検出と解決” を参照)。

その他のオプションおよび要件

ほとんどの Bootstrap ヘルパー・レイアウト・オブジェクトには、既定のヘルパー・プラグインによって提供される $loop レイアウト・オブジェクトが必要です。既定のヘルパーが含まれていない場合、これらのレイアウト・オブジェクトは、予測される出力の代わりに文字列 "($loop)" を表示します。

このプラグインの詳細は、"クラス・リファレンス" の %ZEN.Mojo.Plugin.bootstrap33xHelperOpens in a new tab を参照してください。

テンプレート・クラスでの Bootstrap の使用

Bootstrap レイアウト・オブジェクト

使用可能なレイアウト・オブジェクトの完全なリストについては、この章で後述する “Bootstrap ヘルパー・レイアウト・オブジェクト” を参照してください。

カスタム Bootstrap レイアウト・オブジェクト・メソッド

以下のメソッドは、すべての適切なレイアウト・オブジェクト内で使用できます。

  • $hide() — レイアウト・オブジェクトを非表示にします。

  • $refresh() — レイアウト・オブジェクトの HTML を再レンダリングします。

  • $show() — レイアウト・オブジェクトを表示します。

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

このヘルパー・プラグインには、%ZEN.Mojo.Plugin.baseHelperPluginOpens in a new tab から継承されたもの以外のユーティリティ・メソッドが含まれています。詳細は、"クラス・リファレンス" の %ZEN.Mojo.Plugin.bootstrap33xHelperOpens in a new tab を参照してください。

Bootstrap ライブラリへの直接アクセス

このプラグインは、Bootstrap ライブラリ関数への直接アクセスを提供しません。

イベント処理

このプラグインには、特殊なイベント処理要件はありません。

Bootstrap ヘルパー・レイアウト・オブジェクト

以下のリストは、Bootstrap ヘルパー・プラグインで提供されるレイアウト・オプションのクイック・リファレンスとして使用できます。詳細なリファレンス情報については、プラグイン・ドキュメント・アプリケーションを使用してください (“プラグイン・ドキュメントおよびウィジェット・リファレンス・アプリケーションの使用” を参照)。

$alert $dropdown $inputGroupAddon $ol $span
$badge $dropdownMenuItem $jumbotron $option $table
$breadcrumb $fieldset $label $pageHeader $tableBody
$break $form $li $pager $tableCell
$button $formGroup $link $pagination $tableColumn
$buttonGroup $glyphicon $listGroup $panel $tableFooter
$buttonToolbar $gridColumn $listGroupItem $panelBody $tableHeader
$caret $gridSystem $mediaObject $panelFooter $tableRow
$close $h1 $modal $panelHeading $text
$container $image $nav $progressBar $thumbnail
$containerFluid $input $navbar $raw $ul
$div $inputGroup $navbarForm $responsiveEmbed $well

Bootstrap ヘルパーは、HTML5 要素の拡張バージョンを提供するため、HTML5 要素を拡張する他のヘルパーと共に使用すると、プラグイン競合が生じる可能性があります (このドキュメント内の前述の “プラグイン競合の検出と解決” を参照)。

Bootstrap プラグインのサンプル・コードの使用

"ウィジェット・リファレンス" では、Bootstrap ヘルパーのインタラクティブ・ウィジェットのサンプルを提供します。このリファレンスには、実施例、詳細な説明、およびユーザ自身のアプリケーションに切り取って貼り付けることができるソース・コードが含まれています。

Bootstrap ヘルパーの完全なサンプル・アプリケーションも使用できます。Studio で、SAMPLES ネームスペース内の ZMdemo.bootstrap に進みます。必要に応じて、そのパッケージ内のクラスをコンパイルします。アプリケーションを実行するには、ZMdemo.bootstrap.HomePageOpens in a new tab を開き、[表示] → [ウェブページ] を選択します。デバッグ・モードで実行している場合、必ずデバッグ対象 URL を csp/samples/ZMdemo.bootstrap.HomePage.cls に設定してください。

Bootstrap ヘルパーに加えて、サンプル・アプリケーションは 既定のページ・マネージャ、既定のヘルパー、および HTML5 ヘルパーも使用します。

Next sectionChart.js のヘルパー・プラグイン
Previous sectionZen Mojo の既定のページ・マネージャおよびヘルパー・プラグイン
FeedbackOpens in a new tab