Introduction to Text and Fonts

Introduction This tutorial shows how to work with text and fonts in OpenLaszlo applications. Later chapters on and 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 subjects in the sections that follow.

The <text> tag Entering text is easy with the text<text>[unknown tag] tag: The simple <text> tag Text that is between the text<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<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. <text> is a <view> Notice how the text gets cut off because we set the width attribute?

Multiline text Having multiline areas of text is just as easy. All we do is set the multilinemultiline attribute to true: Multiline text 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<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: Inserting line breaks The br [unknown tag] 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: . (This is the same as in XHTML.)

Including HTML markup in OpenLaszlo applications Openlaszlo provides support for incorporating HTML. Here's a list of tags that are supported: TODO: Find out if P tag has been made obsolete. TagMeaning a<a>[unknown tag] Hypertext Link b[unknown tag] Bold Text font[unknown tag] Defines and implements fonts i[unknown tag] Italic text p[unknown tag] Paragraph u[unknown tag] Underline img<img>[unknown tag] image

Including links Specifying a font The word "OpenLaszlo" becomes a hyperlink because of the a<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="...">Link</a> is correct, but <a href="...">Link</a> is wrong because the a<a> tag was closed before the u tag.

The <html> tag The html<html>[unknown tag] tag allows you to include complete html pages within an OpenLaszlo application. In the example below, the html<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. The <html> tag

Fonts 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.

Fonts in SWF applications 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 .

Including Fonts When compiling to SWF, you can embed fonts using the srcsrc of the font tag. Using the src attribute to specify font OpenLaszlo supports TrueType fonts, and the simplest way to use one is as follows: Naming a font family 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>  <text width="150" height="20"> Hello, World! </text> </canvas> To correct this, we need to add one line of code to include the bold font: Including bold font 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<text> tag what fonts and sizes to use: Assigning fonts to <text> tag In fact, we can do this with any view (including window<window>[unknown tag] tags, and so forth) tag, and its children will inherit the fonts that were set: Views inherit font properties 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: Overwriting font specifications 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.

Changing Text The text<text> element has two methods for reading and writing contents: getText()getText()setAttribute()setAttribute() The getText()getText() method returns the contents of the text box, and the setAttribute()setAttribute() method takes an argument of the string to put in the text field: Getting and setting text 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<text> tags is returned by getText()getText(). Text returned This can be both useful and a nuisance. If we were to start parsing the string that is returned by the getText()getText() method, then we would have to compensate for the markup tags. To avoid it, set the font in the text<text> tag.

Input Text The simplest way to provide users with a text field is with the inputtext<inputtext>[unknown tag] tag: Using <inputtext> The inputtext<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<inputtext> element can accept all the text<text> attributes, as well as fonts: <inputtext> accepts <text> attributes getText() and setArgument() methods will work on inputtext<inputtext> fields as well. To overcome the problem of the text field not being recognizable, OpenLaszlo provides the edittext<edittext>[unknown tag] tag: Using <edittext> The edittext<edittext> tag can be multiline, and can be adjusted in size.