Table of Contents
This section describes the <text>
and <inputtext>
tags (LzText and
LzInputText classes). It assumes you're familiar
with basic LZX concepts such as views (Chapter 26, 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.
![[Warning]](../includes/warning.gif)
![[SWF]](../includes/swf.gif)
In particular, you should understand the difference between client fonts and embedded fonts in applications compiled to SWF. (Applications compiled to DHTML cannot use 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 23, 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 21.1. setting font, fonstyle and fontsize
<canvas height="50"> <simplelayout axis="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 21.2. HTML tags within text
<canvas height="50"> <simplelayout axis="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 21.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 21.4. Setting text colors using RGB strings
<canvas height="60">
<simplelayout axis="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
&#), or you may enclose the characters
using a CDATA region:
ddd;
Example 21.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 21.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.
Example 21.7. Using the 'resize' attribute
<canvas height="50">
<simplelayout/>
<slider name="down" width="100" value="5000" minvalue="1000" maxvalue="100000"
keystep="1000"/>
<text resize="true" text="${'Slider Value is '+parent.down.value+' nicely constrained'}"/>
</canvas>
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 21.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 21.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 21.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 21.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 21.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 21.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 21.1. HTML Tags
| Tag | Example |
|---|---|
<b> |
<b>bold text</b> |
<a href="url"> |
<a href="http://www.boston.com">The Boston Globe</a> |
<font [color="#xxxxxx"] [face="Type Face"] [size="Type Size"]> |
<font color="#ff0000" face="myfont" size="12">Red text in LPS font 'myfont'</font> |
<i> |
<i>italic text</i> |
<p> |
line break <p> after p tag |
u |
<u>underline text</u> |
" |
" |
' |
' |
& |
& |
< |
< |
> |
> |
To see the example below, compile it and run it in your local environment (Openlaszlo's live examples cannot include CDATA sections).
Example 21.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
When you're compiling to SWF, 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.
![[DHTML]](../includes/dhtml.gif)
Applications compiled to DTHML may not match exactly the appearance of those compiled to SWF. You may find that you need to
"tweak" the layout using things like <br> tags. However, remember that applications compiled to DHTML can make use of the
<HTML>
tag, which supports all HTML markup.
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.
-
Two other values, left and right, cause the image to float to the current left or right margin
top: means that the top of the object should be vertically aligned with the top of the current text line. -
@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 21.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 21.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 21.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 21.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 21.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>