TextView

API Reference: UI.TextView

TextView is rich version of Label

JavaScript
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 TextView = require('sf-core/ui/textview');
const TextAlignment = require('sf-core/ui/textalignment');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var myText = new TextView({
width: 120,
height: 60,
backgroundColor: Color.create("#00A1F1"),
text: "TextView",
textAlignment: TextAlignment.MIDCENTER
});
this.layout.addChild(myText);
}
);
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.

AttributedText

Attributed Text, is an "inline" text formatting option. Formatting option can change the following features of the text. A TextView can have more than one or more attributed text.

  • font name

  • font type (weight, bold, italic)

  • text color

  • underline

  • underline color (iOS only)

  • link (touching to a text-block within a TextView trigger the link)

  • text background

const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const System = require('sf-core/device/system');
const TextView = require('sf-core/ui/textview');
const Color = require('sf-core/ui/color');
const Font = require('sf-core/ui/font');
const AttributedString = require('sf-core/ui/attributedstring');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
},
onLoad: function(params) {
var textView = new TextView({
flexGrow: 1,
lineSpacing: 20
});
if (System.OS === "iOS") {
textView.letterSpacing = 5;
}
else {
// letterSpacing working on ANDROID Lollipop (API-21) AND UPPER
textView.letterSpacing = 0.3;
}
textView.onClick = function(link) {
console.log("link " + link);
};
var attributeString = new AttributedString();
attributeString.string = "First\n";
attributeString.foregroundColor = Color.GREEN;
var attributeString2 = new AttributedString();
attributeString2.string = "Second";
attributeString2.link = "Second Link ";
var attributeString3 = new AttributedString();
attributeString3.string = " Third";
attributeString3.link = "Third Link";
attributeString3.backgroundColor = Color.RED;
attributeString3.underline = true;
attributeString3.font = Font.create("TimesNewRomanPS-RegularMT",30);
attributeString3.ios.underlineColor = Color.YELLOW;
textView.attributedText = [attributeString, attributeString2, attributeString3];
this.layout.addChild(textView);
}
});
}
);
module.exports = Page1;

Letter Spacing

The implementation is differs in both OS. iOS accepts point to allocate space between letters. Android accepts 'em' that is the typography unit of font width. According to given text size , em unit is determined such as if given text size is 16 sp then 1em unit is equal to 16 sp. There is also another consideration that em is the width of the widest letter of current language. Such as in English em takes the M letter as widest letter and being considered while spacing.

JavaScript
JavaScript
var textView = new TextView({
flexGrow: 1
});
var attributeString3 = new AttributedString();
attributeString3.string = " Third";
attributeString3.backgroundColor = Color.RED;
attributeString3.underline = true;
attributeString3.font = Font.create("TimesNewRomanPS-RegularMT", 30);
attributeString3.ios.underlineColor = Color.YELLOW;
// letterSpacing working on ANDROID Lollipop (API-21) AND UPPER
textView.letterSpacing = (System.OS === "iOS" ? 5 : 5 / attributeString3.font.size);
textView.attributedText = [attributeString3];
this.layout.addChild(textView);

TextView vs Label

This comparison is documented within Label guide

IDE support

It is possible to edit attributed text display features within IDE easily. While editing the TextView from design area, double-click causes opening of inline text editor in the design area. For TextView only, IDE is showing an additional dialog to change the formatting of the selected text. The attributed text, for the changed features, may no longer be affected by the properties & styling.

HTML to Attributed Text

Smartface has prepared a html-to-text library, that converts HTML to AttributedText. This library can convert some basic level HTML to AttributedText. UI editor uses this library to convert rich HTML text to with JavaScript. It is possible to observe this behavior in UI editor generated codes. ## Copy & Paste rich text with UI editor

  • UI editor supports copy-pasting of rich text across TextViews

  • It is possible to copy a rich text from other HTML sources and paste it into TextView. In that case, it may work, it may not. Smartface officially does neither supports nor recommends this approach. Use it at your own risk.