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.
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 methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.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 === "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"});}​
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;
​​
​
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.
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.
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 methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.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 === "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"});}​
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;