| Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル・ブラウザ開発者ガイド 11gリリース2(11.1.2.3.0) B66158-03 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル・ブラウザ開発者ガイド 11gリリース2(11.1.2.3.0) B66158-03 |
|
前 |
次 |
この章では、ADFモバイル・ブラウザ・アプリケーションのスキニングについて説明します。
この章は次の項を含みます:
スキニングを使用すると、デバイスに依存したスタイルシートの自動配信を通じて、各種のデバイスで一貫したページを表示できるようになります。これらのスタイルシートにより、様々なモバイル・ブラウザで同じページ定義を共有しながら、ページを最適に表示できます。アプリケーションのルック・アンド・フィールの設定が可能なこれらのスタイルシート内では、コンポーネントのサイズ、位置および外観を設定することによってそのコンポーネントを特定のブラウザ向けに調整することに加え、ブラウザのタイプごとにコンポーネントを表示するか非表示にするかを指定します。
|
注意: ブラウザでは、Cascading Style Sheets (CSS)構文がサポートされている必要があります。 |
2.3.2項「モバイルJSFページ作成時の処理内容」で述べているように、JDeveloperは2つのモバイル固有のスタイルシートmobile.cssとrichmobile.cssを、図4-1で示すようにADFモバイル・ブラウザ固有のView Controllerプロジェクト内に作成します。モバイルJSFページを作成することによりtrinidad-config.xmlにもこれらのスキニング・ファイルによって定義されたスキン・ファミリを選択するためのEL式が移入され、trinidad-skins.xmlにもADFモバイル・ブラウザ・スキンの定義が移入されます。
表4-1は、ADFモバイル・ページに提供されるスキニング・ファイルを示しています。
表4-1 ADFモバイル・ブラウザのスキン
| CSSファイル | スキン・ファミリ | 用途 |
|---|---|---|
|
|
mobile |
基本的なHTMLブラウザに使用。このファミリは、Windows MobileおよびBlackBerry、バージョン4.6以上でのレンダリングに使用します。第5章「基本的なHTMLモバイル・ブラウザのサポート」を参照してください。 |
|
|
richmobile |
Webkitレンダリング・エンジンを使用するスマートフォン・ブラウザに使用します。これらのブラウザは、Nokia S60や、iOSデバイスおよびAndroidデバイスでも使用されます。 |
例4-1は、ブラウザにより要求されたスキン・ファミリ・タイプを返す文字列として評価される<skin-family>要素の中にEL式が埋め込まれたtrinidad-config.xmlを示しています。
例4-1 Trinidad-config.xml内のスキン・ファミリ選択ロジック
<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>#{requestContext.agent.type == 'desktop'? 'richmobile': 'mobile'}</skin-family>
</trinidad-config>
例4-2では、<skin>要素がモバイルJSFページを作成するときのデフォルトADFモバイル・ブラウザ・スキンに定義されているtrinidad-skins.xmlを示しています。
例4-2 ADFモバイル・ブラウザ<skin>定義が移入されたtrinidad-skins.xml
<?xml version="1.0" encoding="windows-1252"?>
<!-- To use mobile skin families in your app, please update trinidad-config.xml with below tags -->
<!-- <skin-family>#{requestContext.agent.type == 'desktop'?'richmobile': 'mobile'}</skin-family> -->
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>richmobile</id>
<family>richmobile</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>styles/richmobile.css</style-sheet-name>
</skin>
<skin>
<id>mobile</id>
<family>mobile</family>
<render-kit-id>org.apache.myfaces.trinidad.pda</render-kit-id>
<style-sheet-name>styles/mobile.css</style-sheet-name>
</skin>
</skins>
trinidad-config.xmlおよびtrinidad-skins.xmlを、他のCSSファイルをコールするよう構成できます。richmobile.cssおよびmobile.cssファイルを、特定のモバイル・デバイスまたはプラットフォームへ@ruleを使用してレンダリングするように変更することもできます。
モバイル機能を非モバイル・プロジェクトに追加するには、次の手順を実行します。
スキン(WEB-INFまたはMETA-INFノードにあるtrinidad-skins.xml)を作成します。
スタイルシートを作成します。
(WEB-INFノードにある)trinidad-config.xmlでのスキン・ファミリを設定します。
詳細は、Apache MyFaces Trinidadの開発ガイドライン (http://myfaces.apache.org/trinidad/devguide/skinning.html)の「Create a Skin—An Overview」を参照してください。
Apache MyFaces Trinidadでは、スキン・ファミリが1つのレンダーキットと1つの一意なCSSファイルに関連付けられます。Trinidadでは、Webkitベースのモバイル・ブラウザにはデスクトップ・レンダーキットが、そしてその他のすべてのモバイル・ブラウザにはPDAレンダーキットが使用されるため、2つのスキン・ファミリを作成してその両方がこれらのレンダーキットおよびCSSファイルの1つを参照することにより、すべてのモバイル・ブラウザをサポートできます。@agentおよび@platformセレクタ・ルールを使用して、ブラウザの名前、バージョン、またはプラットフォームに基づいたレンダリングを有効にします。詳細は、Apache MyFaces Trinidadの開発ガイドライン (http://myfaces.apache.org/trinidad/devguide/skinning.html)の「Skinning CSS Features」を参照してください。
多くのコンポーネントではCSSスタイルが自動的に適用されますが、一部のコンポーネントではスタイル・クラスをそのstyleClass属性に手動で設定する必要があります。
<tr:panelHeader>コンポーネントにstyleClass属性を追加すると、様々なブラウザでタイトルのみのヘッダーと、タイトルおよびリンク付きのヘッダーを表示できます。
タイトルのみのヘッダーを作成するには、例4-3に示すように、styleClass="af_m_toolbar"を<tr:panelHeader>コンポーネントに追加します。
図4-2は、このADFモバイル・ブラウザ属性により、タイトルのみのヘッダーがApple iPhone上でどのように作成されるかを示しています。
表4-2は、タイトルのみのヘッダーがWindows Mobileデバイス、BlackBerryスマートフォンおよびNokia Webkit上でどのように表示されるかを示す例です。
図4-3に示すように、ヘッダー内にリンクおよびタイトルを追加できます。図4-3は、Apple iPhone上に表示されたこのタイプのヘッダーを示しています。
4.3.1.1項「タイトルのみのヘッダーの作成」で説明したように、<tr:panelHeader>要素内にstyleClass="af_m_toolbar"を追加することによって、ヘッダーのタイトル(図4-3ではTransferというタイトル)を定義します。例4-4に示すように、リンクは、子である<tr:commandLink>要素内にボタン(それぞれstyleClass="af_m_backButton"およびstyleClass="af_m_button")として定義されています。例4-4の<tr:panelHeader>要素には、これらの属性(太字)が含まれています。
例4-4 ヘッダーへのタイトルおよびリンクの追加
<tr:panelHeader styleClass="af_m_toolbar" text="Transfer"> <tr:commandLink styleClass="af_m_backButton" text="Back" action="back"/> <tr:spacer rendered="#{requestContext.agent.skinFamilyType eq 'blackberryminimal'}" height="5" width="105"/> <tr:spacer rendered="#{requestContext.agent.skinFamilyType eq 'windowsmobile'}" height="" width="28"/> <tr:commandLink styleClass="af_m_button" text="Sign Off" action="signoff"/> </tr:panelHeader>
表4-3は、タイトルおよびリンクを含む<tr:panelHeader>がWindows Mobileデバイス、BlackBerryスマートフォンおよびNokia Webkit上でどのように表示されるかを示す例です。
styleClass属性を使用すると、ADFモバイル・ブラウザ・アプリケーション内の表コンポーネントを様々なブラウザ上で適切にレンダリングできます。
ターゲット・プラットフォーム上でスタイルを適切に適用するためにstyleClass属性を含める必要があるパネル・ヘッダーとは異なり、表の列ヘッダーには属性は必要ありません。かわりに、3.7.1項「表の作成」で説明した<tr:columns>コンポーネントを使用します。図4-4では、列ヘッダーがApple iPhoneでレンダリングされる様子を示しています。
例4-5は、<tr:columns>要素(太字)の定義方法を示しています。
例4-5 列ヘッダーの作成
<tr:table var="row" …./>
<tr:column headerText="LastName">
<tr:outputText value="#{row.bindings.LastName.inputValue}"/>
</tr:column>
<tr:column headerText="FirstName">
<tr:outputText value="#{row.bindings.FirstName.inputValue} "/>
</tr:column>
<tr:column headerText="Phone">
<tr:outputText value="#{row.bindings.Phone.inputValue}"/>
</tr:column>
</tr:table>
表4-4は、列ヘッダーがWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。
図4-5は、styleClassの値af_m_listingLinkおよびaf_m_listingDetailsを使用して作成した、表内のリンクおよび詳細です。
例4-6に示すように、これらの機能を作成するには、<tr:panelGroupLayout>コンポーネントを<tr:column>コンポーネントの子として追加します。次に、styleClass="af_m_listingLink"およびstyleClass="af_m_listingDetails"属性をpanelGroupLayoutの<tr:commandLink>および<tr:outputText>サブコンポーネントに追加します。tr:panelGroupLayout、tr:commandLinkおよびtr:outputTextの詳細は、第3章「コンポーネントのサポート」を参照してください。
例4-6 詳細付きのリンクの追加
<tr:table horizontalGridVisible="false"
var="row"
width="100%">
<tr:column>
<tr:image source="#{row.bindings.TypeIconUrl.inputValue}"/>1
</tr:column>
<tr:column inlineStyle="width:100%;">
<tr:panelGroupLayout layout="vertical">
<tr:commandLink text="#{row.bindings.DescShort.inputValue}"
action="detail"
styleClass="af_m_listingLink">
</tr:commandLink>
<tr:outputText value="#{row.bindings.Balance.inputValue}"
styleClass="af_m_listingDetails">
</tr:outputText>
</tr:panelGroupLayout>
</tr:column>
</tr:table>
表4-5は、イメージ、リンクおよび詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。
図4-6は、表内に主要な詳細およびリンクを作成する方法を示しています。
4.3.2.2項「イメージおよびリンク付きの主要な詳細の追加」で説明したイメージ付きの主要なリンクおよび詳細の追加と同様、これらの機能を作成するには、<tr:panelGroupLayout>コンポーネントを<tr:column>コンポーネントの子として追加します。次に、例4-7に示すように、styleClass="af_m_listingLink"およびstyleClass="af_m_listingDetails"属性をpanelGroupLayoutの<tr:commandLink>および<tr:outputText>サブコンポーネントに追加します。tr:panelGroupLayout、tr:commandLinkおよびtr:outputTextの詳細は、第3章「コンポーネントのサポート」を参照してください。
例4-7 主要な詳細およびリンク
<tr:table horizontalGridVisible="false"
var="row"
width="100%">
<tr:column>
<tr:panelGroupLayout layout="vertical">
<tr:commandLink text="#{row.bindings.Email.inputValue}"
styleClass=" af_m_listingLink">
</tr:commandLink>
<tr:outputText value="#{row.bindings.FirstName.inputValue}”
styleClass="af_m_listingDetails"/>
</tr:panelGroupLayout>
</tr:column>
</tr:table>
表4-6は、リンクおよび詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。
図4-7に示すように、af_m_listingPrimaryDetailsおよびaf_m_listingDetailsスタイル・クラスを使用すると、リンクとして機能しない詳細を作成できます。これらの動作は、4.3.2.2項「イメージおよびリンク付きの主要な詳細の追加」で説明した主要な詳細とは異なります。
例4-8に示すように、リンクなしの主要な詳細を作成するには、styleClass=af_m_listingPrimaryDetailsおよびstyleClass="af_m_listingDetails"を<tr:outputText>要素に追加します。この要素は、(<tr:column>要素の子である)<tr:panelGroupLayout>要素の子です。
例4-8 リンクなしの主要な詳細の追加
tr:table horizontalGridVisible="false"
var="row"
width="100%">
<tr:column>
<tr:panelGroupLayout layout="vertical">
<tr:outputText value="#{row.bindings.Amount.inputValue}
styleClass="af_m_listingPrimaryDetails">
</tr:outputText>
<tr:outputText value=" #{row.bindings.FromAccountName.inputValue} “
styleClass="af_m_listingDetails"/>
</tr:panelGroupLayout>
</tr:column>
</tr:table>
表4-7は、リンクなしの詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。
図4-8に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClassの値をaf_m_panelBaseとして定義すると、<tr:panelList>コンポーネントにパディングが適用されます。
例4-9に示すように、子の<tr:panelList>コンポーネントにstyleClass属性を含める必要はありません。<tr:panelList>および<tr:panelGroupLayout>の使用の詳細は、3.2.2項「リストの作成」および3.4項「レイアウト・コンポーネント」を参照してください。
例4-9 panelListコンポーネントへのパディングの追加
<tr:panelGroupLayout styleClass="af_m_panelBase">
<tr:panelList>
<tr:commandLink text="Welcome" action="welcome"/>
<tr:commandLink text="Branch" action="branch"/>
</tr:panelList>
</tr:panelGroupLayout>
表4-8は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelList>コンポーネント内のパディングを示す例です。
図4-9に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClass属性の値をaf_m_panelBaseとして定義すると、子の<tr:panelFormLayout>コンポーネントにパディングが適用されます。
例4-10に示すように、<tr:panelFormLayout>コンポーネントにstyleClassを追加する必要はありません。
例4-10 panelFormLayoutコンポーネントへのパディングの適用
<tr:panelGroupLayout styleClass="af_m_panelBase">
<tr:panelFormLayout labelWidth="35%" fieldWidth="65%">
<tr:selectOneChoice value="#{transferBean.transferFromAccount}"
label="From:" showRequired="false">
<f:selectItems value="#{bindings.AccountView1.items}"/>
</tr:selectOneChoice>
<tr:selectOneChoice value="#{transferBean.transferToAccount}"
showRequired="false"
unselectedLabel="- select -"
label="To:">
<f:selectItems value="#{bindings.AccountView1.items}"/>
</tr:selectOneChoice>
<tr:inputText id="amount"
columns="#{requestContext.agent.capabilities.narrowScreen ? '8' : '12'}"
required="false" showRequired="false"
value="#{transferBean.transferAmount}"
label="Amount:">
<f:converter converterId="Bank10.amountConverter"/>
</tr:inputText>
<tr:panelLabelAndMessage label="Date: ">
<tr:outputText value="#{transferBean.transferDate}"/>
</tr:panelLabelAndMessage>
<f:facet name="footer">
<tr:panelGroupLayout>
<tr:spacer rendered="#{requestContext.agent.skinFamilyType eq
'blackberryminimal'}"
height="5"
width="75"/>
<tr:commandButton text="Submit"
action="#{transferBean.validateTransferRequest}"/>
</tr:panelGroupLayout>
</f:facet>
</tr:panelFormLayout>
</tr:panelGroupLayout>
表4-9は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelList>コンポーネント内のパディングを示す例です。
図4-10に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClassコンポーネントの値をaf_m_panelBaseとして定義すると、その<tr:panelAccordion>コンポーネントにパディングが適用されます。
例4-11に示すように、<tr:panelAccordion>コンポーネントにstyleClass属性を追加する必要はありません。
例4-11 <tr:panelAccordion>コンポーネントへのパディングの適用
<tr:panelGroupLayout styleClass="af_m_panelBase">
<tr:panelAccordion discloseMany="true">
<tr:showDetailItem text="Name" disclosed="true">
<tr:panelFormLayout fieldWidth="70%" labelWidth="30%">
...
</tr:panelFormLayout>
</tr:showDetailItem>
<tr:showDetailItem text="Contact" disclosed="true">
<tr:panelFormLayout fieldWidth="70%" labelWidth="30%">
...
</tr:panelFormLayout>
</tr:showDetailItem>
<tr:showDetailItem text="Address">
<tr:panelFormLayout fieldWidth="70%" labelWidth="30%">
...
</tr:panelFormLayout>
</tr:showDetailItem>
</tr:panelAccordion>
</tr:panelGroupLayout>
表4-11は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelAccordion>コンポーネント内のパディングを示す例です。
