Oracle Fusion MiddlewareMobile Browser Developers Guide for Oracle App - PDF document

1 Oracle® Fusion MiddlewareMobile Browser
Oracle® Fusion MiddlewareMobile Browser Developer's Guide for Oracle Application Development Framework Release 1 (11.1.1) April 2010 iii ................................................................................................................................................................ Documentation Accessibility.................................................................................................................... Audience...................................................................................................................................................... Related Documents.....................................................................................................

2 .............................. Conven
.............................. Conventions............................................................................................................................................... 1 Overview of Oracle 1.1About ADF Mobile Browser...................................................................................................... 1.1.1About Java Server Faces and the Application Development Framework .................. 1.1.2Developing Mobile Applications Using ADF Mobile Browser.................................... 1.2Supported Mobile Browsers......................................................................................................2 Configuring the 2.1About the ADF Mobile Browser Development En

3 vironment...............................
vironment.............................................. 2.2Configuring the ADF Mobile Browser Development Environment .................................. 2.2.1How to Configure the Environment by Creating a Mobile Application and Project ....... 2-12.2.2What Happens When You Create a Mobile Application and Project.......................... 2.3Developing an ADF Mobile Browser Application................................................................. 2.3.1How to Develop an ADF Mobile Browser Application by Creating a Mobile JSF Page... 2-62.3.2What Happens When You Create a Mobile JSF Page..................................................... 2.4Testing an ADF Mobile Browser Application......................

4 ........................................
.................................................. 2.4.1How to Test ADF Mobile Browser Applications on Emulators................................... 2.4.2What You May Need to Know About Browser Settings............................................. 2-103 Component Support 3.1About Apache My Faces Trinidad Components.................................................................... 3.1.1Supported Features.............................................................................................................3.1.2Partial Page Rendering........................................................................................................ 3.1.3Dialogs............................................................

5 ........................................
....................................................................... 3.1.4Rendering Specific to the BlackBerry Browser 4.5 and Earlier Versions..................... 3.2Input Components...................................................................................................................... 3.2.1Creating Input Text Fields.................................................................................................. 3.2.2Creating Lists........................................................................................................................ vi You can also find information about ADF (Application Development Framework) in Oracle Fusion Middleware Web User Interface Developer's Gui

6 de for Oracle Application Development Fr
de for Oracle Application Development FrameworkConventionsThe following text conventions are used in this document:ConventionMeaningboldfaceBoldface type indicates graphical user interface elements associated with an action, or terms defined in text or the glossary.italicItalic type indicates book titles, emphasis, or placeholder variables for which you supply particular values.monospaceMonospace type indicates commands within a paragraph, URLs, code in examples, text that appears on the screen, or text that you enter. About ADF Mobile BrowserMobile Browser Developer's Guide for Oracle Application Development Frameworkproduction of markup and responses to browser requests by generating the markup representations of com

7 ponents and the way in which these compo
ponents and the way in which these components should interpret browser requests.JSF development focuses on components, not markup. Using JSF, you create a JSP page containing JSF component tags. When a user visits this page (through the FacesServlet) JSF uses the renderkit specified by the user’s device to encode the markup for the appropriate output. For example, if the user’s device specifies HTML for a desktop browser, then the renderkit’s markup encoding results in an HTML page. In addition to rendering appropriate content, JSF supports user interaction.Application Development Framework (ADF) is built on the standard JSF technology and provides the following:A large component set (since JSF provides only basic comp

8 onents)Renderers that support these comp
onents)Renderers that support these components in HTML browsers, including a rich renderkit for applications using AJAX technologiesConverters, validators, and events1.1.2Developing Mobile Applications Using ADF Mobile BrowserYou can use the same programming model and component set for developing desktop browser applications to develop mobile browser applications for mobile devices. ADF Mobile browser application development is almost identical to ADF Web application development, except that ADF Mobile browser application development uses only mobile JSF pages that consist of Apache MyFaces Trinidad components. For more information on developing ADF Web applications, see Oracle Fusion Middleware Web User Interface Deve

9 loper's Guide for Oracle Application Dev
loper's Guide for Oracle Application Development FrameworkDeveloping mobile browser applications for mobile devices with ADF Mobile browser leverages the same methodologies used in developing JSF applications for the desktop but with a few specific mobile extensions. With support for over 60 Apache MyFaces Trinidad components, you can build applications with the rich component set, each of which renders appropriately for small-screen mobile devices. In this way, you can reuse the desktop browser application’s model and controller layers to assemble a new view layer for mobile devices by using similar Apache MyFaces Trinidad components.How ADF Mobile Browser Improves PerformanceThe PDA component renderers have been opWe

10 b page sent to the mobile device for imp
b page sent to the mobile device for improved performance over wireless networks. In mobile environments with high-latency and low-bandwidth wireless networks, Partial Page Rendering (PPR) is essential in providing end-users with an efficient application. For mobile browsers supporting AJAX, ADF Mobile browser supports PPR for certain components to minimize the amount of data requested from You cannot use ADF Faces components to develop an ADF Mobile browser application. You must use Apache MyFaces Trinidad Oracle JDeveloper only supports the JSF page flows for ADF Mobile browser application development. The ADF task flow is not Supported Mobile BrowsersOverview of Oracle ADF Mobile Browserthe server and improve the r

11 esponsiveness of the applications. See a
esponsiveness of the applications. See also Section3.1.2, "Partial Page Rendering."1.2Supported Mobile BrowsersADF Mobile browser supports Apache MyFaces Trinidad components on the browsers listed in Table1–1. Later versions of Trinidad can be integrated into Oracle JDeveloper and used with Oracle Fusion Middleware 11 release 1 of ADF Mobile browser.Table 1–1Supported Browsers and Supported Mobile FeaturesBrowserJavaScript SupportCSS SupportPPR SupportBlackBerry version 4.6 and laterYesYesYesBlackberry versions 4.2 through NoYesNoMicrosoft Windows Mobile 5YesYesYes (with nuances)Microsoft Windows Mobile 6YesYesYesApple iPhone SafariYesYesYesNokia s60 seriesYesYesNoPlain HTML (such as Opera Mini, Opera Mobile and Skyfir

12 e)NoYesNo Configuring the ADF Mobile Bro
e)NoYesNo Configuring the ADF Mobile Browser Development EnvironmentMobile Browser Developer's Guide for Oracle Application Development FrameworkFigure 2–4Selecting the Mobile Browser Technology for a ProjectFigure2–4 shows the Mobile Browser technology in the Available list. After you move the Mobile Browser technolgy to the Selected list, the following technologies are made available to the project and also appear in the Selected list, as shown in Figure2–5JavaJSF (JavaServer Faces)JSP and ServletsFigure 2–5Mobile Browser and Supporting Technologies Selected for a Project Developing an ADF Mobile Browser ApplicationMobile Browser Developer's Guide for Oracle Application Development FrameworkFigure 2–7Creating a Busin

13 ess Components Project within an ADF Mob
ess Components Project within an ADF Mobile Browser Application2.3.1How to Develop an ADF Mobile Browser Application by Creating a Mobile JSF PageYou develop an ADF Mobile browser application by first creating a JSP page and then populating it with the Apache My Faces Trinidad components.To create a mobile JSF page:File and then New. The New Gallery appears.In the New Gallery, expand CategoriesWeb Tier, and then select JSF and and click Project Technologies (the default) must be selected from the Filter By list. Developing an ADF Mobile Browser ApplicationConfiguring the ADF Mobile Browser EnvironmentFigure 2–8The New Gallery for JSF PagesEnter a name for the JSF page, and if needed a directory location for it in the

14 JSF Figure2–9Figure 2–9The Create JSF Pa
JSF Figure2–9Figure 2–9The Create JSF Page Dialog BoxFigure2–10 shows the designer for a mobile JSP page called page1.jspFrom the Components Palette, select the Trinidad components and then create the page using the Apache MyFaces Trinidad components. You can create the page in the same manner as a desktop ADF Web page. Because you added the Mobile Browser technology scope for the application, the Render in Mobile Device option is selected by default, as shown in Figure2–9 Testing an ADF Mobile Browser ApplicationMobile Browser Developer's Guide for Oracle Application Development FrameworkFigure 2–10Using the Trinidad Component Palette2.3.2What Happens When You Create a Mobile JSF PageBecause the Render in Mobile Devic

15 e option is selected by default, the pag
e option is selected by default, the page designer in the visual editor reflects the size of a mobile device, as illustrated in Figure2–102.4Testing an ADF Mobile Browser ApplicationYou can test an ADF Mobile browser application on a mobile device, a mobile device emulator, or a desktop browser. Testing on an actual mobile device or mobile device emulator provides more accurate results than does testing on a desktop browser.Using a desktop browser to test an ADF Mobile browser application produces only approximate results. Desktop browsers provide a fairly uniform testing environment: Web pages appear and behave similarly and business logic executes identically in any type of browser.Testing an application on an actual

16 mobile device, however, produces more a
mobile device, however, produces more accurate results, because the capabilities of mobile browsers may cause controls to behave differently than they do on a desktop browser. In addition, mobile browsers are usually smaller than desktop browsers. They also render pages differently than desktop browsers because Web servers optimize the look and feel by generating pages that are specific to the mobile browser.Testing ADF Mobile browser applications directly on mobile devices has limitations as well, in that you may not have access to all of the devices that you must test. Furthermore, firewalls can complicate testing. Many mobile devices can only access the Internet and therefore cannot reach development environments b

17 ehind a firewall. In such cases, mobile
ehind a firewall. In such cases, mobile device emulators provide an alternative testing method. For Tip:You change the size of the page in the visual editor or by ToolsMobile Testing an ADF Mobile Browser ApplicationConfiguring the ADF Mobile Browser Environment2-11Microsoft Windows Mobile 5 and 6, Microsoft Pocket Internet ExplorerFor optimal viewing, select the Fit to Screen view (accessed by selecting MenuView Fit to Screen). BlackBerry Browser 4.xADF Mobile browser only works if JavaScript support is enabled. To ensure that Select Options and then Browser ConfigurationEnsure that the following tables are selected:Support JavaScriptAllow JavaScript PopupSupport HTML TablesDo not select the One Column view because it

18 causes layout problems. Component Suppo
causes layout problems. Component Support Component SupportThis chapter describes the ADF Components that are supported by ADF Mobile browser.This chapter includes the following sections:Section3.1, "About Apache My Faces Trinidad Components"Section3.2, "Input Components"Section3.3, "Output Components"Section3.4, "Layout Components"Section3.5, "Navigation Components"Section3.6, "Data Visualization (Graphs and Gauges)"Section3.7, "Tables and Trees"Section3.8, "Unsupported Components and Attributes"3.1About Apache My Faces Trinidad ComponentsADF Mobile browser supports more than 60 of Apache MyFaces Trinidad components, enabling you to build applications with a rich component set that renders appropriately to the scree

19 ns of mobile devices. For more informati
ns of mobile devices. For more information, refer to the Apache MyFaces Trinidad site (http://myfaces.apache.org/trinidad3.1.1Supported FeaturesADF Mobile browser supports the following renderer-specific features for the supported browsers: Partial Page Rendering3.1.2Partial Page RenderingThe high latency and low bandwidth of networks in mobile environments decrease application responsiveness for mobile users. Screens refresh slowly, diminishing the mobile user experience. ADF Mobile browser’s support of Partial Page Rendering (PPR) compensates for the negative impact that slow connections have on screen updates by minimizing the amount of data requested from the server; using PPR, mobile device screen updates do not r

20 equire a full refresh. Browsers that do
equire a full refresh. Browsers that do not support AJAX (Asynchronous JavaScript and XML) use full page rendering instead of Input ComponentsMobile Browser Developer's Guide for Oracle Application Development FrameworkPPR. For example, a page submission on basic HTML browsers (which do not support JavaScript) results in the refresh of a full page.3.1.3DialogsADF Mobile browser supports dialogs, pages used by applications to obtain user input. Because mobile browsers cannot open a new window that contains a dialog (a pop-up window), dialogs appear as new pages within the main browser window after automatically preserving the state of the current page.3.1.4Rendering Specific to the BlackBerry Browser 4.5 and Earlier Ve

21 rsionsOn browsers for BlackBerry 4.5 and
rsionsOn browsers for BlackBerry 4.5 and earlier versions, the bullets in a list sublevel (such as those in a tr:panelList component) appear large and are not indented. The BlackBerry browser’s table handling may affect complex layouts; the BlackBerry browser does not allow horizontal scrolling. Instead, it wraps a table row onto multiple display lines which may disturb the layout. For more information, see Chapter6, "Design Guidelines for BlackBerry 4.2 to 4.5."3.2Input ComponentsADF Mobile browser supports input text fields and lists, core components that support user input.3.2.1Creating Input Text FieldsYou can create input fields using the following components:tr:inputColortr:inputDatetr:inputHiddentr:inputTextBrow

22 sers for BlackBerry 4.5 and earlier vers
sers for BlackBerry 4.5 and earlier versions do not support PPR. Specifying the attribute on certain form components results in the submission of the page after the user exits the field. A full, not partial, refresh of the page then follows.Mobile browsers do not support an inline or a dialog for the tr:inputColorBasic HTML browsers do not support the attribute of the Trinidad optimizes the tr:inputTextnarrow-screen devices (that is, devices with screen width measuring less than 240 pixels). For more information see Chapter7, "Narrow Screen Support and User-Agent Details Support." Layout ComponentsMobile Browser Developer's Guide for Oracle Application Development Framework3.3.2Displaying ImagesThe following compone

23 nts enable you to display images:tr:imag
nts enable you to display images:tr:imagetr:panelTip3.3.3Showing (or Hiding) ComponentsThe following components enable showing or hiding items:tr:panelAccordiontr:panelTabbedtr:showDetailtr:showDetailHeadertr:showDetailItem3.4Layout ComponentsThe layout components supported by ADF Mobile browser include those for managing the page itself (such as and ) as well as such components for laying out the sections of a page as tr:grouptr:panelFormLayout, and tr:panelGroupLayoutMobile browsers only support a full-page update; they do not partialTriggers attribute of the tr:panelAccordionTo save space on mobile devices, the renderer intentionally prevents the display of tab bars on both the top and bottom of the tr:panelTabbed

24 component. Valid values for the attribut
component. Valid values for the attribute positions are bottom is specified, then the renderer displays For the tr:showDetail component, the disclosure arrow does not display; instead [+] and [-] display.For the tr:showDetailHeader component, the disclosure arrow does not appear on mobile browsers.For the tr:showDetailItem component, the disclosure arrow does not appear on mobile browsers and is not Navigation ComponentsComponent Supporttr:goButtonChapter8, "Extending ADF Mobile Browser Applications" for information on how to use the tr:goButton, telephony, and Google maps into an application.3.5.2Creating LinksADF Mobile browser supports the following components for creating hyper-links:tr:commandLinktr:goLinkChapte

25 r8, "Extending ADF Mobile Browser Applic
r8, "Extending ADF Mobile Browser Applications" for information on how to use the component to integrate e-mail, telephony, and Google maps into an application.3.5.3Navigation ComponentsADF Mobile browser supports the tr:breadcrumbstr:commandNavigationItemBecause the attribute cannot display if the attribute has been set, buttons on mobile devices can have either text or an image, but not both. If you set the attribute to tr:commandButton component with an attribute renders as a static image with no links.Because the tr:commandLink component renders as an input element in basic mobile HTML browsers, its child components cannot render. For more information on input elements in basic mobile HTML browsers, see Sectio

26 n5.2, "Developing Applications for Basic
n5.2, "Developing Applications for Basic HTML Mobile Browsers."Trinidad optimizes the tr:breadcrumbsnarrow-screen devices (that is, devices with screen width measuring less than 240 pixels). For more information see Chapter7.1, "Determining Narrow Screen Support."tr:commandNavigationItem does not render when you set disabled attribute to for the following:tr:selectOneListBoxtr:selectOneChoicetr:processChoiceBartr:navigationPane with hint, tr:selectRangeChoiceBar Tables and TreesMobile Browser Developer's Guide for Oracle Application Development FrameworkFigure 3–2Selecting a Data ControlAfter you select either the Trinidad GraphsTrinidad Gauges options, the DVT wizard appears and opens to the Component Gallery page, s

27 hown in Figure3–3. You select the DVT ty
hown in Figure3–3. You select the DVT type from this page. Figure 3–3The Component Gallery for the DVT Wizard3.7Tables and TreesADF Mobile browser applications can display structured data in the rows and columns of a table or hierarchically in and trees.3.7.1Creating TablesADF Mobile browser supports tables comprised of the following components:tr:tableFor Oracle Fusion Middleware 11 release 1, ADF Mobile browser supports only static graphs and gauges which are rendered as PNG images. Any mobile device that supports this image format can display graphs and gauges. Unsupported Components and AttributesMobile Browser Developer's Guide for Oracle Application Development Framework3.8.2Unsupported AttributesRelease 11 of AD

28 F Mobile browser does not support the fo
F Mobile browser does not support the following component attributes on any component.accessKeyshortDesc (tooltip) 4 This chapter describes skinning for ADF Mobile browser applications.This chapter includes the following sections:Section4.1, "About ADF Mobile Browser Skinning"Section4.2, "Implementing ADF Mobile Browser Skinning"Section4.3, "Example iPhone Components"4.1About ADF Mobile Browser SkinningSkinning enables a page to display consistently on a variety of devices through the automatic delivery of device-dependent style sheets. These style sheets enable optimal display of pages that share the same page definitions on various mobile browsers. Within these style sheets, which enable you to set the look and feel

29 of an application, you not only tailor a
of an application, you not only tailor a component to a specific browser by setting its size, location, and appearance, but you also specify the types of browsers on which components can be displayed or hidden. For more information, see Section4.2, "Implementing ADF Mobile Browser Skinning." For examples of how to use skinning, see Section4.3, "Example iPhone Components," which includes an example of an iPhone skin. You can apply a similar style sheet to other mobile browsers, such as BlackBerry, Windows Mobile 6, and Nokia S60. Sample implementations are available from Oracle Technology Network (www.oracle.com/technologyFeatures supported on specific browsers require means other than customizing style sheets.4.2Implem

30 enting ADF Mobile Browser SkinningTo cre
enting ADF Mobile Browser SkinningTo create a skin, refer to Apache Trinidad SkinningDevelopment Guidelines for Apache MyFaces Trinidadhttp://myfaces.apache.org/trinidad/devguide/skinning.html) which includes descriptions on how to: Create a skin (trinidad-skins.xml, located in the either the WEB-INF or META-INF directories).Create a style sheet.Browsers must support the Cascading Style Sheet (CSS) syntax. Implementing ADF Mobile Browser Skinning4.2.2How to Specify the Renderkit and Style Sheet Name in trinidad-skins.xml, define the tags that specifies the render-kit-id and style-sheet-name (org.apache.myfaces.trinidad.desktop and iPhone/iPhone.css, respectively in Example4–3) for browser types identified in . The val

31 ue of is the result string from the EL
ue of is the result string from the EL expression in &#xskin;&#x-fa6;milytrinidad-config.xml (illustrated in Example4–1). See Section7.2.1.1, "Determining the Skin Type."Example 4–3Defining the Skinsml version="1.0" encoding="ISO-8859-1"&#x?x-7;&#x.700;? ins xmlns="http://myfaces.apache.org/trinidad/sk&#xsk-7;&#x.700;in"&#xsk-7;&#x.700;in &#xid00; iphone&#x/id-;.70; úm-;.70;ilyiPhonewebkitamily&#x/f-7;&#x.700; der-kit-id&#xren-;.70;org.apache.myfaces.trinidad.desktop/render-kit-id&#x-7.7; yle-sheet-name&#xst-7;&#x.700; iPhone/iPhone.css yle-sheet-name&#x/st-;.70; &#x/s-7;&#x.700;kin &#xsk-7;&#x.700;in &#xid00; symbian&#x/i-7;&#x.700;d úm-;.70;ilynokiawebkit&#x/fa-;

32 .70;mily der-kit-id&#xren-;.70;o
.70;mily der-kit-id&#xren-;.70;org.apache.myfaces.trinidad.desktop/render-kit-id&#x-7.7; yle-sheet-name&#xst-7;&#x.700; symbian/symbian.css style-sheet-na&#x/-7.;瀀me &#x/s-7;&#x.700;kin &#xsk-7;&#x.700;in &#xid00; windowsMobile&#x-7.7;/id úm-;.70;ilywindowsmobilefamil&#x/-7.;瀀y der-kit-id&#xren-;.70;org.apache.myfaces.trinidad.pda/render-kit-id&#x-7.7; le-sheet-n&#xsty-;.70;ame windowsMobile/windowsMobile.css le-sheet-&#x/sty;&#x-7.7;name &#x/-7.;瀀skin &#xsk-7;&#x.700;in 4.2.3How to Add the CSS Files to the ADF Mobile Browser Application ProjectInclude all of the CSS files (such as blackberry.css and in Figure4–1) in the View-Controller project as specified in Figure 4–

33 1CSS Files in the ADF Mobile Browser Pro
1CSS Files in the ADF Mobile Browser Project Example iPhone Components -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� h1Example4–5 illustrates the t�oolbar h1 style class, which sets the height, width, font size, and style of the toolbar title.Example 4–5The toolba�r h1 Style Class.toolbar� h1 { position: absolute !important; overflow: hidden !important; left: 50% !important; margin:

34 1px 0 0 -75px !important; height: 45p
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;buttonExample4–6 illustrates the style class, which sets the width, height, color, and position of a button in the header.Example 4–6The button Style Class.button { position: absolute !important; overflow: hidden !important; top: 8px !important; right: 6px !important; margin: 0 !important; border-width: 0 5px !important; padding

35 : 0 3px !important; width: auto !impo
: 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; Example iPhone ComponentsMobile Browser Developer's Guide for Oracle Application Development FrameworkpanelList� ul liExample4–11 illustrates the pan�elList ul li style class, which sets the position and border at the bottom for each item in the list.Example 4–11�The panelList ul li Style Class.p

36 anelList ul� li { position:re
anelList ul� li { position:relative !important; margin:0 !important; border-bottom:1px solid #E0E0E0 !important; padding:8px 0 8px 10px !important; list-style:none !importantpanelList�� ul li aExample4–12 illustrates the panelL��ist ul li a style class, which sets the margin, font size, height, and background for each navigation item.Example 4–12��The panelList ul li a Style Class.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 r

37 ight center !important; min-height:3
ight center !important; min-height:34px !important; font-size:20px; font-weight:bold;4.3.2.2Using the Table List Style Component to Create a Dynamic List of Navigation Items component enables you to build dynamic tables, such as a table that includes a list of dynamic links as illustrated by Example4–13. Because the component is a table, it includes built-in navigation. Unlike , the Table List includes style classes for including images and detailed descriptions below the navigation items, shown in Figure4–4Example 4–13Building a List of Dynamic Linkstable value="#{bindings.EmployeesView15.collectionModel}" var="row" rows="7"

38 width="100%" s
width="100%" styleClass = “iphoneTable” emptyText="#{bindings.EmployeesView15.viewable ? 'No rows yet.' : id="mainTable" horizontalGridVisible="false"&#xtr:-;.70; tr:column&#x-7.7; r:panelGroupLayout layout="vertical" styleClass="listing"&#xt-7.;瀀r:outputText value="#{row.bindings.PhoneNumber.inputValue}" styleClass="listingDetails"&#xt-7.;瀀/ commandLink text="#{row.bindings.LastName.inputValue} , #{row.bindings.FirstName.inputValue} “ Example iPhone Components styleClass="listingLink"

39 partialSubmit="true"
partialSubmit="true" actionListener = "#{agentUtil.gotoPage2}" id="myLink1" disabled="#{!bindings.Execute.enabled}" onclick='iPhone.slideFragments("page2", "page1")�' :commandL&#x/tr-;.70;ink image styleClass="listingImage" source="/images/326425649.png"/&#xtr:-;.70; tr:panelGroupLayout&#x/-7.;瀀 colum&#x/tr:;&#x-7.7;nr:tab&#x/t-7;&#x.700;leTo create a table of dynamic links:Create a Trinidad read-only table using data control.styleClass attribute for the table as The expressions listed

40 in Table4–3 apply the needed iPhone-rel
in Table4–3 apply the needed iPhone-related CSS properties when you set the as Set the width of the table to 100.horizontalGridVisible attribute to false.Table4–4 lists the style classes used within the subelements of the tag. Table 4–3CSS ExpressionExpressionLayout Effects.iphoneTable .af_table_contentSets the background color for the table content. It overrides the table’s default outer-border style to none..iphoneTable .af_table_control-bar-topSets the background color for the table controller (pagination).iphoneTable .af_column_cell-textSets the background color of the columnThere must be only one column within the tag. Within this column, all tags must be wrapped by a &#xtr:p; ne6;lGroupLayout component wit

41 h a Table 4–4Table Listing Style Classes
h a Table 4–4Table Listing Style ClassesElementStyle ClassLayout Effects:panelGroupLayout&#xtr6.;瀀 with layout attribute as verticallistingSets the position and the border for each row:panelLis&#xtr6.;瀀tlistingImageSets the width, position, and height of the image:commandL&#xtr6.;瀀ink : (navigation items)listingLinkSets the position, height, font size, text alignment, background image, and color of the navigation item Example iPhone ComponentsMobile Browser Developer's Guide for Oracle Application Development FrameworkFigure 4–4A Listing of Dynamic LinkslistingExample4–14 illustrates the listing style class, which sets the position and the border for each row.Example 4–14The listing StyleClass.listing { posit

42 ion: relative !important; margin: 0 !
ion: 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;listingLinkExample4–15 illustrates the listingLink style class, which sets the width, position, and height of the image.Example 4–15The listingLink StyleClass.listingLink { display: block !important; margin: -8px 0 -8px -10px !important; padding: 8px 32px 8px 10px !important; text-decoration: none !important;:outputTe&#xtr6.;瀀xtlistingDetailsSets the position, height, font size, text alignment, background image, and color of the navigation descriptionTable 4–4(Cont.)Table Lis

43 ting Style ClassesElementStyle ClassLayo
ting Style ClassesElementStyle ClassLayout Effects Example iPhone Components4-13 class="ro iv ;&#x-7.7;w" :outputText styleClass="labeltext" value="Salar&#xtr-7;&#x.700;y"/ :outputText styleClass="messageText" }" value="#{sessionScope.Salary&#xtr-7;&#x.700;}"/ /div&#x-7.7; div class="row&#x-7.7;" outputText styleClass="labeltext" value="Phone" truncateAt="&#xtr:-;.70;5"/ outputText styleClass="messageText" value="#{sessionScope.PhoneI&#xtr:-;.70;d}"/ &#x-7.7;/div div class="row&#x-7.7;"

44 tr:outputText styleClass="labeltext" val
tr:outputText styleClass="labeltext" value="Hired" truncateAt="7"&#x-7.7;/ outputText styleClass="messageText" value="#{sessionScope.HireDate}"/&#xtr:-;.70; &#x-7.7;/div div class="row&#x-7.7;" r:outputText styleClass="labeltext" value="Phone" truncateAt="5"/&#xt-7.;瀀 outputText styleClass="messageText" value="#{sessionScope.PhoneId}"&#xtr:-;.70;/ &#x/div;&#x-7.7; div class="row&#x-7.7;" tr:outputText styleClass="labeltext" value="Hired" truncateAt="7"&#x-7.7;/ outputText styleClass="messageText"

45 value="#{sessionSco
value="#{sessionScope.HireDate}"/&#xtr:-;.70; &#x-7.7;/div class="ro iv ;&#x-7.7;w" tr:outputText styleClass="labeltext" value="Hired" truncateAt="7"&#x-7.7;/ outputText styleClass="messageText" value="#{sessionScope.HireDate}"/&#xtr:-;.70; &#x-7.7;/div /tr:panelCaptionGro&#x-7.7;up &#x/div;&#x-7.7;To create field set components: tags as needed within a &#xtr:p; nel;였aptionGroupcomponent (illustrated in Example4–18To create rows, define each tag with the row class attribute. For example: iv class=" -7.;瀀row" attribute sets the position, height, and border for each ro

46 w.Within each tag, create a label eleme
w.Within each tag, create a label element as follows:Create a &#xt600;r:outputText tag.Set the position, width, font, and color of the label element by defining the StyleClasslabeltextFor example::outputText styleClass="labeltext" value="Phone" truncateAt="&#xtr-7;&#x.700;5"/ Example iPhone ComponentsMobile Browser Developer's Guide for Oracle Application Development FrameworkCreate a message element using either the &#xtr:o;&#xutpu;&#xtTe6;xt tag or the &#xtr:c;&#xom60;mandLink component as follows: component with set as For example::outputText styleClass="messageText" value="#{sessionScope.PhoneI&#xtr-7;&#x.700;d}"/messageText style class sets the position, width, font, and col

47 or for the label element.Example4–19 ill
or for the label element.Example4–19 illustrates the &#xtr:c;&#xo600;mmandLink component with styleClass set as messageLinkExample 4–19Setting the styleClass Attribute as messageLinkcommandLink text="#{sessionScope.LastName}"styleClass="messageLink"partialSubmit="true" id="myLink2" actionListener="#{agentUtil.gotoPage3}"onclick='iPhone.slideFragments("page3", "page2");'messageLink element sets the position, width, font, height, and color for the message element.For a panel base background, wrap the tags with the class attribute (illustrated in Example4–184.3.3.1Field Set Style ClassesThis section lists the style classes for field set components and their layout properties.labeltextExample4–19 illustrates the labeltex

48 t style class, which sets the position,
t style class, which sets the position, width, font, and color of the label elementExample 4–20The labeltext Style Class.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;panelBase fieldset sets rounded edges. The element is added by the renderer for the &#xtr:p; ne6;lCaptionGroup component. Example iPhone Components4-15messageTextExample4–21 illustrates the messageText style class, which sets the position, width, font, and color for the message element.Example 4–21The messageText Style Class.messag

49 eText { display: block !important;
eText { 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

50 : 34px !important; font-size: 16px !i
: 34px !important; font-size: 16px !important; font-weight: bold !important; panelBaseExample4–22 illustrates the panelBase style class, which sets the background of the Example 4–22The panelBase Style Class.panelBase { box-sizing: border-box !important; -webkit-box-sizing: border-box !important; padding: 10px !important; background: #c8c8c8 url(/images/pinstripes.png) !important;panelBase fieldsetExample4–23 illustrates the panelBase fieldset style class, which sets rounded edges. The element is rendered by the renderer for the &#xtr:p; ne6;lCaptionGroup component. Example iPhone ComponentsMobile Browser Developer's Guide for Oracle Application Development FrameworkExample 4–23The panelBase fi

51 eldset Style Class.panelBase fieldset {
eldset Style Class.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;rowExample4–24 illustrates the style class, which sets the position, height, and border for each row.Example 4–24The row Style Class.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-childExample4–25 illustrates the row:first-child style class.Example 4–25The row:first-child style class.row:first-child { border-top: none !important;4.3.4What You M

52 ay Need to Know About CSS Classes in iPh
ay Need to Know About CSS Classes in iPhone ApplicationsAlthough you manually apply most of the CSS classes to specific components using styleClass attribute (as in Example4–8), some CSS features are applied by default when you use the iPhone skin. Supporting Basic HTML Mobile Browsers Supporting Basic HTML Mobile BrowsersThis chapter describes ADF Mobile browser’s support for basic HTML mobile browsers.This chapter includes the following sections:Section5.1, "About Basic HTML Mobile Browser Support"Section5.2, "Developing Applications for Basic HTML Mobile Browsers"Section5.3, "Styling Basic HTML Mobile Browsers"5.1About Basic HTML Mobile Browser SupportFor Oracle Fusion Middleware 11 release 1, ADF Mobile browser sup

53 ports mobile browsers that do not provid
ports mobile browsers that do not provide support for Jamakes basic HTML mobile browsers less robust than such supported browsers as the BlackBerry or Apple iPhone. Aside from the browsers listed in Section1.2, "Supported Mobile Browsers," ADF Mobile browser considers most common browsers as basic HTML mobile browsers. ADF Mobile browser may not recognize certain mobile browsers, however.5.1.1Requirements for Basic HTML Mobile Browser SupportThe minimum requirement for ADF Mobile brower’s support is XHTML Basic or the XHTML Mobile Profile that includes WAP2.x browsers.5.2Developing Applications for Basic HTML Mobile BrowsersBecause the ADF Mobile browser framework serves pages to mobile browsers that are appropriate to

54 a browser’s capabilities or limitations
a browser’s capabilities or limitations, you do not have to create user interfaces that are specific to basic HTML mobile browsers. However, the absence of JavaScript support by these browsers limits the functionality of certain HTML elements. Basic HTML mobile browsers do not support the attribute. Add a submit button to the form only if the form submission responds to a component’s autosubmit feature. For composite components with built-in autosubmit features, ADF Mobile browser adds a submit button to enable users to submit the form.ADF Mobile browser does not support WAP1.x browsers that do not support XHTML Basic or the XHTML Mobile Profile. Design Guidelines for BlackBerry 4.2 to 4.5 Design Guidelines for Blac

55 kBerry 4.2 to 4.5This chapter describes
kBerry 4.2 to 4.5This chapter describes how to accommodate the behavior of BlackBerry browsers 4.2 This chapter includes the following sections:Section6.1, "About BlackBerry Browser Display Behavior"Section6.2, "Formatting Tables to Prevent Wrapping"Section6.3, "Formatting Label and Message Panels"Section6.4, "Formatting Column Width"Section6.5, "What You May Need to Know About Display Variations on BlackBerry Smartphones"6.1About BlackBerry Browser Display BehaviorThe BlackBerry browser behaves differently than many other browsers in that it does not display pages using horizontal scrolling. Instead, it fits a page to the width of the screen. This chapter presents guidelines to help you format pages to display properl

56 y on BlackBerry smartphones.6.2Formattin
y on BlackBerry smartphones.6.2Formatting Tables to Prevent WrappingWhen formatting tables, avoid long words on lines that contain multiple fields because browsers wrap long words between fields. Because the default mode of the BlackBerry browser limits the browser width to that of the physical screen, any field that does not fit in a line is displayed on the next line. If the intent of an application is to display multiple elements in one line, then you must ensure that the total width of the fields are within the width of the browser. Like other browsers, the BlackBerry browser wraps multiple lines when needed. The column width cannot be reduced beyond the size of the longest word in the field. 6.2.1How to Prevent Fi

57 elds from Wrapping in TablesTo prevent f
elds from Wrapping in TablesTo prevent fields from wrapping, ensure that the total of the size attribute values in a table’s row satisfies the following formula when all of the fields in a row are input fields.Within this chapter, a word refers to a series of characters. In this context, a word does not include white space. Formatting Label and Message PanelsMobile Browser Developer's Guide for Oracle Application Development Framework3*Number of columns + the Sum of the size attributes in all columns =X, when X=48In general, field sizes in table columns should satisfy the following formula:3 * Number of Columns + Sum of size attributes in all input field columns + Sum of number of characters in longest words in all out

58 put field columns = X, when X=48 If the
put field columns = X, when X=48 If the fields still wraps, decrease the value of X until it fits.6.3Formatting Label and Message PanelsTo preserve the intended programming flexibility, attributes are supported and inserted when they are explicitly programmed for the Trinidad component. You may encounter problems if you add to a component definition when you program pages.6.4Formatting Column WidthWhen formatting columns, set the percentage width specification for both the label and the field in the tr:panelFormLayout component so that the total width is at 100%.6.5What You May Need to Know About Display Variations on BlackBerry SmartphonesThis section describes how the same application can display differently on di

59 fferent smartphones. This section includ
fferent smartphones. This section includes the following topics:Changing the Minimum Font SizeForm Factor Variations6.5.1Changing the Minimum Font SizeChanging the minimum font size through user preferences affects the formatting ability of the ADF Mobile browser renderer. For example, input fields and their corresponding labels align properly when the font is set to its default size of 6 pt, as shown in Figure6–1Figure 6–1Application Display Using the Default Font Size of 6 pt.However, increasing the font size to 10 pt. disrupts the display by shifting the input fields beneath their corresponding labels. As a result, the page is difficult to read. What You May Need to Know About Display Variations on BlackBerry Smartp

60 honesMobile Browser Developer's Guide fo
honesMobile Browser Developer's Guide for Oracle Application Development FrameworkFigure 6–4Wrapping Text Narrow Screen Support and User-Agent Details Support Narrow Screen Support and User-AgentDetails SupportThis chapter describes how the Trinidad infrastructure determines narrow screen support and how it uses EL expressions to expose user-agent details. This chapter includes the following sections: Section7.1, "Determining Narrow Screen Support"Section7.2, "Determining User-Agent Capabilities Using EL Expressions"7.1Determining Narrow Screen SupportMobile devices come with a wide range of screen widths. As a result, the UI components of a web application may render properly on a device with a screen width measuring

61 240 pixels, but not align correctly when
240 pixels, but not align correctly when the application runs on a device that has a screen width of only 100 pixels. In such a situation, Trinidad optimizes its rendering for narrow-screen devices. Trinidad considers any device with a screen width of less than 240 pixels as a narrow screen and optimizes the rendering for the following components accordingly:tr:breadcrumbstr:inputTexttr:navigationPanetr:panelFormLayouttr:panelLabelAndMessagetr:panelRadiotr:processChoiceBartr:selectRangeChoiceBar7.1.1How Trinidad Determines Narrow-Screen OptimizationBecause Trinidad only considers a device with a screen width that measures less than 240 pixels as a narrow screen, it does not consider iPods (Safari browsers) or BlackBerr

62 y smartphones (BlackBerry browsers), whi
y smartphones (BlackBerry browsers), which usually have screens that are greater than 240 pixels, as such. For a Windows Mobile browser, Trinidad determines the screen width from the UA-pixels request header and only applies narrow screen optimization if the screen-width is less than 240 pixels. For all other user agents, however, Trinidad optimizes its rendering for a narrow screen device. Determining User-Agent Capabilities Using EL ExpressionsMobile Browser Developer's Guide for Oracle Application Development Framework Extending ADF Mobile Browser Applications Extending ADF Mobile Browser ApplicationsThis chapter describes how to add functionality to ADF Mobile browser applications.This chapter includes the followin

63 g sections:Section8.1, "Introduction to
g sections:Section8.1, "Introduction to Extending Applications for E-Mail, Telephony, and Google Maps"Section8.2, "Integrating an E-Mail Client"Section8.3, "Integrating Telephony"Section8.4, "Integrating Google Maps"Section8.5, "What You May Need to Know About Page Display Dimensions"8.1Introduction to Extending Applications for E-Mail, Telephony, and In addition to using style sheets described in Chapter4, "Skinning", you can further tailor an ADF Mobile browser application to include support for e-mail, telephony, and Google Maps. This chapter, through the following sections, describes how to use tr:goButton components to integrate links to phone numbers, e-mail addresses, and Google Maps into ADF Mobile browser appl

64 ications."Integrating an E-Mail Client""
ications."Integrating an E-Mail Client""Integrating Telephony""Integrating Google Maps"8.2Integrating an E-Mail ClientTo invoke an e-mail application from a Web application:Use either the tr:goButton or the Prepend the protocol in an HTML link.destination property to the HTML link (represented as the Expression Language statement #{sessionScope.empDetails.Email} in Example8–1Example 8–1Integrating the iPhone E-Mail Client using the mailto: Protocol:goLink styleClass="messageText" text="#{sessionScope.empDetails.Email}" destination="mailto:#{sessionScope.empDetails.Email&#xtr-7;&#x.700;}"/ Integrating TelephonyMobile Browser Developer's Guide for Oracle Ap

65 plication Development Framework8.2.1Addi
plication Development Framework8.2.1Adding Mail Properties protocol enables you to add the mail properties that are listed in Table8–1To specify these properties, append the e-mail address with question mark (illustrated by #{sessionScope.empDetails.Email}?Example8–2 and then add the properties, separating each with an ampersand (Example 8–2Adding E-Mail PropertiesgoLink styleClass="messageText"text="#{sessionScope.empDetails.Email}" destination="mailto:#{sessionScope.empDetails.Email}?subject=howdy&cc=myboss@oracle.com&bcc=me@oracle.com&body=howdy partne&#xtr:-;.70;r!"/8.3Integrating TelephonyTo invoke a call dialog box for a phone number displayed in the application, prepend the phone number with the protocol in

66 an HTML link.Example8–3, the EL express
an HTML link.Example8–3, the EL expression, #{sessionScope.empDetails.PhoneNumber} represents the phone number.Example 8–3Enabling the Call Dialog BoxgoLink styleClass="messageText" text="#{sessionScope.empDetails.PhoneNumber}"destination="tel:#{ sessionScope.empDetails.PhoneNumber}"/&#xtr:-;.70; Table 8–1Mail PropertiesPropertySyntaxMultiple RecipientsA comma (,) separating each e-mail addressMessage Subjectsubject =bject te&#xsu6.;瀀xtcc Recipientscc=name@address.com.70;bcc Recipientsbcc=dress.co&#xname;&#x@ad6;&#x.700;mMessage Textbody=&#xMess; g6.;瀀e TextThe phone number must support the portion of the RFC 2806 protocol (http://www.ietf.org/rf

67 c/rfc2806.txtenables you to add pauses o
c/rfc2806.txtenables you to add pauses or dial extensions after a user dials the primary phone number. Because Apple does not specify which portions of RFC 2086 that it supports, you must test each portion. What You May Need to Know About Page Display DimensionsMobile Browser Developer's Guide for Oracle Application Development Framework8.4.2Supporting Google Maps on iPhoneiPhone Safari supports both Google Maps and YouTube applications in that it automatically intercepts certain URL calls and invokes a native application rather than opening the URL using the target Web site. For example, when a user clicks an HTML link to Google Maps (http://maps.google.com), Safari invokes a native Google Maps application rather than

68 navigating to the Google Maps Web site.
navigating to the Google Maps Web site. Because the native Google maps application accepts some URL parameters supported by maps.google.com, users can specify a location and drop a pin.8.5What You May Need to Know About Page Display DimensionsTo control the correct zoom ratio, add a viewport meta tag in the header of a page. is a device-specific meta tag used to ensure that a page displays in the correct scale. Example8–6, illustrates setting the viewports for both iPhones and BlackBerry smartphones. For more information on using the specification, see http://developer.apple.com/Example 8–6Setting Viewports:head title="Online Banking Demo"&#xtrh-;.70; a http-equiv="Content-Type" content="te

69 xt/html; charset=windows-1252&#xmet-;&#x
xt/html; charset=windows-1252&#xmet-;.70;"/ erbatim rendered="#{requestContext.agent.skinFamilyType eq 'blackberry':v-;.70;}" eta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;&#xm-7.;瀀"/ verba&#x/f:-;.70;tim erbatim rendered="#{requestContext.agent.skinFamilyType eq 'iPhonewebki:v-;.70;t'}" eta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"&#xm-7.;瀀/ verba&#x/f:-;.70;tim /trh:&#x-7.7;head 8.5.1Setting the Viewports for iPhoneWhile some mobile browser applications may disp

70 lay correctly on desktop Safari browsers
lay correctly on desktop Safari browsers, they may not scale not correctly for the smaller screen of the iPhone and appear too large. As a result, the iPhone shrinks pages until they are too small to read. As illustrated by the following line from Example8–6, set the iPhone specifications in the &#xhead;怀 element to ensure that applications display properly on Apple and Google have not yet published other APIs.Versions 4.6 and later of BlackBerry support the HandheldFriendly meta tag which is similar to . Include the following line in the header to enable the page to scale appropriately:me="HandheldFriendl&#xmeta;&#x na6;y" content="True" What You May Need to Know About Page Display DimensionsMobile Browser Develope