Button

 API Reference: UI.Button​
Button represents a clickable object on the screen. A button instance consists of a text or an icon (or both).
TypeScript code blocks includes example of how to implement, override & add components with theme. Create page with UI-Editor to make your page themeable and then able to implement themeable components programmatically. Once page created with UI-Editor, it generates class under scripts/generated/pages. Extend that class with below typescript classes.
TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import System = require('sf-core/device/system');
import Button = require('sf-core/ui/button');
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
​
    myButton: Button;
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
​
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar } = System.OS === System.OSType.ANDROID ? this : this.parentController;
    superOnShow();
    Application.statusBar.visible = true;
    headerBar.visible = true;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
​
    this.myButton = new Button({
        text: "Button",
        onPress: function () {
            console.log("Button pressed");
        }
    });
​
​
    this.layout.addChild(this.myButton, "myButton", ".sf-button", {
        width: 100,
        height: 50,
        textColor: "#000000",
        backgroundColor: "#00A1F1"
    });
}
​
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Color = require('sf-core/ui/color');
const Button = require('sf-core/ui/button');
​
var Page1 = extend(Page)(
    function(_super) {
        _super(this, {
            onShow: function(params) {
                Application.statusBar.visible = false;
                this.headerBar.visible = false; //For Android
            }
        });
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
​
        var myButton = new Button({
            width: 100,
            height: 50,
            text: "Button",
            textColor:Color.BLACK,
            backgroundColor: Color.create("#00A1F1"),
            onPress: function() {
                console.log("Button pressed");
            }
        });
​
        this.layout.addChild(myButton);
    }
);
module.exports = Page1;
​​​
Auto Content Size
In a column-flexlayout : If no height and flexgrow set for a label object, it automatically resizes according to text content.
In a row-flexlayout : If no width and flexgrow set for a label object, it automatically resizes according to text content.
How to place view over button?
On android, default elevation value of button is bigger than 0, but not others. Also, elevation value is different on pressed state and on normal state. To place view over button, you have to change zIndex after Android Lollipop.
TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import System = require('sf-core/device/system');
import Button = require('sf-core/ui/button');
import ActivityIndicator = require('sf-core/ui/activityindicator');
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
​
    myButton: Button;
    myActivityIndicator: ActivityIndicator;
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
​
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar } = System.OS === System.OSType.ANDROID ? this : this.parentController;
    superOnShow();
    Application.statusBar.visible = false;
    headerBar.visible = false;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
​
    this.myActivityIndicator = new ActivityIndicator();
    this.myButton = new Button({
        text: "Press me!",
        onPress: (): void => {
            this.myActivityIndicator.android.zIndex = this.myButton.android.zIndex + 1;
        }
    });
​
    this.layout.addChild(this.myButton, "myButton", ".sf-button", {
        width: 100,
        height: 50,
        textColor: "#000000",
        backgroundColor: "#00A1F1"
    });
​
    this.layout.addChild(this.myActivityIndicator, "myActivityIndicator", ".sf-activityIndicator", {
        width: 42,
        height: 42,
        flexProps: {
            positionType: "ABSOLUTE"
        },
        color: "#808080"
    });
}
​
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Color = require('sf-core/ui/color');
const Button = require('sf-core/ui/button');
const ActivityIndicator = require('sf-core/ui/activityindicator');
​
var Page1 = extend(Page)(
    function(_super) {
        _super(this, {
            onShow: function(params) {
                Application.statusBar.visible = false;
                this.headerBar.visible = false; //For Android
            }
        });
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
        
        var myActivityIndicator = new ActivityIndicator({
            color: Color.GRAY,
            width: 42,
            height: 42,
            positionType: FlexLayout.PositionType.ABSOLUTE
        });
        
        var myButton = new Button({
            width: 100,
            height: 50,
            text: "Press me!",
            textColor:Color.BLACK,
            backgroundColor: Color.create("#00A1F1"),
            onPress: function() {
                myActivityIndicator.android.zIndex = myButton.android.zIndex + 1;
            }
        });
​
        this.layout.addChild(myButton);
        this.layout.addChild(myActivityIndicator);
    }
);
module.exports = Page1;
BlurView
Color
Last updated 3 months ago