<view>

The most basic viewable element.

JavaScript: LzView

Extends Node

The <view> is the most basic viewable element in an OpenLaszlo application. Anything that is displayed on the canvas is a view or extends the view class. A view is a rectangle, which can be visible or invisible, and which can contain other views or display "resources" such as images, .swf files, or other supported media. One view controls one displayable resource. The view system is strictly hierarchical; that is, each view has a single parent but can have multiple children.

The following code shows one view nested inside another:

<canvas height="50" width="500">
  <view width="50" height="50" bgcolor="red">
    <view width="30" height="30" bgcolor="blue"/>
  </view> 
</canvas>

LzView extends LzNode, which is the fundamental abstract class of LZX.

For more a gentle introduction to views please see the Laszlo tutorials, particularly Laszlo Basics and Understanding Views. For a more rigorous explanation of views see theDeveloper's Guide, particularly the views chapter.

Attributes
Name Usage Type (Tag) Type (JS) Default Category
aaactive Tag & JS boolean Boolean   setter
  Activate/inactivate children for accessibility
aadescription Tag & JS string String   setter
  Set accessibility description
aaname Tag & JS string String   setter
  Set accessibility name
aasilent Tag & JS boolean Boolean   setter
  Set accessibility silencing/unsilencing
aatabindex Tag & JS number Number   setter
  Set accessibility tab order
align Tag only left | center | right left final
bgcolor Tag & JS color Number   setter
  The color of background of this view. Null if there is no bgcolor. A number from 0 - 0xFFFFFF.
clickable Tag & JS boolean Boolean   setter
  must be set to true for the view to get mouse events (auto-set to true if a mouse event script is specified in the tag)
clickregion Tag & JS string String   setter
clip Tag only boolean Boolean false final
  If true, the resource and children of this view are masked to its width and height.
cursor Tag & JS token String   setter
 

The cursor to display when the mouse is over this view. Any resource can be used as a cursor. This attribute can be set for any view with clickable=true, or any view whose class defaults clickable to true.
fgcolor Tag & JS color Number   setter
 

A color to use to render object that appears inside this view, which includes any vector or bitmap art in the view's resource and any contained views.
focusable Tag & JS boolean Boolean   readonly
  If true, this view will participate in keyboard focus and will receive focus events and keyboard events when it has the focus. (see LzFocus for more details)
focustrap Tag & JS boolean Boolean   setter
 

If true, this view "traps" the focus, for example in a window or dialog. See focus manager (LzFocus) for more details.
font Tag & JS string String   setter
 

The font to use for any <text> or <inputtext> elements that appear inside this view. Like all the font properties (fontstyle and fontsize too) these properties cascade down the view hierarchy until a new value is specified. When the font attributes are modified at runtime, using JavaScript, the font is changed for the view itself, not for any of its subviews.
fontsize Tag & JS size Number   setter
 

Pixel size to use to render text which appears inside this view. The default is 8.
fontstyle Tag & JS string String   setter
 

The style to use to render text fields that appear inside of this view. Once of "plain", "bold" , "italic" or "bolditalic".
frame Tag & JS number Number 0 setter
  See also the resource attribute. Setting this attribute will change the frame that is being displayed by the resource associated with this view. The first frame of the resource is frame 0. Setting a view's 'donttrackplay' option to true will allow the view's resource to play without updating the value of the view's frame property. This can save CPU usage in cases where the application doesn't need to know what frame the resource is showing while it is playing. Removed "at" sign from the line below so that this field does not appear in the documentation. field selected: Setting this attribute calls the abstract method setSelected. See LzSelectionManager.
framesloadratio JS only Number   readonly
  For views whose resource is loaded at runtime, the ratio of the loaded frames to the total frames. This is a number between zero and 1.
hassetheight JS only Boolean   readonly
  If true, then setHeight() has been called on this view, and the view will not be sized to its contents.
hassetwidth JS only Boolean   readonly
  If true, then setWidth() has been called on this view, and the view will not be sized to its contents.
height Tag & JS size Number   setter
  The height of the view
layout Tag & JS css Object   setter
  A CSS property when declared in the tag: value sequence of layout parameters, which are used to create a layout that is attached to this view. If there is a class property, it names the class of the layout; otherwise simplelayout is used. Examples: axis: x, class: constantlayout; axis: y; axis: x; spacing: 5. For Javascript usage, see the setLayout method.
loadratio JS only Number   readonly
  For views whose resource is loaded at runtime, ratio of the loaded bytes to the total bytes. This is a number between zero and 1.
mask JS only LzView   readonly
  Reference to closest masked view in the hierarchy above this one
onblur Tag only script   eventhandler
 

The onblur script is executed when an element loses focus either by the pointing device or by tabbing navigation.
onclick Tag only script   eventhandler
 

The onclick script is executed when the pointing device button is clicked over an element.
ondata Tag & JS script LzDelegate   setter
 

The ondata script is executed when the data selected by a view's datapath changes.
ondblclick Tag only script   eventhandler
 

The ondblclick script is executed when the pointing device button is double clicked over an element.
onfocus Tag only script   eventhandler
 

The onfocus script is executed when an element receives focus either by the pointing device or by tabbing navigation.
onkeydown Tag & JS script LzDelegate   setter
 

The onkeydown script is executed when this view has the focus and a key is pressed down. Multiple key down events are sent for a key that is held down. If you want the script executed only once, use onkeyup. This event is sent with the keycode for the key that is down.
onkeyup Tag & JS script LzDelegate   setter
 

The onkeyup script is executed when this view has the focus and a key is released. This event is sent with the keycode for the key that went up.
onmousedown Tag only script   eventhandler
 

The onmousedown script is executed when the pointing device button is pressed over an element.
onmouseout Tag only script   eventhandler
 

The onmouseout script is executed when the point device is moved so that is is no longer over an element.
onmouseover Tag only script   eventhandler
 

The onmouseover script is executed when the pointing device is moved onto an element.
onmouseup Tag only script   eventhandler
 

The onmouseup script is executed when the pointing device button is released over an element.
onselect Tag & JS script LzDelegate   setter
opacity Tag & JS opacity Number 1.0 setter
  The opacity value for the view, a number between 0 and 1
options Tag only css   final
 

A list of CSS property names and values that configure the behavior of objects, such as data binding and view layouts, that operate on this view.
pixellock Tag only boolean false final
 

The view system supports sub-pixel positioning to enable smooth animation. This may be turned off to make the view snap to a pixel boundary by setting pixellock to true.
play Tag & JS boolean Boolean true setter
 

If true, the resource attached to this view begins playing when the view is instantiated.
resource Tag & JS string String   setter
  The name of this view's resource, or the URL the resource was loaded from.
resourceheight JS only Number   readonly
  The height of the resource that this view attached
resourcewidth JS only Number   readonly
  The width of the resource that this view attached
rotation Tag & JS number Number 0 setter
  The rotation value for the view (in degrees) Value may be less than zero or greater than 360.
selectiontype Tag & JS none | single | toggle | multi | range any   setter
showhandcursor Tag & JS boolean Boolean   setter
  Show or hide the handcursor for this view, if clickable
source JS only   setter
  The URL from which to load the resource for this view. If this attribute is set, the media for the view is loaded at runtime.
stretches Tag & JS width | height | both any   setter
 

Setting stretches causes a view to change its coordinate space so that everything it contains (resources and other views) fit exactly into the view's width and/or height. The default for this property is "none". This is used to resize a view's contents by setting its width and/or height.
subviews JS only Array of LzView   readonly
  An array of the subviews that are children of this view. This is initialized to an empty array for views that have no subviews.
totalframes JS only Number   readonly
  The total number of frames for this view's resource.
unstretchedheight JS only Number   readonly
  If stretches is not set to none, the height that this view would be if it weren't stretched. This attribute can be used to scale a view by a percentage of its original size, or to determine the aspect ratio for a view.
unstretchedwidth JS only Number   readonly
  If stretches is not set to none, the width that this view would be if it weren't stretched. This attribute can be used to scale a view by a percentage of its original size, or to determine the aspect ratio for a view.
valign Tag & JS top | middle | bottom any top setter
 

Creates a constraint on the view's y position which is a function of its height and its parent's height. The default for this is "top".
visible Tag & JS boolean Boolean true setter
  A value of true means that this view is shown. A value of false means that this view is hidden. Setting this attribute to null means that the runtime will hide this view when: its opacity is 0, it has a datapath that does not match a node, or it is loading its media. In this case, the the value of the visible member of the view will reflect the view's current visible state. This is the default behavior for this attribute. Note that an otherwise clickable view that is not visible will have no click region will not be clickable. Also be aware that in Javascript, the && operator does not coerce values to booleans. For instance, given an expression like this: visible="a && b", if a is null, the value returned by the constraint expression will be null -- not false.
width Tag & JS size Number   setter
  The width of the view
x Tag & JS number Number 0 setter
  The x position of the view
xoffset Tag & JS number Number 0 setter
  A value to be added to the x position of this view before drawing it. This affects the apparent rotation point of the view, as well as its apparent x position. It does not affect the view's width or its internal coordinate system.
y Tag & JS number Number 0 setter
  The y position for the view
yoffset Tag & JS number Number 0 setter
  A value to be added to the y position of this view before drawing it. This affects the apparent rotation point of the view, as well as its apparent y position. It does not affect the view's width or its internal coordinate system.

Attributes inherited from Node

class, classroot, cloneManager, datapath, defaultplacement, id, ignoreAttribute, ignoreplacement, immediateparent, initstage, name, nodeLevel, onconstruct, oninit, parent, placement, subnodes

Methods

addProxyPolicy()
LzView.addProxyPolicy(f)

Adds a function which can decide how the media at a given URL should be loaded
Parameters
Name Type Desc
f Function A function that takes a URL as a string and returns one of "server", "none", or null meaning respectively that the request should be proxied by the LPS server; made directly to the URL; or should be passed to the next policy function in the list. The default policy function returns the value of canvas.proxied

addSubview()
LzView.addSubview(s)

Called when a subview is added to the view.
Parameters
Name Type Desc
s LzView The new subview

bringToFront()
LzView.bringToFront()

This method makes this view the frontmost subview of this view's parent.

construct()
LzView.construct(parent, args)

Base level constructor for views. See LzNode.construct for more on this.
Parameters
Name Type Desc
parent None
args None

containsPt()
LzView.containsPt(x, y)

returns true if the point is contained within the view.
Parameters
Name Type Desc
x Number an x value relative to the this view's coordinates
y Number an y value relative to the this view's coordinates
Returns
Type Desc
Boolean boolean indicating whether or not the point lies within the view

getAttributeRelative()
LzView.getAttributeRelative(prop, refView)

This method answers the question: what should this view set its width/height/x/y to in order to appear to have the same value for that attribute as the reference view?
Parameters
Name Type Desc
prop String a string specifying the property to return. known properties are: x, y, width, and height
refView LzView the reference view for the transformation

getBounds()
LzView.getBounds()

Returns an Object with x, y, width, and height properties that are the coordinates of the view's bounding box in its immediateparent's coordinate system. The Laszlo view object uses a relatively simple notion for its coordinate system. Note that this function doesn't necessarily return the true bounding box of the view, but a box surrounding the view, since this method respects a set width and/or height and ignores subviews that appear left or above of the view's 0,0 point. The xoffset and yoffset properties of the bounds object are the distance between the view's x or y property and the top or left of the bounding box.
Returns
Type Desc
Object An object with x, y, width, height, xoffset and yoffset properties that describes the bounding box of the view.

getColor()
LzView.getColor()

Gets the color of the view (the view's resource and any subviews) view as as set with setColor(). Returns A color in rgb format; for example, 0xff0000 is red.

getColorTransform()
LzView.getColorTransform()

Returns an object that represents the color transformation currently applied to the view. The color transform object has the following possible keys o.ra: percentage alpha for red component (-100 to 100); o.rb: offset for red component (-255 to 255); o.ga: percentage alpha for green component (-100 to 100); o.gb: offset for green component (-255 to 255); o.ba: percentage alpha for blue component (-100 to 100); o.bb: offset for blue component (-255 to 255); o.aa: percentage overall alpha (-100 to 100); o.ab: overall offset (-255 to 255);

getContextMenu()
LzView.getContextMenu()

LzView.getContextMenu Returns the current context menu object

getCurrentTime()
LzView.getCurrentTime()

Return the elapsed play time within the view's resource.
Returns
Type Desc
Number The number of seconds of media between the current frame and the first frame

getDepthList()
LzView.getDepthList()

Returns an array of subviews in depth order
Returns
Type Desc
[LzView] An array of this view's subviews in depth order

getHeight()
LzView.getHeight()

Returns the height of the view.

getID3()
LzView.getID3()

Returns an object containing the media's id3 tag, assuming it's mp3 loaded with proxy == false;
Returns
Type Desc
Object Object containind id3 tag data, if available.

getMouse()
LzView.getMouse(xory)

This method returns the position of the mouse relative to this view.
Parameters
Name Type Desc
xory a string ("x" | "y") specifying which axis to return
Returns
Type Desc
Number The position of the mouse relative to this view.

getPan()
LzView.getPan()

Get the pan of the attached resource
Returns
Type Desc
Integer A number from -100 to 100 representing a pan level

getTotalTime()
LzView.getTotalTime()

Returns the total amount of time the resource would take to play.
Returns
Type Desc
Number Seconds of media controlled by this view.

getVolume()
LzView.getVolume()

Get the volume of the attached resource
Returns
Type Desc
Integer A number from 0 to 100 representing a volume level

getWidth()
LzView.getWidth()

Returns the width of the view.

init()
LzView.init()

Called right before the view is shown. See LzNode.init for more.

measureHeight()
LzView.measureHeight()

reports the height of the contents of the view (not supported in a constraint expression)

measureWidth()
LzView.measureWidth()

reports the width of the contents of the view (not supported in a constraint expression)

play()
LzView.play(f, rel)

Start playing the attached resource. Note that a compiled resource that begins playing when it is attached (i.e. does not contain a 'stop' instruction in the first frame) will not send events and generally behave correctly unless it is told to play. Resources which are loaded via setSource don't have this issue.
Parameters
Name Type Desc
f Integer If defined, begin playing at the given frame. Otherwise, begin playing at the current frame.
rel Boolean If true, f is relative to the current frame. Otherwise f is relative to the beginning of the resource.

releaseLayouts()
LzView.releaseLayouts()

Releases all the layouts applied to this view. @deprecated

removeProxyPolicy()
LzView.removeProxyPolicy(f)

Removes a proxy policy function that has been added using LzView.addProxyPolicy
Parameters
Name Type Desc
f Function The function to remove from the policy list
Returns
Type Desc
Boolean Returns true if the function was found and removed, false if not

searchParents()
LzView.searchParents(prop)

Search up parent views for a named property. For now, returns when it finds the first one.
Parameters
Name Type Desc
prop String named property
Returns
Type Desc
LzView the first view which has a non-null value for prop or null if none is found

searchSubviews()
LzView.searchSubviews(prop, val)

Search all subviews for a named property. For now, returns when it finds the first one. This is a width first search.
Parameters
Name Type Desc
prop String named property
val value for that property
Returns
Type Desc
LzView the first subview whose property prop is set to val 'val' or null if none is found

seek()
LzView.seek(secs)

Skips forward or backward n seconds (depending on the sign of the argument). If playing, continue to play. If stopped, stay stopped
Parameters
Name Type Desc
secs Integer Number of seconds to skip forward or backward (if negative)

sendBehind()
LzView.sendBehind(v)

Puts this view behind one of its siblings.
Parameters
Name Type Desc
v LzView The view this view should go in front of. If the passed view is null or not a sibling, the method has no effect.
Returns
Type Desc
Boolean Method returns true if the operation is successful.

sendInFrontOf()
LzView.sendInFrontOf(v)

Puts this view in front of one of its siblings.
Parameters
Name Type Desc
v LzView The view this view should go in front of. If the passed view is null or not a sibling, the method has no effect.
Returns
Type Desc
Boolean Method returns true if the operation is successful.

sendToBack()
LzView.sendToBack()

This method makes this view the hindmost subview of this view's parent.

setAAActive()
LzView.setAAActive(s, mc)

Activate/inactivate children for accessibility
Parameters
Name Type Desc
s Boolean If true, activate the current view and all of its children
mc None

setAADescription()
LzView.setAADescription(s, mc)

Set accessibility description
Parameters
Name Type Desc
s string Sets the accessibility name for this view
mc None

setAAName()
LzView.setAAName(s, mc)

Set accessibility name
Parameters
Name Type Desc
s string Sets the accessibility name for this view
mc None

setAASilent()
LzView.setAASilent(s, mc)

Set accessibility silencing/unsilencing
Parameters
Name Type Desc
s string If true, this view is made silent to the screen reader. If false, it is active to the screen reader.
mc None

setAATabIndex()
LzView.setAATabIndex(s, mc)

Set accessibility tab order
Parameters
Name Type Desc
s number The tab order index for this view. Must be a unique number.
mc None

setAlign()
LzView.setAlign(align)

Sets the alignment for the view to the given value. The alignment is based on the size of this view as compared to the size of the view's immediate parenbgRef.
Parameters
Name Type Desc
align String The alignment for the view. This is one of "left", "center", and "right"

setAttributeRelative()
LzView.setAttributeRelative(prop, refView)

This method is used to set a view's property to match that of another view -- potentially one in another coordinate system.
Parameters
Name Type Desc
prop String a string specifying the property to set. known properties are: x, y, width, and height
refView LzView the reference view for the transformation

setBGColor()
LzView.setBGColor(bgc)

Gives the view a bgcolor that is the same size as the view.
Parameters
Name Type Desc
bgc Integer The 0-FFFFFF number to be used for the new background color.

setClickable()
LzView.setClickable(amclickable)

Makes a view clickable or not clickable.
Parameters
Name Type Desc
amclickable Boolean indicating the view's clickability

setColor()
LzView.setColor(c)

Sets the color of the view (the view's resource and any subviews) to the the color given. This will completely override any color information in the view or subview resources. Use the view method setColorTransform to tint a view.
Parameters
Name Type Desc
c Integer A color in rgb format; for example, 0xff0000 is red.

setColorTransform()
LzView.setColorTransform(o)

color transforms everything contained in the view (except the background) by the transformation dictionary given in o. The dictionary has the following possible keys: o.ra: percentage alpha for red component (-100 to 100); o.rb: offset for red component (-255 to 255); o.ga: percentage alpha for green component (-100 to 100); o.gb: offset for green component (-255 to 255); o.ba: percentage alpha for blue component (-100 to 100); o.bb: offset for blue component (-255 to 255); o.aa: percentage overall alpha (-100 to 100); o.ab: overall offset (-255 to 255);
Parameters
Name Type Desc
o None

setContextMenu()
LzView.setContextMenu(cmenu)

LzView.setContextMenu Install menu items for the right-mouse-button
Parameters
Name Type Desc
cmenu ContextMenu ContextMenu to install on this view

setCursor()
LzView.setCursor(cursor)

Sets the cursor to the given resource when the mouse is over this view
Parameters
Name Type Desc
cursor String The name of the resource to use as a cursor when it is over this view.

setHeight()
LzView.setHeight(v)

Sets the height of the view the given value. If the view is set to stretch its resource, the resource will be resized to the new value. If the value 'null' is given for the new height, then the height is unset, and the height of the view will be the size measured of its contents.
Parameters
Name Type Desc
v Number The new value for the height

setLayout()
LzView.setLayout(layoutobj)

this creates a specific child layout for this view. When called a second time the first layout will be replaced by the second.
Parameters
Name Type Desc
layoutobj Object A dictionary of attributes that describe the layout, where the class key specifies the class of the layout and the rest are passed as attributes for the layout. By default the class will be simplelayout if not given. For example: {'class': 'wrappinglayout', axis: 'x', spacing: 20} To remove the previously set layout, use {'class': 'none'} (Note that you must use 'class' as the key, because class is a keyword reserved for future use.)

setOpacity()
LzView.setOpacity(v)

Sets the opacity for the view. The opacity is a number between 0.0 (transparent) and 1.0 (opaque).
Parameters
Name Type Desc
v Number The new value for the opacity

setPan()
LzView.setPan(p)

Set the pan of the attached resource
Parameters
Name Type Desc
p Integer A number from -100 to 100 representing a pan level

setPlay()
LzView.setPlay(b)

Start or stop playing the attached resource.
Parameters
Name Type Desc
b Boolean If true, starts playing, otherwise stops

setResource()
LzView.setResource(resourceName)

This method associates a view with a named library element. If the view's isVisible property is true, the resource will be displayed when it is attached
Parameters
Name Type Desc
resourceName String a string naming the id of the resource to attach

setResourceNumber()
LzView.setResourceNumber(n)

For resources which have more than one frame, this function sets the view to display the numbered resource. For Flash assets, resource numbers correspond to movieclip frames.
Parameters
Name Type Desc
n Integer the number of the resource to show