Notes開発者のためのXPagesデザインレシピ

簡単でCoolなXPagesアプリケーションを作るための情報を発信していきます

    • 連続講座

    連続講座⑤　ビューを作る①：レイアウトの作成

    T.Hayashi 投稿日:

    本日のゴール

    本日からいよいよBootstrapを使ったXPageの実装を行います。
    ビューパネルコントロールに割り当てるBootstrapのCSSクラスさえわかってしまえば実装は簡単です。
    【完成イメージ】

     

    ビュー用XPageを作成し、Bootstrapのテーブル用CSSを割り当てる

    1 作成したXPage(subjectsort_vw)からテスト用HTMLを削除する。
    2 【データソースを設定する】
    XPageのプロパティ＞データを表示し、追加ボタンをクリックする。
    3 Dominoビューを選択する。
    4 データソースプロパティのビューで
    「タイトルソート – xpSubjectSortVw」
    を選択する。

    5 【ビューパネルを配置する】
    XPageの設計タブをクリックする。
    6 右に表示されるデータタブからデータソースで「view1」を選択し、

    • タイトル
    • 最終更新日
    • 最終更新者

    をドラッグし、設計タブにドロップする。

    7 ビューパネルコントロールが配置される。
    8 【ビューパネルにBootstrapのクラスを割り当てる】
    ビューパネルコントロールを選択する。
    9 すべてのプロパティを表示し、dataTableStyleClassとviewStyleClassに下記のクラスを割り当てる。

    プロパティ クラス
    dataTableStyleClass table table-striped table-bordered table-hover
    viewStyleClass table

    【解説】
    dataTableStyleClassにはビューパネルのデザインを指定するために設定します。
    viewStyleClassにはtableクラスを指定することで、横幅を100%にします。
    10 【日付の表示形式を変更する】
    ビューパネルの「最終更新日」のデータ表示列を選択する。
    プロパティ＞データをクリックし、表示タイプ、表示形式を設定する。

    プロパティ 値
    表示タイプ 日付/時刻
    表示形式 日付と時刻

    11 列のプロパティを変更すると、列のタイトルがフィールド名から自動生成される名前にリセットされるため、列ヘッダーを選択し、ラベルを再設定する。

    プロパティ 値
    ラベル 最終更新日

    12 【フッターにページャーを表示する】
    ビューパネルを選択し、プロパティ＞表示をクリックし、下記の設定を行う。

    プロパティ 値
    フッターにページャーを表示 (チェックをつける)

    13 ブラウザでプレビューし、表示内容を確認する。
    下記の点を確認する。

    • ビューパネルにBootstrapのクラスが適用される
    14 【ページャーにクラスを設定する】
    ビューパネルのヘッダーにあるページャーを選択する。
    15 すべてのプロパティを表示し、styleClassに下記のクラスを割り当てる。

    プロパティ クラス
    styleClass xspPagerRight page-link

    【解説】
    styleClassには、HTMLで使用するCSSのクラス名を指定します。
    styleはCSSのクラス名を指定する場所ではなく、CSSを直接記述する場所です。
    16 ヘッダーと同様にフッターのページャーにも同じクラスを割り当てる。
    17 【ビューに表示する文書数を設定する】
    デフォルトでは30文書が表示されるがスクロールが発生するため、今回はビューに表示する文書数は15に設定する。
    ビューパネルを選択し、プロパティ＞表示をクリックし、ページごとの表示行数を設定する。

    プロパティ 値
    ページごとの表示行数 15
    18 ブラウザでプレビューし、表示内容を確認する。
    下記の点を確認する。

    • 最終更新日が「yyyy/mm/dd hh:mm:ss」の形式で表示される
    • ページャーがビューの上下に表示される
    • ページャーにCSSクラスが適用される

     

    ヘッダー用、左ナビゲーション用のレイアウトを設定する

     1 XPageのソースタブをクリックし、ビューパネルのHTMLタグを確認する。
    【解説】
    ビューパネルのHTMLタグは<xp:viewPanel>で始まり、</xp:viewPanel>で終わります。
     2 ビューパネルの開始タグ<xp:viewPanel>の手前にレイアウト用のHTMLタグを追加する。
    ソースは、【ビューパネルの前に入れるHTML】を参照。
     3 ビューパネルの終了タグ</xp:viewPanel>の直後にレイアウト用のHTMLタグを追加する。
    ソースは、【ビューパネルの後に入れるHTML】を参照。
     4 ブラウザでプレビューし、表示内容を確認する。
    下記の点を確認する。

    • ガイド文字Headerが表示される
    • ガイド文字Left Navigationが表示される
    • ガイド文字アクションボタンが表示される
    • ガイド文字検索バーが表示される

    【ビューパネルの前に入れるHTML】

    <!-- Header Navigation -->
<div>Header</div>
<div class="container-fluid">
    <div class="row">
        <!--left navigation-->
        <div>Left Navigation</div>
        <!-- Contents body -->
        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4">
            <h2>タイトルソート</h2>
            <!-- action bar -->
            <div class="row mb-2">
                <div class="col-lg-6">
                    アクションボタン
                </div>
                <div class="col-lg-6">
                    検索バー
                </div>
            </div>
            <!-- viewPanel -->

     

     

    【ビューパネルの後に入れるHTML】

                <!-- footer -->
            <footer class="pt-5 d-flex">
                <span>
                


                </span>
            </footer>
        </main>
    </div>
</div>    
    タグ :

    T.Hayashi
    すべての投稿を表示

    こちらの記事はいかがですか？