| Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル・ブラウザ開発者ガイド 11g リリース2 (11.1.2.2.0) B66158-02 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル・ブラウザ開発者ガイド 11g リリース2 (11.1.2.2.0) B66158-02 |
|
前 |
次 |
この章では、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 3.0の機能により、Webアプリケーションはルック・アンド・フィールをネイティブのiPhoneアプリケーションと同じにすることができます。新規スキンをiPhone用Trinidadで作成することにより、iPhone固有のコンポーネントを含めることができます。これらのコンポーネントの例を次に示します。
ヘッダー
ナビゲーション・パネル
フィールド・セット
これらのコンポーネントはスタイル・クラスの適用方法と、styleClass属性を使用してスタイル・クラスを定義する方法を示します。
<tr:panelHeader>および<tr:commandLink>コンポーネントとともに使用されるbackButton、toolBar、toolBar > h1、およびbuttonスタイル・クラスは、ヘッダーの外観を設定します(Figure 4-2)。
表4-2では、ヘッダーの作成に使用するタグ、タグ内に定義するスタイル・クラス、そしてこれらのクラスのレイアウト効果を示しています。
表4-2 ヘッダー・コンポーネントのクラス
| タグ | スタイル・クラス | レイアウト効果 |
|---|---|---|
|
|
ヘッダーの高さ、幅、枠線、および背景を設定します |
|
|
|
|
ヘッダーの「戻る」ボタンの幅、高さ、色および位置を設定します |
|
|
|
ヘッダーのボタンの幅、高さ、色および位置を設定します |
toolbar
例4-3では、ヘッダーの高さ、幅、枠線、および背景を設定するtoolbarスタイル・クラスを示しています。
例4-3 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-4では、ツールバー・タイトルの高さ、幅、フォント・サイズ、およびスタイルを設定するtoolbar > h1スタイル・クラスを示しています。
例4-4 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-5では、ヘッダーのボタンの幅、高さ、色、および位置を設定するbuttonスタイル・クラスを示しています。
例4-5 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-6では、ヘッダーの「戻る」ボタンの幅、高さ、色、および位置を設定するbackbuttonスタイル・クラスを示しています。
例4-6 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-8で示すように各ナビゲーション・アイテムで<tr:commandLink>タグを使用して定義します。
例4-8 ナビゲーション・アイテムの静的リストの定義
<tr:panelList styleClass="panelList">
<tr:commandLink text="commandLink 1"/>
<tr:commandLink text="commandLink 2"/>
<tr:commandLink text="commandLink 3"/>
</tr:panelList>
図4-3のように、表4-3で示しているような式をiPhoneスキンで使用していると、多くのCSS機能がこのコンポーネントで、デフォルトで適用されます。
表4-3 CSS式
| CSS式 | レイアウト効果 |
|---|---|
|
|
リストの幅、位置、および高さを設定します |
|
リスト内の各アイテムの下部の位置および枠線を設定します |
|
|
|
|
panelList ul
例4-9では、リストの幅、位置、および高さを設定するpanelList ulスタイル・クラスを示しています。
例4-9 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-10では、リスト内の各アイテムの下部の位置および枠線を設定するpanelList ul > liスタイル・クラスを示しています。
例4-10 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-11では、各ナビゲーション・アイテムのマージン、フォント・サイズ、高さ、および背景を設定するpanelList ul > li > aスタイル・クラスを示しています。
例4-11 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-12で示すように、動的リンクのリストを含む表などの動的表を作成できます。Table Listコンポーネントは表であるため、組込みナビゲーションを含んでいます。Panel Listとは異なり、Table Listは、図4-4で示すように、ナビゲーション・アイテムの下にイメージおよび詳細説明を含めるためのスタイル・クラスを含みます。
例4-12 動的リンクのリストの作成
<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-4でリストされている式は、styleClassをiPhoneTableとして設定するときに必須のiPhone関連のCSSプロパティを適用します。
表の幅を100に設定します。
horizontalGridVisible属性をfalseに設定します。
|
注意:
|
表4-5は、<column>タグのサブ要素内で使用されるスタイル・クラスを示しています。
表4-5 表のListingスタイル・クラス
| 要素 | スタイル・クラス | レイアウト効果 |
|---|---|---|
|
レイアウト属性が垂直方向の |
|
各行の位置および枠線を設定します |
|
|
|
イメージの幅、位置、および高さを設定します |
|
|
|
ナビゲーション・アイテムの位置、高さ、フォント・サイズ、文字列合わせ、背景イメージ、および色を設定します |
|
|
|
ナビゲーション説明の位置、高さ、フォント・サイズ、文字列合わせ、背景イメージ、および色を設定します |
listing
例4-13では、各行の位置および枠線を設定するlistingスタイル・クラスを示しています。
例4-13 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-14では、イメージの幅、位置、および高さを設定するlistingLinkスタイル・クラスを示しています。
例4-14 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-15では、ナビゲーション・アイテムの位置、高さ、フォント・サイズ、文字列合わせ、背景イメージ、および色を設定するlistingDetailsスタイル・クラスを示しています。
例4-15 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-16では、ナビゲーション説明の位置、高さ、フォント・サイズ、文字列合わせ、背景イメージ、および色を設定するlistingImageスタイル・クラスを示しています。
宛先ページで、このコンポーネントはパネル・ナビゲーションで選択されたアイテムの詳細を表示します。図4-5で示すように、これらの詳細には選択した従業員の給与、電話番号、雇用日が含まれます。
Destination Page - Field Setコンポーネントは1つ以上の行を含み、各行はラベルまたはメッセージ(単純テキストの場合もあれば他のナビゲーション・アイテムの場合もあります)を含みます。例4-17で示すように、<div>タグを使用してこれらの行を作成します。<div>タグは、<tr:panelCaptionGroup>コンポーネントのサブ要素です。
例4-17 フィールド・セットの作成
<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>
フィールド・セット・コンポーネントを作成するには、次の手順を実行します。
<div>タグを必要なだけ<tr:panelCaptionGroup>コンポーネント内に挿入します(例4-17を参照)。
行を作成するには、各々の<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-18では、styleClassがmessageLinkに設定された<tr:commandLink>コンポーネントを示しています。
例4-18 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-17を参照)。
この項では、フィールド・セット・コンポーネントのスタイル・クラスと、それらのレイアウト・プロパティを示しています。
labeltext
例4-18では、ラベル要素の位置、幅、フォント、および色を設定するlabeltextスタイル・クラスを示しています
例4-19 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-20では、メッセージ要素の位置、幅、フォント、および色を設定するmessageTextスタイル・クラスを示しています。
例4-20 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
.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-21では、パネル・ベースの背景を設定するpanelBaseスタイル・クラスを示しています。
例4-21 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-22では、丸いエッジを設定するpanelBase fieldsetスタイル・クラスを示しています。<fieldSet>要素は、<tr:panelCaptionGroup>コンポーネントのレンダラによってレンダリングされます。
例4-22 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-23では、各行の位置、高さ、および枠線を設定するrowスタイル・クラスを示しています。
例4-23 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-24では、row:first-childスタイル・クラスを示しています。
ほとんどのCSSクラスはstyleClass属性を使用して特定のコンポーネントへ手動で適用しますが(例4-7を参照)、いくつかのCSS機能はiPhoneスキンを使用するときにデフォルトで適用されます。
多くのコンポーネントではCSSスタイルが自動的に適用されますが、一部のコンポーネントではスタイル・クラスをそのstyleClass属性に手動で設定する必要があります。
<tr:panelHeader>コンポーネントにstyleClass属性を追加すると、様々なブラウザでタイトルのみのヘッダーと、タイトルおよびリンク付きのヘッダーを表示できます。
タイトルのみのヘッダーを作成するには、例4-25に示すように、styleClass="af_m_toolbar"を<tr:panelHeader>コンポーネントに追加します。
図4-6は、このADFモバイル・ブラウザ属性により、タイトルのみのヘッダーがApple iPhone上でどのように作成されるかを示しています。
表4-6は、タイトルのみのヘッダーがWindows Mobileデバイス、BlackBerryスマートフォンおよびNokia Webkit上でどのように表示されるかを示す例です。
図4-7に示すように、ヘッダー内にリンクおよびタイトルを追加できます。図4-7は、Apple iPhone上に表示されたこのタイプのヘッダーを示しています。
4.4.1.1項「タイトルのみのヘッダーの作成」で説明したように、<tr:panelHeader>要素内にstyleClass="af_m_toolbar"を追加することによって、ヘッダーのタイトル(図4-7ではTransferというタイトル)を定義します。例4-26に示すように、リンクは、子である<tr:commandLink>要素内にボタン(それぞれstyleClass="af_m_backButton"およびstyleClass="af_m_button")として定義されています。例4-26の<tr:panelHeader>要素には、これらの属性(太字)が含まれています。
例4-26 ヘッダーへのタイトルおよびリンクの追加
<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-7は、タイトルおよびリンクを含む<tr:panelHeader>がWindows Mobileデバイス、BlackBerryスマートフォンおよびNokia Webkit上でどのように表示されるかを示す例です。
styleClass属性を使用すると、ADFモバイル・ブラウザ・アプリケーション内の表コンポーネントを様々なブラウザ上で適切にレンダリングできます。
ターゲット・プラットフォーム上でスタイルを適切に適用するためにstyleClass属性を含める必要があるパネル・ヘッダーとは異なり、表の列ヘッダーには属性は必要ありません。かわりに、3.7.1項「表の作成」で説明した<tr:columns>コンポーネントを使用します。図4-8では、列ヘッダーがApple iPhoneでレンダリングされる様子を示しています。
例4-27は、<tr:columns>要素(太字)の定義方法を示しています。
例4-27 列ヘッダーの作成
<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-8は、列ヘッダーがWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。
図4-9は、styleClassの値af_m_listingLinkおよびaf_m_listingDetailsを使用して作成した、表内のリンクおよび詳細です。
例4-28に示すように、これらの機能を作成するには、<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-28 詳細付きのリンクの追加
<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-9は、イメージ、リンクおよび詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。
図4-10は、表内に主要な詳細およびリンクを作成する方法を示しています。
4.4.2.2項「イメージおよびリンク付きの主要な詳細の追加」で説明したイメージ付きの主要なリンクおよび詳細の追加と同様、これらの機能を作成するには、<tr:panelGroupLayout>コンポーネントを<tr:column>コンポーネントの子として追加します。次に、例4-29に示すように、styleClass="af_m_listingLink"およびstyleClass="af_m_listingDetails"属性をpanelGroupLayoutの<tr:commandLink>および<tr:outputText>サブコンポーネントに追加します。tr:panelGroupLayout、tr:commandLinkおよびtr:outputTextの詳細は、第3章「コンポーネントのサポート」を参照してください。
例4-29 主要な詳細およびリンク
<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-10は、リンクおよび詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。
図4-11に示すように、af_m_listingPrimaryDetailsおよびaf_m_listingDetailsスタイル・クラスを使用すると、リンクとして機能しない詳細を作成できます。これらの動作は、4.4.2.2項「イメージおよびリンク付きの主要な詳細の追加」で説明した主要な詳細とは異なります。
例4-30に示すように、リンクなしの主要な詳細を作成するには、styleClass=af_m_listingPrimaryDetailsおよびstyleClass="af_m_listingDetails"を<tr:outputText>要素に追加します。この要素は、(<tr:column>要素の子である)<tr:panelGroupLayout>要素の子です。
例4-30 リンクなしの主要な詳細の追加
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-11は、リンクなしの詳細がWindows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上でどのように表示されるかを示す例です。
図4-12に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClassの値をaf_m_panelBaseとして定義すると、<tr:panelList>コンポーネントにパディングが適用されます。
例4-31に示すように、子の<tr:panelList>コンポーネントにstyleClass属性を含める必要はありません。<tr:panelList>および<tr:panelGroupLayout>の使用の詳細は、3.2.2項「リストの作成」および3.4項「レイアウト・コンポーネント」を参照してください。
例4-31 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-12は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelList>コンポーネント内のパディングを示す例です。
図4-13に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClass属性の値をaf_m_panelBaseとして定義すると、子の<tr:panelFormLayout>コンポーネントにパディングが適用されます。
例4-32に示すように、<tr:panelFormLayout>コンポーネントにstyleClassを追加する必要はありません。
例4-32 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-13は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelList>コンポーネント内のパディングを示す例です。
図4-14に示すように、<tr:panelGroupLayout>コンポーネント内でstyleClassコンポーネントの値をaf_m_panelBaseとして定義すると、その<tr:panelAccordion>コンポーネントにパディングが適用されます。
例4-33に示すように、<tr:panelAccordion>コンポーネントにstyleClass属性を追加する必要はありません。
例4-33 <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-33は、Windows Mobileデバイス、Nokia WebkitおよびBlackBerryスマートフォン上での<tr:panelAccordion>コンポーネント内のパディングを示す例です。
