Label

API Reference: UI.Label

Label is a view that displays read-only text on the screen.

TypeScript code blocks include examples of how to implement, override and components within the theme. You can create page with the UI Editor to make your page compatible with theming and then you can implement themable components programmatically. Once the page is created with the UI Editor, it generates a class under scripts/generated/pages. You can then extend that class with the following TypeScript classes.

Old label

With the release of sf-core 3.0.0 following changes has occurred:

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import Image = require("sf-core/ui/image");
import ImageView = require("sf-core/ui/imageview");
import System = require('sf-core/device/system');
import TextAlignment = require('sf-core/ui/textalignment');
import Font = require('sf-core/ui/font');
import Label = require('sf-core/ui/label');
import Color = require('sf-core/ui/color');
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
myLabel: Label;
myLabel1: Label;
myFlexLayout: FlexLayout;
textLabel: Label;
myFlexLayout1: FlexLayout;
myLabel2: Label;
myFlexLayout2: FlexLayout;
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 } = this;
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();
const { headerBar } = this;
headerBar.title = "Label";
headerBar.borderVisibility = true;
headerBar.dispatch({
type: "updateUserStyle",
userStyle: {
backgroundColor: "#ffffff",
titleColor: "#000000"
}
})
this.myLabel = new Label({
text: "About Phone"
});
this.myLabel1 = new Label({
text: System.OS
});
this.textLabel = new Label({
text: "Software Upload"
});
this.textLabel.onTouch = () => {
alert("Upload Operation System")
};
this.myLabel2 = new Label({
text: "General Settings"
});
let flexLayoutOptions = {
backgroundColor: "#000000",
height: 1,
width: 320,
marginLeft: 20,
textAlignment: "MIDCENTER"
}
this.myFlexLayout = new FlexLayout();
this.myFlexLayout1 = new FlexLayout();
this.myFlexLayout2 = new FlexLayout();
this.layout.addChild(this.myLabel, "myLabel", ".sf-label", {
width: 320,
height: 20,
textAlignment: "MIDLEFT",
left: 35,
font: {
size: 16,
bold: true,
italic: false,
family: "Arial"
},
textColor: "#000000"
});
this.layout.addChild(this.myLabel1, "myLabel1", ".sf-label", {
width: 320,
height: 30,
left: 35,
textAlignment: "MIDLEFT",
font: {
size: 10,
bold: false,
italic: false,
family: "Arial"
},
textColor: "#000000"
});
this.layout.addChild(this.myFlexLayout, "myFlexLayout", ".sf-flexLayout", flexLayoutOptions);
this.layout.addChild(this.textLabel, "textLabel", ".sf-label", {
width: 320,
height: 100,
textAlignment: "MIDCENTER",
textColor: "#000000"
});
this.layout.addChild(this.myFlexLayout1, "myFlexLayout1", ".sf-flexLayout", flexLayoutOptions);
this.layout.addChild(this.myLabel2, "myLabel2", ".sf-label", {
width: 320,
height: 100,
left: 35,
multiline: true,
textAlignment: "MIDLEFT",
textColor: "#000000"
});
this.layout.addChild(this.myFlexLayout2, "myFlexLayout2", ".sf-flexLayout", flexLayoutOptions);
this.dispatch({
type: "updateUserStyle",
userStyle: {
flexProps: {
justifyContent: "CENTER",
flexDirection: "COLUMN"
}
}
});
}
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require('sf-core/ui/color');
const FlexLayout = require('sf-core/ui/flexlayout');
const Label = require('sf-core/ui/label');
const TextAlignment = require('sf-core/ui/textalignment');
const System = require('sf-core/device/system');
const Font = require('sf-core/ui/font')
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onLoad: function() {
this.headerBar.backgroundColor = Color.create("#ffffff");
this.headerBar.title = "Label";
this.headerBar.titleColor = Color.BLACK;
this.headerBar.borderVisibility = true;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
var myLabel = new Label({
width: 200,
height: 20,
text: "About Phone",
textAlignment: TextAlignment.MIDLEFT,
left: 35
});
myLabel.font = Font.create("Arial", 16, Font.BOLD);
var myLabel1 = new Label({
width: 200,
height: 30,
left: 35,
text: System.OS,
textAlignment: TextAlignment.MIDLEFT
});
myLabel1.font = Font.create("Arial", 10, Font.NORMAL);
var textLabel = new Label({
width: 200,
height: 100,
text: "Software Upload",
textAlignment: TextAlignment.MIDCENTER
});
textLabel.font = Font.create("Arial", 16, Font.BOLD);
textLabel.onTouch = () => {
alert("Upload Operation System")
};
var myLabel2 = new Label({
width: 200,
height: 100,
left: 35,
multiline: true,
text: "General Settings",
textAlignment: TextAlignment.MIDLEFT
});
var flexLayoutOptions = {
backgroundColor: Color.BLACK,
height: 1,
width: 320,
marginLeft : 20,
textAlignment: TextAlignment.MIDCENTER
}
var myFlexLayout = new FlexLayout(flexLayoutOptions);
var myFlexLayout1 = new FlexLayout(flexLayoutOptions);
var myFlexLayout2 = new FlexLayout(flexLayoutOptions);
this.layout.addChild(myLabel);
this.layout.addChild(myLabel1);
this.layout.addChild(myFlexLayout);
this.layout.addChild(textLabel);
this.layout.addChild(myFlexLayout1);
this.layout.addChild(myLabel2);
this.layout.addChild(myFlexLayout2);
},
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = true;
}
});
});
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.

Label vs TextView

  • Label is a light-weight version of TextView

  • Label performs better than TextView. This is mostly observable within ListView

  • Label does not support AttributedText

  • Label does not support all of TextAlignment. Only MIDLEFT, MIDCENTER, MIDRIGHT is supported.

  • Label supports multi-line, but scrolling of the lines are not supported