building performant mobile apps with amazing ui’s using oracle mobile application framework denis...

64

Upload: gladys-chapman

Post on 21-Dec-2015

217 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla
Page 2: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application FrameworkDenis Tyrell – Mobile/Web Tools Product Management

Srini Indla – MAF Product Management

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

CON 7280

Page 3: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Safe Harbor StatementThe 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 Oracle’s products remains at the sole discretion of Oracle.

Page 4: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Program Agenda

Mobile strategy summary

Model Features and Techniques

Alta UI – Oracle’s new user interface design pattern

UI Features and Techniques

1

2

3

4

Page 5: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Oracle Mobile Platform Summary

Page 6: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Simplify Enterprise Mobility

MOBILE SECURITY

Build Your Own Apps

Oracle’s Mobile Apps

ORACLE’S MOBILE STRATEGYORACLE MOBILE PLATFORM

APP

Page 7: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted 7

• Secure mobile devices and manage security

• Mobilize new and existing Enterprise Applications

• Accelerate development of high quality apps for myriad of mobile devices

Mobile Apps Mobile SuiteMobile Services Mobile Security

Oracle Mobile Application Framework Oracle Mobile Cloud Service Oracle Mobile SecurityBuild cross-platform, extensible, mobile clients Platform for mobile and enterprise services Secure mobile apps for BYOD / COPE policies

Oracle Mobile Solution

Page 8: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Build once run on multiple platforms Java or JavaScript for business logic Simplified UI development with

components Online or disconnected Integrated security Access to device features Modular and reusable Choice of IDEs

Oracle Mobile Application Framework

Page 9: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Demo – WorkBetter Sample Application

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

Page 10: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

Architecture Server

Remote WebServices

Server-Generated HTML

Page 11: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

ArchitectureMobileDevice

Server

Remote WebServices

Server-Generated HTMLDevice Services

Page 12: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

ArchitectureMobileDevice

Server

Remote WebServices

Server-Generated HTMLDevice Services

MAF Device Native Container

Page 13: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

ArchitectureMobileDevice

Server

Remote WebServices

Server-Generated HTML

Apache Cordova Plugins & APIs

Device Services

Web View

MAF Device Native Container

Page 14: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

ArchitectureMobileDevice

Server

Remote WebServices

Server-Generated HTML

Apache Cordova Plugins & APIs

Device Services

Web View

MAF Device Native Container

HTML 5, CSS3 & JavaScript Representation

Page 15: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

ArchitectureMobileDevice

Server

Remote WebServices

Server-Generated HTML

Apache Cordova Plugins & APIs

Device Services

Web ViewHTML 5, CSS3 & JavaScript Representation

AMX Feature Local HTML Feature

Remote URLFeature

MAF Device Native Container

Page 16: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

ArchitectureMobileDevice

Server

Remote WebServices

Server-Generated HTML

Apache Cordova Plugins & APIs

Device Services

Web ViewHTML 5, CSS3 & JavaScript Representation

AMX Feature Local HTML Feature

Remote URLFeature

MAF Device Native Container

Components

Controller

Page 17: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

ArchitectureMobileDevice

Server

Remote WebServices

Server-Generated HTML

Apache Cordova Plugins & APIs

Java VM

Device Services

Client Logic

JDBC

Web ViewHTML 5, CSS3 & JavaScript Representation

AMX Feature Local HTML Feature

Remote URLFeature

MAF Device Native Container

Components

Controller

Page 18: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

ArchitectureMobileDevice

Server

Remote WebServices

Server-Generated HTML

Apache Cordova Plugins & APIs

Java VM

SQLi

te

Device Services

Client Logic

JDBCEncrypted Database

Web ViewHTML 5, CSS3 & JavaScript Representation

AMX Feature Local HTML Feature

Remote URLFeature

MAF Device Native Container

Components

Controller

Page 19: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

ArchitectureMobileDevice

Server

Remote WebServices

Server-Generated HTML

Apache Cordova Plugins & APIs

Java VM

SQLi

te

Device Services

Client Logic

JDBCEncrypted Database

Web ViewHTML 5, CSS3 & JavaScript Representation

AMX Feature Local HTML Feature

Remote URLFeature

MAF Device Native Container

Components

Controller

Page 20: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

ArchitectureMobileDevice

Server

Remote WebServices

Server-Generated HTML

Apache Cordova Plugins & APIs

Java VM

SQLi

te

Device Services

Client Logic

JDBCEncrypted Database

Web ViewHTML 5, CSS3 & JavaScript Representation

AMX Feature Local HTML Feature

Remote URLFeature

MAF Device Native Container

Components

Controller

Authentication, Credential Managem

ent&

Access Control

Page 21: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

ArchitectureMobileDevice

Server

Remote WebServices

Server-Generated HTML

Apache Cordova Plugins & APIs

Java VM

SQLi

te

Device Services

Client Logic

JDBCEncrypted Database

Configuration Service

App. Configuration

Web ViewHTML 5, CSS3 & JavaScript Representation

AMX Feature Local HTML Feature

Remote URLFeature

MAF Device Native Container

Components

Controller

Authentication, Credential Managem

ent&

Access Control

Page 22: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

ArchitectureMobileDevice

Server

Remote WebServices

Server-Generated HTML

Apache Cordova Plugins & APIs

Java VM

SQLi

teClient Logic

JDBCEncrypted Database

Configuration Service

APN/GCM Push Services

App. Configuration

Web ViewHTML 5, CSS3 & JavaScript Representation

AMX Feature Local HTML Feature

Remote URLFeature

MAF Device Native Container

Components

ControllerDevice Services

Authentication, Credential Managem

ent&

Access Control

Page 23: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

Model Features and Techniques

Page 24: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Key Concepts

• Data Change Events• ListView Paging : Databinding• Nested Collections• Caching• Managing Wait indicator

Page 25: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Data Change Events

• Property Change Events• Provider Change Events• Events in background threads

View Model

Controller

Page 26: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Property Change Events

• Raised when individual attributes of a model object are changed• Use setter method to update attributes

Page 27: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Provider Change Events

• Raised when attributes of type Collection are changed on a model object• When a new row is created– fireProviderCreate(providerKey, rowKey, newRow)– New row is inserted in to the Iterator without refreshing the entire collectionProvider Change Events

Page 28: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Provider Change Events

• When a row is deleted– fireProviderDelete(providerKey, rowKey)– Row is deleted in the Iterator

Page 29: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

DEMONSTRATION

Data Change Event Demo

Page 30: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Listview Paging

• Select fetchSize and rangeSize carefully–Minimize the load time for the page –Minimize the number of round trips to the server

• fetchSize controls the number of rows loaded in the UI at a time• rangeSize controls the number rows loaded in

to the model

Page 31: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Model RangeChangeListener

• Implemented on the Service Object• Allows loading data from the server as needed• RangeChangeEvent.isDataExhausted is true when data loaded in

the model is exhausted

Page 32: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Nested Collections

• Typical scenarios– Spark charts– Hierarchical structures

• FWK manages the master-detail relationship and data change events

Page 33: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Nested Collection Data binding

• Edit the parent collection tree binding to add child accessor

Page 34: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Nested Collection UI

Page 35: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

On Device Caching

• Essential for responsive apps• Offline access to data• Minimize network round trips

Page 36: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

MAF Caching (preview)

• Built-in Caching for JSON payloads• Can cache data from any HTTP endpoint• Encrypted storage• Policy based caching• Transparent to developers

Page 37: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

ArchitectureMobileDevice

Server

Remote WebServices

Apache Cordova Plugins & APIs

Java VM

Device Services

Client Logic

REST Calls

Web ViewHTML 5, CSS3 & JavaScript Representation

Local HTML Feature

Remote URLFeature

MAF Device Native Container

AMX Feature

Components

Controller

Page 38: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

ArchitectureMobileDevice

Server

Apache Cordova Plugins & APIs

Java VM

Device Services

Client Logic

REST Calls

Web ViewHTML 5, CSS3 & JavaScript Representation

Local HTML Feature

Remote URLFeature

MAF Device Native Container

AMX Feature

Components

Controller

Client Cache Remote Web

Services

Page 39: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

Cache Configuration & API

• Enable Caching in cvm.properties– -DsyncEnabled=true

• Policy Configuration– Sync-config.xml

• API to get clear cache• API to get last cache refresh time

sync-config.xml sample:

<Policies> <ServerGroup id="workerlist" baseUri="http://myserver"> <Policy id="policy1"> <Path>/myapp/resources/workers</Path> <FetchPolicy> FETCH_FROM_SERVICE_ON_CACHE_MISS_OR_EXPIRY </FetchPolicy> <UpdatePolicy>QUEUE_IF_OFFLINE</UpdatePolicy> <ExpireAfter>30</ExpireAfter> </Policy> </ServerGroup></Policies>

Oracle Confidential – Internal/Restricted/Highly Restricted

Page 40: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Wait Indicator Management

• MAF defaults– Time before wait indicator is launched : 2 sec–Max time the wait indicator is shown : 10 secs

Page 41: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Overriding Wait Indicator Duration

• Set at page level• Configures max time the indicator is displayed• Define JS handler for custom handling

<amx:loadingIndicatorBehavior id="lib1" failSafeDuration="3000" failSafeClientHandler=”window.customFailSafeHandler” />

Page 42: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Time before wait indicator is launched

• Set globally for the application• Override the default value in CSS

.amx-loading.showing { animation-duration: 500ms; -webkit-animation-duration: 500ms; }

Page 43: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Alta UI Oracle’s new user interface design pattern

Page 44: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

Introducing Alta!

ExpertsDesign Patterns

LookAndFeel

Cro

ss-C

hann

el

Com

pone

nts

UINew

Page 45: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

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

What is Alta?

New modern UI patterns for Mobile, Cloud, Web

More than just a new skin Visualization-centric

Info-graphics Info-tiles

Mobile first UI Responsive Whitespace heavy

Page 46: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

User Interface Features and Techniques

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

Page 47: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Built-In Alternate Styles

• Many AMX components have built-in alternate style classes that you can select to achieve different UI’s• Use the UIDemo application (or

the hosted web version) to learn about each one

Page 48: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

New Layout Component - panelStretchLayout

• Extremely useful when you want a vertically stretched layout• ScrollPolicy–Whether the center area should scroll or not

• Top facet – Sticks to the top, sizes to its children

• Bottom facet– Sticks to the bottom, sizes to its children

• Center facet– takes of the rest of the vertical space

Page 49: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

New Layout Component - deck

• Used to display panels inside a page

• displayedChild – Used to control which direct child of deck to

show

• Animation– Flip/slide in any direction, fade– Use child transition tag

Page 50: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

New Layout Component - filmstrip

• Simple usecase is to display images or cards• Can display multiple children per page• Can also be used as a layout component

Page 51: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

• Visualizes and compares data across two dimensions• Supports various options for color coding, marker shapes, and

grouping

New Visualization - NBox

Page 52: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

• Customized node content• Stacking of nodes • Animation• Event Duration indicators• Panning, Scrolling

Visualize Events on an Interactive TimelineNew Visualization - Timeline

Page 53: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Fragments

• A reusable piece of UI • Has no bindings itself• Gets bindings via parameters• Useful for:–Modularizing your UI– Creating templates

• Taskflows cannot use fragments– They are still based on AMX pages

Page 54: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Fragments – cont’d

• Simple Modularization Example:–WorkBetter Dashboard– Each child is a fragment– Tablet: All in a scrolling container– Phone: Split into children of a deck

– Each usage is exactly the same

• Note: Fragments can expose their popups to the container

Page 55: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Fragments – cont’d

• Template example:– FragmentDemo sample – list.amxf - Reusable list template– Collection, display output, tap action

are parameters

• Remember: Fragments do not have bindings!

Page 56: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Fragments – cont’d

• Template example:– FragmentDemo sample – detail.amxf - Reusable form template– Attribute list sent in that can contain

a variable number of attributes– No DT helper for Attribute Lists

• Note: Fragments can define their own facets

Page 57: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Output HTML Component

• Used to inject static or dynamic HTML into AN “island” the page• The value attribute can be used to dynamically

change the HTML based on data change events• Security attribute for turning off JavaScript

events – defaults to high security

Page 58: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

Custom Components

• Write your own AMX component from scratch using HTML5• Used only when you can’t use

fragments or other components to achieve the UI you need• Define your own component

rendering, attributes and behavior• Examples in WorkBetter and

ExampleCollapseComponent

Page 59: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

ListView Enhancements – List Item Cards

• In MAF 2.0, listItem only supported spanning the entire row• In MAF 2.0.1, listItem now supports

items of different sizes• This can be used to provide card

layout instead of just lists• Use the “layout” attribute of listView

to define cards vs rows

Page 60: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

ListView Enhancements – Indexer, Show-more, Buffering

• The letter indexer is now supported• Show-more can be automatic as you

scroll or by a link the user must click– forceLink, forceScroll– autoLink, autoScroll– off

• Buffer Strategy used to prevent memory issues– viewport (for very long lists)– additive

Page 61: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

• Visit the Oracle Technology Network at oracle.com/jdev• Watch the Oracle MAF YouTube Channel• Play with the Hosted demos, available for download• WorkBetter ADF and Mobile sample applications available soon

Want to Learn More?

Page 62: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

The Oracle MAF Coding Challengehttp://bit.ly/MAFChallenge

Develop an Oracle MAF applicationGet a chance to win $$$First prize - $6,000Second place – $3,000Third place – $1,000

Get started today!

Page 63: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 63

Learn More at OOWSession Title Time/Location

CON6985 Getting Started with Oracle Mobile Application Development on Eclipse

Thu 9:30 – Moscone West - 3018

HOL9302 Developing Mobile Apps with Oracle Mobile Application Framework - Hands-on Lab

Thu 11:30 – Hotel Nikko – Ballroom II

CON2495 Data Caching Strategies for Oracle Mobile Application Framework Thu 12:00 – Marriot Marquis – Nob Hill

HOL9274 Developing Web and Mobile Dashboards with Oracle ADF – Hands-on Lab

Thu 1:00 – Hotel Nikko – Ballroom II

CON7091 Building Secure Enterprise Mobile Apps with Oracle Mobile Application Framework : Best Practices

Thu 2:30 – Moscone West - 3018

Learn more at the Oracle Mobile and ADF Demo Booths in Moscone South

Join the Oracle ADF and MAF Communities:

Twitter.com/JDeveloperTwitter.com/OracleADFFacebook.com/JDeveloperGoogle+ ADF community

Page 64: Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework Denis Tyrell – Mobile/Web Tools Product Management Srini Indla