こんばんは爆  笑

 

本日はあいにくの雨模様雨ですが・・・

明日は待ちに待ったThink Japan – Developer Dayですねキラキラ

天候は悪いかもしれませんが、筆者も朝からお邪魔させていただきますグッ

今から楽しみでワクワクしています照れ

 

さて、今回はとある開発をしているときに

BootstrapのDashboardみたいな画面が必要だなーと調査していました虫めがね

 

これです目

 

個人的にNotesっぽくて好きなんですラブ

 

また、Bootstrap を流用すれば、

カッコいいデザインでXPagesを作成できるので社内でよく活用させてもらっていますニコニコ

(見た目がいいとウケもいいw)

 

 

話を戻して・・・

今日紹介させていただくのは、サイドメニューの箇所になります。

赤枠のここです!

 

当たりまえの話ですが・・・

今選択されているメニュー項目には青で選択させていることを表示させ、

選択されていないものは何もついていないようにしなければ意味がありませんアセアセ

 

 

XPagesを勉強したてだったころ、こんな時どうしていたかなー?と思い出していると、

メニュー1が選択されているXPageとメニュー2が選択されているXPage・・・(以下続く)を作っていたのを思い出しましたタラー

 

今思えば、なかなか時間のかかることをしていたんだなーと。

(わかりやすいんですけどね)

 

なんかいい方法ないかなーと思い、

思いついた案が「ViewScopeをうまく使おう!!」という答えでした

(今更かよ!かもしれませんが)

 

簡単ですが1例を紹介しますキョロキョロ

(世の中探せばもっといい方法あるとは思いますが・・・)

 

 

1)まずはXPageを作成してBootstrapのDashboardサンプルで使用したい部分のHTMLタグをコピペします。

 

2)metaDataにhttp-Equivの設定を行います。

 

BootstrapのDashboardサンプルの5行目にあたる場所を設定しています。

 

3)BootstrapのDashboardサンプルにあるdashboard.cssをDBにインポートし、

XPageにセットします。

 

4)必要個所の文言等の修正をして、

一度保存しプレビューしてみます。

上記のように表示されましたでしょうか??

 

 

では、ここから少し改造したいと思います。

 

 

5)スクリプトライブラリにサーバーJavascriptを1つ作成します。

内容は以下のようにします。

 

function menuSelect(val , selectVal){
    var Select = '';
    if(val == selectVal){
        Select = 'active';
    };
    return Select;
}

 

第1引数は、呼び出された変数値

第2引数は、選択された変数値とし、

両引数の値が等しい場合は"active"という値を返すというものです。

 

6)先ほど、BootstrapのDashboardをコピペしたXPageを開き、

サイドメニューのタグを以下のように書き換えます。

 

6-1)<ul>タグを囲むようにパネルコントロールを配置します。

筆者は「ulPanel」とID名をつけました。

 

6-2)<a>タグをリンクコントロールに変更。

 

6-3)<li>タグにあるclassの値を""にします。

 

7)<li>タグのclassの値に以下を書きます。

#{javascript:menuSelect(viewScope.select,'*');}

*にはメニューの番号をいれます。

 

今回の例では、上から1、2、3・・・という感じです。

 

こんな感じになっていると思います。

 

8)リンクコントロール>イベント>onclickに以下を記述します。

viewScope.select = '*';

*にはメニュー番号を入力します。

 

上にあるメニュー項目から1、2、3・・・という感じで割り振っています。

部分更新で6-1で作成したパネルIDを指定します。

 

ex)一番上のメニュー項目

viewScope.select = '1';

ex)上から2番目のメニュー項目

viewScope.select = '2';

 

・・・メニュー項目分作業を繰り返します。

 

 

9)5で作成したサーバーjavascriptを追加します。

 

10)XPage>イベントのbeforePageLoadに以下を書き足します。

viewScope.select = '1';

 

以上で設定は完了です。

保存してプレビューを確認しましょうグー

 

 

 

ページが呼び出されたときには「Overview」が選択されています。

Reportsメニューをクリックすると・・・

 

Overviewからカーソルが外れて、Reportsにカーソルが当たりました拍手

 

今回はメニューのカーソル切り替えのみ対応しましたが、

ViewScopeの値で右のコンテンツも切り替わるようにすると、

いくつもXPageを作成せずにすみそうですOK

 

また、8のところもXPageには

繰り返しコントロールをうまく使って表現することもできそうですが、

それはまた別の機会に紹介できればと思いますグッ

 

 

では今日はこの辺で・・・

 

 

あでゅーバイバイ