Wednesday Oct 14, 2015

Stretching AMX components with amx-fitParent and amx-filmStrip-stretchItems styles

Stretching AMX components with amx-fitParent style

If you want any AMX component (that is stretchable, i.e. one that responds to width and height dimensions like a listView or deck) to stretch and take up the size of it's parent component (assuming the parent component is allocating space for children vs. one that is as tall or wide as its children), you can use the amx-fitParent style on that component.

Example 1:

In the example shown below, an amx:deck component is placed within the center facet of a panelStretchLayout. On setting the styleClass attribute to amx-fitParent , the deck component takes up the available width , available height, and stretches to fill up the center facet. You can find this example implementation in the LayoutDemo public sample. Look at tabsTopWithFilmStrip.amx page within the LayoutDemo sample for more details.

<amx:deck displayedChild="item1" styleClass="amx-fitParent" id="d1"/>

Example 2:

In the example shown below, an amx:commandLink component is placed within an amx:filmStripItem component. On setting the styleClass attribute to amx-fitParent, the commandLink component takes up the size of it's parent filmStripItem component.  You can find this implementation in the WorkBetter sample application. Look at login.amx page for more details.

<amx:filmStripItem id="fsi3">
<amx:commandLink id="cl3" styleClass="amx-fitParent" shortDesc="Login Karen Link">

Stretching AMX components with amx-filmStrip-stretchItems style 

If you want the filmStripItem component to stretch and take up the size of the filmStrip component, you can set the attribute itemSizing="stretched" on the filmStrip component. Alternatively you can also set the styleClass attribute on the filmStrip component to amx-filmStrip-stretchItems. The former option (setting itemSizing attribute to 'stretched') is the recommended approach.

Example :

In the example shown below, the section highlighted in the red represents a filmStripItem component which is taking up the entire available width and available height of the it's parent (filmStrip) component. You can find this implementation in the LayoutDemo sample application. Look at filmStripWithFlex.amx page for more details.

<amx:filmStrip id="fs1" styleClass="amx-fitParent" itemSizing="stretched">
<amx:filmStripItem id="fsi1">

Oracle MAF 2.2 New Features

V2.2 is the new release of Oracle Mobile Application Framework (Oracle MAF). This blog provides an overview of several new features added in this release.

 1. UI Components

This release introduces several new components and enhancements to help developers support latest mobile patterns

Swipe To Reveal :

Allows user to swipe on a row in a list to reveal contextual actions. This functionality can be added to an AMX page using <amx:accessoryLayout/> component.

Example usage:

Swipe To Reveal Sample

Pull To Refresh :

Allows developers to swipe down and refresh the contents of a page. This capability can be added to a page using <amx:refreshContainer/> component.  

Example usage:

Pull to refresh

New Layout Components 

Allow developers to easily build flexible Dashboard and Grid layouts.  

MasonaryLayout :  Typically used for building Dashboard style pages involving tiles laid out in the form of a grid. The size of each tile can be adjusted using css. It provides the following key capabilities

  1. Adjusts layout based on the available width
  2. Allows drag and drop of tiles in the layout 

Example usage:

Pull to refresh

FlexLayout: A layout component that displays its children in a group. It supports horizontal and vertical orientations, with automatic changes based on the device orientation. By default, the layout creates even space for each child, and stretches these children within its boundaries.

Example usage: 

Data Visualization Enhancements :

  • Stock Charts : Stock charts are useful for displaying stock data across time. A unique feature of stock charts is the ability to render series data as 'candlesticks' representing open, close, high, and low stock price data.
  • Chart Drill Events : Allows users to tap on series or group or data items to raise drill events to drill in to the chart data
  • Support for overview and vertical orientation for Timeline component

Alta Mobile V1.4 :  

New skin with support for Google Material design for Android L

2. Data binding Enhancements

Support For Nested DataControl Context:

  • Allows developers to build recursive navigation flows using Task Flows
  • Isolate state at the Taskflow level
  • Manage the number of Taskflow/DC instances maintained in the stack 
  • Example: Opportunity List -> Opportunity Detail -> Account Detail (from the account associated with the Opportunity) -> Related Opportunity List -> Opportunity Detail (with a different Opportunity than previous)

3. Navigation Enhancements

  •  Full support for Android back button
    • Support for overriding the default behaviour using <amx:systemActionBehavior> tag or JS API
    • “__back” navigation rule is used by default
  • Support for limiting pageFlowScope variables to TaskFlow boundaries

4. Performance Improvements

  •  30% overall performance improvement compared to previous release
  • Major Performance improvements in the following areas
    • JSON Parsing : New parser based on JSONP
    • New Optimized JVM : 30-40% performance improvement in Java processing
    • UI performance improvements to improve the page rendering time 


Oracle MAF 2.2 has many exciting features and we encourage everyone to upgrade and give it a try. Several of the features listed above are used in the sample applications shipped with the release. Please refer to the samples for sample code. Component Gallery, Layout Demo and WorkBetter sample Apps cover most of the features listed above.

Tuesday Sep 29, 2015

MAF and OS X El Capitan and Xcode 6

UPDATE - It's official.  The Apple Developer page Submit your apps to the App Store states "OS X El Capitan requires Xcode 7. If your app still depends on Xcode 6, you'll need to keep a partition or external hard drive with OS X Yosemite installed in order to submit from Xcode 6."  That sounds like too much effort to me, so I recommend you simply stay put on OS X Yosemite for now while the current version of MAF requires Xcode 6.

Apple today announced that OS X El Capitan will be available on Wednesday, September 30 as a free update for Mac users.

There have been reports of incompatibility between beta releases of OS X El Capitan and Xcode, with Apple suggesting a workaround on the Apple Developer Forums here. Whilst that post makes it clear that Xcode 7 will be fully supported on OS X El Capitan, it remains unclear whether Xcode 6 will be fully supported.

MAF 2.1.3 requires Xcode 6. 

As soon as OS X El Capitan is released, the MAF development team will commence certification of MAF 2.1.3 using Xcode 6 on OS X El Capitan.  Until this certification has been completed, you may wish to remain on your current OS X release.

Monday Sep 07, 2015

Quick Tip: Multi Line Labels on Command Button

By default, command button labels in MAF AMX display as a single line. But what if you need to reduce the width of a command component while still going with a longer label on it? In this case Cascading Style Sheet (CSS) comes in handy. You can create a quick test case yourself and copy & paste the page code below

<amx:commandButton id="c1" text="one two three four five six seven eight nine ten eleven twelve thirteen"
     inlineStyle="word-break:break-word; white-space: normal; width:100px; 
                  height:150px; max-height:0%; max-width:100px;">

Note the inlineStyle property setting, which not only determines where and how to break the label string but also sets the max width and height for the component. If you like this CSS setting to be more central, you can add it to a MAF skin file so it is applied to all buttons, or just to buttons that reference a specific style class

Friday Sep 04, 2015

Quick Tip: Changing Button Icon in Response to Button Action

A question on the Oracle MAF forum on the Oracle Technology Network  was about how to change the icon displayed on a command button in response to a button action. The solution to this challenge is to think Java and managed bean. Below is a quick outline to the solution of this problem.

AMX page content

The AMX page content shows a command button with an icon attribute that points to a managed bean in view scope (no need for a larger scope).

  <amx:commandButton text="commandButton1" id="cb3" inlineStyle="height:150px; width:150px;"

Managed Bean

The managed bean that you configure either in the adfc-mobile-config.xml file or a task flow specific configuration file contains a property for setting the image ("imageName" in the example) along with its setter/getter methods and two final variables that hold the two image icon names and locations.

import oracle.adfmf.amx.event.ActionEvent;

public class SampleBean {
  private static final String IMAGE1 = "/img/4.png";
  private static final String IMAGE2 = "/img/5.png";
  String imageName = IMAGE1;
  private PropertyChangeSupport propertyChangeSupport = new PropertyChangeSupport(this);

  public SampleBean() {

  public void setImageName(String imageName) {
     String oldImageName = this.imageName;
     this.imageName = imageName;
     propertyChangeSupport.firePropertyChange("imageName", oldImageName, imageName);

  public String getImageName() {
     return imageName;

  public void addPropertyChangeListener(PropertyChangeListener l) {

  public void removePropertyChangeListener(PropertyChangeListener l) {

  public void onButtonPressed(ActionEvent actionEvent) {
    if (imageName.equalsIgnoreCase(IMAGE1)){

Important for this to work is that the property change support is added to the managed bean and the image name setter methods. This can be generated for you by Oracle JDeveloper and also in OEPE (Eclipse). With the property change event fired MAF will be notified about a data change and then refreshes the UI of the component the Java code is bound to.

The "onButtonPressed" method is invoked by the command button's action listener attribute and compares the current icon with the two images names in the bean to determine which one to set.

Friday Aug 28, 2015

MAF MCS Utility: Accessing Oracle MCS from MAF Made Simple

With the recent release of Oracle MAF 2.1.3 a new utility becomes available that simplifies access to Oracle Mobile Cloud Services (MCS) from Oracle MAF applications. Oracle MAF MCS Utility (MAF MCS Utility in short) is a Java library for Oracle MAF applications and exposes  MCS client platform REST API calls as native Java calls. This blog post introduces Oracle MAF MCS Utility, explains what it does, how it works and where to find it.

Oracle Mobile Cloud Service client API

Oracle MCS is all about REST! Any mobile client that is capable of sending REST requests and to handle JSON responses can invoke MCS mobile platform functionality exposed on a mobile backend (MBE). This includes calls to Analytics, Notification, Storage, User Information and Custom API.

About MCS client SDK

REST is a good choice for Oracle MCS and ensures an understandable and very easy to use application development interface.

From the perspective of mobile application developers however, accessing REST interfaces from mobile applications is a mental mismatch. To access REST APIs from a mobile application developers need to "think REST" though their comfort zone is within their favorite programming language, which for mobile usually means Objective-C, Java or scripting.

To address this lack of developer comfort and to improve developer productivity, Oracle MCS provides development language specific client SDKs. The MCS client SDK provides a native language abstraction to the underlying REST calls (for Android and Objective-C at current, as well as Xamarin), plus handy infrastructure functionality like offline synchronization and support for push notification registration and handling.

The image below shows the basic architecture pattern implemented by all Oracle MCS SDKs. All in all, using the MCS SDK makes developers more productive, requiring them to write less code.

MCS SDK Architecture

A MBE Manager object, a singleton, is configured with information required to access mobile backend(s) exposed on an Oracle Mobile Cloud Service instance. Mobile applications access the MBE Manager to obtain an instance of an MBE object representing a specific mobile backend in MCS.

The MBE object itself exposes Service Proxy objects that abstract the MCS platform API access. When using the service proxy objects to read and write to the remote mobile backend on the remote MCS instance, the MCS SDK takes care for all required request headers to be added (e.g. Oracle-Mobile-Backend-Id, Authorization, etc.), thus reducing the error surface for application developers. 

You can tell from the above description and image that the MCS client SDK is a simple but effective solution for mobile application developers to stay in their comfort zone.

About MAF MCS Utility

Oracle MAF is a Java based framework that uses Apache Cordova to deploy mobile applications to the Android and iOS platform (and Windows in a future release). MAF uses Java as a shared language across mobile platforms. The use of Java and the cross platform nature of MAF don't allow the use of one of the existing MCS client SDKs. This is where MAF MCS Utility comes in.

MAF MCS Utility provides functionality similar to those of the Oracle MCS client SDKs with some minor differences explained in the following with the help of the image below.

MAF MCS Utility Architecture

MAF MCS Utility needs to be added as a JAR file to MAF applications and is deployed to the mobile device as part of the application.  For this, MAF application developers add the mafmcsutility.jar file to the ApplicationController and/or ViewController project.

The MBE Manager, a singleton, manages MBE object instances that are created from a MBE configuration object. A copy of the MBE configuration object is stored and updated within the MBE instance. MAF application developers can access the MBE configuration object at runtime to e.g. dynamically enable or disable MBE specific logging or to enable or disable collecting analytic events. Service Proxy objects in MAF MCS Utility expose MCS platform REST API calls as typed native Java method calls.

To issue REST requests and handle JSON reponses, MAF MCS Utility wraps the MAF framework RestServiceAdapter class to benefits from MAF features like the security framework and the declarative REST connection framework.

MAF MCS Utility example

The code snippet below creates a MBE configuration object to then obtain a MBE instance from the MBE Manager to showcase how easy MCS integration becomes with MAF MCS Utility
MBEConfiguration mbeConfiguration = 
    new MBEConfiguration(
          <mbe rest connection>,<mobileBackendId>,
          <anonymous key string>,<application key string>, 
MBE mobileBackend = MBEManager.getManager().
         createOrRenewMobileBackend(<mobile backend Id>, mbeConfiguration);

As you can see, the majority of the code lines above are to define the mobile backend specific information like the MCS MBE id, its base URL, as well as the anonymous key (for public access) and the application client key, which allows MAF MCS Utility to register a MAF application with MCS to receive push notifications from MCS. Once you have a handle to the MBE object you call service proxy objects for a specific MCS platform interface as shown below.

UserInfo userInfo = mobileBackend.getServiceProxyUserInfo();
Analytics analyticsProxy = mobileBackend.getServiceProxyAnalytics();
Storage storageProxy = mobileBackend.getServiceProxyStorage();
CustomAPI customApiProxy = mbe.getServiceProxyCustomApi();

Where to get MAF MCS Utility

MAF MCS Utility ships as part of the MAF 2.1.3 public samples. The sample contains the MAF MCS Utility source code, a compiled ready-to-use mafmcsutility.jar library file and a MAF application that demonstrate how to use MAF MCS Utility.

The MAF MCS Utility sample application (shown in the image below) is a generic Oracle MCS tester that can be configured to run against any MCS public cloud instance.

MAF MCS Utility public sample application

MAF MCS Utility Positioning

MAF MCS Utility provides MCS SDK functionality for Oracle MAF application developers to easily integrate calls to Oracle Mobile Cloud Services in their mobile applications. It improves developer productivity by shifting the "think REST" development style to "think Java" when accessing Oracle MCS platform APIs from MAF applications, which also means less code to write.

Because MAF MCS Utility implements the same architecture access pattern as the existing (and future) MCS SDK there is no extra learning curve to it. If you can do it in Android and iOS, you can do it in MAF as well (and vice versa).

MAF MCS Utility in the SDK Architecture

MAF MCS Utility Developer Guide

MAF MCS Utility is further explained in a developer guide, which also covers the MAF MCS Utility public sample application. For each service proxy, the developer guide points you to where in the public sample you find sample code to study and reuse.

MAF MCS Utility Support

As other samples that are distributed with the Oracle MAF public samples, we do our best to provide end user support on the MCS forum on OTN and the MAF forum on OTN.


This blog is is dedicated to announcements,tips and tricks and other items related to developing, integrating, securing, and managing mobile applications using Oracle's Mobile Platform. It is created and maintained by the Oracle Mobile product development team.

Archive of past entries

Even More Mobile Development Blogs

Oracle A-Team Site - Mobile Related Entries

Code samples from the Community

Fusion Middleware Blogs


« November 2015