<view>

<view>
Prev	Views	Next

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

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.

Attributes inherited from <node>

classroot, cloneManager, datapath, defaultplacement, id, ignoreplacement, immediateparent, initstage, name, nodeLevel, options, parent, placement, subnodes

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()

<view> The most basic viewable element.

Attributes inherited from <node>

<view>
The most basic viewable element.