<text>
Prev  Text  Next

<text>
The basic text display element.

JavaScript: lz.text
extends <view> » <node> » lz.Eventable »
with <formatter>

This class is used for non-editable text fields (as opposed to <inputtext>). A text field can be initalized with text content at compile time.

Example 29. Text element whose body is its content

<canvas height="30">
  <text>Hello world!</text>
</canvas>
edit
Flash
edit
HTML5

Text objects can also display text that is computed at runtime.

Example 30. Dynamically updated text content

<canvas height="30">
  <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>
edit
Flash
edit
HTML5

Note that the text attribute is interpreted as markup. To create a binding that will not be interpreted as markup, you can use the cdata attribute:

Example 31. Using the cdata attribute

<canvas height="220" layout="axis: y; spacing: 2" debug="true">
  <debug y="70" height="${this.parent.height - 55}"/>
  <dataset name="input">
    <article><![CDATA[<actor>Leonardo DiCaprio</actor> and <writer>Christopher Nolan</writer>'s "Inception" is anything but a sleeper&#x2026;]]></article>
  </dataset>
  <text name="ascdata" datapath="input:/article/" cdata="$path{'text()'}" multiline="true" width="400" height="30" fgcolor="0x00cc00"/>
  <text name="astext" datapath="input:/article/" text="$path{'text()'}" multiline="true" width="400" height="30" fgcolor="0x0066cc"/>
  <handler name="oninit"><![CDATA[
    Debug.debug("ascdata.presentAttribute('text') => %w", this.ascdata.presentAttribute('text'));
    Debug.debug("ascdata.presentAttribute('cdata') => %w", this.ascdata.presentAttribute('cdata'));
    Debug.info("astext.presentAttribute('text') => %w", this.astext.presentAttribute('text'));
    Debug.info("astext.presentAttribute('cdata') => %w", this.astext.presentAttribute('cdata'));
  ]]></handler>
</canvas>
edit
Flash
edit
HTML5

Note that certain attributes on text objects, such as opacity and rotation, only work on embedded fonts. They do not work on client fonts (also called platform fonts, native fonts, platform fonts, etc). See the Developer's Guide for details.

See Also:

  • The Text Views chapter of the Developer's Guide for a discussion of how to include and manipulate text
  • The canvas.maxtextheight and canvas.maxtextwidth attributes

Attributes

Name (CSS property) Type (tag) Type (js) Default Category
antiAliasType "normal" | "subpixel" | "advanced" String   read/write
  Antialias type for this text, Flash only
cdata cdata String   read/write
 

An alias for the text attribute, but with the type cdata, allowing it to be bound to a value that should not be interpreted as markup (when data binding, CSS style binding, or ??? or ???).

direction string String   read/write
  Text direction, either "ltr" (default) or "rtl", Flash only
gridFit "none" | "pixel" | "subpixel" String   read/write
  Grid fit for this text, Flash only
hscroll Number Number   read/write
  The horizontal scroll position in pixels. Default 0. NOTE: A constraint or handler on onhscroll will automatically enable updating the attribute.
letterspacing number Number   read/write
  letterspacing accepts any number which is interpreted as a px value
lineheight Number Number   readonly
  The height of a line of text in the current style
maxhscroll Number Number   readonly
  The maximum horizontal scroll position in pixels. this.setAttribute('hscroll', this.maxhscroll) will cause the end of content to be visible at the edge of the view. (The rightmost content will appear at the right edge of the view for left-to-right scripts, hence this is the pixel position of the leftmost pixel that will appear in the view when scrolled all the way to the right.) NOTE: A constraint or handler on onmaxhscroll will automatically enable updating the attribute.
maxlength numberExpression Number   read/write
  Maximum number of characters allowed in this field
maxscroll Number Number   readonly
  The maximum vertical scroll position (in lines, 1-based). this.setAttribute('scroll', this.maxscroll) will cause the last line of the content to be visible at the bottom of the view (hence this is the line number of the line that will appear at the top of the view when scrolled all the way to the bottom). NOTE: A constraint or handler on onmaxscroll will automatically enable updating the attribute.
multiline boolean Boolean "false" initialize-only
  If true, the lines of text are wrapped to fit within the text width. (The name multiline is a misnomer. Unwrapped text can be multiple lines if it contains a <br /> or <p> element, or a line break within a <pre> element. This attribute defaults to true if width and height are explicitly specified. If you set multiline=true, you probably want to explicitly a width for the text also; if multiline=true and you do not specify a width, the system will pick an arbitrary width (100 pixels at the moment). When multiline=true, the text is automatially re-wrapped whenever the content is modified by calls to setText, or whenever the width of the text view is modified.
pattern string String   read/write
  regexp describing set of characters allowed in this field Restrict the characters that can be entered to a pattern specified by a regular expression. Currently only the expression [ ]* enclosing a set of characters or character ranges, preceded by an optional "^", is supported. examples: [0-9]* , [a-zA-Z0-9]*, [^0-9]*
resize booleanLiteral Boolean   read/write
  If true, the width of the text field will be recomputed each time text is changed, so that the text view is exactly as wide as the width of the widest line. Defaults to true.
scroll Number Number   read/write
  The vertical scroll position (in lines, 1-based). Default 1.
scrollevents Boolean Boolean   read/write
  Use setAttribute('scrollevents', true) to cause scroll events to be sent. NOTE: A constraint or handler on onyscroll, onscroll, onxscroll, onhscroll, onscrollheight, onmaxscroll, onscrollwidth or onmaxhscroll will automatically enable scrollevents.
scrollheight Number number   readonly
  The total height of the content in pixels. this.setAttribute('height', this.scrollheight) is equivalent to this.setAttribute('height', null) (for the current content: the former will not follow content changes as the latter does). If this.scrollheight > this.height, this.setAttribute('yscroll', this.height - this.scrollheight) will scroll the content so that the bottom of the content appears in the bottom of the view. NOTE: A constraint or handler on onscrollheight will automatically enable updating the attribute.
scrollwidth Number number   readonly
  The total width of the content in pixels. this.setAttribute('width', this.scrollwidth) is equivalent to this.setAttribute('width', null) (for the current content: the former will not follow content changes as the latter does). If this.scrollwidth > this.width, this.setAttribute('yscroll', this.width - this.scrollwidth) will cause the end of content to be visible at the edge of the view. (The rightmost content will appear at the right edge of the view for left-to-right scripts.) NOTE: A constraint or handler on onscrollwidth will automatically enable updating the attribute.
selectable booleanLiteral Boolean   read/write
  If true, the text is selectable
sharpness number Number   read/write
  The sharpness for this text, between -400 and 400, Flash only
text text String   read/write
  The text to display in this text field. If set to a value that is not a string, the value will first be converted to a string as if by String(value). To display nothing, set the value to the empty string "".
textalign string String   read/write
  textalign accepts one of [left, right, center, justify]
textdecoration string String   read/write
  text-decoration for this text, either 'none' or 'underline'.
textindent number Number   read/write
  textindent accepts any number which is interpreted as a px value
thickness number Number   read/write
  The thickness for this text, between -200 and 200, Flash only
xscroll Number Number   read/write
  The x scroll offset of the content in pixels (a negative number specifying how many pixels the content should be scrolled horizontally). Default 0. NOTE: A constraint or handler on onxscroll will automatically enable updating the attribute.
yscroll Number Number   read/write
  The y scroll offset of the content in pixels (a negative number specifying how many pixels the content should be scrolled vertically). Default 0. NOTE: A constraint or handler on onyscroll will automatically enable updating the attribute.

Attributes inherited from <view>

aaactive, aadescription, aaname, aasilent, aatabindex, align, backgroundrepeat, bgcolor, cachebitmap, capabilities, clickable, clickregion, clip, colortransform, context, contextmenu, cornerradius, cursor, fgcolor, focusable, focustrap, font, fontsize, fontstyle, frame, framesloadratio, hasdirectionallayout, hassetheight, hassetwidth, height, layout, loadratio, mask, opacity, pixellock, playing, proxyurl, resource, resourceheight, resourcewidth, rotation, shadowangle, shadowblurradius, shadowcolor, shadowdistance, showhandcursor, source, stretches, subviews, tintcolor, totalframes, unstretchedheight, unstretchedwidth, usegetbounds, valign, visibility, visible, width, x, xoffset, xscale, y, yoffset, yscale

Attributes inherited from <node>

classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition

Methods

addFormat()
text.addFormat(control : string, args : [*]);
Appending version of formatted output. Formats its arguments using LzFormatter.formatToString() and adds the result to the text of the view.
Parameter Name Type Description
control string A control string where % indicates the conversion of the corresponding argument
args [*] arguments to be formatted according to the control string
addText()
text.addText(t : String);
Appends the string to the current text in the textfield.
Parameter Name Type Description
t String The string to add
clearText()
text.clearText();
Clears the text field (by setting its text to the empty string)
escapeText()
text.escapeText(ts : String);
Returns an escaped version of the string if called with no args. If called with a string argument, returns an escaped version of that string (escaped here means markup-escaped, not http escaped.)
Parameter Name Type Description
ts String text string to escape
format()
text.format(control : string, args : [*]);
Formatted output. Formats its arguments using LzFormatter.formatToString() and sets the text of the view to the result.
Parameter Name Type Description
control string A control string where % indicates the conversion of the corresponding argument
args [*] arguments to be formatted according to the control string
getAntiAliasType()
text.getAntiAliasType();
Gets the kind of antialiasing set on this text object
Returns Type Description
  String The current setting for text antialiasing
getGridFit()
text.getGridFit();
Gets the kind of grid fitting set on this text object
Returns Type Description
  String The current setting for grid fitting
getSelectionPosition()
text.getSelectionPosition();
Returns the position of the text cursor within this object. If the text cursor is not inside this object, then the method returns -1.
Returns Type Description
  Number The position of the text cursor within this textfield, 0 based. If the text cursor is not in the textfield, this method returns -1.
getSelectionSize()
text.getSelectionSize();
Returns the length of the text selection in within this object. If the text cursor is not inside this object, then the method returns -1.
Returns Type Description
  Number The length of the text selection within this textfield. If the text cursor is not in the textfield, this method returns -1.
getSharpness()
text.getSharpness();
Gets the sharpness rendering property of this text object
Returns Type Description
  Number The current sharpness rendering
getTextHeight()
text.getTextHeight();
Calculates the current height of the text held by the text field.
getTextWidth()
text.getTextWidth();
Calculates the current width of the text held by the text field.
getThickness()
text.getThickness();
Gets the thickness rendering property of this text object
Returns Type Description
  Number The current thickness rendering
$lzc$set_hasdirectionallayout()
text.$lzc$set_hasdirectionallayout(val);
Parameter Name Type Description
val    
makeTextLink()
text.makeTextLink(str : String, value : String);
Return a string which can be used to insert a hyperlink in a text field. The text returned by makeTextLink can be appended to the text of a text field. It will make an HTML-style anchor, and will have a displayed representation of the string STR. When clicked, the link will send an ontextlink event to the text view, with a value of VALUE.
Parameter Name Type Description
str String The text displayed in the hyperlink.
value String The value returned when the link is clicked.
setSelection()
text.setSelection(start : Number, end : Number);
Positions the text selection within the text field. If this object does not already have the focus, this has the ancillary effect of giving it the focus.
Parameter Name Type Description
start Number The beginning of the text selection, or the position for the text cursor if no end is given. The index is 0 based.
end Number The end of the text selection. Optional. If not given, then the text cursor is positioned at the start point, but no text is selected.

Methods inherited from <formatter>

abbreviate, formatToString, pad

Methods inherited from <view>

bringToFront, containsPt, getAttributeRelative, getBounds, getColor, getColorTransform, getCurrentTime, getDepthList, getDisplayObject, getID3, getMouse, getNextSelection, getPan, getPrevSelection, getProxyURL, getTotalTime, getVolume, init, isBehind, isInFrontOf, isMouseOver, measureHeight, measureWidth, play, proxyurl, searchSubviews, seek, sendAAEvent, sendBehind, sendInFrontOf, sendToBack, setAccessible, setAttributeRelative, setColor, setColorTransform, setPan, setProxyPolicy, setSource, setVolume, shouldYieldFocus, stop, unload, updateResourceSize

Methods inherited from <node>

animate, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setOption, setSelected, updateData

Methods inherited from lz.Eventable

destroy, setAttribute

Events

Name Description
ondirection  
onhscroll  
onlineheight  
onmaxhscroll  
onmaxlength  
onmaxscroll  
onpattern  
onscroll  
onscrollevents  
onscrollheight  
onscrollwidth  
onselectable  
ontextlink Sent when a clickable HTML link in the text field is clicked. Event data is a string with the link value. See the makeTextLink method.
onxscroll  
onyscroll  

Events inherited from <view>

onaddsubview, onbackgroundrepeat, onblur, onclick, onclickable, onclip, oncontext, oncornerradius, ondblclick, onerror, onfocus, onframe, onframesloadratio, ongesture, onheight, onkeydown, onkeyup, onlastframe, onload, onloadratio, onmousedown, onmousedragin, onmousedragout, onmouseout, onmouseover, onmousetrackout, onmousetrackover, onmousetrackup, onmouseup, onmouseupoutside, onopacity, onplay, onplaying, onremovesubview, onshadowangle, onshadowblurradius, onshadowcolor, onshadowdistance, onstop, ontimeout, ontouch, onvisible, onwidth, onx, ony

Events inherited from <node>

onconstruct, ondata, oninit

Events inherited from lz.Eventable

ondestroy

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
<inputtext>  Home  Views