BootStrapと jQuery の利用 - 脱XPagesはじめました。

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

１）サンプル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の内容をする必要はありません。

２） 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="#">リンクのリスト１</a></li>
        <li role="presentation"><a href="#">リンクのリスト２</a></li>
        <li role="presentation"><a href="#">リンクのリスト３</a></li>
    </ul>
</div>



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

</xp:view>

XPageの設計要素の中身は、

必要なライブラリ（jquery-xx.js、bootstrap.min.js、bootstrap.css）を読み込む。
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については、実現していくことができます。

３） 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を指定したり、複雑な組み合わせでの要素を絞ることができますし、複数の要素に対してメソッドを当てるといったこともできます。

４） BootStrapと jQuery　の併用

それでは、２）の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>

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

イベントの中では

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

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

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

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

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

１） サンプルDBのダウンロード

２） BootStrap の実装

３） jQuery の実装

４） BootStrapと jQuery の併用

１）サンプルDBのダウンロード

２） BootStrap　の実装

３） jQuery　の実装

４） BootStrapと jQuery　の併用