Table of Contents
This tutorial shows how to work with text and fonts in OpenLaszlo applications. Later chapters on Chapter 21, Text Views and Chapter 23, Fonts explain more advanced topics.
Note that the behavior of LZX applications differs between applications compiled for the Flash Player (SWF format) and those compiled for DHTML. Certain APIs are available in only one or the other runtime. We'll call attention to these subjectst in the sections that follow.
Entering text is easy with the <text>
tag:
Example 9.1. The simple <text> tag
<canvas height="100" width="500" >
<text>
Hello, World!
</text>
</canvas>
Text that is between the <text> tags is normalized, meaning that preceding and trailing whitespace is ignored, as are multiple whitespace elements between
words. i.e. if you put several spaces between words, the output will still be a single space. If you put a line break in the
text, it will be rendered as a single whitespace element (i.e. a space), and text fields will stretch to fit their contents.
The default OpenLaszlo font is used (LzTahoe), at its default size (10pt).
The <text> tag is a view, so it can be treated as one. It can be given all the default view attributes, such as width, x, y and so forth.
Example 9.2. <text> is a <view>
<canvas height="100" width="500">
<text x="15" y="20" width="150">
Hello, World!
We would like to welcome you to the launch of the OpenLaszlo
Server.
</text>
</canvas>
Notice how the text gets cut off because we set the width attribute?
Having multiline areas of text is just as easy. All we do is set the multiline attribute to true:
Example 9.3. Multiline text
<canvas height="100" width="500">
<text x="15" y="20" width="150" multiline="true">
Hello, World!
We would like to welcome you to the launch of the OpenLaszlo
Server.
</text>
</canvas>
The text still follows the same normalization rules, so in this case the text wraps at 150px (because we explicitly set the
width of the <text> tag to that), and stretches vertically as far as it needs to go.
The line breaks are still being ignored, but we can fix that by entering them manually:
Example 9.4. Inserting line breaks
<canvas height="100" width="500">
<text x="15" y="20" width="150" multiline="true">
Hello, World!<br /><br />
We would like to welcome you to OpenLaszlo 4.
</text>
</canvas>
The <br>
tag is used to denote a single line break. This may be familiar to you from HTML. Just be careful to note that since we are
working in XML, empty elements have to be closed with a forward slash: <br/>. (This is the same as in XHTML.)
Openlaszlo provides support for incorporating HTML. Here's a list of tags that are supported:
| Tag | Meaning |
|---|---|
<a>
|
Hypertext Link |
<b>
|
Bold Text |
<font>
|
Defines and implements fonts |
<i>
|
Italic text |
<p>
|
Paragraph |
<u>
|
Underline |
<img>
|
image |
Example 9.5. specifying a font
<canvas height="150" width="500">
<font name="default" style="bold" />
<text x="15" y="20" width="150" multiline="true">
<b>Hello, <font color="#ff0000">World!</font></b><br /><br />
<font size="16">We</font> would like to welcome <u>you</u> to the
launch of the <a href="http://www.openlaszlo.org/" target="_blank">OpenLaszlo</a>
Server.
</text>
</canvas>
The word "OpenLaszlo" becomes a hyperlink because of the <a> tag. It does not get underlined as it might in a browser. We can do that ourselves by nesting a <u> tag inside it. However, it is important to note that tags must be nested correctly:
<a href="..."><u>Link</u></a>
is correct, but
<a href="..."><u>Link</a></u>
![[Warning]](../includes/warning.gif)
HTML only: The features described in this section only work in applications compiled to HTML. They do not work in applications compiled to other runtimes.
In applications compiled for DHTML, the <html>
tag allows you to include complete html pages within an OpenLaszlo application. In the example below, the <html> is used inside an OpenLaszlo window, which automatically provides scrollbars. Don't worry if you don't understand how the
code in this example works; the concepts will be explained in later chapters. The key thing to note is that you can embed
entire HTML pages.
Example 9.6. The HTML tag
<canvas >
<include href="extensions/html.lzx"/>
<class name="browser" extends="window" resizable="true" bgcolor="silver">
<edittext name="txt" text="http://openlaszlo.org/" width="300"/>
<button x="310" onclick="parent.htmlview.setSrc(parent.txt.getText()); parent.htmlview.setAttribute(visible, true)">
Load
</button>
<html name="htmlview"
width="${parent.width - 19}"
height="${parent.height - 74}"
x="${parent.x + 7}"
y="${parent.y + 53}"/>
</class>
<browser width="500" height="500" x="10" y="10"/>
</canvas>
OpenLaszlo provides capabilities for specifying the which fonts will appear in your application. All applications can use fonts that are provided by the local system. In addition, applications compiled to SWF can also embed fonts.
![[SWF]](../includes/swf.gif)
SWF only: The features described in this section only work in applications compiled to SWF. They do not work in applications compiled to other runtimes.
In applications compiled to SWF, OpenLaszlo supports both embedded fonts, which are downloaded with your application, and client fonts, which reside natively on the machines on which your application is used. By default, client fonts are used. Client fonts have certain limitations; for example they cannot be rotated or changed in opacity (due to a limitation of the Flash Player). See Chapter 23, Fonts.
SWF only: The features described in this section only work in applications compiled to SWF. They do not work in applications compiled to other runtimes.
When compiling to SWF, you can embed fonts using the src of the <font> tag.
Example 9.7. specifying a font
<canvas height="150" width="500">
<font name="default" style="bold" src="lztahoe8b.ttf"/>
<text x="15" y="20" width="150" multiline="true">
<b>Hello, <font color="#ff0000">World!</font></b><br /><br />
<font size="16">We</font> would like to welcome <u>you</u> to the
launch of the <a href="http://www.openlaszlo.org/" target="_blank">OpenLaszlo</a>
Server.
</text>
</canvas>
OpenLaszlo supports TrueType fonts, and the simplest way to use one is as follows:
Example 9.8. Naming a font family
<canvas height="100" width="500">
<font name="serifFont" src="timmonsr.ttf"/>
<text width="150" height="20">
<font face="serifFont" size="14">Hello, World!</font>
</text>
</canvas>
We called this font serifFont, but we could call it whatever we wanted, and that is what will be used to declare its use elsewhere in the application.
The font TTF files can be located in the current directory or another one and referenced relatively (src="../fonts/..."). Otherwise they are included in the LPS webapp directory of the installation under WEB-INF/lps/fonts. timonnsr is a font
that comes packaged with the OpenLaszlo Server in this location.
A truetype file is required for each style of font (e.g. italic, bold, regular), which is how fonts are actually packaged. So the following code will not work:
<canvas>
<!-- WARNING: Bad example! -->
<font name="serifFont" src="timmonsr.ttf"/>
<text width="150" height="20">
<font face="serifFont" size="14">Hello, <b>World!</b></font>
</text>
</canvas>
To correct this, we need to add one line of code to include the bold font:
Example 9.9. including bold font
<canvas height="100" width="500">
<font name="serifFont">
<face src="timmonsr.ttf"/>
<face src="timmonsb.ttf" style="bold"/>
</font>
<text width="150" height="20">
<font face="serifFont" size="14">Hello, <b>World!</b></font>
</text>
</canvas>
The plain font style does not need to be explicitly set; style="plain" is implied. This method of markup is not always the best solution, because it depends on writing cumbersome <font> tags.
Instead we can tell the <text> tag what fonts and sizes to use:
Example 9.10. assigning fonts to <text> tag
<canvas height="100" width="500">
<font name="serifFont">
<face src="timmonsr.ttf"/>
<face src="timmonsb.ttf" style="bold"/>
</font>
<text width="150" height="150"
font="serifFont" fontsize="15" multiline="true">
Hello, <b>World!</b><br />
Sometimes it is easier to avoid writing extra <u>font</u> tags.
</text>
</canvas>
In fact, we can do this with any view (including <window>
tags, and so forth) tag, and its children will inherit the fonts that were set:
Example 9.11. Views inherit font properties
<canvas height="100" width="500">
<font name="serifFont">
<face src="timmonsr.ttf"/>
<face src="timmonsb.ttf" style="bold"/>
</font>
<view name="grandParent" font="serifFont" fontsize="15">
<view name="firstView" bgcolor="#FFCCCC" height="20">
<text>Hello</text>
</view>
<view x="80" name="secondView" bgcolor="#CCCCFF" height="20">
<text>World</text>
</view>
</view>
</canvas>
The font here is specified in the grandParent view, and it is inherited by both text fields.
Of course font specifications can be overridden further down the hierarchy, both through the use of <font> tags, and by defining font specifications of child views:
Example 9.12. Overwriting font specifications
<canvas height="100" width="500">
<font name="serifFont">
<face src="timmonsr.ttf"/>
<face src="timmonsb.ttf" style="bold"/>
</font>
<font name="sansSerifFont" src="helmetr.ttf" />
<view name="grandParent" font="serifFont" fontsize="15">
<view name="firstView" bgcolor="#FFCCCC" height="20">
<text>
<font color="#CC6600" size="12">Hello</font>
</text>
</view>
<view x="80" name="secondView" bgcolor="#CCCCFF" height="20">
<text font="sansSerifFont">World</text>
</view>
</view>
</canvas>
Both the text fields here have overridden some of the font specs. The ones that aren't overridden (such as the face in the left example and the size in the right example) are inherited.
The <text> element has two methods for reading and writing contents:
The getText() method returns the contents of the text box, and the setText() method takes an argument of the string to put in the text field:
Example 9.13. Getting and setting text
<canvas height="135" width="700" debug="true">
<debug x="200"/>
<button x="15" y="15"
onclick="Debug.write(canvas.theField.getText());">
Get Text
</button>
<button x="100" y="15"
onclick="canvas.theField.setText('Hello, Laszlo!');">
Set Text
</button>
<button x="180" y="115"
onclick="addText();">
Add Text
</button>
<script>
function addText() {
var origText = canvas.theField.getText();
var newText = origText + " And on.";
canvas.theField.setText(newText);
}
</script>
<text x="45" y="60" width="150" height="75" multiline="true"
name="theField">Some sample text.</text>
</canvas>
Using these two methods it is possible to concatenate text and work with it as a string.
An important thing to remember when working with text is that everything between the <text> tags is returned by getText().
Example 9.14. text returned
<canvas height="135" width="700" debug="true">
<debug x="200"/>
<font name="sansSerifFont" src="helmetr.ttf" />
<script>
function writeOutBit() {
var myText = canvas.theField.getText();
Debug.write(myText);
}
</script>
<button x="15" y="15"
onclick="writeOutBit();">
Write part of line
</button>
<text x="45" y="60" width="150" height="75" multiline="true"
name="theField">
<font face="sansSerifFont" size="12">Some lovely sample
text.
</font>
</text>
</canvas>
This can be both useful and a nuisance. If we were to start parsing the string that is returned by the getText() method, then we would have to compensate for the markup tags. To avoid it, set the font in the <text> tag.
The simplest way to provide users with a text field is with the <inputtext>
tag:
Example 9.15. Using <inputtext>
<canvas height="135" width="700" debug="true">
<debug x="200"/>
<inputtext name="myText" x="10" y="15">Enter text here</inputtext>
<button x="45" y="45"
onclick="Debug.write(canvas.myText.getText());">
Write out text
</button>
</canvas>
The <inputtext> field gives no indication that the text can be selected and edited, other than an insert cursor when the user rolls over
it. The <inputtext> element can accept all the <text> attributes, as well as fonts:
Example 9.16. <inputtext> accepts <text> attributes
<canvas height="100" width="500">
<font name="Helmet" src="helmetr.ttf" />
<inputtext name="myText" x="10" y="15"
font="Helmet" fontsize="12"
width="200" height="50" multiline="true">
Enter very large quantities of text here.
</inputtext>
</canvas>
getText and setText methods will work on <inputtext> fields as well.
To overcome the problem of the text field not being recognizable, OpenLaszlo provides the <edittext>
tag:
Example 9.17. Using <edittext>
<canvas height="160" width="500">
<edittext name="myText" x="10" y="15">Enter text here</edittext>
<edittext name="myBigText" x="10" y="45"
width="250" height="100" multiline="true">
Enter a lot more text here
</edittext>
</canvas>
The <edittext> tag can be multiline, and can be adjusted in size.