cabrillo.viewLayout - Client

Cabrillo JS functions to provide access to native UI elements like buttons and spinners.

cabrillo.viewLayout - hideSpinner()

Hides a native spinner in the current interface.

Table 1. Parameters
Name Type Description
None
Table 2. Returns
Type Description
void
cabrillo.viewLayout.hideSpinner();

cabrillo.viewLayout - setBottomButtons( Array buttons, Function handler)

Set buttons at the bottom of the current interface.

Currently supports a maximum of one button in the array. Images and badges are not supported in bottom buttons.

Table 3. Parameters
Name Type Description
buttons Array of Cabrillo.Button objects Describes the buttons to set. A maximum of one button is currently supported.
handler Function The function to call when a button is tapped. The function has no return value and takes the selected button index as its only parameter. The function must have a single parameter that is a Number.
Table 4. Returns
Type Description
promise If successful, is undefined; otherwise, an error.

Set bottom buttons

var buttons = [
    {
        title: 'Add to Cart',
        enabled: true,
        backgroundColor: '#3091F9',
        textColor: '#FFFFFF'
    }
];

cabrillo.viewLayout.setBottomButtons(buttons, function(buttonIndex) {
    console.log('Received an event from the button.');
}).then(function() {
    console.log('Buttons were set.');
}, function() {
    console.log('Failed to register buttons.');
});

Clear bottom buttons

cabrillo.viewLayout.setBottomButtons();

cabrillo.viewLayout - setNavigationBarButtons( Array buttons, Function handler)

Set buttons in the navigation bar of the current interface.

Images and badges for buttons that appear in the overflow button menu are omitted. For this reason, it's best to provide a title and an image name when setting an image button in the navigation bar.

Table 5. Parameters
Name Type Description
buttons Array of Cabrillo.Button objects. Describes the buttons to set. Buttons may overflow into an additional menu as needed.
handler Function The function to call when a button is tapped. The function has no return value and takes the selected button index as its only parameter. The function must have a single parameter that is a Number.
Table 6. Returns
Type Description
promise If successful is undefined; otherwise an error.

Set navigation bar buttons

var buttons = [
    {
        title: 'Save',
        enabled: true
    }
];

cabrillo.viewLayout.setNavigationBarButtons(buttons, function(buttonIndex) {
    console.log('Received an event from the button.');
}).then(function() {
    console.log('Buttons added.');
}, function() {
    console.log('Failed to register buttons.');
});

Handle multiple buttons

var buttons = [
    {
        title: 'Save',
        enabled: true
    },
    {
        title: 'Delete',
        enabled: true
    }
];

cabrillo.viewLayout.setNavigationBarButtons(buttons, function(buttonIndex) {
    switch (buttonIndex) {
        case 0:
            console.log('Received an event from the Save button.');
            break;
        case 1:
            console.log('Received an event from the Delete button.');
            break;
    }
}).then(function() {
    console.log('Buttons were set.');
}, function() {
    console.log('Failed to register buttons.');
});

Buttons placed in the navigation bar can be represented by an image.

var buttons = [
    {
        title: 'Compose',
        imageName: 'compose',
        enabled: true
    }
];

cabrillo.viewLayout.setNavigationBarButtons(buttons, function(buttonIndex) {
    console.log('Received an event from the button.');
}).then(function() {
    console.log('Buttons were set.');
}, function() {
    console.log('Failed to register buttons.');
});

Buttons are placed in the overflow button menu as needed. To force a button into the overflow button menu, set the button's buttonStyle property.

var buttons = [
    {
        title: 'Save',
        buttonStyle: cabrillo.viewLayout.MORE_MENU_BUTTON_STYLE,
        enabled: true
    }
];

cabrillo.viewLayout.setNavigationBarButtons(buttons, function(buttonIndex) {
    console.log('Received an event from the button.');
}).then(function() {
    console.log('Buttons were set.');
}, function() {
    console.log('Failed to register buttons.');
});

Buttons may have a badge when placed in the navigation bar. This example sets a button with a shopping cart icon and a badge count of 3. The badge has a blue background with white text.

var buttons = [
    {
        title: 'Cart',
        imageName: 'cart',
        badgeCount: 3,
        backgroundColor: '#3091F9',
        textColor: '#FFFFFF',
        enabled: true
    }
];

cabrillo.viewLayout.setNavigationBarButtons(buttons, function(buttonIndex) {
    console.log('Received an event from the button.');
}).then(function() {
    console.log('Buttons were set.');
}, function() {
    console.log('Failed to register buttons.');
});

To clear navigation bar buttons.

cabrillo.viewLayout.setNavigationBarButtons();

cabrillo.viewLayout - setTitle( String title)

Set the current interface title.

Table 7. Parameters
Name Type Description
title String The title of the interface.
Table 8. Returns
Type Description
void
cabrillo.viewLayout.setTitle('My Title');

cabrillo.viewLayout - showSpinner()

Shows a native spinner in the current interface.

Table 9. Parameters
Name Type Description
None
Table 10. Returns
Type Description
void
cabrillo.viewLayout.showSpinner();