Page tree
Skip to end of metadata
Go to start of metadata

This guide explains how to use the Label object and very common methods to use the Label.

What is Label ?

Label is a UI object to display a text on the screen. A Label can contain only a single type font.
Example:

var label1 = new SMF.UI.Label({
		left : "10%",
		top : "10%",
		text : "Smartface",
		multipleLine : false
	});
page1.add(label1);

If it is added to a Page, it will be shown like below:


The Label object has some behaviours which will help users to use the Label object efficiently. These behaviours are;

  • AutoSize : Changes the size of the label to fit the content . It changes only the width value if the label is single line.
  • showScrollBar: Shows a scrollBar if the label object is multiple line and the content is long enough for scrolling.
  • adjustFontSizeToFit: Changes the size of the font to fit for the label.
  • detectURLsInString: Highligths the URLs in the text if it is true. 

Data Binding

Label object can be bound to a data source with different ways. These are;

  • static text
var label1 = new SMF.UI.Label({
		left : "10%",		
		top : "10%",
		text : "Smartface",
		multipleLine : false
	});
  • any JavaScript Object
var myArray = ["Smartface"];
var label1 = new SMF.UI.Label({
		left : "10%",
		top : "10%",
		text : myArray,
		multipleLine : true
	});
  • any JavaScript Variable
var myVariable = "Smartface";
var label1 = new SMF.UI.Label({
		left : "10%",
		top : "10%",
		text : myVariable,
		multipleLine : false
	});

Multiline Usage

Label object works singleLine by default , but it is possible to change it as a multiline scrolling label. If its multipleLine property is true then it will work as multiple line. For example;

var label1 = new SMF.UI.Label({
		left : "10%",
		top : "10%",
		height : "20%",
		text : "Smartface \n is the best \n Cross-Platform.",
		multipleLine : true
	});
page1.add(label1);

Rich Text Usage

Label object supports rich text by the attributedText property. It is possible to use rich text with HTML text formatting rules. An HTML string will be set for the attributedText property, so the HTML string will be parsed and set as attributed text. For example ;

var label1 = new SMF.UI.Label({
		left : "10%",
		top : "10%",
		attributedText : "Smartface <span style='color: #ff0000';>Best</span> <b>Framework</b><sup>SMF</sup>",
		multipleLine : true
	});
page1.add(label1);