Running ADF Faces on Tablets and Mobile Phones

Running ADF Faces on
Tablets and Mobile Devices
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.1
Tablets and Mobile Devices
Steven Davelaar
ADF/Webcenter A-Team
Oracle Corporation
@stevendavelaar

The following is intended to outline our general product
direction. It is intended for information purposes only, and
may 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 making
functionality, and should not be relied upon in making
purchasing decisions. The development, release, and timing
of any features or functionality described for Oracle’s
products remains at the sole discretion of Oracle.

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

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 tomorrow’s sessions)

Overview of Tablet and Phone Viewport Sizes
http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/

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
monitors
monitors
Aspects 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

RWD in ADF Faces
Use panelGroupLayout elements
– Set layout=“vertical”: generates simple HTML <div> 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

ADF Faces – RWD Example

ADF Faces RWD Example – Media Queries
Media queries can be defined in CSS skinning file as of JDev 12.1.3

ADF Faces RWD Example – Media Queries

ADF Faces RWD Example in Action
Media Query Breakpoints
950px730px320px

RWD Example in Action – Width > 950px
PanelForm 1 width: 50%
PanelForm 2 and 3 width: 25%

RWD Example in Action – Width 730-950px
– (bug causes panel form 3 header to disappear)

RWD Example in Action – Width 320-730px

RWD Example in Action – Width < 320px
Would be nice to lay out
panelForm1 with 1 column instead
panelForm1 with 1 column instead
of 2
– Can be done using
Window.matchMedia Listener

RWD Example – Window.matchMedia Listener

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”

JDev 12.1.2 – clientListener Type mediaEvent

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
– 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

RWD Example – Test On Phone / Tablet
Initial page has unreadable small font
RWD doesn’t seem to work
Screen readable after first user interaction
Fix: add viewport metadata tag
Google: “don't forget the viewport meta tag”

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

Go to server on page load to “communicate” screen dimensions

Go to server when device orientation changes
Add call to callSetScreenSize in matchMedia listener method

Obtaining Browser Agent Info at Server

Convenience Methods in AgentInfoBean

Dynamic Page Templates
Use EL Expression in viewId property

Dynamic Page Templates

Changing UI Component Tree at Runtime
EL expressions to optimize rendering for each device type works fine
– Requires you to go into each and every page
– Not very flexible when you need to support new device types
A programmatic but more generic and flexible alternative:
– Traverse UI component tree at runtime
– Change UI component properties as desired based on agent/screen info
– Implement Using VisitCallBack pattern and JSF phase listener

Implement VisitCallBack Interface

Calling MobileRenderingVisitCallBack From JSF Phase Listener

Register Phase Listener as Bean and Invoke From Page

Setting PanelFormLayout Max Columns Server-Side

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!

Hiding Surrounding Panel Collection

Handling Wide Tables – Move Items to Overflow Area

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
usage
– 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

HTML 5 Input Types

HTML 5 Input Types
Enable By Changing Component Tree at Runtime

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
Integration with Google Maps: af:goLink with google maps URL

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

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”

More Info
Going Mobile with ADF – Running ADF Faces on Mobile Phones and
Tablets
– http://www.ateam-oracle.com/going-mobile-with-adf-running-adf-faces-on-
mobile-phones-and-tablets/
ADF-WebCenter Responsive-Adaptive Design Beyond
– http://www.ateam-oracle.com/adf-webcenter-responsive-adaptive-design-
– http://www.ateam-oracle.com/adf-webcenter-responsive-adaptive-design-
beyond/
Responsive Design for your ADF Faces Web Application
– https://blogs.oracle.com/shay/entry/responsive_design_for_your_adf

Running ADF Faces on Tablets and Mobile Phones

More Related Content

What's hot

Viewers also liked

Similar to Running ADF Faces on Tablets and Mobile Phones

More from Steven Davelaar

Recently uploaded

Running ADF Faces on Tablets and Mobile Phones