| Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル・ブラウザ開発者ガイド 11gリリース1 (11.1.1.7.0) B72413-01 |
|
 前 |
 次 |
| 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スキンを使用するときにデフォルトで適用されます。
