Wednesday Jan 06, 2016

MAF and iOS 9 multitasking

Apple introduced the concept of multitasking in iOS 9, meaning that you can open a second app on your iPad without closing the one that you are currently using.

Mobile apps built with MAF 2.2.1 support iOS 9 multitasking by default.

For your app to support multitasking, it must also support all possible device orientations. If your app does not support all possible device orientations, when you try to upload it to iTunes Connect, it will report an error message such as:

ERROR ITMS-90474: "Invalid Bundle. iPad Multitasking support requires these orientations: 'UIInterfaceOrientationPortrait, UIInterfaceOrientationPortraitUpsideDown, UIInterfaceOrientationLandscapeLeft, UIInterfaceOrientationLandscapeRight'

To fix this, you either need to add support for all device orientations, or opt out of multitasking support. If you must opt out of multitasking, you need to add the UIRequiresFullScreen key to your app’s Info.plist file with the value true.

The most convenient way to add this key is to create a very simple plugin that has a manifest file (plugin.xml) such as the following, without any additional files:

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" 
        id="maf-plugin-opt-out-multitasking" version="1.0.0">

  <name>maf-plugin-opt-out-multitasking</name>
  <description>Opt out of iOS multitasking on iOS 9</description>

  <platform name="ios">
    <config-file target="*-Info.plist" parent="UIRequiresFullScreen">
      <true/>
    </config-file>
  </platform>

</plugin>

Having created this plugin.xml file, open the maf-application.xml file’s Plugin UI and register this additional plugin, as follows:


A similar approach can be used any time you need to add a key to your MAF app's Info.plist file.

Wednesday Dec 23, 2015

MAF 2.2.1 HTML launch screen for iOS

MAF 2.2.1 has changed the manner in which you define a “launch screen” or “splash screen” for apps deployed to iOS devices.  Static images are no longer supported, meaning that if you previously used custom splash screen images in your app, you will need to create your own custom HTML launch screen for iOS when using MAF 2.2.1.

This post explains the reasons for the change and describes how to create a custom HTML launch screen for iOS.

Android splash screen images remain the same in MAF 2.2.1. For information about how to create a 9-patch image that stretches across different device screen sizes, refer to this blog post.

Background

When a user launches an app on iOS, the operating system displays a launch image while the app is loading.  The purpose is to give the user the impression that the app has launched immediately.

Prior to iOS 8, app developers were required to provide static launch images for every device screen size, resolution and orientation supported by the app.

This approach has been supported by all MAF versions up to and including MAF 2.2.0. In fact, MAF extends this approach and continues to display the appropriate launch image while the framework is being initialized within the app.

Since iOS 8, Apple has encouraged use of a new approach, which is to use a single storyboard to define the launch image.

iOS 9 has introduced the concept of multitasking, meaning that apps can now be launched into a window that does not fill the device’s entire screen. To support multitasking, an app must use a storyboard to define the launch image as fixed-sized images will not work.

MAF 2.2.1 accommodates iOS 9 multitasking by allowing app developers to specify a single HTML-based launch screen, which has the added benefits of removing the onerous task of creating and maintaining a number of static launch images and reducing the size of the app.

Creating a custom HTML launch screen

If your app previously used the default MAF splash screen images, then there’s nothing you need to do when you uptake MAF 2.2.1, as MAF 2.2.1 provides a default HTML launch screen that contains the Oracle logo and copyright similar to the previous default images.

If you previously used custom splash screen images in your app, then you will need to create a custom HTML launch screen for iOS, as follows:

  1. Open the Application page of the maf-application.xml file's Overview editor.
  2. Select the "Custom" option under the Launch Screen section.
  3. Enter the location of an existing HTML page relative to the ApplicationController/public_html directory of your MAF application, or create a new page.

Since the launch screen is based on HTML, CSS and JavaScript, you now have much greater control over what can be displayed.

To get ideas about how to scale images and text across different window sizes, you can refer to the default HTML launch screen included in MAF 2.2.1.

Understanding the default HTML launch screen

To view the default HTML launch screen:

  1. Deploy any MAF 2.2.1 application to an iOS simulator or package.
  2. Navigate to the deploy/<iOS deployment profile>/temporary_xcode_project/FARs/OracleStandardADFmfUiComponents/public_html directory.
  3. Open maf-launch-screen.html in a text editor.

Without analyzing every line of code, let’s take a look at some of the important parts of this file..

JavaScript

The JavaScript functions at the top of the file are used to show and hide a loading indicator and a busy message based on a MAF event. You can include the same logic in your HTML launch screen if you wish to display a loading indicator and/or busy message.

If you don’t want a loading indicator or busy message to be displayed, you can remove the JavaScript and remove the loadingWrap and loadingBox page sections described below.

Page sections

The page is divided into the following sections:

  • background
  • logo
  • copyright
  • loadingWrap and loadingBox

The background and logo sections work together to display a small scalable vector graphic (SVG) image on a solid background color, which is the recommended approach for both performance and logistical reasons.

The launch screen will only be displayed for a short amount of time, so there’s not much time for a high-definition image to be loaded and displayed. In addition, a background image will be stretched and/or cropped to fit various window sizes, which may result in an unnatural-looking image.

If you would prefer something fancier than a solid background color, CSS supports linear and radial gradients. Online sites such as w3schools describe the syntax and provide examples. You can even find online CSS gradient generators at sites such as ColorZilla.

A small SVG image can stretch in a natural fashion to any window size without loss of quality, with the background color filling in the rest of the window. In the default launch screen, the image is embedded in the CSS as a data URI, but you could also co-locate the image file with your HTML launch screen and reference its location in the CSS.

The copyright section contains plain text that is displayed at the bottom of the page. The CSS determines the font size based on the available width of the window in which the launch screen is displayed. You could emulate this approach to display any text you want on your launch screen.

The loadingWrap and loadingBox sections are used to display an animated GIF loading image and a busy message. The JavaScript at the top of the file controls the visibility of these sections and the displayed message.

Conclusion

With MAF 2.2.1 you no longer need to create and maintain a number of splash screen images for iOS and your app size will be decreased.

If you previously used custom splash screen images for iOS, you must now create an HTML launch screen and the default HTML launch screen within MAF 2.2.1 can be used as a guide, as described above.


Wednesday Oct 14, 2015

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 

Summary  

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.

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;">
</amx:commandButton>

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;"
                     icon="#{viewScope.sampleBean.imageName}"
                     actionListener="#{viewScope.sampleBean.onButtonPressed}"/>

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;
import oracle.adfmf.java.beans.PropertyChangeListener;
import oracle.adfmf.java.beans.PropertyChangeSupport;

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() {
      super();
  }

  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) {
     propertyChangeSupport.addPropertyChangeListener(l);
  }

  public void removePropertyChangeListener(PropertyChangeListener l) {
     propertyChangeSupport.removePropertyChangeListener(l);
  }

  public void onButtonPressed(ActionEvent actionEvent) {
    if (imageName.equalsIgnoreCase(IMAGE1)){
      this.setImageName(IMAGE2);
    }
    else{
      this.setImageName(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>, 
          MBEConfiguration.AuthenticationType.BASIC_AUTH);
mbeConfiguration.setEnableAnalytics(true);
mbeConfiguration.setLoggingEnabled(false)
mbeConfiguration.setMobileDeviceId(
         DeviceManagerFactory.getDeviceManager().getName());
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.

http://download.oracle.com/otn_hosted_doc/maf/mafmcsutility-api-doc-082015.pdf

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.

About

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

Search

Archives
« May 2016
SunMonTueWedThuFriSat
1
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    
       
Today