slack

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

2009/12/13

XPages Tutorial Part 3: テーマを使った css の適用

Using themes to apply your CSS {Original Source}

前回は IBM から提供されている OneUI の css ファイルについて簡単に触れました。
今回はこの OneUI を使ってアプリケーションに共通の Look & Feel を適用していきます。同時に、テーマの使用についても見ていきます。

アプリケーションでテーマを使うことで、Web ブラウザユーザーがアプリケーションにアクセスした際、どの css を読み込ませるか定義できます。異なる色合いやフレームなど異なるテーマをいくつか用意しアプリケーションの Look & Feel をアプリケーションプロパティの XPage プロパティにそのテーマを指定するだけでアプリケーションの見た目を即座に変更することができます。
テーマの中で指定する css ファイルはデータベース内のスタイルシート設計に格納してあるものやドミノサーバー上に配置してある OneUI の css ファイルのどちらも指定可能です。

ドミノサーバー上の <データディレクトリー>\domino\java\xps\oneui ディレクトリーの中に OneUI の css ファイルが配置されています。その中には Part 2 で触れた core.css や defaulttheme.css、その他多くの css ファイルが配置されているのを一度確認しておいてください。その中には様々なブラウザに適したスタイルを提供する css ファイルも含まれています。下に記述したテーマの記述はこれを実現するための一部の記述です。
<!-- Internet Explorer 7 & 8 Specific --> 
<resource rendered="#{javascript:context.getUserAgent().isIE(7,8)}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/oneui/xspIE78.css</href>
</resource> 
        
<!-- FireFox Specific -->
<resource rendered="#{javascript:context.getUserAgent().isFirefox()}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/oneui/xspFF.css</href>
</resource> 
rendered="#{javascript:context.getUserAgent().isFirefox()}"はユーザーが FireFox を使用しているかをチェックし必要な css ファイルを Web ブラウザに送ります。この rendered で判定された true か false の結果によって様々な表示を提供することができます。例として、日付の比較によって季節ごとのテーマを表示させたり、URL の終わり (.net や.com)を判定したり、また多言語の対応の中には右から左に表示させたりすることができます 。ちなみに普段私たちはあまり目にしませんが右から左のサンプルはこちらです。{Link}

テーマを作成し終わったらしたらどのテーマを適用するかを決めるためアプリケーションプロパティの Xpage タブにある「アプリケーションのテーマ」に指定します。

ではここでチュートリアルに必要なデータベースを一番下のリンクからダウンロードしてください。
データベースには

  • OneUI テーマ
  • custom.css スタイルシート(記述は空)
  • home XPage

の3つの設計が含まれているだけです。

次回は XPage アプリケーションの基本的な構成を見ていくために、カスタムコントロールを作り、それを「home」XPage に追加していくことをやっていきます。

ファイルをダウンロード xPhoneP3.zip

3 件のコメント:

  1. 加藤さん
    ファイルのダウンロードを試みましたが、
    できませんでした。。ぜひこのチュートリアルを試してみたいので、よろしくお願いします。

    返信削除
    返信
    1. オリジナルのサイトの方へいくようになっていますが、Declan Lynch氏のサイトに大きな変更があったようで、もうダウンロードできなくなっているようです。mitsuru_katoh@teamstudio.comまでメールをいただければ、3,7,11,17,21,33で使用するzipファイルは私のほうで保管してありますのでお送りできます。
      加藤

      削除
  2. このチュートリアルで使用されているダウンロードファイルをすべて私のバックアップから貼りなおしました。
    データベース設計は現在では十分古い内容かもしれませんが、お役に立てればと思います。

    加藤

    返信削除