Table of Contents
This section describes the <text> and <inputtext> tags (LzText and LzInputText classes) and the <richinputtext> component. It assumes you're familiar with basic LZX concepts such as views (Chapter 23, Views), methods, and attributes.
For a gentle introduction, see Chapter 9, Introduction to Text and Fonts.
To a first approximation, "text" refers to displayable data in UTF-8 encoding; depending on context "text" can mean the data itself, or its display. The term "font" refers to the software that is used to draw, or render, the textual characters on the screen. The topics are intertwined. In this chapter we'll be talking about mostly about text, but you should be sure that you understand key concepts about fonts in OpenLaszlo applications. In particular, you should understand the difference between client fonts and embedded fonts. Because they don't always behave the same way (for example client fonts can not be rotated or changed in opacity due to a limitation of the Flash Player), changing from one to the other can cause bewildering changes in behavior. Furthermore, it's possible to implicitly change from one kind of font to the other in your application without realizing you've done so. Fonts are described in Chapter 20, Fonts.
Generally speaking, unless an explicit width and height are specified as attributes, the text field will by default be sized to a width and height which encloses its compile-time text content. The text field can be set to automatically resize itself when its value is modified at runtime, by setting the attribute resize="true".
The exception to this rule is when the <text> element contains an <img> tag, in which case you may in some cases have to explicitly set the height and width of the <text>, as explained below.
<text resize="true" bgcolor="#ffcccc" name="t1">Initial text from server.</text> |
Text can be set to automatically wrap at the right margin, by setting the attribute multiline="true".
Within a text element, a simple subset of HTML formatting is supported for the text content, supporting XHTML tags <br>, <b>, <i>, <u>, <font>, <pre>, and <a>.
The <img> is also supported, but with some caveats. See below.
The examples below show how to use XHTML tags in text content:
For font style, the text element itself supports attributes for setting the font parameters. These are the font, fontstyle, and fontsize attributes:
Example 18.1. setting font, fonstyle and fontsize
<canvas height="50" layout="y"> <text fontstyle="bold">Default bold</text> <text fontstyle="italic">Default italic</text> <text fontstyle="bold italic">Default bold italic</text> </canvas> |
Within the text content, HTML tags may also be used:
Example 18.2. HTML tags within text
<canvas height="50" layout="y"> <text><b>Default bold</b></text> <text><i>Default italic</i></text> <text fontstyle="bold"><i>Default bold italic</i></text> </canvas> |
Text can contain preformatted regions, where linebreaks and whitespace are preserved:
Example 18.3. Preformatted text
<canvas height="80">
<text id="ttext" multiline="true" height="300">
This text field contains some preformatted text
<pre>
This is a line of text.
here was a blank line before this line.
And another line of text.
</pre>
</text>
</canvas>
|
Within a text element, the HTML font tag supports the face, size, and color attributes. The color must be specified as an RGB hex string of the form "#RRGGBB".
Example 18.4. Setting text colors using RGB strings
<canvas height="60" layout="y">
<font name="Times Roman" src="bitstream-vera-1.10/vera.ttf"/>
<text height="30">
<font face="Times Roman" size="24">Times Roman</font>
</text>
<text bgcolor="#ffcccc">
<font color="#FF0000">C</font><font color="#FFFF00">O</font><font color="#00FFCC">L</font
><font color="#CC00CC">O</font><font color="#AABB00">R</font><font color="#DDA00A">S</font>
</text>
</canvas>
|
If you wish to include HTML escape characters in the text value, you can use entity codes such as & or < (or the numeric codes &#ddd;), or you may enclose the characters using a CDATA region:
Example 18.5. Escaping HTML characters
<canvas height="20"> <text bgcolor="#ffcccc"><![CDATA[<b>this text shouldn't be bold</b>]]></text> </canvas> |
Text fields can be scrolled using the setXScroll() and setYScroll() methods. The arguments to these functions set the pixel position of the top line of text relative to the text view bounding box, and should be less than or equal to zero. When the text is scrolled horizontaly or vertically, an onscrollx or onscrolly event will be sent.
A text view which is not given an explicit width will default to have a width which is the length of the longest line. (See below, however, about resizing text fields, and also about the <img>.) Given that the initial text content is normalized according to HTML normalization rules, and if you do not specify an explicit width, the only way a linebreak will occur is if you have an explicit HTML linebreak code such as <br/>, <p/> or a newline inside of the text contents of a <pre> element.
The text view will default to a height which encloses all of the lines of text.
If you want to know the total height of the text in a text field (if you want to know how large to draw a scrollbar, for example) there are a couple of ways to figure this out: For a multiline=false text field (i.e., one in which wrapping is not being done automatically by the system), you can use the getTextHeight() method on LzText.
For a multiline=true output text field, the system computes a property text.scrollHeight which which you may examine. This field is not maintained for input text.
There are two basic classes for displaying text, <text> and <inputtext>. The <text> class is used for displaying text, while <inputtext> is used for input fields where the user can type or edit text interactively.
Take care when using text whose width must be calculated at run time. Because the compiler does not know what the text is (and the text field doesn't even know what it is until the contraints evaluate), it can't really know at construct time how wide to make itself.
If you add resize=true, the field will expand to fit the text. In the example below, notice how the last concatenation is invisible and the last digit of the numeric value from the slider gets cut off.
Example 18.6. non-resizing text does not concatentate
<canvas height="50" >
<simplelayout/>
<slider name="down" width="100" value="5000" minvalue="1000" maxvalue="100000"
keystep="1000"/>
<text text="${'Slider Value is '+parent.down.value+' nicely constrained'}"/>
</canvas>
|
The following shows the use of resize="true" to get the desired behavior.
The <text> tag instantiates an LzText view. The text content can be specified at compile time using either of the two methods below; as the content of the <text> tag, or as the text attribute.
Example 18.8. Text views
<canvas height="125"> <simplelayout/> <text>Hello World!</text> <text text="Hello World!"/> </canvas> |
A text field can be either a single line or multiple lines. The multiline sets whether wrapping is enabled. The default is a single-line text field.
Example 18.9. Multiline text
<canvas height="125">
<simplelayout spacing="5"/>
<!-- Single line text, the default -->
<text bgcolor="#ffcccc">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras
nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,
augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
</text>
<!-- Multiline text (without an explicit width, the width would be
sized to fit the entire string on a single line) -->
<text bgcolor="#ccccff" multiline="true" width="300" >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras
nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,
augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
</text>
</canvas>
|
With multiline text, the automatic wrapping is always enabled. You can disable wrapping by setting the multiline to false. When multiline=false, the linebreaks will only be placed where you specify them in the text content, either as <br/> tags for HTML content, or newlines inside of a <pre/> preformatted text region.
Example 18.10. Multiline text with explicit linebreaks
<canvas height="125">
<simplelayout spacing="5"/>
<text bgcolor="#ccccff" multiline="true" width="400" >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/> Cras
nibh. Quisque justo. <br/>Donec porta, wisi quis vehicula interdum,
augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
</text>
</canvas>
|
Below is a non-wrapping text field with explicit line breaks.
Example 18.11. Non-wrapping text with breaks
<canvas height="125">
<simplelayout spacing="5"/>
<text bgcolor="#ccccff" multiline="false" width="500" height="100" >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras<br/>
nibh. Quisque justo. Donec porta, wisi quis vehicula interdum,<br/>
augue dui pharetra lectus, non adipiscing purus nibh vitae purus.
</text>
</canvas>
|
If no explicit text width and height attributes are supplied, the text field will be sized to contain the initial text content. If the text view is single-line, then it will be sized to the height of the current font.
Setting the resize on a text field will cause it to be resized to fit its text content at runtime, whenever the setText()() method is called.
Note: If no initial text content is specified, i.e., you have an empty tag such as <text/> , then the text view will be sized to some nonzero default width and height. This helps in debugging applications, (especially in the case of text views which are initialized from datapaths) because zero width text fields would be invisible no matter what their text value was set to at runtime.
Example 18.12. Resizing text
<canvas height="125">
<debug x="400"/>
<simplelayout/>
<!-- Single line text, the default -->
<text id="t1" bgcolor="#ffcccc" resize="false">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</text>
<text id="t2" bgcolor="#ccffcc" resize="true">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</text>
<button text="setText(...)">
<handler name="onclick">
t1.setText('resize='+t1.resize);
t2.setText('resize='+t2.resize);
</handler>
</button>
</canvas>
|
Text can be made user-selectable with the selectable attribute. This allows copy operations (and cut and paste, for <inputtext>) by the user.
Example 18.13. Selectable text
<canvas height="125">
<simplelayout spacing="4"/>
<!-- Single line text, the default -->
<text id="t1" bgcolor="#ffcccc" selectable="true" resize="false">
I am selectable text. Select me!
</text>
<text id="t2" bgcolor="#ccffcc" resize="true">
I am not selectable text. Try to select me!
</text>
</canvas>
|
Within a text view, a limited set of HTML tags and parameter entities may be used to format the text.
Table 18.1. HTML Tags
| Tag | Example | |
|---|---|---|
| <b> |
|
|
| <a href="url"> |
|
|
| <font [color="#xxxxxx"] [face="Type Face"] [size="Type Size"]> |
|
|
| <i> |
|
|
| <p> |
|
|
| u |
|
|
| " |
|
|
| ' |
|
|
| & |
|
|
| < |
|
|
| > |
|
Example 18.14. HTML tags in text views
<canvas height="125">
<font name="Times Roman">
<face src="timmonsr.ttf" />
<face src="timmonsb.ttf" style="bold"/>
<face src="timmonsi.ttf" style="italic"/>
<face src="timmonsbi.ttf" style="bold italic"/>
</font>
<splash/>
<view font="Times Roman" fontsize="16">
<simplelayout axis="y"/>
<text>
normal <i>italic</i> <b>bold</b> <b><i>bold-italic</i></b>
HTML Metachars: < > & "
</text>
<text>
<font color="#FF0000">C</font><font color="#FFFF00">O</font><font color="#00FFCC">L</font
><font color="#CC00CC">O</font><font color="#AABB00">R</font><font color="#DDA00A">S</font>
</text>
<text><![CDATA[<b>this text shouldn't be bold, it's CDATA</b>]]></text>
<text height="30"><font size="24">This is a 24 point font.</font></text>
</view>
</canvas>
|
The <img> tag allows you to include certain kinds of images in HTML content within a <text> element, or within an HTML element that a <text> element contains. The image you include must be natively supported by the Flash Player (regardless whether your application is SOLO or proxied).
![[Note]](images/note.png)
Due to implementation details of the Flash Player, the <img> tag is only rendered when the @multiline attribute of the <text> element is true.
The <img> tag supports the following attributes. All of these attributes are optional except the @src attribute. All attributes must be specified as literals (not constraints) in the program source.
-
@src: This attribute is either a URI, or a JavaScript identifier. If it is a URI, it specifies the location of the image resource, which must be a JPEG or (Flash deployment targets only) SWF file. If it is a JavaScript identifier, it must be the name of a resource defined via the <resource> tag. This attribute is required.
-
@align = bottom | middle | top | left | right. The values have the same meaning as in HTML:
-
bottom: means that the bottom of the object should be vertically aligned with the current baseline. This is the default value.
-
middle: means that the center of the object should be vertically aligned with the current baseline.
-
top: means that the top of the object should be vertically aligned with the top of the current text line.
Two other values, left and right, cause the image to float to the current left or right margin
-
@alt: string. When specified, the content of this attribute is made available to screen readers.
-
@width, @height: When specified, the width and height attributes scale the natural image size to these values. The value of @width and @height is a literal number of pixels.
-
@hspace: This attribute specifies the amount of white space to be inserted to the left and right of an IMG. The default value is not specified, but is generally a small, non-zero length. (On the Flash deployment target, this value is 8 pixels.)
-
@vspace: This attribute specifies the amount of white space to be inserted above and below an IMG. The default value is not specified, but is generally a small, non-zero length. (On the Flash deployment target, this value is 8 pixels.)
The <text> view is not by default sized to the content of the <img> tag.
Here's an example of the basic use of the <img> tag.
Example 18.15. Basic use of <img> tag
<canvas height="320" >
<text multiline="true" width="300" height="300">
Hello dear friends on the Red Planet! How is the Garden today?
<img src="./images/horse-3.jpg"/>
</text>
</canvas>
|
Notice that you cannot have an image in a text tag without also having text. Watch what happens when we comment out the text:
Example 18.16. You must include text with images
<canvas height="220" >
<text multiline="true" width="200" height="200">
<!--Hello dear friends on the Red Planet! How is the Garden today?-->
<img src="./images/horse-3.jpg"/>
</text>
</canvas>
|
By giving values to the height and width attributes on the <img> tag, you can scale the image:
Example 18.17. Scaling an image included in text
<canvas height="100">
<text multiline="true" height="80">
Some text and
<img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
some more text
</text>
</canvas>
|
You can position the included image by setting the align
Example 18.18. Scaled and left-aligned image
<canvas height="350">
<text multiline="true" height="300">
Some text and
<img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
some more text
</text>
</canvas>
|
You can include multiple <img> tags within the same <text> elements. Take care with the positioning; it's possible to position the images on top of each other, so you may not get the effect you want.
Example 18.19. Multiple images in text
<canvas>
<text multiline="true" width="100%">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ligula. Suspendisse pellentesque diam vel dolor. Nullam suscipit laoreet eros. Aliquam nulla massa, rutrum id, luctus vitae, consequat eu, ipsum. Donec hendrerit rhoncus erat.
<img src="./images/horse-3.jpg"/>
Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus. Mauris blandit nulla a tortor. Quisque sed nulla. Nunc imperdiet, elit at faucibus lacinia, nibh augue tristique magna, a aliquam justo sapien eget enim.
<img src="./images/horse-3.jpg"/>
Nullam mollis orci id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id mauris. Maecenas arcu. Donec nonummy mi a metus.
<img src="./images/horse-3.jpg" width="20" height="20" vspace="50"/>
Morbi dignissim scelerisque libero. Donec id sapien id velit tristique interdum. Quisque faucibus sapien. Quisque porttitor. Mauris venenatis nunc id nunc. Nulla iaculis metus at ante. Suspendisse accumsan, mauris dapibus pretium laoreet, nibh purus imperdiet lectus, a euismod elit enim a mi. Morbi commodo lacus quis nisl.
<img src="./images/horse-3.jpg" align="left"/>
Duis leo tortor, gravida eget, euismod non, ullamcorper quis, metus. Phasellus ornare facilisis metus. Aliquam at est.
<img src="./images/horse-3.jpg" align="right"/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ligula. Suspendisse pellentesque diam vel dolor. Nullam suscipit laoreet eros. Aliquam nulla massa, rutrum id, luctus vitae, consequat eu, ipsum. Donec hendrerit rhoncus erat. Phasellus eget massa sit amet lorem condimentum porta. Ut nec lorem. Pellentesque quam. Sed porttitor, elit vitae faucibus porta, enim nibh cursus augue, vitae iaculis enim lorem at eros.
<img src="./images/horse-3.jpg" width="20" height="20" hspace="50"/>
Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus.
<img src="http:horse-3.jpg"/>
Nullam mollis orci id tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur id mauris. Maecenas arcu. Donec nonummy mi a metus. Nulla facilisi. Aenean metus. Nullam vitae sem id risus accumsan luctus. Nam sit amet velit. Mauris ut est. Proin id sem ullamcorper pede luctus tristique. Pellentesque dapibus, neque et pellentesque tincidunt, sapien diam imperdiet ipsum, nec porttitor turpis lectus nec libero. Praesent ut elit.
<img src="./images/horse-3.jpg" width="20" height="20" align="left"/>
Morbi dignissim scelerisque libero. Donec id sapien id velit tristique interdum. Quisque faucibus sapien. Quisque porttitor. Mauris venenatis nunc id nunc. Nulla iaculis metus at ante. Etiam adipiscing urna quis tellus. Nam aliquam vehicula arcu.
<img src="./images/horse-3.jpg" width="20" height="20" vspace="50"/>
Nunc malesuada. Curabitur tortor metus, malesuada et, suscipit ut, convallis ac, magna. Nam venenatis viverra ipsum. Phasellus dignissim sagittis urna. Phasellus cursus. Cras pede arcu, tempus a, consectetuer vel, faucibus fermentum, diam. Donec lacus.
<img src="./images/horse-3.jpg"/>Proin diam leo, vulputate id, ornare cursus, convallis eu, nisi. Vestibulum porttitor luctus dui. Nulla nisi arcu, pharetra at, molestie nec, porta a, leo. Sed congue ante molestie risus. Mauris blandit nulla a tortor. Quisque sed nulla. Nunc imperdiet, elit at faucibus lacinia, nibh augue tristique magna, a aliquam justo sapien eget enim. In suscipit congue dolor.
</text>
<scrollbar/>
</canvas>
|