
Mobile Widgets
draw text
Introduction
Shape node is used to draw a text.
Use geometry field of Shape node with values:
Draw simple text
Draw a simple text with Text node.
- string define the text (array of SFString).
- fontStyle define the font style (size, style,... See FontStyle node)
Note:
Use internationalization functions for all text.
Example, display "Hello world" text:
We can draw a multi line text with Text node.
Replace "geometry Text { string ["Hello world"] }" by "geometry Text { string ["Hello world" "Line 2" "Line3"] }".
But a long text is not fully visible.
For example, replace text node by "Text { string ["too long string. End of text is not visible."]".
Automatic fit text
Text node is easy to use, but, it is restricted.
We can use WrapText node to advanced features.
WrapText node display text using automatic wrap
to fit in maxWidth pixels width and using a maximum of maxLines lines of text.
WrapText node interface:
See WrapText node documentation for more information about fields.
We can display previous text with the WrapText node.
Font style
We can define the font style for Text node and
WrapText node via the fontStyle field.
FontStyle node interface:
See FontStyle node documentation for more information about fields.
Example of FontStyle node:
Text alignment examples (justify field):
Text style examples (style field):
Text size examples (size field):
Text font examples (family field):
Rich text
RichText node is a XHTML renderer (with CSS support).
We can display complex document (style, color, picture, ...).
See RichText node documentation for more information about this node.
Example of RichText node :
Source code:
We use style field to define CSS style.
We use string field to define document (XHTML).
Advanced text component
Mobile Widgets implement text components (via prototypes).
Note:
Prototypes can change between Mobile Widgets and Tiny Mobile Widgets versions.
TextField prototype
TextField prototype interface:
- inputTEXT: permit to modify text displayed in Text Field
- outputTEXT: event generated each time text of Text field is modified
- lockMode: if TRUE, user can not change mode
- mode: key selection of mode
- 0 : abc lower case mode
- 1 : ABC upper case mode
- 2 : 123 numeric mode
- 3 : 0.2 decimal mode / lockMode off, displayMode off, '*' to delete and '#' to put the decimal point '.'
- displayMODE: display key selection mode
- 0 : not displayed
- 1 : always displayed
- 2 : displays 1 seconds and disappear
- maxChar: max number of characters, 0 for unlimited
- numberOfLines: set the number of line, 1 line by default
- <= 0 for auto-adaptative according to textLayerSize
- > 1 to fix the number of lines
- displayTEXT: true : text is displayed / false : password mode, only stars '*' are displayed
- isActiveTF: enable/disable Text field proto; if true : cursor is flashing and typing is authorized
- textColor: main text color
- textFont: main text font node, when using multiline, only use "TOP" "LEFT"
- And other attributes (see TextField prototype documentation).
Example with TextField prototype:
ScrollableText prototype
ScrollableText prototype interface:
See ScrollableText prototype documentation.
Create personal font
To create font, use fontExtractor utility (present in SDK folder,
/tools/compiler/win for Windows, /tools/compiler/lin for Linux
and /tools/compiler/mac for Mac).
usage:
- -d: dump metrics
- fontname: Font name (require font file)
- fontsize: Size of font
- mapname: Map file name (name for png and desc file)
- charList: List of extracted characters
Example:
The TFD file (textual font description) describe the font mapping.
Format:
- x y : Max size of characters
- nb : Number of characters
- Characters list:
- c :ASCII code
- x y : top left corner position
- w h : Character size (width / height)
- d1 : Delta to draw character
- d2 : Delta to draw next character
example:
To use the personal font, we use the =family= attribute of FontStyle node: