Chapter 21. Text Views
Prev  Part III. Fundamental Concepts  Next

Chapter 21. Text Views

Table of Contents

1. Summary of properties
2. Text as attribute and text as object
3. Text width and height
3.1. HTML formatting
3.2. Text Width
4. The <text> View
4.1. Idiosyncrasies of lz.text views
4.2. Formated Text
4.3. Single-line and multiline text
4.4. Text Width and Height
4.5. Text Selection
4.6. HTML Text Content
4.7. Using <img> tag to include images in HTML content
4.8. Advanced Styles
5. The <inputtext> View
5.1. Handling Inputtext Selection

This section describes the <text> and <inputtext> tags ( lz.text and lz.inputtext 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.

1. Summary of properties

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]
[SWF]

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.

2. Text as attribute and text as object

LZX is an XML language. By definition, in XML, whatever comes between an opening and closing tag is called text. As we have seen text in this context is implemented as HTML.

In other words, despite being called text, in our implementation you can use HTML markup in anything that is text. (In browser DOM, there are properties innerText, outerText, innerHTML, and outerHTML. Only the latter two interpret HTML markup.)

In LZX, we've also exposed that text as an attribute of components, because sometimes it is useful to do so. For example, you might want to constrain the text of a node; that's easy to do with LZX constraints. Thus, text can be specified as an attribute in the opening tag of basecomponent and subclasses, which include all components. For example, 

<button text="this is a fine kettle of fish">

is equivalent to

<button> this is a fine kettle of fish </button>

LZX also includes a text object, lz.text, which can be instantiated by using the <text> tag.

In addition to the HTML markup properties of text attributes, lz.text objects have additional properties such as maximum length, selectability, and so forth, which are described later on in this chapter. Oddly enough, one of the attributes of the <text> object is text.

Thus,

<text id="sam" text="King Samuel was a fine hamster">

is equivalent to

<text id="sam"> King Samuel was a fine hamster </text>

In each case we have defined an lz.text object with an id of "sam" whose text attribute is set to the string "King Samuel was a fine hamster", which can be marked up with the supported HTML markup supported by LZX, as defined below. In this document, we have tried to make clear when we are talking about text as text, and when we are talking about text as an lz.text object. However, we may have been loose at times. If you keep in mind that many objects, including the lz.text object have text attributes.

3. Text width and height

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 text content. The text field can be set to avoid to automatically resize itself when its value is modified at runtime, by setting the attribute resize="false".

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 bgcolor="#ffcccc">Initial text from server.</text>

Text can be set to automatically wrap at the right margin, by setting the attribute multiline="true".

3.1. HTML formatting

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, fontstyle and fontsize

<canvas height="50" width="100%">
  <simplelayout axis="y"/>
  <text fontstyle="bold">Default bold</text>
  <text fontstyle="italic">Default italic</text>
  <text fontstyle="bold italic">Default bold italic</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 ****************************************************** -->

Within the text content, HTML tags may also be used:

Example 21.2. HTML tags within text

<canvas height="50" width="100%">
  <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>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Text can contain preformatted regions, where linebreaks and whitespace are preserved:

Example 21.3. Preformatted text

<canvas height="80" width="100%">
  <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>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Within a text element, the HTML fonttag 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" width="100%">
  <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>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

If you wish to include HTML escape characters in the text value, you can use entity codes such as &amp; or &lt; (or the numeric codes &#ddd;), or you may enclose the characters using a CDATA region:

Example 21.5. Escaping HTML characters

<canvas height="20" width="100%">
  <text bgcolor="#ffcccc"><![CDATA[<b>this text shouldn't be bold</b>]]></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 ****************************************************** -->

3.1.1. Text Scrolling

Text fields can be scrolled using the xscroll and yscroll attributes. These attributes 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 horizontally or vertically, an onscrollx or onscrolly event will be sent.

3.2. Text Width

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 lz.text.

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.

3.2.1. Resizable text fields

If you set resize=false, the field will not expand to fit the text. In the example below, notice how the string is truncated as you move the slider.

Example 21.6. Non-resizing text is truncated

<canvas width="100%" height="50">
  <simplelayout/>
  <slider name="down" width="100" value="5000" minvalue="1000" maxvalue="100000" keystep="1000"/>
  <text resize="false" text="${'Slider Value is '+parent.down.value+' unnicely truncated'}"/>
</canvas>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

If you set resize=true (the default), the field will expand to fit the text.

Example 21.7. Resizing text expands

<canvas height="50" width="100%">
  <simplelayout/>
  <slider name="down" width="100" value="5000" minvalue="1000" maxvalue="100000" keystep="1000"/>
  <text resize="true" text="${'Slider Value is '+parent.down.value+' expands to contain 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 ****************************************************** -->

4. The <text> View

The <text> tag instantiates an lz.text 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" width="100%">
  <simplelayout/>
  <text>Hello World!</text>
  <text text="Hello World!"/>
</canvas>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
edit
Flash
edit
HTML5

4.1. Idiosyncrasies of lz.text views

lz.text extends lz.view, but some of its behaviors are different from what you might expect. For example, lz.text inherits opacity from view, as well as rotation. But these attributes don't work in all cases, as described below.

lz.text has the following additional peculiarities:

  • Even though lz.text is a subclass of lz.view, you cannot nest views inside of it.

  • Data-bound text fields will automatically display the text they are bound to.

4.2. Formated Text

You can format text the same way you use Debug.format(). The difference is that you need the debugger to be running to use Debug.format(), but text.format() is always availabe. Like Debug.format(), text.format() uses lz.formatter to format text based on a control string.

Example 21.9. Formated text with text.format()

<canvas height="100" width="100%">
      <class name="clickClock" extends="text">
        <attribute name="dayTable" value="["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]"/>
        <handler name="onclick">
          var now = new Date;
          this.format("You clicked me at %02d:%02d:%02d on %s",
                      now.getHours(),
                      now.getMinutes(),
                      now.getSeconds(),
                      dayTable[now.getDay()]);
        </handler>
      </class>
      <clickClock>
      Click Me!
      </clickClock>
</canvas>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

text.addFormat() is similar to text.format(), but instead of replacing text, it appends to the text.

Example 21.10. Formated text with text.addFormat()

<canvas height="80">
  <class name="clickClock" extends="text" multiline="true">
    <attribute name="times" value="0"/>
    <handler name="onclick">
      var now = new Date;
      this[(this.times++ == 0)?'format':'addFormat']("Click number: %d @ %02d:%02d:%02d.%03d\n",
            this.times, 
            now.getHours(), 
            now.getMinutes(), 
            now.getSeconds(), 
            now.getMilliseconds());
    </handler>
  </class>
  <clickClock>
    Click Me!
  </clickClock>
</canvas>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.             *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

4.3. Single-line and multiline text

A text field can be either a single line or multiple lines. multiline sets whether wrapping is enabled. The default is a single-line text field.

Example 21.11. Multiline text

<canvas height="125" width="100%">
  <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>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

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.12. Multiline text with explicit line breaks

<canvas height="125" width="100%">
  <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>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Below is a non-wrapping text field with explicit line breaks.

Example 21.13. non-wrapping text with breaks

<canvas height="125" width="100%">
  <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>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

4.4. Text Width and Height

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 attribute on a text field will cause it to be resized to fit its text content at runtime, whenever the text attribute is changed.

Example 21.14. Resizing text

<canvas height="125" width="100%">
  <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="setAttribute('text', ...)">
    <handler name="onclick">
      t1.setAttribute('text', 'resize='+t1.resize);
      t2.setAttribute('text', 'resize='+t2.resize);
    </handler>
  </button>
</canvas>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

4.5. Text Selection

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.15. Selectable text

<canvas height="125" width="100%">
  <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>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

4.6. HTML Text Content

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 font 'myfont'</font>
<i> 
<i>italic text</i>
<p> 
line break <p> after p tag
<u> 
<u>underline text</u>
&quot; 
"
&apos; 
'
&amp; 
&
&lt; 
<
&gt; 
>

Example 21.16. HTML tags in text views

<canvas height="125" width="100%">
     <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><![CDATA[ HTML
        Metachars: &lt; &gt; &amp; &quot;
        ]]></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>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

4.7. Using <img> tag to include images in HTML content

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.

[Warning]
[SWF]

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] Note

<img> tag does not work inside <inputtext>, only <text>.

Due to implementation details of the Flash Player, the <img> tag is only rendered when the multiline attribute of the <text> element is true.

[Warning]
[DHTML]

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.

  • 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 values of width and height are specified in 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.17. Basic use of <img> tag

<canvas width="100%" 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>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

By giving values to the height and width attributes on the <img> tag, you can scale the image:

Example 21.18. Scaling an image included in text

<canvas height="100" width="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>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

You can position the included image by setting the align attribute.

Example 21.19. Scaled and left-aligned image

<canvas height="350" width="100%">
  <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>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

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.20. Multiple images in text

<canvas width="100%">
  <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="./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. 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>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

4.8. Advanced Styles

Supported advanced text styles include the textalign, textindent, letterspacing and textdecoration attribute.

  • textalign: Specifies how to align the text content within the <text> view. Valid values are left (default), center, right and justify.

  • textindent: By adjusting this attribute, you can describe how to indent the first line of a paragraph. The attribute is interpreted as a pixel value with 0 being the default.

  • letterspacing: Can be used to change the inter-character space. The attribute is interpreted as a pixel value, negative values give narrower spacing whereas positive values give wider spacing. The default value is 0.

  • textdecoration: Allows to add decorations to the text. Valid values are none (default) and underline.

Example 21.21. Advanced styles for text

<canvas width="100%" height="350">
  <class name="smalltext" extends="text" width="200" bgcolor="#EAEAEA" multiline="false" text="Lorem ipsum dolor sit amet."/>
  <class name="longtext" extends="text" width="200" bgcolor="#EAEAEA" multiline="true" text="Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."/>

  <wrappinglayout yinset="20" xinset="20" xspacing="20" yspacing="25"/>

  <vbox spacing="5">
    <text>textalign: </text>
    <smalltext textalign="left"/>
    <smalltext textalign="center"/>
    <smalltext textalign="right"/>
    <longtext textalign="justify"/>
  </vbox>

  <vbox spacing="5">
    <text>textindent: </text>
    <longtext textindent="-20"/>
    <longtext textindent="0"/>
    <longtext textindent="20"/>
  </vbox>

  <vbox spacing="5">
    <text>letterspacing: </text>
    <smalltext letterspacing="-1"/>
    <smalltext letterspacing="0"/>
    <smalltext letterspacing="1"/>
  </vbox>

  <vbox spacing="5">
    <text>textdecoration: </text>
    <smalltext textdecoration="none"/>
    <smalltext textdecoration="underline"/>
    <smalltext textdecoration="underline" fgcolor="red"/>
  </vbox>
</canvas>

<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2010 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

5. The <inputtext> View

Editable text fields are created with the <inputtext> tag. Like the non-editable <text> view, an input text field can be single line or multiline (wrapped).

5.1. Handling Inputtext Selection

When a region of text is selected in an inputtext view, the getSelectionPosition() and getSelectionSize() methods can be used to obtain the offset and length of the selected text. The setSelection() selects a region of text in the view.

Copyright © 2002-2010 Laszlo Systems, Inc. All Rights Reserved. Unauthorized use, duplication or distribution is strictly prohibited. This is the proprietary information of Laszlo Systems, Inc. Use is subject to license terms.

Prev  Up  Next
Chapter 20. Color  Home  Chapter 22. Rich Text