ファイル名/フォルダ名
テーマファイル|\xsp\nsf\themes|oneui.theme
CSS
やイメージ|\domino\java\xsp\theme|oneui

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>