| Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル・ブラウザ開発者ガイド 11g リリース2 (11.1.2.1.0) B66158-01 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル・ブラウザ開発者ガイド 11g リリース2 (11.1.2.1.0) B66158-01 |
|
前 |
次 |
この章では、ADFモバイル・ブラウザ・アプリケーションのスキニングについて説明します。
この章は次の項を含みます:
スキニングを使用すると、デバイスに依存したスタイルシートの自動配信を通じて、各種のデバイスで一貫したページを表示できるようになります。これらのスタイルシートにより、様々なモバイル・ブラウザで同じページ定義を共有しながら、ページを最適に表示できます。アプリケーションのルック・アンド・フィールの設定が可能なこれらのスタイルシート内では、コンポーネントのサイズ、位置および外観を設定することによってそのコンポーネントを特定のブラウザ向けに調整することに加え、ブラウザのタイプごとにコンポーネントを表示するか非表示にするかを指定します。詳細は、4.2項「ADFモバイル・ブラウザのスキニングの実装」を参照してください。スキニングの使用方法の例は、iPhoneスキンの例を含む4.3項「ADFモバイル・ブラウザのスキニングの適用」を参照してください。
|
注意: ブラウザでは、Cascading Style Sheets (CSS)構文がサポートされている必要があります。 |
Trinidadでは、Webkitベースのモバイル・ブラウザにはデスクトップ・レンダーキットが、そしてその他のすべてのモバイル・ブラウザにはPDAレンダーキットが使用されるため、それぞれに独自のCSSファイルおよびレンダーキットを備えた2つのスキン・ファミリを作成することによって、すべてのモバイル・ブラウザを処理できます。また、これらのCSSファイル内に@agentまたは@platformのような特定のルールを適用することによって、ブラウザの名前、バージョンまたはプラットフォームに基づいて選択的にスタイルをレンダリングする必要もあります。Trinidadでは、スキン・ファミリが常に1つのレンダーキットと1つの一意なCSSファイルに関連付けられます。詳細は、次にある『Development Guidelines for Apache MyFaces Trinidad』の「Apache Trinidad Skinning」を参照してください。
http://myfaces.apache.org/trinidad/devguide/skinning.html
特定のブラウザでサポートされている機能では、スタイルシートのカスタマイズ以外の方法が必要になります。
モバイル・プロジェクトでは、JDeveloperによってmobileおよびrichmobileという2つのスキン・ファミリが作成されます。mobileスキン・ファミリはPDAレンダーキットおよびmobile.cssに関連付けられ、richmobileスキンはデスクトップ・レンダーキットおよびrichmobile.cssに関連付けられます。
モバイル機能をモバイル・プロジェクト以外に追加する場合は、『Development Guidelines for Apache MyFaces Trinidad』の「Apache Trinidad Skinning」(http://myfaces.apache.org/trinidad/devguide/skinning.html)を参照してスキン・ファミリを作成する必要があります。このドキュメントには、次の方法に関する説明が記載されています。
スキン(WEB-INFまたはMETA-INFディレクトリにあるtrinidad-skins.xml)を作成します。
スタイルシートを作成します。
(WEB-INFディレクトリにある)trinidad-config.xmlでのスキン・ファミリを設定します。
ADFモバイル・ブラウザでは、次のタスクを実行することによってスキニングを実装します。
trinidad-skins.xmlでのレンダーキットおよびスタイルシートの指定
ADFモバイル・ブラウザ・プロジェクト内でのCSSファイルのインクルード
例4-1に示すように、<trinidad-config>要素内に<skin-family>タグを追加し、ブラウザのスキン・ファミリ・タイプを返す文字列として評価されるEL式を指定します。
スキンを作成したら、例4-2に示すように、Trinidad-config.xml内で<skin-family>要素を使用してmobileスキンと別のスキン(richmobileスキンなど)を切り替えることができます。図4-1に示すように、WEB-INF内にあるこのコンポーネントを使用することで、アプリケーションのモバイル・スキンの設定を有効化できます。mobileスキンとrichmobileスキンを切り替えるには、式言語(EL)を使用します。
スキンの切替えを有効化するには、次の手順を実行します。
Trinidad-config.xmlファイルを開きます。
例4-2に示すように、mobileスキンとrichmobileスキンを切り替えるためのEL式を<skin-family>要素内に定義します。
ファイルを保存します。
<skins>では<skin>タグを定義して、その中で<family>で識別されるブラウザ・タイプに対し、render-kit-idおよびstyle-sheet-name(例4-3ではそれぞれorg.apache.myfaces.trinidad.desktopおよびstyles/richmobile.css)を指定します。<family>の値は、(例4-1に示した)trinidad-config.xmlにある<skin-family>タグのEL式から返された結果文字列です。
デフォルトでは、すべてのスキン・ファミリでTrinidadのデフォルトのsimpleスキン・ファミリが拡張されます。ADFタスク・フローではsimpleスキン・ファミリがサポートされていないため、ADFタスク・フローを使用するADFモバイル・ブラウザ・アプリケーション内のすべてのスキン・ファミリで、<extends>タグを使用してtrinidad-simpleスキン・ファミリが拡張されます。
例4-3 スキンの定義
<?xml version="1.0" encoding="windows-1252"?>
<!-- To use mobile skin families in your application, update trinidad-config.xml with following 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-skins.xmlで指定したすべてのCSSファイル(図4-1のmobile.cssおよびrichmobile.cssなど)をView-Controllerプロジェクトにインクルードします。
多くのコンポーネントではCSSスタイルが自動的に適用されますが、一部のコンポーネントではスタイル・クラスをそのstyleClass属性に手動で設定する必要があります。
<tr:panelHeader>コンポーネントにstyleClass属性を追加すると、様々なブラウザでタイトルのみのヘッダーと、タイトルおよびリンク付きのヘッダーを表示できます。
タイトルのみのヘッダーを作成するには、例4-4に示すように、styleClass="af_m_toolbar"を<tr:panelHeader>コンポーネントに追加します。
図4-2は、このADFモバイル・ブラウザ属性により、タイトルのみのヘッダーがApple iPhone上でどのように作成されるかを示しています。
表4-1は、タイトルのみのヘッダーが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-5に示すように、リンクは、子である<tr:commandLink>要素内にボタン(それぞれstyleClass="af_m_backButton"およびstyleClass="af_m_button")として定義されています。例4-5の<tr:panelHeader>要素には、これらの属性(太字)が含まれています。
例4-5 ヘッダーへのタイトルおよびリンクの追加
<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 text="Sign Off" styleClass="af_m_button" action="signoff"/> </tr:panelHeader>
表4-2は、タイトルおよびリンクを含む<tr:panelHeader>がWindows Mobileデバイス、BlackBerryスマートフォンおよびNokia Webkit上でどのように表示されるかを示す例です。
styleClass属性を使用すると、ADFモバイル・ブラウザ・アプリケーション内の表コンポーネントを様々なブラウザ上で適切にレンダリングできます。
ターゲット・プラットフォーム上でスタイルを適切に適用するためにstyleClass属性を含める必要があるパネル・ヘッダーとは異なり、表の列ヘッダーには属性は必要ありません。かわりに、3.7.1項「表の作成」で説明した<tr:columns>コンポーネントを使用します。図4-4は、Apple iPhone上で列ヘッダーがどのようにレンダリングされるかを示しています。
例4-6は、<tr:columns>要素(太字)の定義方法を示しています。
例4-6 列ヘッダーの作成
<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-3は、列ヘッダーがWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。
図4-5は、styleClassの値af_m_listingLinkおよびaf_m_listingDetailsを使用して作成した、表内のリンクおよび詳細です。
例4-7に示すように、これらの機能を作成するには、<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-7 詳細付きのリンクの追加
<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-4は、イメージ、リンクおよび詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。
図4-6は、表内に主要な詳細およびリンクを作成する方法を示しています。
4.3.2.2項「イメージおよびリンク付きの主要な詳細の追加」で説明したイメージ付きの主要なリンクおよび詳細の追加と同様、これらの機能を作成するには、<tr:panelGroupLayout>コンポーネントを<tr:column>コンポーネントの子として追加します。次に、例4-8に示すように、styleClass="af_m_listingLink"およびstyleClass="af_m_listingDetails"属性をpanelGroupLayoutの<tr:commandLink>および<tr:outputText>サブコンポーネントに追加します。tr:panelGroupLayout、tr:commandLinkおよびtr:outputTextの詳細は、第3章「コンポーネントのサポート」を参照してください。
例4-8 主要な詳細およびリンク
<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-5は、リンクおよび詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。
図4-7に示すように、af_m_listingPrimaryDetailsおよびaf_m_listingDetailsスタイル・クラスを使用すると、リンクとして機能しない詳細を作成できます。これらの動作は、4.3.2.2項「イメージおよびリンク付きの主要な詳細の追加」で説明した主要な詳細とは異なります。
例4-9に示すように、リンクなしの主要な詳細を作成するには、styleClass=af_m_listingPrimaryDetailsおよびstyleClass="af_m_listingDetails"を<tr:outputText>要素に追加します。この要素は、(<tr:column>要素の子である)<tr:panelGroupLayout>要素の子です。
例4-9 リンクなしの主要な詳細の追加
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-6は、リンクなしの詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。
図4-8に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClassの値をaf_m_panelBaseとして定義すると、<tr:panelList>コンポーネントにパディングが適用されます。
例4-10に示すように、子の<tr:panelList>コンポーネントにstyleClass属性を含める必要はありません。<tr:panelList>および<tr:panelGroupLayout>の使用の詳細は、3.2.2項「リストの作成」および3.4項「レイアウト・コンポーネント」を参照してください。
例4-10 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-7は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelList>コンポーネント内のパディングを示す例です。
図4-9に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClass属性の値をaf_m_panelBaseとして定義すると、子の<tr:panelFormLayout>コンポーネントにパディングが適用されます。
例4-11に示すように、<tr:panelFormLayout>コンポーネントにstyleClassを追加する必要はありません。
例4-11 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-8は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelList>コンポーネント内のパディングを示す例です。
図4-10に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClassコンポーネントの値をaf_m_panelBaseとして定義すると、その<tr:panelAccordion>コンポーネントにパディングが適用されます。
例4-12に示すように、<tr:panelAccordion>コンポーネントにstyleClass属性を追加する必要はありません。
例4-12 <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-12は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelAccordion>コンポーネント内のパディングを示す例です。
