Challenge Engineer Life !

エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。

PrimeFacesでサイドバー

業務系画面では一覧表示項目をできるだけ多くユーザに見せたいという要件が多く、なるべく縦幅を有効利用したいです。
現在作成しているプロトでは、パンくずリストのようなものは縦表示できないので仕方がないとして、メニューは縦にしてサイドバーとすることで縦幅をかせぐ仕様にしてくれと要望を受け、トライしてみました。

PrimeFacesのshowcaseを色々みた所、Layoutを使ってLayoutUnitのwestをサイドバーとするのが良いかなと思い、実装しました。が、一覧を多く出したいのでfullPage属性はfalseにした所、色々うまく動かない…。まずfullPageをfalseにすると、縦幅を指定しないと怒られます。かといってheightは決められない(一覧の幅に合わせてほしい)。仕方なくheightを指定しても、画面のサイズ変更したりすると(レイアウト内部で)スクロールバーが出てきてしまったり何なりと色々微妙でした。

CSSの知識が豊富で駆使すればいけるのかもしれませんが、もう一度シンプルに考え直そう!そういうコンポがもしかしたらあるんじゃないの?と再調査した所、PanelにtoggleOrientation属性があって、デフォルトはvertical。これをhorizontalにすると、サイドバーのような動きになるとのこと…最初から気づくべきだった orz

ということで、簡単なサンプル作ってみたところ、こんな感じが

こんなになります。

使ってみるか。

にほんブログ村 IT技術ブログへ
にほんブログ村 にほんブログ村 IT技術ブログ Javaへ
にほんブログ村