<view>
The most basic viewable element.

JavaScript: LzView
extends <node> » LzEventable »

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>
edit

LzView extends <node>, which is the fundamental abstract class of LZX.

For an introduction to views see the Laszlo tutorials, particularly OpenLaszlo Basics and Introduction to Views. For a more rigorous explanation of views see the Application Developer's Guide, particularly the Views chapter.

Attributes

Name Type (tag) Type (js) Default Category
aaactive boolean Boolean   read/write
  Activate/inactivate children for accessibility
aadescription string String   read/write
  Set accessibility description
aaname string String   read/write
  Set accessibility name
aasilent boolean Boolean   read/write
  Set accessibility silencing/unsilencing
aatabindex number Number   read/write
  Set accessibility tab order
align "left" | "center" | "right" | constraint String "left" initialize-only
   
bgcolor color color   read/write
  The color of background of this view. Null if there is no bgcolor. A number from 0 - 0xFFFFFF.
cachebitmap boolean Boolean false read/write
  A value of true means that this view's bitmap will be cached, if available.
clickable boolean Boolean   read/write
  If true, this view intercepts click events; otherwise they are passed to its container. This defaults to true if the view defines a mouse event handler or a cursor.
clickregion string String   read/write
  Setting to a vector-based resource changes the clickable hotspot for the mouse. Check capabilities.clickregion before using to avoid debugger warnings.
clip boolean Boolean false initialize-only
  Clip the view's contents to its size.
cursor token String   read/write
  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 color color   read/write
  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 boolean Boolean   readonly
  If true, this view will receive focus events. See focus manager (LzFocus) for more details.
focustrap boolean Boolean   read/write
  If true, this view "traps" the focus, for example in a window or dialog. See focus manager (LzFocus) for more details.
font string String   read/write
  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 size String   read/write
  Pixel size to use to render text which appears inside this view. The default is 8.
fontstyle string String   read/write
  The style to use to render text fields that appear inside of this view. One of "plain", "bold" , "italic" or "bolditalic".
frame numberExpression Number "1" read/write
  If this view has a multi-frame resource, this allows setting which resource frame is displayed. Defaults to the first frame (1). 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 1. 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.
framesloadratio   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   Boolean   readonly
  If true, then setWidth() has been called on this view, and the view will not be sized to its contents.
hassetwidth   Boolean   readonly
  If true, then setHeight() has been called on this view, and the view will not be sized to its contents.
height sizeExpression Number   read/write
  The height of the view
layout css Object   read/write
  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: layout="axis: x", layout="class: constantlayout", layout="axis: y", layout="axis: x; spacing: 5".
loadratio   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   LzView   readonly
  Reference to closest masked view in the hierarchy at or above this one
opacity Number Number "1.0" read/write
  The opacity of the view's contents. 1.0 is opaque; 0.0 is totally transparent (invisible).
pixellock booleanLiteral Boolean   read/write
  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.
playing boolean Boolean   readonly
  If true, this view is currently playing.
proxyurl expression any function read/write
  The url of the proxy server, if the app is running in proxied mode. proxyurl can be null, a URL string, or a function.
  • If the value is a string, treat it as a URL to the proxy server.
  • If the value is a function, it should return the URL of the proxy server.
The default proxy policy references the proxyurl of the canvas.
resource string String   read/write
  A resource that is presented in the background of this view. The value can be either the name of a resource defined with the resource tag, a URL, or a pathname. If the value is a URL, the resource is requested when the view is displayed. If it's a pathname, the file named by the pathname is compiled into the application, and attached to this view.
resourceheight number Number   readonly
  The height of the resource that this view attached
resourcewidth number Number   readonly
  The width of the resource that this view attached
rotation numberExpression Number "0" read/write
  The rotation value for the view (in degrees). Value may be less than zero or greater than 360.
showhandcursor boolean Boolean   read/write
  Show or hide the hand cursor for this view, if clickable
source string String   read/write
  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 "width" | "height" | "both" String "none" read/write
  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   [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   Number   readonly
  The total number of frames for this view's resource.
unstretchedheight   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   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 "top" | "middle" | "bottom" | constraint String "top" read/write
  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".
visibility string String "collapse" read/write
  A value of "visible" means that this view is shown. A value of "hidden" means that this view is hidden. Setting this attribute to "collapse" means that the runtime will hide this view when: its opacity is zero, 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' attribute of the view will reflect the view's current visible state.
visible boolean Boolean "true" read/write
  A value of true means that this view is shown. A value of false means that this view is hidden. Note that an otherwise clickable view that is not visible will have no click region and will not be clickable.
width sizeExpression Number   read/write
  The width of the view
x numberExpression Number "0" read/write
  The horizontal offset of this view's upper left corner from the upper left corner of its container.
xoffset numberExpression Number "0" read/write
  Specifies a translation point for drawing of this view. If the xoffset is set, then rotation and x position will be calculated by first adding the xoffset.
y numberExpression Number "0" read/write
  The vertical offset of this view's upper left corner from the upper left corner of its container
yoffset numberExpression Number "0" read/write
  Specifies a translation point for drawing of this view. If the yoffset is set, then rotation and y position will be calculated by first adding the yoffset.

Methods

bringToFront()
view.bringToFront();
This method makes this view the frontmost subview of this view's parent.

containsPt()
view.containsPt(x : Number, y : Number);
returns true if the point is contained within the view.
Parameter Name Type Description
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 Description
  Boolean boolean indicating whether or not the point lies within the view

getAttributeRelative()
view.getAttributeRelative(prop : String, refView : LzView);
Transform the specified attribute (width/height/x/y) from the existing coordinate space to the reference view's coordinate space. This transformation takes into account any nested views between the views and the common ancestor view. 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?
Parameter Name Type Description
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()
view.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 Description
  Object An object with x, y, width, height, xoffset and yoffset properties that describes the bounding box of the view.

getColor()
view.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() (swf8)
view.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()
view.getContextMenu();
Returns the current context menu object

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

getDepthList()
view.getDepthList();
Returns an array of subviews in depth order
Returns Type Description
  [LzView] An array of this view's subviews in depth order

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

getMouse()
view.getMouse(xory : String);
The position of the mouse relative to this view.
Parameter Name Type Description
xory String Which axis ("x" | "y") to return. If null returns both axes.
Returns Type Description
  Number The position of the mouse relative to this view along the specified axis. If both axes are requsted returns {x: Number, y: Number}.

getNextSelection()
view.getNextSelection();
Override to specify the next view to be focused

getPan()
view.getPan();
Get the pan of the attached resource
Returns Type Description
  Integer A number from -100 to 100 representing a pan level

getPrevSelection()
view.getPrevSelection();
Override to specify the previous view to be focused

getProxyURL()
view.getProxyURL(url);
Parameter Name Type Description
url    

getTotalTime()
view.getTotalTime();
Returns the total amount of time the resource would take to play.
Returns Type Description
  Number Seconds of media controlled by this view.

getVolume()
view.getVolume();
Get the volume of the attached resource
Returns Type Description
  Integer A number from 0 to 100 representing a volume level

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

measureHeight()
view.measureHeight();
Reports the "natural" height of the contents of the view. That is, the height the view would have if it did not have an explicit height. (Note: this method is not supported in a constraint expression.)

measureWidth()
view.measureWidth();
Reports the "natural" width of the contents of the view. That is, the width the view would have if it did not have an explicit width. (Note: this method is not supported in a constraint expression.)

play()
view.play(f : Integer, rel : Boolean);
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.
Parameter Name Type Description
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()
view.releaseLayouts();
Releases all the layouts applied to this view. releaseLayouts() has been deprecated.

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

seek()
view.seek(secs : Integer);
Skips forward or backward n seconds (depending on the sign of the argument). If playing, continue to play. If stopped, stay stopped
Parameter Name Type Description
secs Integer Number of seconds to skip forward or backward (if negative)

sendBehind()
view.sendBehind(v : LzView);
Puts this view behind one of its siblings.
Parameter Name Type Description
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 Description
  Boolean Method returns true if the operation is successful.

sendInFrontOf()
view.sendInFrontOf(v : LzView);
Puts this view in front of one of its siblings.
Parameter Name Type Description
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 Description
  Boolean Method returns true if the operation is successful.

sendToBack()
view.sendToBack();
This method makes this view the hindmost subview of this view's parent.

setAAActive()