slack

テクてく Lotus 技術者 Slack に参加しよう!

2009/12/13

XPages Tutorial Part 2: OneUI の基本

The basic of OneUI {Original Source}

パート 2 では OneUI の基本に触れ、アプリケーションのスタンダードなレイアウトを提供する OneUI を理解していきます。

DIV と CSS を組み合わせて使うことで Web ベースのアプリケーションのレイアウトを簡単に作成することができます。
CSS は html ページ内の div と対応したスタイルを記述し、どのようにレイアウトするかを決定します。
OneUI の core.css をよく調べてみると次のような構成(structure)になっているセクションがあることがわかります。

基本となるレイアウトの部分部分を定義しているものですが、OneUI のカラースキーやグラフィックスは含まれていません。
それらは defaulttheme.css という別の css ファイルに格納されています。
html 上の以下のような記述とこの2 つの css ファイルをマッチングさせることで以下のような見え方をします:

/*** S T R U C T U R E ***/
#lotusFrame, .lotusFrame{margin:0 auto;padding:0;min-width:990px;}
#lotusTitleBar, #lotusPlaceBar, .lotusTitleBar, .lotusPlaceBar{margin:0 20px}
#lotusMain, #lotusFooter, .lotusMain, .lotusFooter{border-style:solid;clear:both;margin:0 20px 10px 20px;overflow:hidden}
#lotusMain, .lotusMain{padding:0 0 5px 0;min-height:400px;border-width:0 1px 1px 1px;-moz-border-radius:0 0 4px 4px;-webkit-border-bottom-left-radius:4px;-webkit-border-bottom-right-radius:4px; background-repeat:no-repeat}
#lotusColLeft, .lotusColLeft{width:180px;padding:20px 10px 10px 10px;}
#lotusColRight, .lotusColRight{width:180px;padding:15px 10px;font-size:.9em}
#lotusColRight h2, .lotusColRight h2{}
#lotusColLeft .lotusFirst, #lotusColRight .lotusFirst, .lotusColLeft .lotusFirst, .lotusColRight .lotusFirst{margin-top:0;}
#lotusContent, .lotusContent{padding:16px 20px 20px 20px;overflow:hidden;margin-right:auto;margin-left:auto;}
.lotusContentColOne{width:45%;}
.lotusContentColTwo{width:45%;}

次のような見栄えの良い外観を持つ web ページになります:


(フッターとバナーのコンテンツは省略)

core.css と defaulttheme.css、そして他の css ファイルはすべてドミノサーバーの <データディレクトリー>\domino\java\xps\theme\oneui のディレクトリーに格納されています。XPagesアプリケーションに直接この css ファイル群を参照するようにすることもできますが、パート 3 ではこれらのファイルを指定する「テーマ」を使っていくことにします。

補足: OneUI ってなに? {Link}

0 件のコメント:

コメントを投稿