Oracle ADF UIX開発者ガイド | ![]() 目次 |
![]() 前へ |
![]() 次へ |
このトピックでは、ファセットおよびUIX Stylesによって提供されるOracle ADF UIXカスタマイズ・テクノロジについて説明します。
UIXベースのアプリケーションの外観は、ルック・アンド・フィールによって決定されます。 ルック・アンド・フィールは、ルック・アンド・フィール固有のスタイルシートとともに、各コンポーネントのレンダラを提供します。 これは、ルック・アンド・フィールが、各コンポーネントに対して生成されるコンテンツ、およびコンポーネントのスタイルを指定するために使用されるビジュアル・プロパティ(色、フォント、境界線など)の両方を制御することを意味します。 そのため、ルック・アンド・フィールを変更するのみで、UIXベースのアプリケーションの外観をカスタマイズできます。重要な点は、アプリケーション・コードを再記述する必要がないことです。
UIXでは、現在デスクトップ・ブラウザ用に2つのルック・アンド・フィールがサポートされています。 UIXのデフォルトのルック・アンド・フィールは、ブラウザ・ルック・アンド・フィール(BLAF)です。 ブラウザ・ルック・アンド・フィールは、オラクル社が提供するユーザー・インタフェース標準の実装です。 このルック・アンド・フィールは、OracleのすべてのWebアプリケーションで使用されており、またすべてのUIXクライアントでも使用できます。
現在、UIXに、2番目のルック・アンド・フィールであるMinimal Look and Feel(MLAF)のサポートが追加されています。 Minimal Look and Feelの用途は、ブラウザ・ルック・アンド・フィールとは多少異なります。 BLAFの目的はオラクル社のUI標準を実装することであるのに対して、MLAFの目的は必要最小限のコンテンツを生成する代替のルック・アンド・フィールを提供することです。 小さいコンテンツの生成にはいくつかのメリットがありますが、特に重要なのは、ネットワークのオーバーヘッドが軽減されることです。 MLAFでは、小さいHTMLコンテンツが生成されるのみでなく、BLAFと比較して使用されるイメージの数が大幅に減少します。 これによって、ページごとのHTTPリクエストの数が減少するため、ページのロード時間が短縮されます。
あまり明白ではありませんが同じく重要なメリットとして、コンテンツが小さく単純であるために、コンテンツのカスタマイズにより適していることがあります。 複雑なマークアップを生成するコンポーネントでは、(スタイルを変更するか、または生成されるマークアップを実際に変更することによる)カスタマイズは困難です。 コンテンツが単純になるというメリットの他に、Minimal Look and Feelには、他のカスタム・ルック・アンド・フィールの実装のベースとして使用される可能性もあります。 MLAFは、ユーザーによるUIX用の独自のカスタム・ルック・アンド・フィール実装の開発を可能にするための最初のステップであると言えます。 ただし、現時点では、UIXのユーザーは、前述の2つのルック・アンド・フィール実装から選択する必要があります。
優先するルック・アンド・フィールは、look-and-feel
構成プロパティを介して指定します。 構成プロパティの設定の詳細は、「ADF UIXの構成」のトピックを参照してください。
Minimal Look and Feelでは、生成されるコンテンツのサイズを小さくするために、以前のバージョンのブラウザ(CSS2など)では使用できない可能性がある機能を利用することに注意してください。 その結果、Minimal Look and Feelは、ブラウザ・ルック・アンド・フィールのように広範囲のブラウザでサポートされません。 特に、MLAFは、Netscape 4.xではサポートされていません。 UIXは、MLAFがサポートされないブラウザを自動的に検出し、このようなブラウザが検出されると警告なしにBLAFに戻します。
UIConstants.FACET_PRINTABLE
: ページ・レイアウトのすべてのクロムを削除し、すべてのリンクを無効にし、すべてのフォーム要素を読取り専用にします。
UIConstants.FACET_PORTLET
: 複数のポートレットで1つのページに同じCSSスタイルシートおよびJavaScriptライブラリをロードする際のパフォーマンスを向上させるため、そのスタイルシートおよび(可能な場合は)ライブラリのインポートを最適化します。
UIConstants.FACET_EMAIL
: JavaScriptを排除し、可能なかぎりスタイルのインライン処理を試みます。
setFacet()
メソッドでファセットをServletRenderingContext
(またはRootRenderingContext
)に設定することができます。 ファセットは、RenderingContextを使用して内容をレンダリングする前に、設定する必要があります。
宣言的にファセットを表示できる<showFacet>イベント・ハンドラもあります。 これは印刷可能なページを表示する場合に特に有効です。 次に例を示します。
<ctrl:page xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
expressionLanguage="el">
<ctrl:content xmlns:ui="http://xmlns.oracle.com/uix/ui">
<body>
<contents>
<form name="theForm">
<contents>
<pageLayout>
<start>
<sideBar>
<contents>
<link text="test"/>
</contents>
</sideBar>
</start>
<pageButtons>
<button destination="${ctrl:eventUrl(uix, 'printMe')}"
text="Printable Version"/>
</pageButtons>
<contents>
<messageTextInput prompt="Database" text="Oracle"/>
</contents>
</pageLayout>
</contents>
</form>
</contents>
</body>
</ctrl:content>
<ctrl:handlers>
<ctrl:event name="printMe">
<ctrl:showFacet name="printable"/>
</ctrl:event>
</ctrl:handlers>
</ctrl:page>
UIXのレンダリング・テクノロジは、Cascading Style Sheet(CSS)スタイルを使用して、ブラウザ・ルック・アンド・フィール(オラクル社が提供するHTMLアプリケーション用ルック・アンド・フィール)の表示形式を制御しています。 Cascading Style Sheetの目的の1つは、フォントおよび色などの表示形式スタイルを、そのスタイルの適用対象のHTMLコンテンツと分離することです。 それにより、HTMLコンテンツを変更せずに、あるいはUIXアプリケーションの場合はHTMLコンテンツを生成するコードを変更せずに、スタイルをカスタマイズできます。
CSSスタイルは簡単に定義できます。 各スタイル定義は、スタイルをHTML文書内の特定の要素または要素のセットと関連付けるセレクタ、およびスタイルによって定義されるプロパティの宣言で構成されます。 次のサンプルでは、クラスベースのセレクタを使用するCSSスタイルを示します。
.OraFieldText { font-size:10pt; color:#000000}
この例では、クラス属性値がOraFieldText
であるすべてのHTML要素に、このスタイルによって定義されるプロパティが適用されることが、セレクタ .OraFieldText
によって指定されます。 このため、.OraFieldText
スタイルが次のテキストに適用され、ブラウザでは10ポイントの黒色Arialフォントでレンダリングされます。
<span class="OraFieldText">Some stylized text</span>
CSSを使用すると、表示形式スタイルの定義およびカスタマイズを簡単に行えますが、CSSスタイルの管理は、場合によっては複雑な作業になります。 1つのCSSスタイル・セットでは、すべてのターゲット環境に対して十分でないことがよくあります。 つまり、特定のエンド・ユーザー環境を適切にサポートするため、スタイル定義の変更が必要になる場合があります。 特定のスタイルの定義は、エンド・ユーザーのロケール、ブラウザ、プラットフォームまたはその他の環境固有プロパティによって異なります。 たとえば、日本語のコンテンツを表示するときには、.OraFieldText
スタイルで異なるフォント・ファミリ(ArialではなくMS 明朝)およびフォント・サイズ(10ポイントではなく12ポイント)が必要な場合があります。
この問題を解決する1つの方法は、環境固有のスタイル定義を環境固有のスタイルシートに設定することです。 たとえば、汎用スタイル定義を、styles.cssという名前のスタイルシート・ファイルで指定します。 日本語用のスタイル定義はstyles-ja.cssで指定することができ、ブラウザ固有のスタイルシートはstyles-netscape.cssやstyles-ie.cssで指定できます。 ただし、この解決方法はすぐに管理が難しくなります。 すべての環境の全ユーザーを満足させるために必要なスタイルシートの数は急速に増加します。 たとえば、styles-ja.cssおよびstyles-netscape.cssの他に、styles-ja-netscape.cssやstyles-ja-ie.css、さらにはstyles-ja-ie-windows.css、styles-ja-ie-macintosh.css、styles-ja-netscape-windows.css、styles-ja-netscape-macintosh.css、styles-zh_TW-ie-4-windows.cssなどを定義する必要が生じます。
このような一連の環境固有スタイルシートのメンテナンスは、エラーの原因となります。 特に、新規スタイルシートが追加された際、それを使用する環境固有のスタイルシートのコードが更新されないことがよくあります。 また、この解決方法では、スタイル定義の重複が大量に必要になります。 つまり、1つのスタイル定義を変更した場合、変更内容をすべてのスタイルシートに伝播させる必要が生じるということです。
UIXのスタイル管理フレームワークであるUIX Stylesでは、すべてのエンド・ユーザー環境のスタイル定義を1つのXML Style Sheet文書に統合することによって、複雑なメンテナンスを回避します。
UIX StylesのXML Style Sheet Language(XSS)は、表示形式スタイルを指定するためのXML言語です。 XSS言語はCSSに基づいています。 CSSの場合と同様に、XSSでも、セレクタと一連のプロパティを使用してスタイルを定義します。 XSSとCSSの大きな違いは、XSSがXMLベースであることです。 たとえば、前の例で定義されているCSSの .OraFieldText
スタイルは、XSSでは次のXML要素を使用して定義されます。
<style selector=".OraFieldText">
<property name="font-family">Arial</property>
<property name="font-size">10pt</property>
<property name="color">#000000</property>
</style>
XSSでは、セレクタ、プロパティ名またはプロパティ値の制限はありません。 CSSの有効なセレクタ、プロパティ名またはプロパティ値はすべてXSS文書に指定できます。
XSSとCSSのもう1つの重要な違いは、XSSでは、特定のエンド・ユーザー環境についてスタイルを定義できることです。 これは、環境固有のスタイルを<styleSheet>
要素の内部に設定して実行します。 <styleSheet>
要素によって、スタイルの適用対象のロケール、ブラウザおよびプラットフォームを示す属性が指定されます。
次のXSS文書では、スタイルの3つのセットが定義されます。 最初の<styleSheet>
では、すべての環境に適用されるスタイルが定義されます。 2番目の<styleSheet>
では、日本語固有のスタイルが定義されます。 3番目の<styleSheet>
では、Microsoft Windowsプラットフォーム固有のスタイルが定義されます。
<?xml version="1.0"?>
<styleSheetDocument xmlns="http://xmlns.oracle.com/uix/style">
<!-- The base style sheet. The styles defined in this style sheet
apply to all environments -->
<styleSheet>
<style selector=".OraFieldText">
<property name="font-family">Arial</property>
<property name="font-size">10pt</property>
<property name="color">#000000</property>
</style>
</styleSheet>
<!-- A style sheet for Japanese-specific styles -->
<styleSheet locales="ja">
<!-- Use a larger font size for Japanese text -->
<style selector=".OraFieldText">
<property name="font-size">12pt</property>
</style>
</styleSheet>
<!-- A style sheet for MS Windows platforms -->
<styleSheet platforms="windows">
<!-- Use a Windows-specific Japanese font family -->
<style selector=".OraFieldText">
<property name="font-family">MS Mincho</property>
</style>
</styleSheet>
</styleSheetDocument>
UIX Stylesは、HTTPリクエストで提供される情報(エンド・ユーザーのエージェント、プラットフォームおよびロケールなど)に基づいて、適用するスタイルを実行時に決定します。 複数の<styleSheet>
要素で1つのスタイルが定義されている場合は、より限定されたスタイルシートに定義されたプロパティ値が優先されます。 たとえば、<styleSheet locales="ja">
要素に定義されたスタイルのプロパティは、ベースの<styleSheet>
要素の同じスタイルの同じプロパティよりも優先されます。 現在のエンド・ユーザー環境に適用できる複数のスタイルシートに同一のスタイルが定義されている場合は、一連の特殊性ルールを適用して、優先するスタイル定義を決定します。
UIX Stylesでは、特定のリクエストに適用するスタイルの決定後、環境固有のCSSスタイル定義を含むCSSスタイルシートを生成します。 生成される環境固有のCSSスタイルシートは、HTML文書から<head>
セクションの<link>
要素を介して参照できます。 (注意: UIXサーブレットによって、UIXベース・アプリケーションの正しいスタイルシート・リンクが自動的に生成されます。)
前の例で定義されたサンプルXSS文書を使用すると、UIX Stylesによって、3つの<styleSheet>
要素すべてのスタイルを組み合せた、Windowsプラットフォームの日本語ユーザー用CSSスタイルシートが生成されます。 ただし、Windowsプラットフォームの英語ユーザーに対しては、ベース・スタイルシートのスタイル(つまり属性なしの<styleSheet>
要素)とWindows固有の<styleSheet>
が適用されます。 また、MacintoshやLinuxなどのWindows以外のプラットフォームの英語ユーザーに対しては、ベース・スタイルシートのスタイルのみが適用されます。
UIX StylesおよびXML Style Sheet Languageを使用すると、環境固有のスタイルのカスタマイズを簡単に定義し、管理できます。 このようなカスタマイズはすべて、1つの文書に追加して指定できます。 様々な種類のカスタマイズ(ブラウザ固有、プラットフォーム固有、ロケール固有のカスタマイズ)が、ターゲットのエンド・ユーザー環境に応じて、UIX Stylesによって自動的に組み合されます。 適用可能なすべての<styleSheet>
要素のスタイルはUIX Stylesによってマージされているため、不要なスタイル定義が重複することはありません。
XML Style Sheet Languageには、スタイル組込み機能というもう1つの機能があり、環境固有のスタイルの定義およびメンテナンスに必要な作業が軽減されます。 多くのスタイル定義で、ベース・フォント・サイズまたは標準背景色などの共通プロパティを共有することがよくあります。 XSSでは、そのような共通プロパティを名前付きスタイルに定義できます。これは、XSS文書の他のスタイルから参照できます。 次のサンプルXSS文書では、他のスタイルと共有される共通フォント・プロパティを定義する名前付きスタイルを示します。
<?xml version="1.0"?>
<styleSheetDocument xmlns="http://xmlns.oracle.com/uix/style">
<!-- The base style sheet. The styles defined in this style sheet
apply to all environments -->
<styleSheet>
<style name="DefaultFont">
<property name="font-family">Arial</property>
<property name="font-size">10pt</property>
</style>
<style selector=".OraFieldText">
<includeStyle name="DefaultFont">
<property name="color">#000000</property>
</style>
<style selector=".OraLinkText">
<includeStyle name="DefaultFont">
<property name="color">#663300</property>
</style>
<style selector=".OraTipText">
<includeStyle name="DefaultFont">
<property name="color">#336699</property>
</style>
</styleSheet>
<!-- A style sheet for Japanese Windows-specific styles -->
<styleSheet locales="ja" platforms="windows">
<style name="DefaultFont">
<property name="font-size">12pt</property>
</style>
</styleSheet>
</styleSheetDocument>
この例では、DefaultFontという名前付きスタイルを使用して、それぞれ<includeStyle>
要素を使用してDefaultFontを参照する、他の3つのスタイルのフォント関連プロパティを定義しています。 デフォルトのフォント・プロパティは、各スタイル定義を個々にオーバーライドするのではなく、1つのスタイル定義によって、日本語Windowsユーザー用のものまでオーバーライドされています。 UIX Stylesのスタイル組込み機能により、重複を最小限に抑えて、スタイルを簡略にカスタマイズできます。
UIXによるブラウザ・ルック・アンド・フィールの実装は、エンド・ユーザー環境固有のスタイルを定義するUIX Stylesの機能を利用しています。 ブラウザ・ルック・アンド・フィールのスタイル定義は、UIXで配布されるblaf.xssスタイルシート文書によって定義されます。 UIXのクライアントでは、特定の顧客のスタイル要件に対応するため、blaf.xssで定義されているデフォルト・スタイルの変更が必要になる場合があります。 blaf.xssはUIXで使用されるデフォルト・スタイルを定義しているため、blaf.xssを直接変更しないでください。 そのかわりに顧客固有のスタイル定義は、顧客固有のXSS文書に指定します。 これによって、顧客は、blaf.xssの新バージョンの入手ごとにスタイルをアップグレードでき、顧客固有のスタイルを新バージョンのblaf.xssに何度もマージする必要はなくなります。
ブラウザ・ルック・アンド・フィール・スタイルのカスタマイズを定義する際、XML Style Sheet Languageの<import>
要素を使用して、blaf.xssで定義されるスタイルをカスタム・スタイルシートに組み込む必要があります。 次のサンプルでは、blaf.xssをインポートしてデフォルト・フォント・サイズを変更するカスタム・スタイルシートを示します。
<?xml version="1.0"?>
<styleSheetDocument xmlns="http://xmlns.oracle.com/uix/style">
<!-- Import blaf.xss, so that our style sheet includes all styles
defined by blaf.xss -->
<import href="blaf.xss"/>
<!-- A custom style sheet which overrides DefaultFont -->
<styleSheet>
<style name="DefaultFont">
<property name="font-family">Courier</property>
<property name="font-size">14pt</property>
</style>
</styleSheet>
</styleSheetDocument>
このカスタムXSS文書が使用される際、DefaultFont
名前付きスタイルを参照するblaf.xssのすべてのスタイルでは、新たにカスタマイズされたスタイル定義(14pt
、Courier
)が優先されます。
UIXでレンダリングするときに使用するスタイルシート文書の名前は、Configuration.STYLE_SHEET_NAME
プロパティで指定できます。 スタイルシート文書と、生成されるCSSファイルのキャッシュの場所は、Configuration.STYLES_DIRECTORY
パスおよびConfiguration.STYLES_CACHE_DIRECTORY
パスを使用して変更できます。
顧客が求める最も一般的なブラウザ・ルック・アンド・フィールのカスタマイズの1つは、デフォルト・フォントの変更です。 blaf.xssではスタイル組込みを幅広く使用できるため、フォントの変更は非常に簡単です。 blaf.xssではフォント・プロパティを指定するスタイルが約100件定義されていますが、これらのスタイルはすべて、デフォルトのフォント・ファミリ値を定義する1つの名前付きスタイルを参照しています。
<!-- The default font family -->
<style name="DefaultFontFamily">
<property name="font-family">Arial, Helvetica, Geneva, sans-serif</property>
</style>
このため、blaf.xssで定義されているすべてのスタイルのフォント・ファミリ・プロパティを変更するときでも、必要となるのは1つのスタイルのオーバーライドのみです。 次のカスタム・スタイルシートによって、デフォルト・フォント・ファミリがCSSのserifフォント・ファミリに変更されます。
<?xml version="1.0"?>
<styleSheetDocument xmlns="http://xmlns.oracle.com/uix/style">
<!-- The blaf.xss import -->
<import href="blaf.xss"/>
<!-- A custom style sheet which overrides DefaultFontFamily -->
<styleSheet>
<style name="DefaultFontFamily">
<property name="font-family">serif</property>
</style>
</styleSheet>
</styleSheetDocument>
このカスタム・スタイルシートが使用されると、ブラウザ・ルック・アンド・フィールでは、すべてのコンポーネントにserifフォント・ファミリが適用されます。
もちろん、特定のスタイルのフォント・ファミリ(またはその他のスタイル・プロパティ)をオーバーライドすることもできます。 たとえば、次のカスタム・スタイルシートでは、デフォルト・フォントがserifに変更される一方で、.OraFieldText
スタイルにはArialフォント・ファミリが使用されます。
<?xml version="1.0"?>
<styleSheetDocument xmlns="http://xmlns.oracle.com/uix/style">
<!-- The blaf.xss import -->
<import href="blaf.xss"/>
<!-- A custom style sheet which overrides DefaultFontFamily -->
<styleSheet>
<style name="DefaultFontFamily">
<property name="font-family">serif</property>
</style>
</styleSheet>
<!-- Let's keep using Arial for .OraFieldText -->
<styleSheet>
<style selector=".OraFieldText">
<property name="font-family">Arial</property>
</style>
</styleSheet>
</styleSheetDocument>
ブラウザ・ルック・アンド・フィールのもう1つの一般的なカスタマイズは、デフォルト・フォント・サイズの変更です。 blaf.xssに定義されているほとんどすべてのスタイルは、デフォルト・フォント・サイズを定義する共通の名前付きスタイルを参照します。
<!-- The default font -->
<style name="DefaultFont">
<includeStyle name="DefaultFontFamily"/>
<property name="font-size">10pt</property>
</style>
このため、デフォルト・フォント・サイズを変更するときに必要なのは、次のカスタム・スタイルシート文書のように1つのスタイルのオーバーライドのみです。
<?xml version="1.0"?>
<styleSheetDocument xmlns="http://xmlns.oracle.com/uix/style">
<import href="blaf.xss"/>
<styleSheet>
<!-- Change the default font to be 12 point -->
<style name="DefaultFont">
<property name="font-size">12pt</property>
</style>
</styleSheet>
</styleSheetDocument>
ブラウザ・ルック・アンド・フィールでは、他のいくつかのフォント・サイズも使用されます。 たとえば、インライン・メッセージには小さめのフォント、ヘッダーには大きめのフォントが使用されます。blaf.xssでは、ブラウザ・ルック・アンド・フィールによって使用される各フォント・サイズの名前付きスタイルが定義されます。
<!-- A very small font -->
<style name="VerySmallFont">
<includeStyle name="DefaultFont"/>
<property name="font-size">-2pt</property>
</style>
<!-- A small font -->
<style name="SmallFont">
<includeStyle name="DefaultFont"/>
<property name="font-size">-1pt</property>
</style>
<!-- A medium font - just slightly bigger than default -->
<style name="MediumFont">
<includeStyle name="DefaultFont"/>
<property name="font-size">+1pt</property>
</style>
<!-- A large font -->
<style name="LargeFont">
<includeStyle name="DefaultFont"/>
<property name="font-size">+4pt</property>
</style>
<!-- A very large font -->
<style name="VeryLargeFont">
<includeStyle name="DefaultFont"/>
<property name="font-size">+6pt</property>
</style>
このようなフォント・サイズ定義では、他のフォント・サイズ値に応じてフォント・サイズ・プロパティを指定できるXML Style Sheet Languageの機能を利用しています。 <includeStyle>
要素を使用してDefaultFontスタイルを組み込むことで、これらのスタイルにはデフォルト・フォント・サイズが含まれ、デフォルト・サイズに応じてポイント・サイズの増減が指定されます。 この方法を使用することにより、blaf.xssでは、DefaultFont
スタイルの1回のオーバーライドのみですべてのフォント・サイズを変更できます。 blaf.xssで使用される他のすべてのサイズは、このサイズに応じて計算されます。
blaf.xssを確認すると、DefaultFont
スタイルが実際にはもう一度定義されていることがわかります。
<!-- Use "relative" font sizes on Windows IE -->
<styleSheet platforms="windows" browsers="ie">
<!-- Override the default font sizes to use "scalable" size units -->
<!-- The default font -->
<style name="DefaultFont">
<property name="font-size">x-small</property>
</style>
</styleSheet>
これは環境固有のスタイルシートの例です。 このスタイルシートは、Windows IEブラウザ専用のデフォルト・フォント・サイズのデフォルト値をオーバーライドします。 blaf.xssでこのIE固有のスタイルシートが定義されているのは、IE固有の機能を利用するためです。 特に、IEにはテキスト・ズーム機能があり、ユーザーは「表示」->「文字のサイズ」メニューを使用してテキストを拡大または縮小できます。 この機能はポイント単位で指定されたサイズについては作動しません。 ただし、CSSの絶対サイズのキーワードを使用して指定されたサイズでは作動します。 このため、IE 5については、デフォルト・フォント・サイズで明示的にx-smallキーワードを使用します。 デフォルトでは、このサイズを使用してレンダリングされたテキストは、10ポイントのテキストと同じサイズです。 ただし、このサイズは調整可能です。エンド・ユーザーが作業環境に合せて自由にサイズを拡大または縮小できます。
このIE最適化の1つの意味は、IEでデフォルト・フォント・サイズを変更するために、同等の環境固有のオーバーライドを定義する必要があるということです。 これは、前の例で定義した汎用スタイルシート(属性なし)が、フォント・サイズのオーバーライドを含むWindows IEスタイルシートよりも優先されないためです。 このため、IEユーザーのデフォルト・フォント・サイズを変更するには、blaf.xssに定義されたWindows IEスタイルシートと同じ属性を使用して、もう1つのスタイルシートを定義する必要があります。たとえば、次のスタイルシートでは、Windows IEのデフォルト・フォント・サイズが12ポイントに変更されます。
<styleSheet platforms="windows" browsers="ie">
<!-- Change the default font size on IE to 12pt -->
<style name="DefaultFont">
<property name="font-size">12pt</property>
</style>
</styleSheet>
もちろん、ポイント単位を使用しているため、このスタイルシートではIEのテキスト・サイズ調整機能が無効になります。 このため、Windows IE固有のスタイルシートについては、CSSの絶対サイズのキーワードのいずれか(small
、medium
など)を選択することをお薦めします。
UIXベース・アプリケーションの顧客が、フォントの他に、ブラウザ・ルック・アンド・フィールの色をカスタマイズする場合もあります。 ブラウザ・ルック・アンド・フィールでは4つの色を使用しており、それぞれがカスタマイズ可能です。
ほとんどすべてのテキストに使用される色。 デフォルトのテキスト前景色は黒です。
ほとんどすべてのコンテンツに使用される背景色。 デフォルトのテキスト背景色は白です。
これには青色が使用され、ブラウザ・ルック・アンド・フィールのユーザー・インタフェース全体を通して表示されます。 コア背景色は、レベル1のタブ・バーの選択済リンクや、グローバル・ヘッダーおよびフッターの背景色として使用されます。 さらに、ブラウザ・ルック・アンド・フィールによって、コア背景色に基づいた明暗の色を表示するカラー・ランプが導出されます。 たとえば、レベル1のタブ・バーの選択済リンク用の明るい青色の前景色は、コア背景色から導出されます。 ヘッダー、選択済グローバル・ボタン、およびその他のブラウザ・ルック・アンド・フィール・コンポーネントの色も、コア背景色から導出されます。
これには褐色が使用され、ブラウザ・ルック・アンド・フィールのユーザー・インタフェース全体を通して表示されます。 たとえば、アクセント背景色は、レベル1のタブ・バーの選択されていないリンク、およびレベル3のサイド・ナビゲーション・コンポーネントの背景色として使用されます。 コア背景色の場合と同様に、ブラウザ・ルック・アンド・フィールによって、アクセント背景色に基づいた明暗の色を表示するカラー・ランプが導出されます。 たとえば、ハイパーテキスト・リンクに使用される濃い茶色は、アクセント色から導出されたものです。 コンテンツ・コンテナおよびアクション・ボタンの背景に使用される明るい黄色も、アクセント色から導出されたものです。
フォントの場合と同様に、blaf.xssはスタイル組込み機能を利用して、色関連の名前付きスタイルの共通セットを共有します。 実際にblaf.xssに定義されているすべてのスタイルは色の情報を含んでいますが、ブラウザ・ルック・アンド・フィールの色は、次の4つの名前付きスタイルをオーバーライドすることによってカスタマイズできます。
<style name="TextForeground">
<property name="color">#000000</property>
</style>
<style name="TextBackground">
<property name="background-color">#ffffff</property>
</style>
<style name="DarkBackground">
<property name="background-color">#336699</property>
</style>
<style name="DarkAccentBackground">
<property name="background-color">#cccc99</property>
</style>
DarkBackground
スタイルとDarkAccentBackground
スタイルでは、コア・カラー・ランプおよびアクセント背景ランプのプライマリ・カラーがそれぞれ定義されます。 明暗色に対応する他のスタイルは、これらの色に基づいて自動的に導出されます。
ブラウザ・ルック・アンド・フィールの色をカスタマイズする場合、顧客は、テキストの前景色と背景色のコントラスト、およびコア色とアクセント色のコントラストを保つようにする必要があります。 通常は、Web対応カラー・パレットの色を使用します。これらの色を使用することで、様々なブラウザやプラットフォームで一貫性の高い表示結果を得られます。 Web対応カラー・パレットは216色からなり、それぞれの色コンポーネント(赤、緑、青)は51の倍数(0、51、102、153、204または255)または16進値の#33の倍数(#00、#33、#66、#99、#cc、#ff)です。 カスタマイズされたコア背景色またはアクセント背景色を選択する際、顧客は、ブラウザ・ルック・アンド・フィールによって明暗の色が導出されることを考慮する必要があります。 このため、非常に暗い色や非常に明るい色の値を選択すると、これらの色に近い色がそれぞれ導出されて区別が困難になります。
ブラウザ・ルック・アンド・フィールの表示形式をカスタマイズすることで、特定環境でのユーザー・インタフェース要件を満たすことができますが、多くの場合、このような顧客固有のカスタマイズでは十分ではありません。 多くのアプリケーションでは、エンド・ユーザーが使用するフォントや色などを指定できるように、ユーザー・インタフェースのパーソナライズをサポートする必要があります。 このため、たとえば、特定のサイトの全ユーザーに対して1つのフォント・サイズを使用するのではなく、あるユーザーがサイトにアクセスしたときに使用されるフォント・サイズを、そのユーザー自身が指定できるようにする必要があります。 エンド・ユーザーごとに個別のXSS文書を使用するのは、大変煩雑な方法です。 そこで、ブラウザ・ルック・アンド・フィールで使用されるスタイルを、UserStyleSheet APIによって動的にカスタマイズできます。
UserStyleSheet
クラスによって一連のスタイルが定義され、レンダリング時にXSS文書で定義されたスタイルとマージされます。 UserStyleSheet
スタイルがXSSスタイルとマージされる際は、UserStyleSheet
で定義されるスタイルが優先されます。 結果として、ユーザー固有のスタイル設定を含むUserStyleSheet
がXSS文書に適用されると、生成されるCSSファイルにはユーザー固有のスタイル定義が組み込まれます。 このように、ブラウザ・ルック・アンド・フィールのパーソナライズとは、ユーザーの作業環境に基づいて適切なUserStyleSheet
インスタンスを作成し、UIXベースのページをレンダリングする際にこれらのUserStyleSheet
を適用することです。
UserStyleSheet
インスタンスを作成すると、セレクタベースのStyle
オブジェクトのDictionary
、名前付きStyle
オブジェクトのDictionary
、およびスタイルシートの一意IDが指定されます。 Style
インタフェースは、1つのスタイルを表し、これによって一連のスタイル・プロパティが定義されます。 UserStyleSheet APIは、1つのStyle
実装、CSSStyle
を提供しています。 IDは、特定のUserStyleSheet
によって定義されるスタイルを一意に識別する文字列です。 IDは、生成されるCSSファイル名に組み込まれます。 このため、IDを指定するときは、比較的短く、できればASCII文字のみを使用してください。 たとえば、IDとしては、エンド・ユーザーの名前またはIDを使用したり、システムによって定義される一意のUserStyleSheet
の件数を使用したり、UserStyleSheet
によって定義されるスタイルの簡単な説明(14ptまたは14pt-Arialなど)を使用したりします。 ただし、1つのIDは1組のスタイルのみに対応する必要があります。
次のサンプル・コードでは、デフォルトのフォント・ファミリ・スタイルの変更に使用するUserStyleSheet
の作成方法を示します。
// First, create a Style for the new font. We use the Ocelot CSSStyle class
CSSStyle style = new CSSStyle();
// Specify a new default font-family
style.setProperty("font-family", "serif");
// Store the Style in a Dictionary, hashed by name - "DefaultFontFamily".
// We use oracle.cabo.share.collection.ArrayMap for the Dictionary.
ArrayMap map = new ArrayMap(1);
map.put("DefaultFontFamily", style);
// Now, we can create the UserStyleSheet
UserStyleSheet styleSheet = new UserStyleSheet(
"serif", // The style sheet id - we just use the font family name
null, // The selector-based styles - we don't specify any
map // Our named styles
);
UserStyleSheet
を作成後、次の2つの方法のいずれかにより適用できます。 UserStyleSheet
を簡単に適用するには、UserStyleSheet
をUIX ComponentsのRenderingContext
のプロパティとして設定します。このとき、ネームスペースとしてStyleConstants.OCELOT_NAMESPACE
を指定し、StyleConstants.USER_STYLE_SHEET_PROPERTY
をプロパティ名として、指定したいUserStyleSheet
を設定してください。 この方法は実装が簡単ですが、1つ短所があります。 UserStyleSheet
は、DateFieldBean
のカレンダ・ダイアログなど、UIX Components独自のJSPによってレンダリングされるコンテンツには適用されません。
上に述べたカレンダ・ダイアログのような、UIX ComponentsのJSPでレンダリングされるコンテンツを含むすべてのコンテンツにUserStyleSheet
を適用するには、UserStyleSheet
を、登録済のConfiguration
インスタンスでConfiguration.USER_STYLE_SHEET
プロパティを使用して指定する必要があります。 ただし、Configuration
オブジェクトは通常、グローバル構成情報を表すために使用されるため、Customization
オブジェクトを使用して、レンダリングごとの構成プロパティを指定することをお薦めします。 Customization
オブジェクトは、その他のCustomization
オブジェクトをラップするCustomization
オブジェクトです。特定のプロパティを特定のリクエストに対してオーバーライドでき、基礎となるCustomization
オブジェクトを変更する必要はありません。 すべてのConfiguration
オブジェクトと同様に、Customization
オブジェクトもConfiguration.register()
で名前を登録する必要があります。 他のConfiguration
オブジェクトは通常、アプリケーションの存続期間中は存在しますが、Customization
オブジェクトの存続期間はそれより短くなります。 つまり、Customization
オブジェクトが存在するのは、適用対象のユーザー・セッションがアクティブな間のみです。 ユーザー・セッションの終了後、Configuration.unregister()
メソッドをコールしてCustomization
オブジェクトを登録解除する必要があります。 通常、Customization
オブジェクトは、HttpSessionBindingListener.valueUnbound()
イベントに応答して登録解除されます。 Customization
オブジェクトの登録解除に失敗した場合、Customization
オブジェクトとそのすべてのコンテンツ(UserStyleSheet
オブジェクトなど)がリークします。
必要なStyle
オブジェクトでUserStyleSheet
インスタンスを明示的に作成してフォント・スタイルをカスタマイズできますが、UIXには、フォントのパーソナライズ・プロセスを単純化する便利なメソッドが用意されています。 BlafStyleUtils.getFontStyles()
メソッド(oracle.cabo.style.laf.browser
パッケージ)は、フォント・ファミリ名とベース・フォント・サイズを使用して、必要なスタイルを含むUserStyleSheet
を返します。 UserStyleSheet
のIDは、指定されたプロパティに基づいて自動的に決定されます。
getFontStyles()
メソッドを使用してUserStyleSheet
を要求する際、フォント・ファミリまたはフォント・サイズでデフォルト値を使用するよう指定できます。 この場合、基礎となるXSS文書に指定された値は変更されません。 また、BlafStyleUtils.NO_FONT_FAMILY
またはBlafStyleUtils.NO_FONT_SIZE
を使用して、どちらの値も指定しないようにすることも可能です。 この場合、フォント・ファミリまたはフォント・サイズのプロパティは、生成されるCSS文書には含まれません。 CSSスタイルシートからフォント・ファミリを削除する機能は、各国語ユーザーにとって有用です。これらのユーザーにとっては、ローカライズ済データに最適なフォントをブラウザによって判断した方が適切であるためです。 視覚に障害を持つユーザーには、フォント・サイズを指定せず、ブラウザ固有の手段でフォント・サイズを制御する方が有効です。
UIXには、パーソナライズした色のUserStyleSheet
を作成するための便利なメソッド、BlafStyleUtils.getColorStyles()
も用意されています。getColorStyles()
では、4つのjava.awt.Color
オブジェクトを使用して、適切なUserStyleSheet
を返します。 4つの色とは、テキスト前景色、テキスト背景色、暗いコア色、および暗いアクセント色です。 ブラウザ・ルック・アンド・フィールで使用されるその他の色は、これら4つの色に基づいて自動的に導出されます。
パーソナライズしたフォントと色の両方を指定するには、getFontStyles()
およびgetColorStyles()
から返されるUserStyleSheet
を、2つの引数を取るUserStyleSheet
コンストラクタを使用して、1つのUserStyleSheet
に組み合せます。 組み合せたUserStyleSheet
は、レンダリング時にStyleConstants.USER_STYLE_SHEET_PROPERTY
またはConfiguration.USER_STYLE_SHEET
プロパティで指定できます。
UserStyleSheet
APIは非常に柔軟性が高く、様々なユーザー固有のカスタマイズが可能ですが、柔軟性が高いためにいくつかの短所もあります。 新たなパーソナライズのたびに、新規スタイルシート、および現在の色とフォントに一致するいくつもの新規イメージが必要になります。 UIX Dynamic ImagesおよびUIX Stylesで現在提供されているイメージとスタイルシートの生成機能では、キャッシュの自動リフレッシュがサポートされていません。 このため、イメージまたはスタイルシートが一度生成されると、システム管理者が明示的に削除するまでキャッシュに残ります。 つまり、多数のユーザーに対して多様なパーソナライズを提供するサイトでは、生成されるスタイルシートまたはイメージの数が増加するにつれてリソースの制約が生じる場合があります。
UIXの将来のバージョンでは、使用されなくなったリソースの自動削除をサポートすることで、この問題を解消する予定です。 これにより、リソース使用量が大きくなると、古いイメージまたはスタイルシートが一時的に削除できるようになります。 それまでは、限定されたパーソナライズのみをアプリケーションで提供することが1つの解決方法です。 たとえば、エンド・ユーザーがすべての色を選択できることは理想的ですが、1つの色の組合せごとに作成されるイメージ数は増加します。 かわりに、事前定義済の一連のカラー・セットからユーザーが選択できるようにします。 UIXの将来のバージョンではこのような制限が不要になりますが、現在のところ、アプリケーションのパーソナライズ機能を設計する際に、リソース使用量を考慮することが大切です。
Copyright © 2001, 2004, Oracle Corporation.
All rights reserved.