2. CON 7280
Building Performant Mobile Apps with Amazing UI’s Using Oracle Mobile Application Framework
This is a Title Slide with Picture slide ideal for including a picture with a brief title, subtitle and presenter information.
To customize this slide with your own picture:
Right-click the slide area and choose Format Background from the pop-up menu. From the Fill menu, click Picture and texture fill. Under Insert from: click File. Locate your new picture and click Insert.
To copy the Customized Background from Another Presentation on PC
Click New Slide from the Home tab's Slides group and select Reuse Slides.
Click Browse in the Reuse Slides panel and select Browse Files. Double-click the PowerPoint presentation that contains the background you wish to copy.
Check Keep Source Formatting and click the slide that contains the background you want.
Click the left-hand slide preview to which you wish to apply the new master layout.
Apply New Layout (Important): Right-click any selected slide, point to Layout, and click the slide containing the desired layout from the layout gallery.
Delete any unwanted slides or duplicates.
To copy the Customized Background from Another Presentation on Mac
Click New Slide from the Home tab's Slides group and select Insert Slides from Other Presentation…
Navigate to the PowerPoint presentation file that contains the background you wish to copy. Double-click or press Insert. This prompts the Slide Finder dialogue box.
Make sure Keep design of original slides is unchecked and click the slide(s) that contains the background you want. Hold Shift key to select multiple slides.
Apply New Layout (Important): Click Layout from the Home tab's Slides group, and click the slide containing the desired layout from the layout gallery.
Denis Tyrell – Mobile/Web Tools Product Management
Srini Indla – MAF Product Management
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

3. This is a Safe Harbor Front slide, one of two Safe Harbor Statement slides included in this template.
One of the Safe Harbor slides must be used if your presentation covers material affected by Oracle’s Revenue Recognition Policy
To learn more about this policy,
For internal communication, Safe Harbor Statements are not required. However, there is an applicable disclaimer (Exhibit E) that should be used, found in the Oracle Revenue Recognition Policy for Future Product Communications. Copy and paste this link into a web browser, to find out more information.  
For all external communications such as press release, roadmaps, PowerPoint presentations, Safe Harbor Statements are required. You can refer to the link mentioned above to find out additional information/disclaimers required depending on your audience.

4. Program Agenda 1
Mobile strategy summary Model Features and Techniques Alta UI – Oracle’s new user interface design pattern UI Features and Techniques 2 3 4

5. Oracle Mobile Platform Summary
This is a Section Header with Picture slide ideal for including a picture with a brief title and optional subtitle. This slide can also be used as a Q and A slide.
To customize this slide with your own picture:
Right-click the slide area and choose Format Background from the pop-up menu. From the Fill menu, click Picture and texture fill. Under Insert from: click File. Locate your new picture and click Insert.
To copy the Customized Background from Another Presentation on PC
Click New Slide from the Home tab's Slides group and select Reuse Slides.
Click Browse in the Reuse Slides panel and select Browse Files. Double-click the PowerPoint presentation that contains the background you wish to copy.
Check Keep Source Formatting and click the slide that contains the background you want.
Click the left-hand slide preview to which you wish to apply the new master layout.
Apply New Layout (Important): Right-click any selected slide, point to Layout, and click the slide containing the desired layout from the layout gallery.
Delete any unwanted slides or duplicates.
To copy the Customized Background from Another Presentation on Mac
Click New Slide from the Home tab's Slides group and select Insert Slides from Other Presentation…
Navigate to the PowerPoint presentation file that contains the background you wish to copy. Double-click or press Insert. This prompts the Slide Finder dialogue box.
Make sure Keep design of original slides is unchecked and click the slide(s) that contains the background you want. Hold Shift key to select multiple slides.
Apply New Layout (Important): Click Layout from the Home tab's Slides group, and click the slide containing the desired layout from the layout gallery.

6. Simplify Enterprise Mobility
Build Your Own Apps
Oracle’s Mobile Apps
Mobile Security
APP
ORACLE MOBILE Platform
ORACLE’S MOBILE STRATEGY

7. Oracle Mobile Solution
Accelerate development of high quality apps for myriad of mobile devices
Mobilize new and existing Enterprise Applications
Secure mobile devices and manage security
Mobile Apps
Mobile Suite
Mobile Services
Mobile Security
Oracle Mobile Application Framework
Oracle Mobile Cloud Service
Oracle Mobile Security
Build cross-platform, extensible, mobile clients
Platform for mobile and enterprise services
Secure mobile apps for BYOD / COPE policies
Oracle Confidential – Internal/Restricted/Highly Restricted

8. Oracle Mobile Application Framework
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
Main Point:
To develop mobile apps – Organizations can leverage the Mobile Application Framework, the only java framework designed to support cross platform development:
It enables developers to build a mobile app and being able to deploy it onto multiple devices, iOS, Android and on different form factors – oracle will be responsible for keep up with the changes in iOS. Of course, we are also watching the other platform as the requirement for these increase we will support other operative systems.
The app is build with consistent business logic and data model, it can be native or HTML 5 with full access to native device feature. This allows you to leverage existing skill among your developers, any one with Java based skill set, can now build mobile apps.
It also leverage SQL-lite to support disconnected processes with built-in encryption.
Full Access to Native Device Features
The framework is designed to be modular with re-useable components that can be leveraged to simplify mobile app development.

9. Demo – WorkBetter Sample Application
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |

10. Architecture Server Server-Generated HTML Remote Web Services d1-03-13
In a typical MAF application, data is queried from a remote Web Service, which can be SOAP or REST. As you will see later, one of the capabilities in MAF is to include remote HTML, which are mobile aware HTML pages generated on a server, as a native application feature.
Server-Generated
HTML
Remote Web
Services

11. Architecture Server Mobile Device Server-Generated HTML Remote Web
The device usually provides capabilities like camera, contacts, GPS and other functionality to integrate in MAF mobile applications.
Server-Generated
HTML
Device Services
Remote Web
Services

12. Architecture Server MAF Device Native Container Mobile Device
MAF applications execute within a native container that is compiled for the specific mobile operation system (currently Android and iOS). When deploying MAF applications, the developer – or application deployer – defines the target platform after which JDeveloper or Oracle Enterprise Package for Eclipse (OEPE) saves the application in a platform specific template which then is wrapped into the native container upon compilation. With this MAF runs as a native application on the mobile device, which however also means that you meed a MAC to deploy applications to iOS.
Server-Generated
HTML
Device Services
Remote Web
Services

13. Architecture Server MAF Device Native Container Mobile Device Web View
The native container has one or many web views, a concept of the underlying Cordova open source framework used by MAF.
Server-Generated
HTML
Device Services
Remote Web
Services
Apache Cordova
Plugins & APIs

14. Architecture Server MAF Device Native Container Mobile Device Web View
HTML 5, CSS3 & JavaScript Representation
Web View d
A web view is a web engine like a browser that executes web technologies like HTML 5, JavaScript and CSS to render the mobile user interface. Each web view in MAF is …
Server-Generated
HTML
Device Services
Remote Web
Services
Apache Cordova
Plugins & APIs

15. Architecture Server MAF Device Native Container Mobile Device Web View
HTML 5, CSS3 & JavaScript Representation
Web View
AMX Feature
Local HTML
Feature
Remote URL
Feature d
… represented as a "Feature". A feature can be defined in one of the following technologies:
AMX (Application Mobile XML), which is a component based development environment that uses MAF data controls and bindings for data access and modification. The programming language is Java in this context.
Local HTML is for local HTML 5 documents that use JavaScript as the programming language
Remote URL allows to integrate mobile enabled web pages that are generated on demand on a remote server. This feature is where manual implementation of the concepts of responsive layout and adaptive design come into play the most.
Server-Generated
HTML
Device Services
Remote Web
Services
Apache Cordova
Plugins & APIs

16. Architecture Server MAF Device Native Container Mobile Device Web View
HTML 5, CSS3 & JavaScript Representation
Web View
AMX Feature
Local HTML
Feature
Remote URL
Feature d
The AMX feature uses pre-defined components for building the mobile user interfaces bases on the HTML5 standard. A separate controller (task flow) allows developers to declaratively define the order of page flows for a MAF application. The controller also supports the concept of managed beans to hold client logic and shared data state.
Components
Server-Generated
HTML
Device Services
Controller
Remote Web
Services
Apache Cordova
Plugins & APIs

17. Architecture Server MAF Device Native Container Mobile Device Web View
HTML 5, CSS3 & JavaScript Representation
Web View
AMX Feature
Local HTML
Feature
Remote URL
Feature d
All of the three features can invoke Java in MAF for which an embedded virtual machine is provided. The footprint of the VM is kept as small as possible for optimized performance. Within the VM applications can execute Java client logic but also use JDBC calls to the local SQL Lite database
Components
Server-Generated
HTML
Device Services
Controller
Remote Web
Services
Java VM
Apache Cordova
Plugins & APIs
Client Logic
JDBC

18. Architecture Server MAF Device Native Container Mobile Device Web View
HTML 5, CSS3 & JavaScript Representation
Web View
AMX Feature
Local HTML
Feature
Remote URL
Feature d
The local SQLite database is from open source and can be created on-the-fly for a deployed application. The SQLite database allows MAF applications to provide offline capabilities, for example to save queried data on the device
Components
Server-Generated
HTML
Device Services
Controller
Remote Web
Services
Java VM
Apache Cordova
Plugins & APIs
Client Logic
SQLite
JDBC
Encrypted Database

19. Architecture Server MAF Device Native Container Mobile Device Web View
HTML 5, CSS3 & JavaScript Representation
Web View
AMX Feature
Local HTML
Feature
Remote URL
Feature d
Components
Server-Generated
HTML
Device Services
Controller
Remote Web
Services
Java VM
Apache Cordova
Plugins & APIs
Client Logic
SQLite
JDBC
Encrypted Database

20. Architecture Server MAF Device Native Container
Authentication, Credential Management & Access Control
MAF Device Native Container
Mobile
Device
HTML 5, CSS3 & JavaScript Representation
Web View
AMX Feature
Local HTML
Feature
Remote URL
Feature d
MAF provides a security framework for authentication, authorization and access controlchecks. Some of the features like SSO require the Oracle Mobile Security Suite and mobile access manager. Others – like basic authentication and role based access control work against any server side implementation technology.
Components
Server-Generated
HTML
Device Services
Controller
Remote Web
Services
Java VM
Apache Cordova
Plugins & APIs
Client Logic
SQLite
JDBC
Encrypted Database

21. Architecture Server MAF Device Native Container
Authentication, Credential Management & Access Control
MAF Device Native Container
Mobile
Device
App. Configuration
Configuration
Service
HTML 5, CSS3 & JavaScript Representation
Web View
AMX Feature
Local HTML
Feature
Remote URL
Feature d
To manage service endpoints, MAF provides an option for deployed applications to renew configuration settings by addressing a configuration service.
Components
Server-Generated
HTML
Device Services
Controller
Remote Web
Services
Java VM
Apache Cordova
Plugins & APIs
Client Logic
SQLite
JDBC
Encrypted Database

22. Architecture Server MAF Device Native Container
Authentication, Credential Management & Access Control
MAF Device Native Container
Mobile
Device
App. Configuration
Configuration
Service
HTML 5, CSS3 & JavaScript Representation
Web View
AMX Feature
Local HTML
Feature
Remote URL
Feature d
Like other mobile application technologies, MAF supports push notifications coming from Google or Apple infrastructures.
Components
Server-Generated
HTML
Device Services
Controller
Remote Web
Services
Java VM
Apache Cordova
Plugins & APIs
Client Logic
SQLite
JDBC
Encrypted Database
APN/GCM Push
Services

23. Model Features and Techniques

24. Key Concepts Data Change Events ListView Paging : Databinding
Nested Collections
Caching
Managing Wait indicator
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.

25. Data Change Events Property Change Events Provider Change Events
Events in background threads
View
Model
Controller
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.

26. Property Change Events
Raised when individual attributes of a model object are changed
Use setter method to update attributes
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.

27. 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 collection
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.
Provider Change Events

28. Provider Change Events
When a row is deleted
fireProviderDelete(providerKey, rowKey)
Row is deleted in the Iterator
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.

29. DEMONSTRATION Data Change Event Demo
Either demo or use following screenshots

30. 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
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.

31. 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
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.

32. Nested Collections Typical scenarios
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.
Typical scenarios
Spark charts
Hierarchical structures
FWK manages the master-detail relationship and data change events

33. Nested Collection Data binding
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.
Edit the parent collection tree binding to add child accessor

34. Nested Collection UI
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.

35. On Device Caching Essential for responsive apps Offline access to data
Minimize network round trips
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.

36. MAF Caching (preview) Built-in Caching for JSON payloads
Can cache data from any HTTP endpoint
Encrypted storage
Policy based caching
Transparent to developers
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.

37. Architecture Server MAF Device Native Container Mobile Device Web View
HTML 5, CSS3 & JavaScript Representation
Web View
AMX Feature
Local HTML
Feature
Remote URL
Feature d
All of the three features can invoke Java in MAF for which an embedded virtual machine is provided. The footprint of the VM is kept as small as possible for optimized performance. Within the VM applications can execute Java client logic but also use JDBC calls to the local SQL Lite database
Components
Device Services
Controller
Java VM
Apache Cordova
Plugins & APIs
Client Logic
Remote Web
Services
REST Calls

38. Architecture Server MAF Device Native Container Mobile Device Web View
HTML 5, CSS3 & JavaScript Representation
Web View
AMX Feature
Local HTML
Feature
Remote URL
Feature d
All of the three features can invoke Java in MAF for which an embedded virtual machine is provided. The footprint of the VM is kept as small as possible for optimized performance. Within the VM applications can execute Java client logic but also use JDBC calls to the local SQL Lite database
Components
Device Services
Controller
Client Cache
Java VM
Apache Cordova
Plugins & APIs
Client Logic
Remote Web
Services
REST Calls

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="
<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

40. Wait Indicator Management
MAF defaults
Time before wait indicator is launched : 2 sec
Max time the wait indicator is shown : 10 secs
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.

41. Overriding Wait Indicator Duration
Set at page level
Configures max time the indicator is displayed
Define JS handler for custom handling
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.
<amx:loadingIndicatorBehavior id="lib1"
failSafeDuration="3000"
failSafeClientHandler=”window.customFailSafeHandler”
/>

42. Time before wait indicator is launched
Set globally for the application
Override the default value in CSS
Architecture Style: REST (Representational State Transfer) is not a technology but a blue print for loosely coupled web services that are built based on web technologies. REST uses Internet technologies that are the same transport and message layers used by the Internet from first day on.
Resources: The difference between procedural services like SOAP and REST is that applications operate on a resource and not on method exposed on an API. You can imagine REST as a redesign of SOAP services with means of HTTP, XML, JSON and media types.
URI: Resources in REST are identified by a URI, which is unique within a domain. The URI itself is an extension to the protocol, host name and port: URL = protocol : host : port : /servlet path/ URI
Payload: The payload in a REST call is negotiable between the REST client and the server side service. If the service can provide the data format request by the client (e.g. XML) then this format is returned to the client. If not then an error is raised that can be determined by the REST service developer. The client requested and accepted content is encoded in the request header using the Accept and Content Type header properties. Media typed can be generic like application / xml, or vendor specific to support a specific structure.
.amx-loading.showing {
animation-duration: 500ms;
-webkit-animation-duration: 500ms; }

43. Oracle’s new user interface design pattern
Alta UI
Oracle’s new user interface design pattern
This is a Title Slide with Picture and Logo slide ideal for including a picture and partner or product logo with a brief title, subtitle and presenter information.
To customize this slide with your own picture:
Right-click the slide area and choose Format Background from the pop-up menu. From the Fill menu, click Picture and texture fill. Under Insert from: click File. Locate your new picture and click Insert.
To Replace the LOGO on this sample slide:
Right-click the sample LOGO and choose Change Picture. Navigate to the location where the new logo is stored, select desired logo file and click on the Open button to replace the sample logo.
To copy the Customized Background from Another Presentation on PC
Click New Slide from the Home tab's Slides group and select Reuse Slides.
Click Browse in the Reuse Slides panel and select Browse Files. Double-click the PowerPoint presentation that contains the background you wish to copy.
Check Keep Source Formatting and click the slide that contains the background you want.
Click the left-hand slide preview to which you wish to apply the new master layout.
Apply New Layout (Important): Right-click any selected slide, point to Layout, and click the slide containing the desired layout from the layout gallery.
Delete any unwanted slides or duplicates.
To copy the Customized Background from Another Presentation on Mac
Click New Slide from the Home tab's Slides group and select Insert Slides from Other Presentation…
Navigate to the PowerPoint presentation file that contains the background you wish to copy. Double-click or press Insert. This prompts the Slide Finder dialogue box.
Make sure Keep design of original slides is unchecked and click the slide(s) that contains the background you want. Hold Shift key to select multiple slides.
Apply New Layout (Important): Click Layout from the Home tab's Slides group, and click the slide containing the desired layout from the layout gallery.

44. Introducing Alta! Experts UI Components New Cross-Channel Look And
Design Patterns
Look
And
Feel
Cross-Channel
Components UI
New

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

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

47. 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

48. 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

49. 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

50. 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

51. New Visualization - NBox
Visualizes and compares data across two dimensions
Supports various options for color coding, marker shapes, and grouping

52. New Visualization - Timeline
Visualize Events on an Interactive Timeline
Customized node content
Stacking of nodes
Animation
Event Duration indicators
Panning, Scrolling

53. 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

54. 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

55. 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!

56. 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

57. 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

58. 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

59. 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

60. 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

61. Want to Learn More?
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

62. The Oracle MAF Coding Challenge
Develop an Oracle MAF application
Get a chance to win $$$
First prize - $6,000
Second place – $3,000
Third place – $1,000
Get started today!

63. Learn More at OOW
Session
Title
Time/Location
CON6985
Getting Started with Oracle Mobile Application Development on Eclipse
Thu 9:30 – Moscone West
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
Learn more at the Oracle Mobile and ADF Demo Booths in Moscone South
Join the Oracle ADF and MAF Communities:
Twitter.com/JDeveloper
Twitter.com/OracleADF
Facebook.com/JDeveloper
Google+ ADF community