| Oracle® Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発 12c (12.2.1.1.0) E77398-02 |
|
 前 |
 次 |
この章の内容は次のとおりです。
アプリケーションに適用するADFスキンを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)がコンポーネントで公開されている場合は、CSSスタイル・プロパティを直接ADF FacesまたはADFデータ視覚化コンポーネントに適用することにより、ADF FacesおよびADFデータ視覚化コンポーネントの外観をカスタマイズできます。後者を選択すると、アプリケーションのそのコンポーネント用のADFスキンで定義されたスタイル・プロパティをオーバーライドすることになります。アプリケーション中のすべてのコンポーネントに対してではなく、あるページで1つコンポーネントの1インスタンスのスタイルを変更する場合、あるいはプログラムでスタイルを条件付きで設定する場合には、これを実行します。たとえば、ある特定の条件においてのみテキストが赤色で表示されるように設定する場合などです。詳細は、「コンポーネントのスタイル・プロパティの変更」を参照してください。
ADFスキンは、CSSファイルの1種で、ここでCSSスタイル・プロパティを、外観をカスタマイズするコンポーネントのカスケード・スタイル・シート(CSS)仕様に基づいて定義します。ADFスキンでは、特定のコンポーネントやコンポーネントのグループに対してCSSスタイル・プロパティを適用する方法を決めるルールを定義します。エンド・ユーザーのブラウザでは、これらのルールが解釈され、ブラウザのデフォルトの設定がオーバーライドされます。図35-1および図35-2では、ADFスキンを適用した結果、アプリケーションに表示されるADF FacesおよびADFデータ視覚化コンポーネントの外観がどうなったかを示しています。図35-1に、alta ADFスキンを適用したFile Explorerアプリケーションのページを示します。
図35-1 Altaスキンを使用した索引ページ
図35-2に、skyros ADFスキンを適用した同じアプリケーションの同じページを示します。
図35-2 skyrosスキンを使用した索引ページ
このリリースで作成する新しいWebアプリケーションは、デフォルトでaltaスキンを使用します。移行されたWebアプリケーションは既存のADFスキンを使用し続けます。Oracle Alta UIシステムの恩恵を十分に受けるには、単にaltaスキンを使用する以上のことを行い、Oracle Alta UI設計原則に沿ってアプリケーションを設計することをお薦めします。これらの設計原則を使用してアプリケーションを設計することにより、Oracle Alta UIシステムがコンテンツをクリーンで整理された方法でエンド・ユーザーに表示するために組み込む、レイアウト、レスポンシブ・デザインおよびコンポーネントを使用できるようになります。Oracle Alta UIシステムおよびOracle Alta UI設計原則の詳細は、http://www.oracle.com/webfolder/ux/middleware/alta/index.html、Oracle Alta UIパターンの詳細は、http://www.oracle.com/webfolder/ux/middleware/alta/patterns/index.htmlを参照してください。
File Explorerアプリケーションには、アプリケーションの外観をカスタマイズするためにいくつかのADFスキンが用意されています。これらのADFスキンとFile Explorerアプリケーションのソース・ファイルを表示できます。詳細は、「ADF Facesコンポーネント・デモ・アプリケーションについて」を参照してください。
このガイドでは、CSSの概念については説明しません。公式仕様など、スタイルシートの広範な情報は、次に示すWorld Wide Web ConsortiumのWebサイトを参照してください。
ADFスキンの作成、変更またはアプリケーションへの適用の方法についても、このガイドでは説明していません。Oracle ADFではこれらのタスクを容易にするJDeveloperのエディタおよびテーマ・エディタが提供されます。詳細は、「ADFスキンの開発」を参照してください。
複数のADFスキンを作成する場合、エンド・ユーザーがアプリケーションで使用する好みのADFスキンを選択するように、アプリケーションを構成できます。詳細は、「エンド・ユーザーによるアプリケーションのADFスキン変更の許可」を参照してください。
様々な目的のために、ADFスキンをカスタマイズできます。たとえば、図35-3に示すように、エンド・ユーザーがADF Faces tableコンポーネントでレンダリングされたデータ行を選択すると、アプリケーションによりその行が強調表示され、フィードバックが提供されるように、ADFスキンのプロパティを定義できます。
図35-3 ADF表コンポーネントでのADFスキン・プロパティ
ADFスキン・プロパティを使用して、CSSのみでは指定できない、またはコンポーネントのプロパティに依存していて、その結果、CSSを使用して定義できない動作や外観を定義します。たとえば、ADF Facesでは、ブラウザでのアニメーションをサポートしていますが、CSS 3アニメーションは使用できません。アニメーションの継続時間を構成する場合、ADFスキン・プロパティを使用して行います。例35-1に、ADFスキン・プロパティにより、ADF Faces carouselコンポーネントでスピン・アニメーションが500ミリ秒間表示されるように継続時間がどのように定義されるかを示します。
例35-1 ADFスキン・プロパティを使用したスピン・アニメーションの長さの指定
af|carousel {
-tr-spin-animation-duration: 500;
}
アプリケーションの外観のカスタマイズを決定する前に、その他のADF Faces機能とADF Faces以外の機能を理解しておくと役に立ちます。次のリンクでは、知っておくと役に立つ詳細情報を提供しています。
テキストでのパラメータの使用: コンポーネントに表示されるテキストに、実行時に解決されるパラメータを含める場合は、ADF Faces EL書式タグを使用できます。詳細は、「EL書式タグの使用方法」を参照してください。
国際化およびローカライズ: アプリケーションに適用するために作成するADFスキンは、ADF Facesページを国際化およびローカライズするためのプロセスの一部としてカスタマイズできます。このプロセスの詳細は、「ページの国際化およびローカライズ」を参照してください。
アクセシビリティ: アプリケーションに適用するために作成するADFスキンは、ADF Facesをアクセス可能にするためのプロセスの一部としてカスタマイズできます。このプロセスの詳細は、「アクセス可能なADF Facesページの開発」を参照してください。
タッチ装置: ADF Facesコンポーネントはタッチ装置によって異なる動作および表示を行うことがあります。詳細は、「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。
ドラッグ・アンド・ドロップ: ユーザーがコンポーネントをページの別の領域にドラッグ・アンド・ドロップできるように、コンポーネントを構成できます。詳細は、「ドラッグ・アンド・ドロップ機能の追加」を参照してください。
コンポーネントのスタイル関連のプロパティのinlineStyleおよびstyleClass(どちらもルートDOM要素上でレンダリング)を変更することにより、コンポーネントのルック・アンド・フィールを設計時に調整できます。設計時に指定したスタイル関連プロパティ(inlineStyleまたはstyleClass)は、コンポーネントの特定のインスタンスに対してアプリケーションのADFスキンで指定された対応するスタイルをオーバーライドします。コンポーネントのinlineStyleプロパティに指定した値は、styleClass属性に設定された値をオーバーライドします。
inlineStyle属性は、CSSスタイルのセミコロンで区切られた文字列で、background-color:red; color:blue; font-style:italic; padding:3pxのように、個々の属性を設定できます。styleClass属性は、一連のインライン・スタイルのグループ化に使用されるCSSスタイル・クラス・セレクタです。スタイル・クラスは、.AFInstructionTextなどのADFパブリック・スタイル・クラスを使用して定義でき、af:outputTextコンポーネントに表示されるテキストのすべてのプロパティを設定します。
注意:
コンポーネントを拡大するためにスタイルを使用しないでください。拡大を目的としたスタイルの使用は宣言的でなく、多くの場合、異なるWebブラウザ間で動作の一貫性がなくなります。かわりに、ADF Facesフレームワークに用意されているジオメトリ管理を使用して、コンポーネントを拡大できます。レイアウトおよび拡大の詳細は、「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
inlineStyle属性を定義して、コンポーネントにインライン・スタイルを設定します。インライン・スタイルは、コンポーネントのインスタンス用コンポーネントのスタイルの指定に使用できます。詳細は、「コンテンツをページ全体に拡大するための設定」を参照してください。
始める前に:
inlineStyle属性が他の属性とどのように関連しているかについて理解しておくと役立ちます。詳細は、「コンポーネントのスタイル・プロパティの変更」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「外観のカスタマイズの追加機能」を参照してください。
インライン・スタイルを設定する手順:
例35-2 ページ・ソースのinlineStyle
<af:outputText value="outputText1" id="ot1"
inlineStyle="color:Red; text-decoration:overline;"/>
例35-3 inlineStyle属性の設定に使用されるEL式
<af:outputText value="#{row.assignedDate eq
null?res['srsearch.unassignedMessage']:row.assignedDate}"
inlineStyle="#{row.assignedDate eq null?'color:rgb(255,0,0);':''}"
id="ot3"/>
例35-4 contentStyleプロパティの使用
<af:inputText value="outputText1"
contentStyle="color:Red;" id="it1"/>
スタイル・クラスを使用して、コンポーネントのスタイルを定義できます。スタイル・クラスは、一連のインライン・スタイルをグループ化するために作成します。スタイル・クラスを参照するには、styleClass属性を使用します。
始める前に:
styleClass属性が他の属性とどのように関連しているかについて理解しておくと役立ちます。詳細は、「コンポーネントのスタイル・プロパティの変更」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「外観のカスタマイズの追加機能」を参照してください。
スタイル・クラスを使用してスタイルを設定する手順:
例35-5 スタイル・クラスを使用するためのページ・ソース
<af:outputText value="Text with a style class"
styleClass="overdue" id="ot4"/>
エンド・ユーザーが他のADFスキンを選択できるように、アプリケーションを構成できます。エンド・ユーザーが必要により適したADFスキンを使用して、アプリケーションのページをレンダリングできるようにする場合に、この機能を構成します。たとえば、アプリケーションで、ユーザーのブラウザが日本語のときに、日本のロケール固有の特徴を持つADFスキンを使用する場合などです。別の例としては、障害を持つユーザーにとってアプリケーションのページをよりアクセスしやすいものにするために構成されたADFスキンをアプリケーションで使用する場合があります。
図35-5では、コンポーネント(af:commandMenuItemなど)を構成して、エンド・ユーザーが実行時にアプリケーションで使用されるADFスキンを変更できるようにすることで、この機能をどのように実装するかを示しています。JSFページ上のコンポーネントを構成して、後からtrinidad-configファイルのskin-familyプロパティにより評価されるscope値を設定します。
図35-5 アプリケーションのADFスキンの変更
trinidad-configファイルのskin-familyプロパティの値の更新を可能にするコンポーネントを公開することにより、エンド・ユーザーがアプリケーションのADFスキンを変更できるようにします。
始める前に:
加えた変更が機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「エンド・ユーザーによるアプリケーションのADFスキン変更の許可」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「外観のカスタマイズの追加機能」を参照してください。
エンド・ユーザーにアプリケーションのADFスキンの変更を許可する手順:
例35-6 コンポーネントを使用したスキン・ファミリの設定
<af:menu text="Change Skin" id="skins" binding="#{backing_ChangeSkin.skins}">
<af:commandMenuItem id="skin1" text="skyros" type="radio"
actionListener="#{skins.skinMenuAction}"
selected="#{skins.skinFamily=='skyros'}"/>
<af:commandMenuItem id="skin3" text="fusion" type="radio"
actionListener="#{skins.skinMenuAction}"
selected="#{skins.skinFamily=='fusion'}"/>
<af:commandMenuItem id="skin4" text="fusion-projector" type="radio"
actionListener="#{skins.skinMenuAction}"
selected="#{skins.skinFamily=='fusion-projector'}"/>
<af:commandMenuItem id="skin5" text="simple" type="radio"
actionListener="#{skins.skinMenuAction}"
selected="#{skins.skinFamily=='simple'}"/>
<af:commandMenuItem id="skin6" text="skin1" type="radio"
actionListener="#{skins.skinMenuAction}"
selected="#{skins.skinFamily=='skin1'}"/>
</af:menu>
例35-7 ADFスキンを変更するためのマネージドBeanのメソッド
public void skinMenuAction(ActionEvent ae)
{
RichCommandMenuItem menuItem = (RichCommandMenuItem)ae.getComponent();
// Invoke another managed bean method to set the value of skinFamily
setSkinFamily(menuItem.getText());
// Invoke a method to reload the page. The application reloads the page
// using the newly selected ADF skin.
reloadThePage();
}
実行時に、エンド・ユーザーは公開されたコンポーネントを使用して、別のADFスキンを選択します。例35-6では、これは多数のaf:commandMenuItemコンポーネントの1つです。このコンポーネントは、エンド・ユーザーが選択した値をマネージドBeanに発行し、次にこれがマネージドBeanのプロパティ(skinFamily)の値を設定します。実行時に、trinidad-configファイルの<skin-family>プロパティでは、EL式を使用してマネージドBeanから値を読み取ります。
