今作っているWebアプリですが、ログインユーザー権限によりメニューのリンク表示を切り替える要件の実装について、一緒に作ってるメンバーに聞いてみたら、bootstrapのnavbarがかっこいいとの事で使ってみました。
各画面で指定するテンプレートxhtmlにbootstrapのnavbarをセットする形です。なお、bootstrapのバージョンは少し古いですが2.3.2を使ってます。
bootstrapをダウンロードしたら、Webソース内のresourcesにダウンロードした各ディレクトリを入れ、メニューを表示する各画面xhtmlでは、下記のようにテンプレートを指定します。
|
1 |
<ui:composition template="../templates/menu.xhtml"> |
テンプレートとして指定したmenu.xhtmlですが、その中の「SessionManager」はログイン情報を保持しているSessionScopedBeanで、ログイン時にログイン日時をlogintimeに、各権限の値をroleCdにセットし、xhtml側ではui:fragmentのrenderedで表示を切り替えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<h:outputStylesheet name="bootstrap/css/bootstrap.css" /> <h:outputStylesheet name="bootstrap/css/bootstrap-responsive.css" /> <h:outputScript name="bootstrap/js/bootstrap.js" /> <h:body> <nav class="navbar navbar-inverse navbar-default"> <div class="navbar-inner"> <div id="container"> <h:form> <ul class="nav navbar-nav"> <ui:fragment rendered="#{SessionManager.roleCd == 1}"> <li><a href="../sales/page1.xhtml">ファイル照会</a></li> <li><a href="../sales/page2.xhtml">状態確認</a></li> <li><a href="../common/pwchange.xhtml">パスワード更新</a></li> </ui:fragment> <ui:fragment rendered="#{SessionManager.roleCd == 2}"> <li><a href="../usermanage/page1.xhtml">ユーザー管理</a></li> <li><a href="../usermanage/page2.xhtml">ユーザー一覧</a></li> <li><a href="../common/pwchange.xhtml">パスワード更新</a></li> </ui:fragment> ・・・他の設定は割愛 <ui:insert name="navlinks" ></ui:insert> </ul> <h:commandButton class="btn btn-primary btn-lg pull-right" value="ログアウト" action="#{SessionManager.logout}" /> <h:outputText class="span3 pull-right" style="color: #ffffff;" value="#{SessionManager.logintime}"/> </h:form> <ui:insert name="navinfo"/> </div> </div> </nav> |
ログインした権限に従い下記のようにメニューを表示されます。
