adffacesmobile-140523055550-phpapp01

8/9/2019 adffacesmobile-140523055550-phpapp01

1/51

Running ADF Faces on

Copyright 2013, Oracle and/or its affiliates. All rights reserved.1

Steven Davelaar

ADF/Webcenter A-Team

Oracle Corporation

@stevendavelaar


2/51

The following is intended to outline our general product

direction. It is intended for information purposes only, andmay not be incorporated into any contract.

It is not a commitment to deliver any material, code, or


functionality, and should not be relied upon in makingpurchasing decisions. The development, release, and timing

of any features or functionality described for Oracles

products remains at the sole discretion of Oracle.


3/51

Agenda

UI Design for Tablets / Mobile Phones Introduction into Responsive Web Design

Implementing Client-Side Responsive Web Design


Implementing Server-Side Adaptive Web Design

Using HTML 5 Input Types

Mobile Device Integration


4/51

UI Design for Tablets / Mobile Phones

Understand the Mobile User Interface

Touch screen instead of mouse

No external keyboard

Smaller screen size, portrait vs landscape mode

Easy to Deal with From Technical Perspective


Support touch gestures

Use responsive web design to keep app usable with smaller screens

Ignores Fundamental Differences in Usage

Natural User Interface vs Graphical User Interface

Check Out Oracle UX Patterns and Guidelines (See tomorrows sessions)


5/51

Overview of Tablet and Phone Viewport Sizes


http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/


6/51

Introduction to Response Web Design (RWD)

Wikipedia: RWD is aimed at crafting sites to provide

an optimal viewing experience easy reading and navigation with a minimum of resizing, panning, and

scrolling

across a wide range of devices (from mobile phones to desktop computer


monitorsAspects of RWD

Fluid grids: sizing relative(%) rather than absolute (pixels, points)

Media Queries: Use different CSS styles based on screen dimensions

Flexible Images: Images that resize based on screen dimensions


7/51

RWD in ADF Faces

Use panelGroupLayout elements

Set layout=vertical: generates simple HTML element

Set styleClass property with width in percentage and float:left


Change styleClass properties using media queries Define media queries in separate CSS file

Media queries cannot be defined in skinning CSS file

Do NOT use stretching layouts or panelGridLayout


8/51

ADF Faces RWD Example



9/51

ADF Faces RWD Example Media Queries


Media queries can be defined in CSS skinning file as of JDev 12.1.3


10/51

ADF Faces RWD Example Media Queries



11/51

ADF Faces RWD Example in ActionMedia Query Breakpoints


950px730px320px


12/51

RWD Example in Action Width > 950px


PanelForm 1 width: 50%

PanelForm 2 and 3 width: 25%


13/51

RWD Example in Action Width 730-950px




(bug causes panel form 3 header to disappear)


14/51

RWD Example in Action Width 320-730px





15/51

RWD Example in Action Width < 320px



Would be nice to lay out

panelForm1 with 1 column instead


of 2 Can be done using

Window.matchMedia Listener


16/51

RWD Example Window.matchMedia Listener



17/51




18/51




19/51

Notes on Window.matchMedia Listeners

Only supported by newer (IE) browsers (IE10+)

Check out http://caniuse.com/#feat=matchmedia

Requires client-side lookup of ADF Faces components


Client Id can be difficult to derive when using nested naming containers There can be many components on many pages that need client-side

manipulation

Can result in ugly, large if-then-else Javascript methods

Solution as of JDeveloper 12.1.2: clientListener type mediaEvent


20/51

JDev 12.1.2 clientListener Type mediaEvent



21/51

JDev 12.1.2 clientListener Type mediaEvent

Clean component-specific methods, easy component lookup

Requires complex generic JavaScript (not shown on slides)

JavaScript code to invoke the method specified in clientListener must be

written by you!


Traverse complete component tree client-side

Register each component with clientListener type mediaEvent

Within each matchMedia listener method, loop over components and

invoke the associated JS method using AdfCustomEvent.queue

Will become completely declarative in JDev 12.1.4 New component tag for adding a media event behavior


22/51

RWD Example Test On Phone / Tablet

Initial page has unreadable small font

RWD doesnt seem to work

Screen readable after first user interaction

Fix: add viewport metadata tag


Google: don't forget the viewport meta tag


23/51

Server-side Adaptive Design

Client-side responsive design techniques are usually not enough for

ADF Faces applications

For more dramatic changes in layout, we need to go to the server


Use EL in layout properties that reference screen dimensions Dynamic switching between page templates

Traversing UI components tree to programmatically change layout

Go to server on page load to communicate screen dimensions

Go to server when device orientation changes


24/51

Server-side Adaptive DesignGo to server on page load to communicate screen dimensions



25/51




26/51




27/51

Server-side Adaptive DesignGo to server when device orientation changes

Add call to callSetScreenSize in matchMedia listener method



28/51

Obtaining Browser Agent Info at Server



29/51

Convenience Methods in AgentInfoBean



30/51

Dynamic Page TemplatesUse EL Expression in viewId property



31/51

Dynamic Page Templates



32/51


33/51


34/51

Changing UI Component Tree at RuntimeCalling MobileRenderingVisitCallBack From JSF Phase Listener



35/51

Changing UI Component Tree at RuntimeRegister Phase Listener as Bean and Invoke From Page



36/51

Changing UI Component Tree at RuntimeSetting PanelFormLayout Max Columns Server-Side



37/51

Changing UI Component Tree at Runtime

ADF Faces table scrollbars are automatically replaced with pagination

controls on touch devices Pagination size controlled by fetchSize property (JDev 11.1.1.x) or

autoHeightRows property (JDev 12.1.x)

Fixing Table Pagination


Number of rows visible on screen should match value of these

properties

If not, confusing user experience: both swiping and pagination needed

when number of rows visible is lower

JDev 12.1.3 will support tablet-optimized table scrolling Consider using listView instead of table component!


38/51

Changing UI Component Tree at RuntimeFixing Table Pagination



39/51

Changing UI Component Tree at RuntimeFixing Table Pagination



40/51

Changing UI Component Tree at RuntimeHiding Surrounding Panel Collection



41/51

Changing UI Component Tree at RuntimeHandling Wide Tables Move Items to Overflow Area



42/51

HTML 5 Input Types

New HTML 5 input types: color, date(time), email, month, number,

range, search, tel, time, url, week

These input types allow better input control and validation

Can easily be used in ADF Faces though usage property


Does NOT work in JDev 11.1.2.x, only 11.1.1.x and 12.1.x Specify as EL expression to prevent design-time error underlining


43/51

HTML 5 Input Types



44/51

HTML 5 Input TypesEnable By Changing Component Tree at Runtime



45/51


Integration with phone, contacts: af:goLink with tel: prefix

Integration with mail: af:goLink with mailto: prefix

Integration with Google Maps: af:goLink with google maps URL



46/51


Use JavaScript method to get current GPS coordinates navigator.geolocation.getCurrentPosition

Use clientListener to invoke this JS method

Using Current Location Information Server-Side


Use serverListener to invoke managed bean with coordinates Queue ADF custom event in JS method

Use dvt:map component to visualize current location


47/51

Mobile Device IntegrationUsing Current Location Information Server-Side



48/51

Mobile Device IntegrationUsing Current Location Information Server-Side



49/51

JDeveloper 12.1.3 RWD Goodies

New Tablet-First Page Template Optimized for tablet-landscape and desktop

Client-side CSS rules


ADF skinning framework now supports client side rules such as @charset,

@document, @font-face, @import, @keyframes, @media, @page,

@supports.

Optimized table scrolling on tablets

A.k.a. high water mark scrolling


50/51


51/51


adffacesmobile-140523055550-phpapp01

Documents