Back

Text

Create Text objects using the CreateText method of the app object:

 txt = app.CreateText( text, width, height, options );

You can use the "Multiline" option to allow multi-line text and the "Left" or "Right" options to align the text. The default is single line centered text.
Other options you will see used in the samples include AutoScale, Bold, Html and FontAwesome

Use the SetText and GetText functions of the Text object to set and get it's text.

Example - Single line

function OnStart()
{
    lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

    txt = app.CreateText( "Hello" );
    txt.SetTextSize( 22 );
    lay.AddChild( txt );

    app.AddLayout( lay );
}
    Copy     Copy All      Run     

You can change the look of a Text using the SetBackColor and SetTextColor functions on the Text object.

Example - Multi line

function OnStart()
{
    lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

    txt = app.CreateText( "Hello\nWorld", 0.8, 0.2, "Multiline" );
    txt.SetTextSize( 12 );
    txt.SetTextColor( "#ff6666ff" );
    txt.SetBackColor( "#ffffffff" );
    lay.AddChild( txt );

    app.AddLayout( lay );
}
    Copy     Copy All      Run     

Text can be shortened using ellipsis (...) when the size of the control is too small to show all the text. Use the SetEllipsize to control where the ellipsis is placed. Available modes are "start", "middle", "end" and "marq".

Example - Ellipsize

function OnStart()
{
    lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

    txt = app.CreateText( "The quick brown fox jumps over the lazy dog", 0.75 );
    txt.SetTextSize( 28 );
    txt.SetEllipsize( "end" );
    lay.AddChild( txt );

    app.AddLayout( lay );
}
    Copy     Copy All      Run     

You can also set a background image/pattern or background gradient for the Text using the SetBackground and SetBackGradient functions. See Layouts for examples of how to use these functions.


See 'CreateText for more informations and a complete function list