Running ADF Faces on Tablets and Mobile Phones

51
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

description

This presentation discusses all aspects of running ADF Faces applications on tablets and mobile devices.Topics include: - Adaptive/responsive design using both client-side and server-side techniques - Leveraging touch gestures - Using HTML 5 Input Types - Integrating with device features - Planned enhancements in ADF Faces for improving mobile rendering

Transcript of Running ADF Faces on Tablets and Mobile Phones

Page 1: 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

Page 2: Running ADF Faces on Tablets and Mobile Phones

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

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

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.

Page 3: Running ADF Faces on Tablets and Mobile Phones

Agenda

� UI Design for Tablets / Mobile Phones

� Introduction into Responsive Web Design

� Implementing Client-Side Responsive Web Design

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

� Implementing Server-Side Adaptive Web Design

� Using HTML 5 Input Types

� Mobile Device Integration

Page 4: Running ADF Faces on Tablets and Mobile Phones

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

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

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

Page 5: Running ADF Faces on Tablets and Mobile Phones

Overview of Tablet and Phone Viewport Sizes

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

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

Page 6: Running ADF Faces on Tablets and Mobile Phones

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

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

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

Page 7: Running ADF Faces on Tablets and Mobile Phones

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

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

– 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

Page 8: Running ADF Faces on Tablets and Mobile Phones

ADF Faces – RWD Example

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

Page 9: Running ADF Faces on Tablets and Mobile Phones

ADF Faces RWD Example – Media Queries

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

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

Page 10: Running ADF Faces on Tablets and Mobile Phones

ADF Faces RWD Example – Media Queries

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

Page 11: Running ADF Faces on Tablets and Mobile Phones

ADF Faces RWD Example in ActionMedia Query Breakpoints

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

950px730px320px

Page 12: Running ADF Faces on Tablets and Mobile Phones

RWD Example in Action – Width > 950px

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

� PanelForm 1 width: 50%

� PanelForm 2 and 3 width: 25%

Page 13: Running ADF Faces on Tablets and Mobile Phones

RWD Example in Action – Width 730-950px

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

� PanelForm 1 width: 66%

� PanelForm 2 and 3 width: 33%

– (bug causes panel form 3 header to disappear)

Page 14: Running ADF Faces on Tablets and Mobile Phones

RWD Example in Action – Width 320-730px

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

� PanelForm 1 width: 100%

� PanelForm 2 and 3 width: 50%

Page 15: Running ADF Faces on Tablets and Mobile Phones

RWD Example in Action – Width < 320px

� PanelForm 1 width: 100%

� PanelForm 2 and 3 width: 100%

� Would be nice to lay out

panelForm1 with 1 column instead

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

panelForm1 with 1 column instead

of 2

– Can be done using Window.matchMedia Listener

Page 16: Running ADF Faces on Tablets and Mobile Phones

RWD Example – Window.matchMedia Listener

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

Page 17: Running ADF Faces on Tablets and Mobile Phones

RWD Example – Window.matchMedia Listener

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

Page 18: Running ADF Faces on Tablets and Mobile Phones

RWD Example – Window.matchMedia Listener

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

Page 19: Running ADF Faces on Tablets and Mobile Phones

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

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

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

Page 20: Running ADF Faces on Tablets and Mobile Phones

JDev 12.1.2 – clientListener Type mediaEvent

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

Page 21: Running ADF Faces on Tablets and Mobile Phones

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

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

– 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

Page 22: Running ADF Faces on Tablets and Mobile Phones

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

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

� Google: “don't forget the viewport meta tag”

Page 23: Running ADF Faces on Tablets and Mobile Phones

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

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

– 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

Page 24: Running ADF Faces on Tablets and Mobile Phones

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

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

Page 25: Running ADF Faces on Tablets and Mobile Phones

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

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

Page 26: Running ADF Faces on Tablets and Mobile Phones

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

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

Page 27: Running ADF Faces on Tablets and Mobile Phones

Server-side Adaptive DesignGo to server when device orientation changes

� Add call to callSetScreenSize in matchMedia listener method

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

Page 28: Running ADF Faces on Tablets and Mobile Phones

Obtaining Browser Agent Info at Server

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

Page 29: Running ADF Faces on Tablets and Mobile Phones

Convenience Methods in AgentInfoBean

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

Page 30: Running ADF Faces on Tablets and Mobile Phones

Dynamic Page TemplatesUse EL Expression in viewId property

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

Page 31: Running ADF Faces on Tablets and Mobile Phones

Dynamic Page Templates

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

Page 32: Running ADF Faces on Tablets and Mobile Phones

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

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

� 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

Page 33: Running ADF Faces on Tablets and Mobile Phones

Changing UI Component Tree at RuntimeImplement VisitCallBack Interface

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

Page 34: Running ADF Faces on Tablets and Mobile Phones

Changing UI Component Tree at RuntimeCalling MobileRenderingVisitCallBack From JSF Phase Listener

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

Page 35: Running ADF Faces on Tablets and Mobile Phones

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

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

Page 36: Running ADF Faces on Tablets and Mobile Phones

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

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

Page 37: Running ADF Faces on Tablets and Mobile Phones

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

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

� 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!

Page 38: Running ADF Faces on Tablets and Mobile Phones

Changing UI Component Tree at RuntimeFixing Table Pagination

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

Page 39: Running ADF Faces on Tablets and Mobile Phones

Changing UI Component Tree at RuntimeFixing Table Pagination

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

Page 40: Running ADF Faces on Tablets and Mobile Phones

Changing UI Component Tree at RuntimeHiding Surrounding Panel Collection

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

Page 41: Running ADF Faces on Tablets and Mobile Phones

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

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

Page 42: Running ADF Faces on Tablets and Mobile Phones

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

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

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

Page 43: Running ADF Faces on Tablets and Mobile Phones

HTML 5 Input Types

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

Page 44: Running ADF Faces on Tablets and Mobile Phones

HTML 5 Input TypesEnable By Changing Component Tree at Runtime

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

Page 45: Running ADF Faces on Tablets and Mobile Phones

Mobile Device Integration

� 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

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

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

Page 46: Running ADF Faces on Tablets and Mobile Phones

Mobile Device Integration

� Use JavaScript method to get current GPS coordinates

– navigator.geolocation.getCurrentPosition

� Use clientListener to invoke this JS method

Using Current Location Information Server-Side

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

� Use serverListener to invoke managed bean with coordinates

– Queue ADF custom event in JS method

� Use dvt:map component to visualize current location

Page 47: Running ADF Faces on Tablets and Mobile Phones

Mobile Device IntegrationUsing Current Location Information Server-Side

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

Page 48: Running ADF Faces on Tablets and Mobile Phones

Mobile Device IntegrationUsing Current Location Information Server-Side

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

Page 49: Running ADF Faces on Tablets and Mobile Phones

JDeveloper 12.1.3 RWD Goodies

� New Tablet-First Page Template

– Optimized for tablet-landscape and desktop

� Client-side CSS rules

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

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

Page 50: Running ADF Faces on Tablets and Mobile Phones

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-

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

– 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

Page 51: Running ADF Faces on Tablets and Mobile Phones

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