An LzText object represents a non-editable text component. The LzText class is a direct subclass of LzView. You can use the text tag to create an instance of LzText. Table 3.1 shows the attributes of the LzText class.
Name | Usage | Type | Default | Accessibility |
---|---|---|---|---|
embedfonts | Tag and JS | boolean | read-write | |
Description. Indicates whether fonts are embedded. | ||||
label | Tag and JS | string | read-write | |
Description. The label of this LzText object. | ||||
maxlength | Tag and JS | number | read-only | |
Description. The maximum number of characters allowed in this field. | ||||
multiline | Tag only | boolean | false | final |
Description. Indicates if this text supports multiline. | ||||
pattern | Tag and JS | string | read-only | |
Description. The regular expression that describes a set of characters allowed in this field. | ||||
resize | Tag and JS | boolean | false | read-only |
Description. Indicates whether to resize this field width to adjust to the text. | ||||
selectable | Tag and JS | boolean | false | read-write |
Description. Indicates if the text can be selected. | ||||
text | Tag and JS | string | read-write | |
Description. The text of this field. |
Here are the methods defined in the LzText class:
addText(text)
Appends the specified string to the current text.
clearText()
Clears this text field.
escapeText(string)
Escapes the specified string.
getSelectionPosition()
Returns the position of the cursor within the text. It returns -1 if the text cursor is currently not in this field.
getSelectionSize()
Returns the number of characters selected in this object. It returns -1 if the text cursor is currently not inside this object.
getText()
Returns the text in this object.
getTextHeight()
Returns the text height.
getTextWidth()
Returns the text width.
setColor(color)
Sets the text color.
setMultiline(multiline)
Sets the multiline attribute.
setResize(resize)
Sets the resize attribute.
setSelectable(selectable)
Sets the selectable attribute.
setSelection(start, end)
Selects part of or the whole text starting from start to end.
setText(text)
Sets the text.
setXScroll(x)
Sets the x scroll position of the text field.
setYScroll(y)
Sets the y scroll position of the text field.
The LzText class adds one event: ontext. This event is raised when the text changes.
For example, the code in Listing 3.1 is an LZX application that uses the text tag.
<canvas> <simplelayout axis="y"/> <view height="200" width="100"> <text>This is an LzText object</text> </view> </canvas> |
To test this application, direct your browser to this URL:
http://localhost:8080/lps-4.0.x/app03/textTest1.lzx
Figure 3.1 shows the generated output.
Note that the content of the text component appears as the text of the text tag. You can, however, use the text attribute instead:
<text text="This is an LzText object"/>
The text tag understands HTML and will correctly interpret HTML tags. For example, the following text tag will display its text in italic.
<text><i>Italicized text</i></text>
By default the text tag can only display a single line of text. To display multiple line text, set the text tag’s multiline attribute to true. The code in Listing 3.2 shows a multiline text component.
<canvas> <simplelayout axis="y"/> <view height="200" width="50"> <text width="50" multiline="true">This is a very very long piece of text</text> </view> </canvas> |
Note that when using the multiline attribute, you must also specify the width attribute. Otherwise, no wrapping will occur.
To test the multiline text example, direct your browser to this URL:
http://localhost:8080/lps-4.0.x/app03/textTest2.lzx
The result is given in Figure 3.2.