Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル・ブラウザ開発者ガイド 11gリリース1 (11.1.1.7.0) B72413-01 |
|
前 |
次 |
この章では、ADFモバイル・ブラウザ・アプリケーションのスキニングについて説明します。
この章の内容は次のとおりです。
スキニングを使用すると、デバイスに依存したスタイルシートの自動配信を通じて、各種のデバイスで一貫したページを表示できるようになります。これらのスタイルシートにより、様々なモバイル・ブラウザで同じページ定義を共有しながら、ページを最適に表示できます。アプリケーションのルック・アンド・フィールの設定が可能なこれらのスタイルシート内では、コンポーネントのサイズ、位置および外観を設定することによってそのコンポーネントを特定のブラウザ向けに調整することに加え、コンポーネントを表示する(または非表示にする)ブラウザのタイプを指定します。詳細は、4.2項「ADFモバイル・ブラウザのスキニングの実装」を参照してください。スキニングの使用方法の例は、iPhoneスキンの例を含む4.3項「iPhoneコンポーネントの例」を参照してください。類似のスタイル・シートを、BlackBerryやWindows Mobile 6、Nokia S60など他のモバイル・ブラウザに適用できます。実装サンプルは、Oracle Technology Network (http://www.oracle.com/technetwork/index.html
)から入手できます。
注意: ブラウザでは、Cascading Style Sheets (CSS)構文がサポートされている必要があります。また、特定のブラウザに固有のスタイリング機能には、スタイル・シートのカスタマイズ以外のメソッドが必要な場合があります。 |
スキンを作成するには、『Development Guidelines for Apache MyFaces Trinidad』の「Apache Trinidad Skinning」(http://myfaces.apache.org/trinidad/devguide/skinning.html
)を参照してください。このドキュメントには次の方法に関する説明が記載されています。
スキンの作成。これには、図4-1に示すように、ADFモバイル・ブラウザ・ビュー・プロジェクトのWEB-INFノード内でtrinidad-skins.xml
ファイルを作成することが含まれています。
スタイル・シートの作成(.css
ファイル)。
trinidad-config.xml
ファイル(WEB-INFノードにあります)でスキン・ファミリを設定します。
ADFモバイル・ブラウザでは、次のタスクを実行することによってスキニングを実装します。
trinidad-config.xml
ファイル内で、EL(式言語)式#{requestContext.agent.skinFamilyType}
(ブラウザのスキン・ファミリ・タイプを返します)を使用して<skin-family>
タグを定義します。7.2.1.1項「スキン・タイプの決定」を参照してください。
trinidad-skins.xml
でレンダーキットおよびスタイルシートを指定します。
ADFモバイル・ブラウザ・プロジェクト内にCSSファイルをインクルードします。この場所は通常、ADFモバイル・ブラウザ・ビュー・プロジェクトのpublic_html
ディレクトリのサブディレクトリです(JDeveloper\mywork\
Application
\
ADF Mobile Application view project
\public_html\css
など)。
図4-1は、<trinidad-config>
要素内での<skin-family>
タグの追加を示しています。この要素には、ブラウザのスキン・ファミリ・タイプを返す文字列を評価するEL式が含まれています。
スキンを作成したら、Trinidad-config.xml
ファイルの<skin-family>
要素を使用することにより、デフォルトのスキンと別のスキン(例4-2に示すiPhoneスキンなど)を切り替えることができます。図4-1に示すように、JSPページを作成したことにより生成されたこのファイルはWEB-INFノードにあります。このファイルを使用して、アプリケーションにデフォルトのスキンを設定します。デフォルトのスキンと代替スキンを切り替えるには、式言語(EL)を使用します。
スキンの切替えを有効化するには、次の手順を実行します。
Trinidad-config.xml
ファイルを開きます。
例4-2に示すように、デフォルト(minimal
)スキンとiPhoneスキン(iPhoneWebkit
)を切り替えるためのEL式を<skin-family>
要素内に定義します。
ファイルを保存します。7.2.1.1項「スキン・タイプの決定」も参照してください。
<family>
要素内で識別されたブラウザ・タイプに対して<skin>
タグを定義します。このタグはレンダーキットIDとスタイル・シート名(例4-3ではそれぞれ、org.apache.myfaces.trinidad.desktop
とiPhone/iPhone.css
)を指定します。この要素に定義される値は、trinidad-config.xml
にある<skin-family>
タグのEL式で返された結果文字列です(例4-1参照)。7.2.1.1項「スキン・タイプの決定」も参照してください。
例4-3 スキンの定義
<?xml version="1.0" encoding="ISO-8859-1"?> <skins xmlns="http://myfaces.apache.org/trinidad/skin"> <skin> <id>iphone</id> <family>iPhonewebkit</family> <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id> <style-sheet-name> iPhone/iPhone.css </style-sheet-name> </skin> <skin> <id>symbian</id> <family>nokiawebkit</family> <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id> <style-sheet-name> symbian/symbian.css </style-sheet-name> </skin> <skin> <id>windowsMobile</id> <family>windowsmobile</family> <render-kit-id>org.apache.myfaces.trinidad.pda</render-kit-id> <style-sheet-name> windowsMobile/windowsMobile.css </style-sheet-name> </skin> <skin>
CSS 3.0の機能により、ADFモバイル・ブラウザ・アプリケーションはルック・アンド・フィールをネイティブのiPhoneアプリケーションと同じにすることができます。新規スキンをiPhone用Trinidadで作成することにより、iPhone固有のコンポーネントを含めることができます。これらのコンポーネントの例を次に示します。
ヘッダー
ナビゲーション・パネル
フィールド・セット
これらのコンポーネントはstyleClass
属性を使用してスタイル・クラスを適用する方法を示します。
<tr:panelHeader>
および<tr:commandLink>
コンポーネントとともに使用されるbackButton
、toolBar
、toolBar > h1
およびbutton
スタイル・クラスは、図4-2に示すようにヘッダーの外観を設定します。
表4-1では、ヘッダーの作成に使用するタグ、タグに定義されるスタイル・クラス、そしてこれらのクラスのレイアウト効果を示しています。
表4-1 ヘッダー・コンポーネントのクラス
タグ | スタイル・クラス | レイアウト効果 |
---|---|---|
|
ヘッダーの高さ、幅、枠線および背景を設定します。 |
|
|
|
ヘッダーの「戻る」ボタンの幅、高さ、色および位置を設定します。 |
|
|
ヘッダーのボタンの幅、高さ、色および位置を設定します。 |
toolbar
例4-4では、ヘッダーの高さ、幅、枠線および背景を設定するtoolbar
スタイル・クラス・セレクタを示しています。
例4-4 toolbarスタイル・クラス・セレクタ
.toolbar { box-sizing: border-box !important; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; border-bottom: 1px solid #2d3642 !important; border-top: 1px solid #000000 !important; padding: 10px !important; height: 45px !important; background: url(/images/toolbar.png) #6d84a2 repeat-x !important; display: block !important; }
toolbar > h1
例4-5では、ツールバー・タイトルの高さ、幅、フォント・サイズおよびスタイルを設定するtoolbar > h1
スタイル・クラス・セレクタを示しています。
例4-5 toolbar > h1スタイル・クラス・セレクタ
.toolbar > h1 { position: absolute !important; overflow: hidden !important; left: 50% !important; margin: 1px 0 0 -75px !important; height: 45px !important; font-size: 20px !important; width: 150px !important; font-weight: bold !important; text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0 !important; text-align: center !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: #FFFFFF !important; border-bottom: none !important; }
button
例4-6では、ヘッダーのボタンの幅、高さ、色および位置を設定するbutton
スタイル・クラス・セレクタを示しています。
例4-6 buttonスタイル・クラス・セレクタ
.button { position: absolute !important; overflow: hidden !important; top: 8px !important; right: 6px !important; margin: 0 !important; border-width: 0 5px !important; padding: 0 3px !important; width: auto !important; height: 30px !important; line-height: 30px !important; font-family: inherit !important; font-size: 12px !important; font-weight: bold !important; color: #FFFFFF !important; text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0 !important; text-overflow: ellipsis !important; text-decoration: none !important; white-space: nowrap !important; background: none !important; -webkit-border-image: url(/images/toolButton.png) 0 5 0 5 !important; }
backButton
例4-7では、ヘッダーの「戻る」ボタンの幅、高さ、色および位置を設定するbackbutton
スタイル・クラス・セレクタを示しています。
例4-7 backbuttonスタイル・クラス・セレクタ
.backButton { position: absolute !important; overflow: hidden !important; top: 8px !important; left: 6px !important; margin: 0 !important; height: 30px !important; max-width: 45px !important; line-height: 30px !important; font-family: inherit !important; font-size: 12px !important; font-weight: bold !important; color: #FFFFFF !important !important; text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0 !important; text-overflow: ellipsis !important; text-decoration: none !important; white-space: nowrap !important; background: none !important; -webkit-border-image: url(/images/toolButton.png) 0 5 0 5 !important; padding: 0 !important; border-width: 0 8px 0 14px !important; -webkit-border-image: url(/images/backButton.png) 0 8 0 14 !important; }
ナビゲーション・パネルを定義するスタイル・クラスには、次の2つがあります。
静的リストでは、Panel List
スタイル・クラスを使用します。このスタイル・クラスは、ナビゲーション・アイテムの単純なリストを表示します。このリストの幅、位置および高さを設定します。
動的リストでは、Table List
スタイル・クラスを使用します。
<tr:panelList>
コンポーネント内にPanel List
スタイル・クラスを、例4-9で示すように各ナビゲーション・アイテムで<tr:commandLink>
タグを使用して定義します。
例4-9 ナビゲーション・アイテムの静的リストの定義
<tr:panelList styleClass="panelList"> <tr:commandLink text="commandLink 1"/> <tr:commandLink text="commandLink 2"/> <tr:commandLink text="commandLink 3"/> </tr:panelList>
表4-2で示しているような式を使用すると、多くのCSS機能がこのコンポーネントで、デフォルトで適用されます。
表4-2 CSS式
CSS式 | レイアウト効果 |
---|---|
|
リストの幅、位置および高さを設定します。 |
リスト内の各アイテムの下部の位置および枠線を設定します。 |
|
|
|
panelList ul
例4-10では、リストの幅、位置および高さを設定するpanelList ul
スタイル・クラス・セレクタを示しています。
例4-10 panelList ulスタイル・クラス・セレクタ
.panelList ul { position: absolute !important; margin: 0 !important; padding: 0 !important; left: 0 !important; top : 45px !important; width: 100% !important; min-height: 372px !important; }
panelList ul > li
例4-11では、リスト内の各アイテムの下部の位置および枠線を設定するpanelList ul > li
スタイル・クラス・セレクタを示しています。
例4-11 panelList ul > liスタイル・クラス・クラスタ
.panelList ul > li { position:relative !important; margin:0 !important; border-bottom:1px solid #E0E0E0 !important; padding:8px 0 8px 10px !important; list-style:none !important }
panelList ul > li > a
例4-12では、各ナビゲーション・アイテムのマージン、フォント・サイズ、高さおよび背景を設定するpanelList ul > li > a
スタイル・クラス・セレクタを示しています。
例4-12 panelList ul > li > aスタイル・クラス・セレクタ
.panelList ul > li > a { display:block !important; margin:-8px 0 -8px -10px !important; padding:8px 32px 8px 10px !important; text-decoration:none !important; color:inherit !important; background:url(/images/listArrow.png) no-repeat right center !important; min-height:34px !important; font-size:20px; font-weight:bold; }
Table List
コンポーネントを使用すると、例4-13で示すように、動的リンクのリストを含む表などの動的表を作成できます。Table List
コンポーネントは実際は表であるため、組込みナビゲーションを含んでいます。Panel List
とは異なり、Table List
は、図4-4で示すように、ナビゲーション・アイテムの下にイメージおよび詳細説明を含めるためのスタイル・クラスを含みます。
例4-13 動的リンクのリストの作成
<tr:table value="#{bindings.EmployeesView15.collectionModel}" var="row" rows="7" width="100%" styleClass = “iphoneTable” emptyText="#{bindings.EmployeesView15.viewable ? 'No rows yet.' :" id="mainTable" horizontalGridVisible="false"> <tr:column > <tr:panelGroupLayout layout="vertical" styleClass="listing"> <tr:outputText value="#{row.bindings.PhoneNumber.inputValue}" styleClass="listingDetails"/> <tr:commandLink text="#{row.bindings.LastName.inputValue} , #{row.bindings.FirstName.inputValue}" styleClass="listingLink" partialSubmit="true" actionListener = "#{agentUtil.gotoPage2}" id="myLink1" disabled="#{!bindings.Execute.enabled}" onclick='iPhone.slideFragments("page2", "page1")'> </tr:commandLink> <tr:image styleClass="listingImage" source="/images/326425649.png"/> </tr:panelGroupLayout> </tr:column> </tr:table>
動的リンクの表を作成するには、次の手順を実行します。
データ・コントロールからTrinidad読取り専用表を作成します。
表のstyleClass
属性を、iphoneTable
として設定します。
表4-3でリストされている式は、styleClass
をiPhoneTable
として設定するときにiPhone関連のCSSプロパティを適用します。
表の幅を100に設定します。
horizontalGridVisible
属性をfalse
に設定します。
注意:
|
表4-4は、<column>
タグのサブ要素のスタイル・クラスを示しています。
表4-4 表のListingスタイル・クラス
要素 | スタイル・クラス | レイアウト効果 |
---|---|---|
|
|
各行の位置および枠線を設定します。 |
|
|
イメージの幅、位置および高さを設定します。 |
|
|
ナビゲーション・アイテムの位置、高さ、フォント・サイズ、文字列合わせ、背景イメージおよび色を設定します。 |
|
|
ナビゲーション説明の位置、高さ、フォント・サイズ、文字列合わせ、背景イメージおよび色を設定します。 |
listing
例4-14では、各行の位置および枠線を設定するlisting
スタイル・クラス・セレクタを示しています。
例4-14 listingスタイル・クラス・セレクタ
.listing { position: relative !important; margin: 0 !important; border-bottom: 1px solid #E0E0E0 !important; padding: 8px 0 8px 10px !important; font-size: 20px !important; font-weight: bold !important; list-style: none !important; }
listingLink
例4-15では、イメージの幅、位置および高さを設定するlistingLink
スタイル・クラス・セレクタを示しています。
例4-15 listingLinkスタイル・クラス・セレクタ
.listingLink { display: block !important; margin: -8px 0 -8px -10px !important; padding: 8px 32px 8px 10px !important; text-decoration: none !important; color: inherit !important; background: url(/images/listArrow.png) no-repeat right center !important ; padding-left: 54px !important; padding-right: 40px !important; min-height: 34px !important; font-size: 20px !important; font-weight: bold !important; }
listingDetails
例4-16では、ナビゲーション・アイテムの位置、高さ、フォント・サイズ、文字列合わせ、背景イメージおよび色を設定するlistingDetails
スタイル・クラス・セレクタを示しています。
例4-16 listingDetailsスタイル・クラス・セレクタ
.listingDetails { display: block !important; position: absolute !important; margin: 0 !important; left: 54px !important; top: 27px !important; text-align: left !important; font-size: 12px !important; font-weight: normal !important; color: #666666 !important; text-decoration: none !important; height: 13px !important; padding: 3px 0 0 0 !important; }
listingImage
例4-17では、ナビゲーション説明の位置、高さ、フォント・サイズ、文字列合わせ、背景イメージおよび色を設定するlistingImage
スタイル・クラス・セレクタを示しています。
宛先ページで、このコンポーネントはパネル・ナビゲーションで選択されたアイテムの詳細を表示します。図4-5で示すように、これらの詳細には選択した従業員の給与、電話番号、雇用日が含まれます。
この宛先ページ(複数のフィールド・セット・コンポーネントで構成されています)は1つ以上の行を含み、各行はラベルまたはメッセージ(単純テキストまたは他のナビゲーション・アイテムのいずれか)を含みます。例4-18で示すように、<div>
タグを使用してこれらの行を作成します。<div>
タグは、<tr:panelCaptionGroup>
コンポーネントのサブ要素です。
例4-18 フィールド・セットの作成
<div class="panelBase“> <tr:panelCaptionGroup> <div class="row"> <tr:outputText styleClass="labeltext" value="#{agentUtil.name}" truncateAt="0"/> <tr:outputText styleClass="messageText" value="#{sessionScope.FirstName}" /> </div> <div class="row"> <tr:outputText styleClass="labeltext" value="Last Name"/> <tr:commandLink text="#{sessionScope.LastName}" styleClass="messageLink" partialSubmit="true" id="myLink2" actionListener="#{agentUtil.gotoPage3}" onclick='iPhone.slideFragments("page3",page2");'/> </div> </tr:panelCaptionGroup> <tr:panelCaptionGroup> <div class="row"> <tr:outputText styleClass="labeltext" value="Email"/> <tr:outputText styleClass="messageText" value="#{bindings.LastName}@oracle.com"/> </div> <div class="row"> <tr:outputText styleClass="labeltext" value="Salary"/> <tr:outputText styleClass="messageText" }" value="#{sessionScope.Salary}"/> </div> <div class="row"> <tr:outputText styleClass="labeltext" value="Phone" truncateAt="5"/> <tr:outputText styleClass="messageText" value="#{sessionScope.PhoneId}"/> </div> <div class="row"> <tr:outputText styleClass="labeltext" value="Hired" truncateAt="7"/> <tr:outputText styleClass="messageText" value="#{sessionScope.HireDate}"/> </div> <div class="row"> <tr:outputText styleClass="labeltext" value="Phone" truncateAt="5"/> <tr:outputText styleClass="messageText" value="#{sessionScope.PhoneId}"/> </div> <div class="row"> <tr:outputText styleClass="labeltext" value="Hired" truncateAt="7"/> <tr:outputText styleClass="messageText" value="#{sessionScope.HireDate}"/> </div> <div class="row"> <tr:outputText styleClass="labeltext" value="Hired" truncateAt="7"/> <tr:outputText styleClass="messageText" value="#{sessionScope.HireDate}"/> </div> </tr:panelCaptionGroup> </div>
フィールド・セット・コンポーネントを作成するには、次の手順を実行します。
例4-18に示すように、<div>
タグを必要なだけ<tr:panelCaptionGroup>
コンポーネント内に挿入します。
行を作成するには、各々の<div>
タグをrowクラス属性によって定義します。次に例を示します。
<div class="row">
row
属性は、各行の位置、高さおよび枠線を設定します。
各<div>
タグ内で、ラベル要素を次のように作成します。
<tr:outputText>
タグを作成します。
StyleClass
をlabeltextとして定義して、ラベル要素の位置、幅、フォントおよび色を設定します。
次に例を示します。
<tr:outputText styleClass="labeltext" value="Phone" truncateAt="5"/>
次のように<tr:outputText>
タグかまたは<tr:commandLink>
コンポーネントを使用して、メッセージ要素を作成します。
styleClass
がmessageText
に設定された<tr:outputText>
コンポーネント。次に例を示します。
<tr:outputText styleClass="messageText" value="#{sessionScope.PhoneId}"/>
messageTextスタイル・クラスは、ラベル要素の位置、幅、フォントおよび色を設定します。
例4-19では、styleClass
がmessageLink
に設定された<tr:commandLink>
コンポーネントを示しています。
例4-19 styleClass属性をmessageLinkとして設定する
<tr:commandLink text="#{sessionScope.LastName}" styleClass="messageLink" partialSubmit="true" id="myLink2" actionListener="#{agentUtil.gotoPage3}" onclick='iPhone.slideFragments("page3", "page2");'/>
messageLink要素は、メッセージ要素の位置、幅、フォント、高さおよび色を設定します。
パネル・ベース背景では、<div>
タグをpanelBaseクラス属性で折り返します(例4-18を参照)。
この項では、フィールド・セット・コンポーネントのスタイル・クラスと、それらのレイアウト・プロパティを示しています。
labeltext
例4-19では、ラベル要素の位置、幅、フォントおよび色を設定するlabeltext
スタイル・クラス・セレクタを示しています
例4-20 labeltextスタイル・クラス・セレクタ
.labeltext { position: absolute !important; margin: 0 0 0 14px !important; line-height: 42px !important; font-weight: bold !important; color: #7388a5 !important; text-align: right !important; width: 90px !important; white-space: nowrap !important; }
messageText
例4-21では、メッセージ要素の位置、幅、フォントおよび色を設定するmessageText
スタイル・クラス・セレクタを示しています。
例4-21 messageTextスタイル・クラス・セレクタ
.messageText { display: block !important; margin: 0 !important; border: none !important; padding: 12px 10px 0 110px !important; text-align: left !important; font-weight: bold !important; text-decoration: inherit !important; height: 42px !important; color: inherit !important; box-sizing: border-box !important; -webkit-box-sizing: border-box !important; }
messageLink
例4-22では、メッセージ・リンク要素の位置、幅、フォントおよび色を設定するmessageLink
スタイル・クラス・セレクタを示しています。
例4-22 messageLinkスタイル・クラス・セレクタ
.messageLink { display: block !important; text-align: left !important; text-decoration: none !important; color: inherit !important; background: url(/images/listArrow.png) no-repeat right center !important ; padding-top: 12px !important; padding-left: 111px !important; padding-right: 40px !important; min-height: 34px !important; font-size: 16px !important; font-weight: bold !important; }
panelBase
例4-23では、パネル・ベースの背景を設定するpanelBase
スタイル・クラス・セレクタを示しています。
例4-23 panelBaseスタイル・クラス・セレクタ
.panelBase { box-sizing: border-box !important; -webkit-box-sizing: border-box !important; padding: 10px !important; background: #c8c8c8 url(/images/pinstripes.png) !important; }
panelBase fieldset
例4-24では、丸いエッジを設定するpanelBase fieldset
スタイル・クラス・セレクタを示しています。<fieldSet>
要素は、<tr:panelCaptionGroup>
コンポーネントのレンダラによってレンダリングされます。
例4-24 panelBase fieldsetスタイル・クラス・セレクタ
.panelBase fieldset { position: relative; margin: 0 0 20px 0; padding: 0; background: #FFFFFF; -webkit-border-radius: 10px; border: 1px solid #999999; text-align: right; font-size: 16px; }
row
例4-25では、各行の位置、高さおよび枠線を設定するrow
スタイル・クラス・セレクタを示しています。
例4-25 rowスタイル・クラス・セレクタ
.row { position: relative !important; min-height: 42px !important; border-top: 1px solid #999999 !important; -webkit-border-radius: 0 !important; text-align: right !important; }
row:first-child
例4-26では、row:first-child
スタイル・クラス・セレクタを示しています。
ほとんどのCSSクラスはstyleClass
属性を使用して特定のコンポーネントへ手動で適用しますが(例4-8を参照)、いくつかのCSS機能はiPhoneスキンを使用するときにデフォルトで適用されます。