2009/12/24

XPages Tutorial Part 14: ロケーションリストに OneUI の適用

Applying OneUI To The Locations List {Original Source}

前回はあるサイドバーにビューからデータを取得し、繰り返しコントロールを使って情報を表示させるところまで完成しました。ただ、見栄えが良くないので今回は OneUI を使ってスタイルを整えていきたいと思います。

私が OneUI CSS をレビューしていたとき、これまでしてきた方法といくつか違いがあることに気付きました。最初、<ul>と<li>タグを繰り返しコントロールの中にメニュー項目を追加したのですが、正しい方法は下のようになります。

ここでのポイントは<UL>タグが繰り返しコントロールの外側にすることと、<li>タグを繰り返しコントロールの内側に指定することです。
これはいくつかのコンポーネントを使って繰り返しコントロールを使用する際のよいお手本にもなります。
また、このリストフォーマットを作成する際に defaulttheme.css で定義されている OneUI の見た目とはちょっと異なる見せ方をさせたいので <h3> タグを使用することにしました。
こうすることでエンドユーザーがメニューからオプションを指定しやすいちょうどよい大きさになります。
では、上記のコードで <ul> タグを削除し、<li> タグを <h3> タグに変更してください。
変更が終了したら保存し、ブラウザのページを再読みこみしてください。

見栄えが良くなったと思います。

これでサイドバーメニューはしばらくそのままにし、次回はリンクとして動作させるための下準備としてメインのコンテンツ部分について見ていきたいと思います。

0 件のコメント:

コメントを投稿