この章では、ADFモバイル・ブラウザ・アプリケーションのスキニングについて説明します。
この章の内容は次のとおりです。
スキニングを使用すると、デバイスに依存したスタイルシートの自動配信を通じて、各種のデバイスで一貫したページを表示できるようになります。これらのスタイルシートにより、様々なモバイル・ブラウザで同じページ定義を共有しながら、ページを最適に表示できます。アプリケーションのルック・アンド・フィールの設定が可能なこれらのスタイルシート内では、コンポーネントのサイズ、位置および外観を設定することによってそのコンポーネントを特定のブラウザ向けに調整することに加え、ブラウザのタイプごとにコンポーネントを表示するか非表示にするかを指定します。
注意: ブラウザでは、Cascading Style Sheets (CSS)構文がサポートされている必要があります。 |
2.2.2項「モバイル・アプリケーションおよびプロジェクト作成時の処理内容」で述べているように、JDeveloperは2つのモバイル固有のスタイルシートmobile.css
とrichmobile.css
を、図4-1で示すようにADFモバイル・ブラウザ固有のビュー・コントローラ・プロジェクト内に作成します。
表4-1は、ADFモバイル・ページに提供されるスキニング・ファイルを示しています。
表4-1 ADFモバイル・ブラウザのスキン
CSSファイル | スキン・ファミリ | 用途 |
---|---|---|
|
mobile |
基本的なHTMLブラウザに使用。このファミリは、Windows MobileおよびBlackBerry、バージョン4.6以上でのレンダリングに使用します。第5章「基本的なHTMLモバイル・ブラウザのサポート」を参照してください。 |
|
richmobile |
Webkitレンダリング・エンジンを使用するスマートフォン・ブラウザに使用します。これらのブラウザは、Nokia S60や、iOSデバイスおよびAndroidデバイスでも使用されます。 |
ADFモバイル・ブラウザ・ビュー・コントローラ・プロジェクトを作成すると、trinidad-config.xml
ファイル内の<skin-family>
要素に、ブラウザのユーザー・エージェントに適切なレンダーキットを選択する次のEL式が移入されます。
#{requestContext.agent.type == 'desktop'?'richmobile': 'mobile'}
ADFモバイル・ブラウザ・フレームワークは、このレンダーキットに定義されたスタイルを適用します。例4-1に示されているこの式は、ADFモバイル・ブラウザ・アプリケーションでモバイルおよびリッチモバイル・スキン・ファミリを使用できるようにするために、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に示されているtrinidad-skins.xml
ファイルでは、EL式を使用して適用されるデフォルトのスキン・ファミリを定義します。
例4-2 ADFモバイル・ブラウザ<skin>定義が移入されたtrinidad-skins.xml
<?xml version="1.0" encoding="windows-1252"?> <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> <extends>trinidad-simple.desktop</extends> </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> <extends>trinidad-simple.pda</extends> </skin> </skins>
richmobile.css
およびmobile.css
以外のCSSファイルを呼び出すように、trinidad-config.xml
ファイルとtrinidad-skins.xml
ファイルを構成することができます。richmobile.css
およびmobile.css
ファイルを、特定のモバイル・デバイスまたはプラットフォームへ@ルールを使用してレンダリングするように変更することもできます。
モバイル機能を非モバイル・プロジェクトに追加するには、次の手順を実行します。
スキンの作成。これには、ADFモバイル・ブラウザ・ビュー・プロジェクトのWEB-INFノード内でtrinidad-skins.xml
ファイルを作成することが含まれています。
スタイルシートを作成します。
trinidad-config.xml
ファイル(WEB-INFノードにあります)でスキン・ファミリを設定します。
詳細は、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>
コンポーネント内のパディングを示す例です。