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
">
<view
width
="50
" height
="50
" bgcolor
="red
">
<view
width
="30
" height
="30
" bgcolor
="blue
"/>
</view
>
</canvas
>
<view>
extends <node>
,
which is the fundamental abstract class of LZX.
For an introduction to views see the OpenLaszlo 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.
Name (CSS property) | 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" | read/write |
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 parent.
|
||||
backgroundrepeat
|
"repeat" | "repeat-x" | "repeat-y" | "norepeat" | String | "norepeat" | read/write |
Setting backgroundrepeat causes a view to repeat its resource
to fit the view's width and/or height. Can be 'repeat', 'repeat-x',
'repeat-y' or 'norepeat' per the CSS1 background-repeat style.
|
||||
bgcolor
|
color | Number | null | read/write |
The background color of the view. Setting bgcolor to
null will make the view transparent.
May be set to any valid CSS color specification. When read, will
be read as the equivalent numeric value. To retrieve a CSS color
specification, use this.presentAttribute('bgcolor',
'color') . Default is null (transparent).
|
||||
cachebitmap
|
boolean | Boolean | false | read/write |
A value of true means that this view's bitmap will be cached, if available. | ||||
capabilities
|
Object | readonly | ||
An object containing properties corresponding to the current runtime's capabilities. For example, capabilities.rotation is true in swf and recent versions of Safari and Firefox. | ||||
clickable
|
boolean | Boolean | false | 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. | ||||
colortransform
|
expression | Object | read/write | |
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.redMultiplier: multiplier for red component (0 to 1) defaults to 1
o.redOffset: offset for red component (-255 to 255) defaults to 0
o.greenMultiplier: multiplier for green component (0 to 1) defaults to 1
o.greenOffset: offset for green component (-255 to 255) defaults to 0
o.blueMultiplier: multiplier for blue component (0 to 1) defaults to 1
o.blueOffset: offset for blue component (-255 to 255) defaults to 0
o.alphaMultiplier: multiplier for alpha component (0 to 1) defaults to 1
o.alphaOffset: offset for alpha component (-255 to 255) defaults to 0
|
||||
context
|
expression | Object | read/write | |
Contains a reference to the raw drawing context. The oncontext event is sent when the context is ready to use, which can take some time in IE DHTML. | ||||
contextmenu
|
lz.contextmenu | read/write | ||
The context menu installed on this view. | ||||
cornerradius
|
string | String | 0 | read/write |
The corner radius for the background, e.g. '4' or a list of up to 4 numbers '4 0 0 4'. Per http://www.w3.org/TR/css3-background/#the-border-radius the four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. | ||||
cursor
|
token | String | read/write | |
The cursor to display when the mouse is over this view. Any resource ID can be used as a cursor, or '' for the default cursor. This attribute can be set for any view with clickable=true. | ||||
fgcolor
|
color | Number | 0 | read/write |
The foreground color of any <text> or <inputtext> elements that
appear inside this view. To apply a color transform, see tintcolor .
May be set to any valid CSS color specification. When read, will
be read as the equivalent numeric value. To retrieve a CSS color
specification, use this.presentAttribute('fgcolor',
'color') . Default is 0 (black).
|
||||
focusable
|
boolean | Boolean | false | read/write |
If true, this view will receive focus events. See focus manager (lz.Focus) 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 (lz.Focus) 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.
|
||||
fontsize
|
size | Number | 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. | ||||
hasdirectionallayout
|
booleanLiteral | Boolean | initialize-only | |
If true, sprite will use TLF text framework class that supports bidirectional text layout. | ||||
hassetheight
|
Boolean | readonly | ||
If true, then this view has an assigned or constrained height, and the view will not be sized to its contents. | ||||
hassetwidth
|
Boolean | readonly | ||
If true, then this view has an assigned or constrained width, and the view will not be sized to its contents. | ||||
height
|
sizeExpression | * | read/write | |
The height of the view. Can be set to either a number, or
null , to indicate that the view should be sized to
hold its content. If the view is set to stretch its resource, the
resource will be resized to the new value. When read, reflects the actual
size of the view.
|
||||
layout
|
css | Object | read/write | |
A CSS declaration of property:
value pairs of layout attributes, 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 to be created, otherwise <simplelayout> is
used. To remove the previously set layout, use
{'class': 'none'}
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
|
lz.view | 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 | initialize-only | |
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 | false | read/write |
If true, this view is currently playing. Setting to true causes the view to play, false causes playback to stop. | ||||
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.
|
||||
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. | ||||
shadowangle
|
number | Number | 0 | read/write |
The angle for the drop shadow, in degrees | ||||
shadowblurradius
|
number | Number | 4 | read/write |
The blur radius for the drop shadow, in pixels. A negative value will cause the shadow to be inset. | ||||
shadowcolor
|
color | Number | 0 | read/write |
The color for the drop shadow | ||||
shadowdistance
|
number | Number | 10 | read/write |
The distance for the drop shadow, in pixels | ||||
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" | "none" | 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
|
[lz.view] | 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. | ||||
tintcolor
|
string | String | read/write | |
Sets the color offset, based on a hexadecimal color string, e.g. '#ff00ff'. See setColorTransform() for details. | ||||
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. | ||||
usegetbounds
|
boolean | Boolean | false | readonly |
True if this view requires a call to getBounds() for accurate width and height measurement. This may be necessary when an offset or rotation are applied. | ||||
valign
|
"top" | "middle" | "bottom" | constraint | String | "top" | read/write |
Sets the vertical alignment for the view to the given value. The
alignment is based on the height of this view as compared to the
height of the view's immediateparent .
|
||||
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 | * | read/write | |
The width of the view. Can be set to either a number, or
null , to indicate that the view should be sized to
hold its content. If the view is set to stretch its resource, the
resource will be resized to the new value. When read, reflects the actual
size 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. | ||||
xscale
|
numberExpression | Number | "1" | read/write |
Specifies this horizontal scale for this and all child views. | ||||
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. | ||||
yscale
|
numberExpression | Number | "1" | read/write |
Specifies this vertical scale for this and all child views. |
classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition
Methods
bringToFront() |
---|
containsPt() |
---|
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 |
getAttributeRelative() |
---|
Transform the specified attribute from this view's coordinate space to the reference view's coordinate space. This operation works for any two views on the canvas, regardless of their relative relationship.
This method answers these questions: For x
or
y
: What value of x
or y
in the reference
view will be the same absolute position as my current x
or
y
? For width
or height
: What distance in
the x
or y
axis in the reference view will be the
same absolute distance as my current width
or
height
.
See also
lz.view.setAttributeRelative
.
this.setAttributeRelative(property,
that)
is the same as (but more efficient than)
this.setAttribute(property,
that.getAttributeRelative(property, this))
.
Parameter Name | Type | Description |
---|---|---|
prop | String | the property to transform: 'x', 'y', 'width', or 'height' |
refView | lz.view | the view where the transformed property is measured |
getBounds() |
---|
Returns | Type | Description |
---|---|---|
Object | An object with x, y, width, height, xoffset and yoffset properties that describes the bounding box of the view. |
getColor() |
---|
getColorTransform() (swf8) |
---|
This method is deprecated | |
---|---|
Use colortransform attribute instead. |
getCurrentTime() |
---|
Returns | Type | Description |
---|---|---|
Number | The number of seconds of media between the current frame and the first frame |
getDepthList() |
---|
getDisplayObject() |
---|
getID3() |
---|
getMouse() |
---|
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() |
---|
getPan() |
---|
getPrevSelection() |
---|
getProxyURL() |
---|
getTotalTime() |
---|
getVolume() |
---|
init() |
---|
lz.node.init()
for more.
isBehind() |
---|
isInFrontOf() |
---|
isMouseOver() |
---|
measureHeight() |
---|
measureWidth() |
---|
play() |
---|
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. |
searchSubviews() |
---|
Returns | Type | Description |
---|---|---|
lz.view | the first subview whose property prop is set to value val or null
if none is found
|
seek() |
---|
Parameter Name | Type | Description |
---|---|---|
secs | Integer | Number of seconds to skip forward or backward (if negative) |
sendAAEvent() |
---|
Parameter Name | Type | Description |
---|---|---|
childID | number | The child id of the accessibility interface element to which the event applies (for example, an individual list item in a list box). Use 0 to indicate that the event applies to the DisplayObject supplied in the source parameter. |
eventType | number | A constant indicating the event type. Event names and values are a subset of the MSAA event constants. |
nonHTML | boolean | A Boolean indication of whether or not the event is one of the standard event types that can be generated from an HTML form. When set to true, this parameter helps prevent some problems that may occur with screen readers that interperet Flash content as part of the HTML page. The default value is false. |
sendBehind() |
---|
Parameter Name | Type | Description |
---|---|---|
v | lz.view | The view this view should go behind. If the passed view is null or not a sibling, the method has no effect. |
sendInFrontOf() |
---|
Parameter Name | Type | Description |
---|---|---|
v | lz.view | The view this view should go in front of. If the passed view is null or not a sibling, the method has no effect. |
sendToBack() |
---|
setAccessible() |
---|
setAttributeRelative() |
---|
Sets the named property of this view to the value that will cause the absolute value of the property in both views to be the same.
For example, a.setAttributeRelative('x', b)
will cause
the left edge of view a
to be aligned
with the left edge of view b
on the
canvas. This operation works for any two views on the canvas,
regardless of their relative relationship.
See also
lz.view.getAttributeRelative
.
this.setAttributeRelative(property,
that)
is the same as (but more efficient than)
this.setAttribute(property,
that.getAttributeRelative(property, this))
.
Parameter Name | Type | Description |
---|---|---|
prop | String | the property to set: 'x', 'y', 'width', or 'height' |
refView | lz.view | the view whose property is to be matched |
setColor() |
---|
This method is deprecated | |
---|---|
Use setAttribute('tintcolor', ...) instead. |
tintcolor
to tint a view.
setColorTransform() (as2, swf9) |
---|
This method is deprecated | |
---|---|
Use setAttribute('colortransform', ...) instead. |
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: offset for alpha component (-255 to 255);
setPan() |
---|
setProxyPolicy() |
---|
Parameter Name | Type | Description |
---|---|---|
f | Function | A function that takes a URL as a string and returns true or false, meaning that the request should be proxied by the LPS server or made directly to the URL. |
setSource() |
---|
setSource
will replace compiled
resources when the request is made.
Parameter Name | Type | Description |
---|---|---|
source | String | The URL from which to load the resource for this view. |
cache | String | If set, controls caching behavior. Choices are
none , clientonly , serveronly , both (the default for Flash).
DHTML applications cache media on the client only. DHTML supports the memorycache option which
enables in-memory resource caching. This enhances performance when swapping resources quickly, and is used
internally for multi-frame resources. Media loaded with memorycache will remain in memory until
the page is unloaded or unload() is called.
|
headers | String | Headers to send with the request, if any. |
filetype | String | Filetype, e.g. 'mp3' or 'jpg'. If not specified, it will be derived from the URL. |
setVolume() |
---|
shouldYieldFocus() |
---|
stop() |
---|
Parameter Name | Type | Description |
---|---|---|
f | Integer | If defined, stop playing at the given frame. Otherwise, stop at the current frame. |
rel | Boolean | If true, f is relative to the current frame. Otherwise it is relative to the start position of the resource. |
unload() |
---|
updateResourceSize() |
---|
animate, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setOption, setSelected, updateData
Class Methods
addProxyPolicy() |
---|
Parameter Name | Type | Description |
---|---|---|
f | Function | A function that takes a URL as a string and returns one of true, false, 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 |
removeProxyPolicy() |
---|
Events
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.