Table of Contents
This tutorial shows how to work with text and fonts in OpenLaszlo applications. Chapter 21, Text Views and Chapter 23, Fonts explain more advanced topics.
Note that the behavior of LZX applications may differ between applications compiled for SWF and those compiled for DHTML. Certain APIs are available in only one or the other runtime. We'll call attention to these subjects in the sections that follow.
Entering text is easy with the <text> tag:
Example 9.1. The simple <text> tag
<canvas height="100" width="100%">
<text>
Hello, World!
</text>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
Text that is between the <text> tags is normalized,
meaning that preceding and trailing whitespace is ignored, as are multiple whitespace
elements between words. that is, 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 (that is, a space), and text fields will stretch to fit their
contents.
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="100%">
<text x="15" y="20" width="150">
Hello, World!
We would like to welcome you to the launch of the OpenLaszlo
Server.
</text>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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="100%">
<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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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="100%">
<text x="15" y="20" width="150" multiline="true">
Hello, World!<br/><br/>
We would like to welcome you to OpenLaszlo.
</text>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2011 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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="100%">
<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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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:
<a href="..."><u>Link</u></a>
The <html> tag allows you to include complete html
pages within an OpenLaszlo application. In the example below, the
<html> tag 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 width="100%" height="400">
<include href="extensions/html.lzx"/>
<class name="browser" extends="window" resizable="true" bgcolor="silver">
<simplelayout axis="y" spacing="2"/>
<hbox width="100%">
<edittext name="txt" text="http://www.openlaszlo.org/" width="300"/>
<button>Load <handler name="onclick"> if (classroot.main) {
classroot.main.setAttribute('src', parent.txt.text);
classroot.main.setAttribute('visible', true); } </handler>
</button>
</hbox>
<html name="main" history="false" width="100%" height="${classroot.height - this.y - 44}">
<handler name="oninit"> this.bringToFront(); </handler>
</html>
</class>
<browser width="100%" height="100%"/>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2008-2011 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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.
![[Warning]](../includes/warning.gif)
![[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. Using the src attribute to specify font
<canvas height="150" width="100%">
<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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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="100%">
<font name="serifFont" src="timmonsr.ttf"/>
<text width="150" height="20">
<font face="serifFont" size="14">Hello, World!</font>
</text>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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="100%">
<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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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="100%">
<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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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="100%">
<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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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="100%">
<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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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 ways of reading and writing
contents: the <text> attribute and the setAttribute()
method.
The text attribute returns the contents of the text box, and the
setAttribute('text', ...) method takes an argument of the string to
put in the text field:
Example 9.13. Getting and setting text
<canvas height="200" width="100%" debug="true">
<debug x="200"/>
<button x="15" y="15" onclick="Debug.debug('%s', canvas.theField.text);">
Get Text
</button>
<button x="100" y="15" onclick="canvas.theField.setAttribute('text', 'Hello, Laszlo!');">
Set Text
</button>
<button x="180" y="15" onclick="canvas.theField.addText(' And on.');">
Add Text
</button>
<text x="45" y="60" width="150" height="75" multiline="true" name="theField">Some sample text.</text>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008-2011 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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 text.
Example 9.14. Text returned
<canvas height="200" width="100%" debug="true">
<debug x="200"/>
<font name="sansSerifFont" src="helmetr.ttf"/>
<script>
function writeOutBit() {
var myText = canvas.theField.text;
Debug.debug("%s", 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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008-2011 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
This can be both useful and a nuisance. If we were to start parsing the string that is
returned by the text attribute, 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="200" width="100%" debug="true">
<inputtext name="myText" x="10" y="15">Enter text here</inputtext>
<button x="45" y="45" onclick="Debug.debug('%s', canvas.myText.text);">
Write out text
</button>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008-2011 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
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="100%">
<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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
text and setArgument('text', ...) 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="100%">
<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>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
The <edittext> tag can be multiline, and can be
adjusted in size.