Control Behavior Overrides

Description

This property is used with mobile devices.

The UX component allows you to customize the behavior of certain controls based on the screen size of the device. For example, normally, the 'picker' for a date control, or an edit-combo control opens in a drop-down window, immediately under the control. However, on a phone, which has a narrow screen, there is not enough room to display the control's 'picker' in a dropdown window. Instead, you are likely to want the control to appear in a window that is docked to the bottom of the screen, centered horizontally.

To define control behavior overrides, click the smart field button for the 'Control behavior overrides' property on the UX Properties pane.

This will open a dialog where you can insert the Javascript that defines the behavior override. The behavior override is expressed in the form of Javascript code that uses the A5.override.add() function to define the behavior override.

For example, in the code snippet shown below, the behavior of the 'Edit-combo' control is changed when the screen size is less than 500 pixels.

/*
if the width of the viewport is less than 500px make datePickers and edit-combos
pop up from the bottom of the screen, centered horizontally
*/
var vpSize = AUI.u.getVPSize();
if(Math.min(vpSize.width,vpSize.height) < 500){
    A5.overrides.add('editCombo',{
        base: {
            decouple: true,
            window: {
                width: '100%',
                height: '50%',
                pointer: {show: false},
                location: ['dock','bottom'],
                animation: {
                    show: {type: 'css-slide'}
                }
            }
        }
    }
    );
}
The function AUI.u.getVPSize() is designed to work on a device. It does not return the correct value when used in live or working preview.
The 'base' behavior of the control is defined in the style.js file. For example, if you are using the iOS style, then the base behavior is defined in the css/iOS/style.js file in your executable folder.

Videos 

Customizing The Date Picker and Edit-Combo Behavior on a Phone

The UX component allows you to customize the behavior of certain controls based on the screen size of the device. For example, normally, the 'picker' for a date control, or an edit-combo control opens in a drop-down window, immediately under the control.

However, on a phone, which has a narrow screen, there is not enough room to display the control's 'picker' in a dropdown window. Instead, you are likely to want the control to appear in a window that is docked to the bottom of the screen, centered horizontally.

In this video we show how you can define Javascript to override the behavior of certain controls, depending on the screen size.

2013-11-28