ShowTable of Contents
XPages を習得していく過程で気付くことのひとつに、Web 2.0 ライクなページを作成し、アプリケーションを通して一貫性のあるルックアンドフィールを提供することの難しさがあります。
そのためには、スタイルとして CSS を最大限に活用し、ページやコンポーネントのスタイルを統一する必要があります。
特に Notes クライアントで動作していた既存のアプリケーションを XPages で Web 化する際には、クライアント上であたり前のようにあるナビゲーションやアクションバー、アクションボタンに相当するものを CSS を自作して実現させるのも時間がかかります。そこで、世の中に出ている CSS フレームワークをうまく活用することが開発の効率化を実現し、エンドユーザーにも満足してもらえることでしょう。
そこで私が提案したいのが、「OneUI」フレームワークの利用です。
この OneUI は XPages との相性が非常によい CSS フレームワークで、特に Web アプリ開発をよく知らない「クラシック」ノーツ開発者ほど利用する価値が高いと思います。
OneUI を利用するメリットは以下のとおりです。
1) 多くの Lotus 製品にも採用されているのでアプリケーション間の親和性が高くなる
2) OneUI の実装方法と利用のための少しの知識があれば実現できる。
3) クライアントベースのアプリケーションの UI と非常にルックアンドフィールが似ている
4) 開発効率の飛躍的な向上
が挙げられます。
現在のIBM Lotus Notes/Domino 8.5.1 にはベータ版として OneUI v2.01 が組み込まれています。
ベータとはいえ、今後の 8.5.2 以降のリリースで正式にサポートされる可能性が十分考えられます。
また現在 8.5.1 での OneUI v2.01 は
Domino データディレクトリー¥domino¥html¥oneuiv2
にあります。アプリケーションのテーマ設計に指定することで利用可能となります。
実装方法や使用方法については後述します。
XPages への実装と使用方法を説明する前に、どのようなユーザーインターフェースになるかを確認してみましょう。
例えば、コンポーネントのひとつ、「ボタン」を見てみます。
ここ
をクリックするとボタンコンポーネントの説明があり、実際のコンポーネントの表示されるデモにもなっています。
このリンクでは「default」というテーマが使用されていますが、ページ中央のリストボックスから「gold」、「green」、「metal」、「red」などのテーマに切り替えて表示させることができます。
サイト内のコンポーネントページには以下の 4 つのタブがあります。
- Sample
- Implementation
- Code
- History
「Sample」で実際のユーザーインターフェースを確認できます。
「Implementation」では、コンポーネントのクラス定義
「Code」では 「Sample」で表示しているコンポーネントの HTML コードが記述を確認することができます。
ここでは単なる HTML コードですが、XPage がブラウザにレンダリングされた結果の HTML コードが
class="XXXXXXXXXX"
という形で解釈させるようにするだけです。
では次にフレームワークについて見ていきましょう。
ここ をクリックするとページ全体を通してレイアウトを構成する各エリアの説明を見ることができます。
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 をアプリケーションに実装するひとつの方法は、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>