Adffacesmobile 140523055550 Phpapp01

Running ADF Faces on
Tablets and Mobile Devices

Steven Davelaar
ADF/Webcenter A-Team
Oracle Corporation
@stevendavelaar
Copyright 2013, Oracle and/or its affiliates. All rights reserved.
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
purchasing decisions. The development, release, and timing
of any features or functionality described for Oracles
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 tomorrows sessions)
Overview of Tablet and Phone Viewport Sizes
http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/
5
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
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

9
ADF Faces RWD Example Media Queries
10
ADF Faces RWD Example in Action

Media Query Breakpoints
320px
11
730px
950px
RWD Example in Action Width > 950px
PanelForm 1 width: 50%

PanelForm 2 and 3 width: 25%
12
RWD Example in Action Width 730-950px

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

14
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
15
RWD Example Window.matchMedia Listener
16
17
18
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
19
JDev 12.1.2 clientListener Type mediaEvent
20
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
21
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
22
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
23

24

25

26

Go to server when device orientation changes
Add call to callSetScreenSize in matchMedia listener method
27
Obtaining Browser Agent Info at Server
28
Convenience Methods in AgentInfoBean
29
Dynamic Page Templates

Use EL Expression in viewId property
30
Dynamic Page Templates
31
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
32

Implement VisitCallBack Interface
33

Calling MobileRenderingVisitCallBack From JSF Phase Listener
34

Register Phase Listener as Bean and Invoke From Page
35

Setting PanelFormLayout Max Columns Server-Side
36

Fixing Table Pagination
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)
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!
37

38

39

Hiding Surrounding Panel Collection
40

Handling Wide Tables Move Items to Overflow Area
41
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
42
HTML 5 Input Types
43
HTML 5 Input Types

Enable By Changing Component Tree at Runtime
44
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
45

Using Current Location Information Server-Side
Use JavaScript method to get current GPS coordinates

navigator.geolocation.getCurrentPosition
Use clientListener to invoke this JS method

Use serverListener to invoke managed bean with coordinates
Queue ADF custom event in JS method
Use dvt:map component to visualize current location
46

47

48
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
49
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-
beyond/
Responsive Design for your ADF Faces Web Application
https://blogs.oracle.com/shay/entry/responsive_design_for_your_adf
50
51

Adffacesmobile 140523055550 Phpapp01

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Adffacesmobile 140523055550 Phpapp01

Загружено:

Авторское право:

Доступные форматы

Running ADF Faces on

Tablets and Mobile Devices

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

The following is intended to outline our general product

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

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

UI Design for Tablets / Mobile Phones

Easy to Deal with From Technical Perspective

Ignores Fundamental Differences in Usage

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

Overview of Tablet and Phone Viewport Sizes

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

Introduction to Response Web Design (RWD)

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

RWD in ADF Faces

Use panelGroupLayout elements

Define media queries in separate CSS file

Do NOT use stretching layouts or panelGridLayout

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

ADF Faces RWD Example

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

ADF Faces RWD Example Media Queries

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

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

ADF Faces RWD Example Media Queries

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

ADF Faces RWD Example in Action

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

RWD Example in Action Width > 950px

PanelForm 1 width: 50%

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

RWD Example in Action Width 730-950px

PanelForm 1 width: 66%

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

RWD Example in Action Width 320-730px

PanelForm 1 width: 100%

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

RWD Example in Action Width < 320px

panelForm1 with 1 column instead

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

RWD Example Window.matchMedia Listener

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

RWD Example Window.matchMedia Listener

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

RWD Example Window.matchMedia Listener

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

Notes on Window.matchMedia Listeners

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

Requires client-side lookup of ADF Faces components

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

JDev 12.1.2 clientListener Type mediaEvent

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

JDev 12.1.2 clientListener Type mediaEvent

invoke the associated JS method using AdfCustomEvent.queue

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

RWD Example Test On Phone / Tablet

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

Server-side Adaptive Design

Client-side responsive design techniques are usually not enough for

ADF Faces applications

Go to server on page load to communicate screen dimensions

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

Server-side Adaptive Design