31
ADF Mobile: Applications and Features 马平 [email protected]

ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Embed Size (px)

Citation preview

Page 1: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

ADF Mobile:

Applications and Features

马平

[email protected]

Page 2: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Topics covered in this lesson include:

• Creating Application Features

• Create Features & Icons

• Application and Features Lifecycle

• Feature Content

• Constraints & Style

• Feature Archives

• Setting Preferences

Overview

Page 3: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Define Application and Features

• Mobile Application is consisted of at least two projects:

• Application Controller: Contains application level artifacts, such as CSS, App

Lifecycle Event Code, etc.

• View Controller: Contains artifacts for one or more application features or

modules:

• Java Classes, Task Flows, and AMX pages

• Third party Local HTML5 pages

• Connections and Links to Remote HTML pages

• New Application template in JDeveloper – New Gallery

• Features are a group of application functionality that represents a

“module” that may operate by itself

Page 4: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Define Application Navigation Pattern

When an application is launched, all features are displayed

Springboard

Navigation Bar

OR

Page 5: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Springboard and Navigation Bar

• Application features can be displayed in your Mobile

application using either a Springboard and/or a Navigation Bar

• If more features exist than can be

displayed, a More button is used to

access the non-displayed items

• You may include icons for each

feature and make them different

for Springboard

or Navigation Bar

• Custom springboard

is supported

Springboard

Navigation Bar

Page 6: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

• Set launch page to display options as

either Springboard or Navigation Bar

• May also allow navigation bar to be

displayed while in application pages

• If you display the navigation bar in an

application page, you determine

functionality

• Allow users to toggle it off or on

• Always viewable

• Never viewable

• While it is displayed, little number pad

navigates back to launchpad

On Page Navigation Bar

Toggle

Page 7: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

• Use Show Navigation Bar on Application Launch

checkbox, to display the features in a navigation bar at the

bottom of the screen

• Let end-users hide the

navigation bar and set

Show Navigation

Bar Toggle Button

checkbox

• Use the radio button to

see the Springboard

What to Display

Page 8: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Three possible options for how the Springboard is displayed:

1. None: Springboard not displayed (Navigation Bar displayed

then)

2. Default: Uses the default Springboard by ADF Mobile.

Implemented as ADF AMX page

3. Custom: Select a customized Springboard. May be

implemented as either HTML or AMX Page. Declared in adfmf-feature.xml page.

Displaying the Springboard

Page 9: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

ADF Mobile provides the basic tools

to create a custom AMX/HTML

springboard

• Found in ApplicationFeatures

data control

• Declaratively build a springboard

page using data controls that

describe both the ADF Mobile

application and its features

• Use to include searches or other data on

the Springboard

Custom Springboards

Page 10: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Features and Application-Level

Navigation• Each Springboard or Navigation Bar item is a feature

• Feature represents a group of re-usable modules

• A Feature is a child components of an application

• Every application must have at least 1 feature

• An application may contain more than one feature(s)

• A Feature can access a page or task flow

Page 11: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

• Each Feature is a child element in an ADF Mobile Application

and has it’s own child components

• Each Feature is defined by a unique id

• Must be one of three Types:

1. ADF Mobile AMX (Page or Task Flow)

2. Remote URL

3. Local HTML

• May contain Icons, Constraints, Listeners, Style Sheets,

Security and JavaScript (in HTML pages)

The Features of Features

Page 12: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Feature Types

Defined in Content tab of adfmf-feature.xml

• Local AMX File (ADF UI Components)

• Generated into HTML/JS on device at RT

• Leverages HTML5

• Remote URL

• ADF Trinidad for Smartphones

• ADF Faces on Tablets

• Any third-party site

• Local HTML File

• Hand-coded HTML5 pages

Page 13: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

• A Feature’s content may access an ADF Mobile Page or a Task

Flow

• Can create them on the Feature page (adfmf-feature.xml)

or use existing ones

ADF Mobile AMX

Page 14: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

• Remote HTML represents web pages generated on server and

displayed within ADF Mobile App

• A Feature’s content may access a remote HTML

• Must specify full address (http://www.oracle.com)

• When Feature is invoked, UI

is displayed with ADF Mobile

container

• Can access PhoneGap

Remote HTML

Page 15: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

• A Feature’s content may access a local defined HTML page

• Enables integrating pages developed using third party HTML5

development framework

• Artifacts includes HTML5/CSS/JS pages that are added to the

project

• Can also access PhoneGap JS APIs

Local HTML

Page 16: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Defining Features

• Set application wide Springboard and Navigation Bar characteristics in adfmf-application.xml

• Features may appear in an application as Springboard or

Navigation items

• Hide/show the springboard and navigation bar to enable the

optimal use of the device’s real estate

• Set Navigation Bar to toggle on/off

• Use default Springboard or define your own custom one

• References Features defined in adfmf-feature.xml

• Set the Features sequence as they appear on Springboard &

Navigation Bar

Page 17: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

You may associate a Navigation Icon or Springboard Image with

each Feature

• Use the Feature’s General or Content tab to specify the image

file name

• Android Phone Images

• Must be 512x512 and should use distinct silhouette

• iPhone Images

• Must be 320x480 pixels and saved in a .png format

(640x1136 for retina display)

• Reference Android and iOS Developers Guide

Feature Icons and Images

Page 18: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

• A constraint describes when application features or content

should be used

• May describe a user, role, characteristic of a device or hardware

the application is running on

• You only want a camera feature to be active, only if the

device has a camera, otherwise it’s not in the springboard

or navigation bar

• May define a constraint on the entire Feature (Approval feature

available if you’re a manager role)

• May define a constraint on the Feature’s content (One task flow

for manager another for a sales representative)

Feature Constraints

Page 19: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

• Use one of the properties for device, hardware or user evaluation

• device.platform, device.os

• hardware.hasCamera, .hasCompass

• user.role, user.privileges

• Allowable operators

• contains, not, equal, less, more

• If evaluated to true, then feature is displayed

<constraint property="user.roles"

operator="contains"

value=“manager_role" />

Adding Feature Constraints

Page 20: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Feature Level Skinning

• Designate a specific style for an application feature

• Overrides application level skinning

• Overrides the default styles set at the application-level within the

adfmf-config.xml and adf-skins.xml files

• Add individual styles to the application feature using a CSS file as

the Includes file

Page 21: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Use theses methods when you create a custom Springboard

Application Feature Methods

Method Description

gotoDefaultFeature Navigates to default application feature

gotoFeature Navigates to a specific application as designated by

the parameter that is passed to this method

gotoSpringboard Navigates to the springboard

hideNavigationbar Hides the navigation bar

showNavigationbar Displays the navigation bar (if it is hidden)

resetFeature Resets the application feature that is designated by the

parameter passed to this method

Page 22: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

• The lifecycle of an ADF Mobile application is driven by events

that occur at 3 levels:

1. Mobile device’s operating system

2. The JVM (only in startup and shutdown)

3. ADF Mobile Features

• Developer can interject code/customize behavior at the

Application and Feature lifecycles

• Invoke custom logic when

application or feature

starts up/shuts down

• For example, add code to

download data into local

database when application

starts

Application and Feature Lifecycle

Page 23: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Event Timing When called Use

start Called after app

is completely

loaded & before

presenting the

feature or

springboard

After adfmf-application and

adfmf-feature are loaded•Determine if application

has updates

•Request to download data

from a remote server to

local database

•Find the local application

image

stop Called as the

application

begins shutting

down

During applicationWillTerminate

method

•Logoff any remote services

•Upload data changes to

the server before it closes

Start/Stop Lifecycle Events

Page 24: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Event Timing When called Use

activate Called as feature

activates from being

situated in the

background

During applicationDidBecom

eActive method

•Read and repopulate

cache stores

•Process WS requests

•Obtain requires

resources

deactivate Called as feature is

deactivated and

moves to the

background

During applicationWillResi

gnActive method

•Write restorable state

•Close db cursors and

connections

•Defer WS requests

Activate/Deactivate Lifecycle Events

Page 25: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

• Notifications sent from the native operating system frameworks to the JVM are managed by methods found in the LifeCycleListener

class

• The notifications describe various states (starting, stopping, or

hibernating) for both the mobile application and its embedded

application features

• Every ADF Mobile application includes a sample event listener class (LifeCycleListenerImpl )

• You may and add to code to the specific event methods

• Then in the overview editor, assign the listener to execute for the application (adfmf-application.xml) or the feature (adfmf-

feature.xml)

• Store application level lifecycle listeners in the ApplicationController project, feature specific listeners in the

ViewController project

Lifecycle Event Listener

Page 26: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

• Define a class that implements LifeCycleListener, then

add event code

• Declare the listener at application or feature level

Using a Lifecycle Listener

Page 27: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

• Reuse a ViewController project by creating a feature archive

(FAR)

• Is a self-contained feature collection including icon images,

resource bundles, HTML, JavaScript, or other implementation-

specific files

• Default Springboard is included in a FAR

• Steps to build a FAR

1. Create a feature archive file by deploying a feature application

as a library JAR file

2. Import the feature archive file in a different ADF Mobile

application

Using Feature Archives (FAR)

Page 28: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Preferences and Settings

• Preferences enable you to add settings that can be configured

by end users

• Like the setting the Search Engine preference for your mobile

browser to Google, Yahoo or Bing

• May define preferences them at the application or feature level

Page 29: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Preference Types

• Create Preference Groups and Preference Items

• May set at application of feature level – each using different scopes

• Set the Preference Type to one of the five values below

1. Page: Specifies a new page in the user interface

2. List: Provides users with a specific set of options

3. Value: Child element that defines a list element

4. Boolean: A boolean

setting

5. Text: A text

preference setting

Page 30: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

Accessing Preference Values

• Once the preferences have been set, then you may access

them using EL expression in AMX components

• Access preference values by scope:

• Application or Feature

• Then by preference group

• Use the following format to access preferences in a component

preferenceScope.feature.feature-id.group-id.property-id

<amx:inputText label="Number" id="it1" inputType="number"

value="#{preferenceScope.feature.Feature1.f1top.f1Number}"/>

Page 31: ADF Mobile: Applications and Features - oracle.com · •Local HTML File •Hand-coded HTML5 pages ... •Upload data changes to ... Specifies a new page in the user interface 2

•<Insert Picture Here>

Summary

Topics covered in this lesson include:

• Creating Application Features

• Create Features & Icons

• Application and Features Lifecycle

• Feature Content

• Constraints & Style

• Feature Archives

• Setting Preferences