building performant mobile apps with amazing ui’s using oracle mobile application framework denis...
Post on 21-Dec-2015
218 Views
Preview:
TRANSCRIPT
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
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.
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
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Oracle Mobile Platform Summary
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
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
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
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. |
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 10
Architecture Server
Remote WebServices
Server-Generated HTML
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 11
ArchitectureMobileDevice
Server
Remote WebServices
Server-Generated HTMLDevice Services
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | 12
ArchitectureMobileDevice
Server
Remote WebServices
Server-Generated HTMLDevice Services
MAF Device Native Container
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
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
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
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
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
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
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
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
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
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
23Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Model Features and Techniques
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Key Concepts
• Data Change Events• ListView Paging : Databinding• Nested Collections• Caching• Managing Wait indicator
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
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
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
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
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
DEMONSTRATION
Data Change Event Demo
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
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
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
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Nested Collection Data binding
• Edit the parent collection tree binding to add child accessor
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Nested Collection UI
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
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
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
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
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
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
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” />
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; }
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
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
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
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. |
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
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
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
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
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
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
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
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
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!
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
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
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
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
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
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?
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!
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
top related