Thursday Feb 04, 2016

MAF 2.2.2 release available now

Approximately 6 weeks after the release of MAF 2.2.1 we have the next patch MAF 2.2.2 available. This release contains several important bug fixes and a new JVM optimized for 64 bit devices on iOS. The new JVM should provide a nice performance boost to your apps on most iOS devices. So we strongly encourage everyone to upgrade to this patch. Some key notes about the release:

  1. If you are already using MAF 2.2.1 picking up this patch should be a breeze. There is no migration needed if you are moving from 2.2.1 so you should be able to re-build your apps with the new release and good to go
  2. If you are moving from 2.2.0 or earlier release please be sure to follow the migration instructions provided here
  3. Bugs fixed in this release and other important release notes are available here

 

Tuesday Jan 19, 2016

MAF MCS Utility Patch for MAF 2.2.1

MAF MCS Utility is a library and public sample that simplifies integration of Oracle Mobile Cloud Service (MCS) in Oracle MAF applications. The MAF MCS Utility library and its sample application are shipped as part of the Oracle MAF public samples, located in the publicSamples.zip file, along with all the other MAF samples.

Sometimes things happen as they do! Unfortunately, when shipping Oracle MAF 2.2.1, the MAF MCS Utility provided with the release was broken. The effect of the defect is that you are getting re-routed to the login screen, or if you got around this problem, Storage and UserInfo don't work properly in the sample application. Using the MAF MCS Utility JAR file in a custom application may fail for Storage uploads in the response sent back from MCS.  

A fixed for MAF MCS Utility (maf-mcs-utility 2.2.1) will be shipped within the next version of Oracle MAF. However, no need to wait. For Oracle MCS and Oracle MAF customers to get the patch to the MAF MCS Utility now, the Oracle Mobile team made the MAF MCS Utility version 2.2.1 available for download online.

Please use the link below to download both in one: the MAF MCS Utility library (a JAR file) and the MAF MCS Utility sample application, which is a generic MCS tester that can be configured to run against any public Oracle MCS instance. 

Download Link: maf-mcs-utility 2.2.1


Tuesday Dec 22, 2015

Android 9-patch splash screen images

A very handy, but little advertised feature introduced in MAF 2.2.0 is the ability to use 9-patch splash screen images for Android.

By using 9-patch splash screen images, you are able to define how your splash screen images will stretch to fit all Android device screens.

You define which area(s) of the image can be stretched, whilst ensuring that other areas such as those containing a logo or text will remain a constant size.

What is a 9-patch image?

A 9-patch image is a standard PNG image that includes an extra 1-pixel wide border and is saved with a .9.png extension.

The border is used to indicate which area(s) of the image can be stretched and optionally which area(s) of the image are fillable (i.e. can be overlaid with text when the image is used as a background image for an Android View object, such as a Button).

To start with, all border pixels must be completely transparent. You then indicate the stretchable and fillable areas by adding black pixels to the corresponding border areas.

For the purpose of a splash screen image, you only need to define the stretchable areas of the image. The top and left borders are used for this purpose. A black pixel in the top border row indicates that the image pixels in that column may be stretched horizontally. A black pixel in the left border column indicates that the image pixels in that row may be stretched vertically.

The following example 9-patch image has a blue background, white log and red box.  I've doubled its size here so you can more easily see the black pixels in the top and left borders.

The black pixels in the top and left borders ensure that only the blue background portion of the image will be stretched when the available display area is larger than the image size.  The center logo and the outer red box will remain static.

For more information, the official Android documentation on 9-patch can be found here and a really good tutorial can be found here.

Creating a 9-patch splash screen image

The best place to start is with your existing set of PNG splash screen images.

Since 9-patch images can only stretch, not shrink, ensure that you start with an image size equal to or smaller than the size of the smallest area in which you expect your app to be launched (remember that some Android versions support launching apps into a window that does not fill device’s entire screen).

For best results with images that contain logos and text, create a separate 9-patch image for each screen density. You may find that a single 9-patch image works in both portrait and landscape mode for the specified density, which will reduce the number of splash screen images you need to create and maintain.

The Android SDK provides a WYSIWYG editor called draw9patch that enables you to create a 9-patch image from an existing PNG image. It is very easy to use and dynamically shows you how your image will stretch. More information on this tool can be found here.

If for some reason you would rather use your favorite image editor, remember the following 9-patch image constraints:

  • The border must be only 1-pixel wide and must surround the entire image, even if you don't wish to define the fillable area.  Thus a 100x100 pixel image becomes a 102x102 pixel 9-patch image.
  • The border must consist entirely of only fully transparent or solid black pixels.  A slight difference in color or alpha level will fail silently at runtime.
  • The image file must have a .9.png extension.  

Using 9-patch splash screen images in your MAF app

Having created 9-patch versions of your splash screen images for each Android screen density and orientation, copy them into your MAF project and reference them in your Android deployment profile.

Conclusion

By using 9-patch splash screen images, you are able to define how your splash screen images will stretch to fit all Android device screens or windows in which your app is launched.

Creating 9-patch splash screen images from your existing PNG splash screen images is simple using the draw9patch tool available in the Android SDK.

The above information is only relevant to Android, since iOS does not support 9-patch.

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.



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
« July 2016
SunMonTueWedThuFriSat
     
1
2
3
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
22
23
24
25
26
27
28
29
30
31
      
Today