読者です 読者をやめる 読者になる 読者になる

脱XPagesはじめました。

I started De.XPages.

BootStrapと jQuery の利用

 今回は、BootStrapと jQuery の利用のご紹介をサンプルDBを基に行います。

1) サンプルDBのダウンロード

XpagesDay2016でも利用した本ブログで使用するサンプルDBをgithubへアップしました。

AjaxSample/founder_Ajax.nsf at master · RitsNishi/AjaxSample · GitHub

   
<ダウンロード方法>
上記リンク先にて「Download」ボタンを押すとダウンロードできます。 f:id:de-xpages:20161206195225p:plain

BootStrapと jQueryに必要なライブラリをDBに設置する場合は、下記を参考にしてみてください。

Twitter Bootstrap を XPages で使う (IBM Enterprise Social Solutions Development Engineer Blog in Japan)

今回のサンプルDBでは既に、BootStrapと jQueryに必要なライブラリは設置済みの為、 上のURLの内容をする必要はありません。

2) BootStrap の実装

<サンプルDB-利用設計要素>

設計要素 名前
Xpages Ph1_BootStrapSample.xsp

<参考サイト>
ドロップダウン ≪ コンポーネント ≪ Bootstrap3日本語リファレンス

<ソース>

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">

    <xp:this.resources>
        <xp:script src="jQuery/jquery-2.1.3.min.js" clientSide="true" />
        <xp:script src="Bootstrap/js/bootstrap.min.js" clientSide="true" />
        <xp:styleSheet href="Bootstrap/css/bootstrap.css" />
    </xp:this.resources>
    
    <!--ここにBootStrapのHTMLを貼りつけ( 参考:http://bootstrap3.cyberlab.info/components/)/////////////////// -->
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        ドロップダウン
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li role="presentation"><a href="#">リンクのリスト1</a></li>
        <li role="presentation"><a href="#">リンクのリスト2</a></li>
        <li role="presentation"><a href="#">リンクのリスト3</a></li>
    </ul>
</div>



    <!--  ///////////////////ここにBootStrapのHTMLを貼りつけ( 参考:http://bootstrap3.cyberlab.info/components/) -->

</xp:view>

XPageの設計要素の中身は、

  1. 必要なライブラリ(jquery-xx.js、bootstrap.min.js、bootstrap.css)を読み込む。
  2. BootStrapのルールに則した タグ × クラスを指定したHTMLを記述。

これだけです。

該当のXpageをブラウザで起動して、「F12」キーを押して見ましょう。 すると、Dominoが変換してくれたHTMLソースとCSSが表示されます。

ここで、<button class="btn btn-default dropdown-toggle"・・・と記述されている部分にカーソルを当ててみると、
BootStrapのスタイルが当たっていることが分かります。

f:id:de-xpages:20161206204527p:plain

BootStrapのサンプルサイトを参考にするだけで、ある程度の画面デザインは実現できます。

あとは、いろいろなサイトを参考にしながら、HTMLやCSSの基本知識を学ぶことでUIについては、実現していくことができます。

3) jQuery の実装

<サンプルDB-利用設計要素>

設計要素 名前
Xpages Ph2_JquerySample.xsp

<参考サイト>
css(name, value) - jQuery 日本語リファレンス

<ソース>

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">

    <xp:this.resources>
        <xp:script src="jQuery/jquery-2.1.3.min.js" clientSide="true" />
        <xp:script src="Bootstrap/js/bootstrap.min.js" clientSide="true" />
        <xp:styleSheet href="Bootstrap/css/bootstrap.css" />
    </xp:this.resources>

    <div class="panel panel-default" style="margin:10px">
        <div class="panel-body">
            <ul>
                <li id="taro">太郎</li>
                <li>次郎</li>
                <li>花子</li>
            </ul>

        </div>
        <div class="panel-footer">
            <xp:button value="ID指定でスタイル切り替え" id="button1">
                <xp:eventHandler event="onclick" submit="false">
                    <xp:this.script><![CDATA[$("#taro").css("color", "red");]]></xp:this.script>
                </xp:eventHandler>
            </xp:button>
        </div>
    </div>
    

    </xp:view>


このソースでは、ボタンを押した際に、
「"taro"というIdをもった要素に対して、色を赤色にする。」
ということをしています。

jQueryと呼ばれる部分は、

$("#taro").css("color", "red");

になります。
$("")の中にターゲットとなる要素の情報(セレクタ)を記述し、その要素に対して行いたいメソッドを指定することで、
DOM操作を実現することができます。

セレクタでは、idを指定したり、classを指定したり、複雑な組み合わせでの要素を絞ることができますし、 複数の要素に対してメソッドを当てるといったこともできます。

4) BootStrapと jQuery の併用

それでは、2)のBootStrapSampeを使って、jQueryのクリックイベントを実装してみます。

<サンプルDB-利用設計要素>

設計要素 名前
Xpages Ph1_BootStrapSample.xsp

<ソース>

Ph1_BootStrapSample.xspの最後の方(</xp:view>の前)に下記のようにクライアントサイド用のscriptを記述します。

 :
 :

<script>
$("li").click(function () {
   var btnName = $("a",this).text();
   alert("押したボタンは、「" + btnName + "」です。")
});
</script>


</xp:view>

ドロップダウンリストでは、「リンクのリスト1」~「リンクのリスト3」が<li>要素を使ってリスト化されています。
この<li>タブをクリックした時のイベントを$("li").click()で表現することができ、 このイベントは、全ての<li>タグに有効になります。

イベントの中では

  1. クリックした要素内の<a>タグに書かれたテキストノードを「btnName」という変数にセット。
  2. 取得した値をメッセージボックスで表示。

といったことをしています。

結果は、下記のような感じで、各ボタンのアクションを1つのソースで実現することができます。

f:id:de-xpages:20161206220438p:plain

次回は、「Ph3_Ajax_Sample.xsp」を使ったajax通信の話をしていきます。