OneUI　こんなのが有ったんですね。

■2010/08/16追記　
katouさんから「OneUI の利用」紹介いただいたんですが、内容が非常に難しかったので
お勉強用に簡素化してみました。

◆なぜ「OneUI」なのか?

XPages を習得していくと、一貫性のある「見栄え」を提供することの難しさに気付きます。

「見栄え」を整えるには、スタイルとして CSS を活用し、スタイルを統一する必要がありますが、
CSS を自作して実現させるのも時間がかかります。

そこで提案したいのが、「OneUI」の利用です。

この OneUI は XPages との相性が非常によい CSS フレームワークで、
特に Web アプリ開発をよく知らない「クラシック」ノーツ開発者ほど利用する価値が高いと思います。

＜OneUI を利用するメリット＞

1) 多くの Lotus 製品にも採用されているのでアプリケーション間の親和性が高くなる
2) OneUI の実装方法と利用のための少しの知識があれば実現できる。
3) クライアントベースのアプリケーションの UI と非常に「見栄え」が似ている
4) 開発効率の飛躍的な向上

◆OneUI の位置付け

IBM Lotus Notes/Domino 8.5.1 にはベータ版として OneUI v2.01 が組み込まれています。
OneUI v2.01 は　Dominoのデータディレクトリー配下の \domino\html\oneuiv2 フォルダーにあります。

◆OneUI の概要

OneUI の使用方法は IBM Lotus User Interface Developer Documentation でまとめられています。

XPages への実装と使用方法を説明する前に、どのようなユーザーインターフェースになるかを確認してみましょう。


コンポーネント

例えば、「ボタン」を見てみます。

ここ をクリックするとボタンコンポーネントの説明があり、
実際のコンポーネントの表示されるデモにもなっています。

このリンクでは「default」というテーマが使用されていますが、
ページ中段右側のリストボックスから「gold」、「green」、「metal」、「red」などの
テーマに切り替えて表示させることができます。

サイト内のコンポーネントページには以下の 4 つのタブがあります。

・Sample
・Implementation
・Code
・History

「Sample」で実際のユーザーインターフェースを確認できます。
「Implementation」では、コンポーネントのクラス定義
「Code」では 「Sample」で表示しているコンポーネントの HTML コードが記述を確認することができます。


フレームワーク

では次にフレームワークについて見ていきましょう。
ここ をクリックするとページ全体を通してレイアウトを構成する
各エリアの説明を見ることができます。

Web ページにはログインページのようにシンプルなページもあれば、
3 列で 1 ページを構成したりすることもあるでしょう。

ベーシックテンプレートとしていろいろなページ構成の表示例も こちら にありますので確認してください。


◆OneUI の実装とコーディング方法

ここではステップバイステップで実装方法とコーディングについて見ていきます。

最初に現在の 8.5.1 で実装されている v1.6 の OneUI をアプリケーションに実装する方法。

次に、v2.01 を追加で実装する方法を見ていきます。

実装にはテーマ設計要素を使用して取り込むスタイルを定義することから始めます。

テーマへの定義

8.5.1 で用意されている v1.6 の OneUI のテーマファイル (OneUI.theme) と CSS やイメージが格納されている
場所を確認してみましょう。

　・テーマファイル　　　　　　(Domino実行ディレクトリー)\xsp\nsf\themes\oneui.theme
　・CSSやイメージのフォルダ 　(Dominoデータディレクトリー)\domino\java\xsp\theme\oneui

１）１番目の方法

oneui.theme の内容をそのままアプリケーションのテーマにコピーペーストして作成する方法です。

このテーマの中には、レイアウト、dojo、XPage　上の各コントロールのスタイルの使用とその場所を指し示す記述
がされています。

２）二番目の方法

サーバー上にある oneui.theme を拡張してこのアプリケーション内でテーマを記述する方法です。

その場合には句に extends を使って記述します
<theme extends="oneui">

</theme>
上のコードでは、特に oneui v1.6 から拡張するものがないので、拡張する中身は記述していませんが、

OneUI 2.01 のものを使用したいのであれば、v1.6 から拡張して記述するとよいでしょう。

新規のテーマ設計をここでは「default」という名前にして作成し、下記のコードを記述します。
<theme extends="oneui">
  <resource>
    <content-type>text/css</content-type>
    <href>/.ibmxspres/domino/oneuiv2/base/core.css</href>
  </resource>
  <resource>
    <content-type>text/css</content-type>
    <href>/.ibmxspres/domino/oneuiv2/defaultTheme/defaultTheme.css</href>
  </resource>
</theme>
最初の resource 句ではコアとなる css を、

2 つ目の resource 句では今回青色を基調とする「default」のテーマを使用することにします。
前出の OneUI v2 の格納されているフォルダを見ればわかりますが、

その他の色（例えば、メタル、緑、赤など）にしたい場合は、

それぞれのフォルダの<色名>Theme.css (例: redTheme.css) を参照するようにするだけです。
テーマ設計の保存が終了したら、アプリケーションでこのテーマを使用するために、

「アプリケーションのプロパティ」の「XPage」タブで

「アプリケーションのテーマ」オプションを今作成したテーマ「default」に設定し保存します。
レイアウトの実装
次に、ページにおけるレイアウトを作成してみましょう。

レイアウトは先のフレームワークのところでも触れましたが、今回は
　・バナー

　・タイトルバー

　・プレースバー
そして、ページを縦に 3 分割し
　・左のサイドバー

　・メインコンテンツ

　・右のサイドバー
最後に
　・フッター情報

　・リーガル情報
というページ構成を考えてみたいと思います。

これらのエリアはそれぞれカスタムコントロールとして作成します。
そして、「パネル」コンテナコントロールを配置します。

この配置した「パネル」に対して OneUI のスタイルクラスを指定します。
バナー領域のためのカスタムコントロールを新規で作成します。

名前をここでは「layout_Banner」としましょう。
設計タブのエリアに「パネル」コンテナコントロールをドラッグアンドドロップします。

そして「ここにバナー情報」とテキスト入力しておきます。

パネルのプロパティでスタイルタブを選択し、スタイルのクラスに「lotusBanner」と入力します。
ソースで確認すると以下のようなコードになるはずです。
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
  <xp:panel styleClass="lotusBanner">ここにバナー情報</xp:panel>
</xp:view>
同じ要領で残りのそれぞれのレイアウトに対しても、それぞれにカスタムコントロールを作成し、

それぞれパネルのスタイルに対応するスタイルクラスを以下のとおりに指定します。
　・「タイトルバー」には「lotusTitleBar」

　・「プレースバー」には「lotusPlaceBar」

　・「左のサイドバー」には「lotusColLeft」

　・「メインコンテンツ」には「lotusContent」

　・「右のサイドバー」には「lotusColRight」

　・「フッター」には「lotusFooter」

　・「リーガル情報」には「lotusLegal」

では、レイアウトの最後のステップです。
XPage を新規作成します。
この XPage において div を用いてページ全体に対して「lotusFrame」スタイルクラスを指定します。
また、中央の 3 列のコンテンツを表示させる部分には、同じく div を使用して「lotusMain」という

スタイルクラスを指定します。
あとは、カスタムコントロールをドラッグアンドドロップします。
完成した XPage のソースは以下のようになります。
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
  <div styleClass="lotusFrame">
    <xc:layout_Banner></xc:layout_Banner>
    <xc:layout_TitleBar></xc:layout_TitleBar>
    <xc:layout_PlaceBar></xc:layout_PlaceBar>
    <div styleClass="lotusMain">
      <xc:layout_LeftSideBar></xc:layout_LeftSideBar>
      <xc:layout_RightSideBar></xc:layout_RightSideBar>
      <xc:content_Main></xc:content_Main>
    </div>
    <xc:layout_Footer></xc:layout_Footer>
    <xc:layout_Legal></xc:layout_Legal>
  </div>
</xp:view>
<b>コンポーネントの実装</b>
レイアウトが完成したら、メニューやボタンなどのコンポーネントについて見ていきましょう。
要領は全く同じです。
対象となるコンポーネントのスタイルクラスに OneUI のクラスを指定していくだけです。
メニューを作成する前に一度 IBM Lotus User Interface Developer Documentation?の中での

メニューのサンプルと実装の HTML コードを確認しておきます。
<div role="menu">
? <div>
??? <div>
????? <ul>
??????? <li role="menuitem">
????????? <a href="javascript:;">Menu Item</a>
??????? </li>
??????? <li role="menuitem">
????????? <a href="javascript:;" tabindex="-1">
??????????? <strong>Menu Item</strong>
????????? </a>
??????? </li>
??????? <li role="menuitem">
????????? <a href="javascript:;">Menu Item</a>
??????? </li>
????? </ul>
??? </div>
? </div>
</div>
<!--end menu-->
上の div でわかるとおり、メニューの構成には
　・lotusMenu

　・lotusBottomCorner

　・lotusInner
を組み合わせて記述することでメニューが構成されることが分かります。

XPages でのコードは
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
? <xp:panel styleClass="lotusColLeft">
??? <xp:panel styleClass="lotusMenu">
????? <xp:panel styleClass="lotusBottomCorner">
??????? <xp:panel styleClass="lotusInner">
????????? <h3>
??????????? <xp:link escape="true" id="link1" text="メニュー1"></xp:link>
??????????? <xp:br></xp:br>
??????????? <xp:link escape="true" id="link2" text="メニュー2"></xp:link>
??????????? <xp:br></xp:br>
??????????? <xp:link escape="true" id="link3" text="メニュー3"></xp:link>
??????????? <xp:br></xp:br>
????????? </h3>
??????? </xp:panel>
????? </xp:panel>
??? </xp:panel>
? </xp:panel>
完成したら、このページをブラウザで表示させて、

OneUI のレイアウトが実現出来ているか確認してみましょう。
■まとめ
・センスの良いCSSをIBMさんが提供してくれるので、CSSの作成作業から解放されるはず
・各種サンプルが公開されているので、使用したいイメージを探し、ID名、クラス名が確認できる
・利用するには「テーマ」を新規に作成し、ソースをoneui.themからコピーするか、上記（defaultTheme）からコピーする
・アプリケーションプロパティで使用するテーマを指定する
・配置したパネルに、OneUIのクラス名（Lotusxxxxxxxx）をソース画面で地道に指定していく

　クラス名は事前に、サンプルのソースで確認しておく必要あり。

（サンプル画面をIEの「開発ツール」でみると、簡単に使用しているクラス名が確認できるので便利そう）
　スタイルシートの取り込みは基本的に行わない。（読み込むと定義が多すぎて混乱します）
　これで、見栄えの良いWebアプリが完成か？