Skip to main content link. Accesskey S
  • Help
  • IBM Logo
  • IBM Notes and Domino Application Development wiki
  • All Wikis
  • All Forums
  • THIS WIKI IS READ-ONLY. Learn more...
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • IBM Redbooks
  • API Documentation
Search
  • Share Show Menu▼
  • Subscribe Show Menu▼

About the Original Author

Click to view profileMitsuru Katoh
Contribution Summary:
  • Articles authored: 17
  • Articles edited: 14
  • Comments Posted: 1

Recent articles by this author

ビデオで見る XPages Social Enabler

ノーツコンソーシアム 2012 年度ノーツソーシャルアプリ開発技術研究会 外部 SNS 連携調査結果報告の一部です。 OAuth Token Store とサンプルデータベースの設定および使用方法。 Dropbox と Twitter 連携についての詳細

ビデオで見る XPages Extension Library のインストール方法

ノーツコンソーシアム 2012 年度ノーツソーシャルアプリ開発技術研究会 外部 SNS 連携調査結果報告の一部です。

XPages Extension Library Mobile Controls - 「Tab Bar Button」

この記事では、XPages Extension Library Mobile Controls から Tab Bar Button コントロールを解説します。

XPages Extension Library Mobile Controls - 「Tab Bar」

この記事では、XPages Extension Library Mobile Controls から Tab Bar コントロールを解説します。

XPages Extension Library Mobile Controls - 「Mobile Switch」

この記事では、XPages Extension Library Mobile Controls から Mobile Switch コントロールを解説します。
Community articleOneUI の利用
Added by Mitsuru Katoh | Edited by Mitsuru Katoh on August 12, 2010 | Version 12
expanded Abstract
collapsed Abstract
No abstract provided.
Tags: oneui
ShowTable of Contents
HideTable of Contents
  • 1 なぜ「OneUI」なのか?
  • 2 OneUI の位置付け
  • 3 OneUI フレームワークとコンポーネントの概要
    • 3.1 コンポーネント
    • 3.2 フレームワーク
  • 4 アプリケーションへの OneUI の実装とコーディング方法
    • 4.1 テーマへの定義
    • 4.2 レイアウトの実装

なぜ「OneUI」なのか?


XPages を習得していく過程で気付くことのひとつに、Web 2.0 ライクなページを作成し、アプリケーションを通して一貫性のあるルックアンドフィールを提供することの難しさがあります。
そのためには、スタイルとして CSS を最大限に活用し、ページやコンポーネントのスタイルを統一する必要があります。
特に Notes クライアントで動作していた既存のアプリケーションを XPages で Web 化する際には、クライアント上であたり前のようにあるナビゲーションやアクションバー、アクションボタンに相当するものを 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 が組み込まれています。
ベータとはいえ、今後の 8.5.2 以降のリリースで正式にサポートされる可能性が十分考えられます。

また現在 8.5.1 での OneUI v2.01 は
Domino データディレクトリー¥domino¥html¥oneuiv2
にあります。アプリケーションのテーマ設計に指定することで利用可能となります。
実装方法や使用方法については後述します。


OneUI フレームワークとコンポーネントの概要


OneUI の使用方法は IBM Lotus User Interface Developer Documentationexternal link でまとめられています。
XPages への実装と使用方法を説明する前に、どのようなユーザーインターフェースになるかを確認してみましょう。

コンポーネント

例えば、コンポーネントのひとつ、「ボタン」を見てみます。
ここexternal link をクリックするとボタンコンポーネントの説明があり、実際のコンポーネントの表示されるデモにもなっています。
このリンクでは「default」というテーマが使用されていますが、ページ中央のリストボックスから「gold」、「green」、「metal」、「red」などのテーマに切り替えて表示させることができます。
サイト内のコンポーネントページには以下の 4 つのタブがあります。
  • Sample
  • Implementation
  • Code
  • History
 「Sample」で実際のユーザーインターフェースを確認できます。
「Implementation」では、コンポーネントのクラス定義
「Code」では 「Sample」で表示しているコンポーネントの HTML コードが記述を確認することができます。

ここでは単なる HTML コードですが、XPage がブラウザにレンダリングされた結果の HTML コードが
class="XXXXXXXXXX"
という形で解釈させるようにするだけです。

フレームワーク

では次にフレームワークについて見ていきましょう。
ここexternal link をクリックするとページ全体を通してレイアウトを構成する各エリアの説明を見ることができます。
Web ページにはログインページのようにシンプルなページもあれば 3 列で 1 ページを構成したりすることもあるでしょう。
ベーシックテンプレートとしていろいろなページ構成の表示例も こちらexternal link にありますので確認してください。
 

アプリケーションへの 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>
 
 


 
 
 
 
expanded Attachments (0)
collapsed Attachments (0)
expanded Versions (16)
collapsed Versions (16)
Version Comparison     
VersionDateChanged by              Summary of changes
16Mar 15, 2011, 4:04:40 PMAmanda J Bauman  IBM contributor
15Aug 31, 2010, 2:17:04 AMMitsuru Katoh  
14Aug 12, 2010, 2:34:53 AMMitsuru Katoh  
13Aug 12, 2010, 2:33:19 AMMitsuru Katoh  
This version (12)Aug 12, 2010, 1:15:07 AMMitsuru Katoh  
11Aug 12, 2010, 1:12:34 AMMitsuru Katoh  
10Aug 12, 2010, 1:10:16 AMMitsuru Katoh  
9Aug 12, 2010, 1:07:21 AMMitsuru Katoh  
8Aug 12, 2010, 1:06:02 AMMitsuru Katoh  
7Aug 12, 2010, 12:58:28 AMMitsuru Katoh  
6Aug 12, 2010, 12:56:52 AMMitsuru Katoh  
5Aug 10, 2010, 2:06:02 AMMitsuru Katoh  
4Aug 10, 2010, 2:05:07 AMMitsuru Katoh  
3Aug 10, 2010, 2:04:02 AMMitsuru Katoh  
2Aug 9, 2010, 9:54:37 PMMitsuru Katoh  
1Aug 9, 2010, 9:52:26 PMMitsuru Katoh  
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedHelpAbout
  • IBM Collaboration Solutions wikis
  • IBM developerWorks
  • IBM Software support
  • Twitter LinkIBMSocialBizUX on Twitter
  • FacebookIBMSocialBizUX on Facebook
  • ForumsLotus product forums
  • BlogsIBM Social Business UX blog
  • Community LinkThe Social Lounge
  • Wiki Help
  • Forgot user name/password
  • About the wiki
  • About IBM
  • Privacy
  • Accessibility
  • IBM Terms of use
  • Wiki terms of use