A view represents a rectangular area that can display text and other elements. You can create a view using the view tag or by instantiating the LzView class. Because LzView is the superclass of every LZX component class, it is important to learn all its methods and attributes. Table 2.1 lists the attributes of the LzView that you can use within the view tag.
Name | Usage | Type | Default | Accessibility |
---|---|---|---|---|
align | Tag only | string | left | final |
Description. The alignment for subviews. The valid values are left, center, and right. | ||||
bgcolor | Tag and JS | color value | 0x000000 | read-write |
Description. The background color of this view. See the sidebar “Color Values.” | ||||
clickable | Tag and JS | boolean | false | read-write |
Description. Determines whether this view is clickable. A clickable view can raise the onclick event and respond to a mouse click. | ||||
clip | Tag only | boolean | false | final |
Description. If this attribute is set to true, the resource and children of this view will only be displayed to this view’s width and height. | ||||
cursor | Tag and JS | string | read-write | |
Description. References a resource, such as an icon, that will be displayed as the cursor when the mouse pointer is over this view. | ||||
fgcolor | Tag and JS | color value | read-write | |
Description. The foreground color. | ||||
focusable | Tag and JS | boolean | false | read-only |
Description. If this attribute is set to true, this view can receive focus and therefore can raise focus-related events. | ||||
focustrap | Tag and JS | boolean | read-write | |
Description. If this attribute is set to true, this view can trap the focus. | ||||
font | Tag and JS | string | read-write | |
Description. The font to draw text element in this view. | ||||
fontsize | Tag and JS | number | 8 | read-write |
Description. The pixel size to use to render text in this view. | ||||
fontstyle | JS only | string | plain | read-write |
Description. The style for the font used to draw text elements in this view. The valid values are plain, bold, italic, and bolditalic. | ||||
frame | Tag and JS | number | 0 | read-write |
Description. Specifies the frame being displayed by the resource referenced by this view. | ||||
framesloadratio | JS only | number | read-only | |
Description. The ratio of the loaded frames and the number of frames. The value must be between 0 and 1 (inclusive). | ||||
hassetwidth | JS only | boolean | read-only | |
Description. A value of true indicates that the setHeight method has been called on this view and the view will not be resized to fit its contents. | ||||
hassetwidth | JS only | Boolean | read-only | |
Description. A value of true indicates that the setWidth method has been called on this view and the view will not be resized to fit its contents. | ||||
height | Tag and JS | number | read-write | |
Description. The height of this view. | ||||
layout | Tag and JS | string | read-write | |
Description. The layout manager used to lay out subviews. See the discussion of the layout manager in Chapter 4. | ||||
loadratio | JS only | number | read-only | |
Description. The ratio of the loaded bytes to the number of bytes of the resource associated with this view. The value is between 0 and 1 (inclusive). | ||||
mask | JS only | LzView | read-only | |
Description. Reference to the closest masked view in the hierarchy above this view. | ||||
onblur | Tag only | script | event handler | |
Description. The script assigned to this attribute is invoked when the onblur event fires. | ||||
onclick | Tag only | script | event handler | |
Description. The script assigned to this attribute is invoked when the onclick event is raised. | ||||
ondata | Tag and JS | script | event handler | |
Description. The script assigned to this attribute is invoked when the ondata event fires. | ||||
ondblclik | Tag only | script | event handler | |
Description. The script assigned to this attribute is invoked when the ondblclick event fires. | ||||
onfocus | Tag only | script | event handler | |
Description. The script assigned to this attribute is invoked when the onfocus event fires. | ||||
onkeydown | Tag and JS | script | event handler | |
Description. The script assigned to this attribute is invoked when the onkeydown event fires. | ||||
onkeyup | Tag and JS | script | event handler | |
Description. The script assigned to this attribute is invoked when the onkeyup event fires. | ||||
onmousedown | Tag only | script | event handler | |
Description. The script assigned to this attribute is invoked when the onmousedown event is raised. | ||||
onmouseout | Tag only | script | event handler | |
Description. The script assigned to this attribute is invoked when the onmouseout event fires. | ||||
onmouseover | Tag only | script | event handler | |
Description. The script assigned to this attribute is invoked when the onmouseover event fires. | ||||
onmouseup | Tag only | script | event handler | |
Description. The script assigned to this attribute is invoked when the onmouseup event fires. | ||||
onselect | Tag and JS | script | event handler | |
Description. The script assigned to this attribute is invoked when the onselect event fires. | ||||
opacity | Tag and JS | number | 1.0 | read-write |
Description. The opacity of this view. A value of 0.0 makes this view completely transparent. | ||||
options | Tag only | css | final | |
Description. A list of CSS property names and values that configure the behavior of corresponding objects, such as data binding and view layout, that operate on this view. | ||||
pixellock | Tag only | boolean | false | final |
Description. A value of true turns on the snap-to-grid feature. | ||||
play | Tag and JS | boolean | true | read-write |
Description. A value of true causes this view to play the attached resource. | ||||
resource | Tag and JS | string | read-write | |
Description. The name of the resource associated with this view. | ||||
resourceheight | JS only | number | read-only | |
Description. The height of the resource associated with this view. | ||||
resourcewidth | JS only | number | read-only | |
Description. The width of the resource associated with this view. | ||||
rotation | Tag and JS | number | 0 | read-write |
Description. The rotation value in degrees. The value must be between 0 and 360 (inclusive). | ||||
selected | JS only | read-only | ||
Description. Setting this attribute calls the setSelected method. | ||||
selectiontype | Tag and JS | string | any | read-write |
Description. The selection type for this view. The value can be one of the following: none, single, toggle, multi, range. | ||||
showhandcursor | Tag and JS | boolean | read-write | |
Description. Shows or hides the handcursor for this view, if this view is clicable. | ||||
source | JS only | string | read-write | |
Description. The URL from which to load the resource for this view. | ||||
stretches | Tag and JS | string | any | read-write |
Description. Determines how the view should stretch to fit the resource and subviews. Valid values are width, height, both, and any. A value of any causes stretching to be disabled. | ||||
subviews | JS only | read-only | ||
Description. Returns an array of subviews. | ||||
totalframes | JS only | number | read-only | |
Description. The number of frames for this view’s resource. | ||||
unstretchedheight | JS only | number | read-only | |
Description. The height, in pixels, of the view if stretching were turned off. | ||||
unstretchedwidth | JS only | number | read-only | |
Description. The width, in pixels, of the view if stretching were turned off. | ||||
valign | Tag and JS | string | top | read-write |
Description. The vertical alignment. The valid values are top, middle, and bottom. | ||||
visible | Tag and JS | boolean | true | read-write |
Description. Indicates if this view is visible. | ||||
width | Tag and JS | number | read-write | |
Description. The width of this view. | ||||
x | Tag and JS | number | read-write | |
Description. The x position of this view. | ||||
xoffset | Tag and JS | number | 0 | read-write |
Description. The left margin of this view from the container. | ||||
xscale | Tag and JS | number | 1.0 | read-write |
Description. The horizontal scaling applied to the view’s resource. | ||||
y | Tag and JS | number | 0 | read-write |
Description. The y position of this view. | ||||
yoffset | Tag and JS | number | 0 | read-write |
Description. The top margin of this view from the container. | ||||
yscale | Tag and JS | number | 1.0 | read-write |
Description. The vertical scaling applied to the view’s resource. |
Color CodesYou will be working with colors all the time when programming OpenLaszlo. You will set a component’s background and foreground colors, the color of the text component, of a border, and so on. It is therefore crucial to understand how OpenLaszlo translates a value into color representation. If you have worked with HTML, this is nothing new to you. A color is composed of three components: red, green, and blue (RGB). Each component may have one of 256 intensity levels, represented by the hexadecimal numbers 00 to FF. A color is the combination of these three components. For instance, black is a color whereby its components all have an intensity level of 0, i.e. 0x000000. White is where all have the maximum intensity level or 0xFFFFFF. There are therefore 256 × 256 × 256 or 1.67 million colors possible in OpenLaszlo. Because it is easier to work with color names than with numbers, OpenLaszlo defines the following constants that you can use:
Therefore, instead of writing 0xFF0000, you can simply say “red.” |
The following are methods defined in the LzView class.
addProxyPolicy(function)
Adds a function that decides how the media referenced by a given URL will be loaded. The function argument specifies the function that takes a URL and returns one of the following: “server”, “none” or null, “server” indicates that the request should be proxied by the LPS server; “none” indicates that it should be made directly to the server. Null indicates that the request should be passed to the next policy function in the list.
addSubview(subview)
Adds the specified subview to this view.
bringToFront()
Causes this view to be the frontmost subview of its parent.
containsPt(x, y)
Returns true if the coordinate (x, y) is within this view.
getAttributeRelative(attribute, referenceView)
Sets the width/height/x/y attribute to match the corresponding attribute of referenceView.
getBounds()
Returns an object with the following x, y, width, height, xoffset, and yoffset properties that reflect this view’s bounds.
getColor()
Returns a number that describes the RGB components of the view’s color. For example, 0x00ff00 is green.
getColorTransform()
Returns an object that represents the color transformation applied to this view. This object has the following keys:
o.ra. The percentage alpha for the red component (-100 to 100)
o.rb. The offset for the red component (-255 to 255)
o.ga. The percentage alpha for the green component (-100 to 100)
o.gb. The offset for the green component (-255 to 255)
o.ba. The percentage alpha for the blue component (-100 to 100)
o.bb. The offset for the blue component (-255 to 255)
o.aa. The overall percentage alpha (-100 to 100)
o.ab. The overall offset (-255 to 255)
getCurrentTime()
Returns the time that has elapsed since the view’s resource started to play.
getDepthList()
Returns an array of subviews in depth order.
getHeight()
Returns the height of the view.
getID3()
If this view’s resource is associated with an MP3 file loaded with the proxy turned off, this method returns an object containing the media’s id3 tag.
getMouse(axis)
If axis is x, returns the horizontal position of the mouse relative to this view. If axis is y, returns the vertical position of the mouse relative to this view.
getPan()
Returns a number between –100 and 100 that represents the pan level of the associated resource.
getTotalTime()
Returns the amount of time to play the resource.
getVolume()
Returns a number between 0 to 100 that represents the volume level of the associated resource.
getWidth()
Returns this view’s width.
init()
This method is called at initialization, right before the view is displayed.
measureHeight()
Returns the height of the contents of the view.
measureWidth()
Returns the width of the contents of the view.
play(frame, relative)
Start playing the associated resource. The optional frame argument indicates the starting frame. If it is not specified, the resource will play at the current frame. If the relative argument is true, frame is relative to the current frame. Otherwise, it is relative to the first frame.
removeProxyPolicy(function)
Removes the specified proxy policy function.
searchParents(property)
Search parent views having the named property and returns the first one found as an LzView object.
searchSubviews(property, value)
Search all subviews having the specified property name and value and returns the first one.
seek(seconds)
Skips the associated resource forward or backward in seconds. A negative value of seconds indicates a skip backward.
sendBehind(anotherView)
Sends this view behind the specified view. The specified view must be a sibling of this view.
sendInFrontOf(anotherView)
Sends this view in front of the specified view, which must be a sibling of this view.
sendToBack()
Sends this view behind all its siblings.
setAlign(align)
Sets this view’s alignment. The value can be one of “left”, “center”, and “right”.
setAttributeRelative(property, refView)
Assigns the value of the specified property of refView to the same property of this view.
setBGColor(color)
Sets the background color of this view.
setClickable(clickable)
The clickable argument is a boolean. A value of true makes this value clickable, a value of false makes it not clickable.
setColor(color)
Sets the color of this view and its subviews.
setColorTransform(dictionary)
Transforms this view colors, except its background color, using the specified dictionary. The dictionary must have the following keys:
o.ra. The percentage alpha for the red component (-100 to 100)
o.rb. The offset for the red component (-255 to 255)
o.ga. The percentage alpha for the green component (-100 to 100)
o.gb. The offset for the green component (-255 to 255)
o.ba. The percentage alpha for the blue component (-100 to 100)
o.bb. The offset for the blue component (-255 to 255)
o.aa. The overall percentage alpha (-100 to 100)
o.ab. The overall offset (-255 to 255)
setContextMenu(contextMenu)
Adds menu items that will be displayed upon the user clicking the rightmouse button.
setCursor(cursor)
Sets the cursor to the given resource when the mouse is over this view. The cursor argument specifies the name of the resource that will be used.
setHeight(height)
Sets this view’s height.
setLayout(layout)
Sets the layout manager of this view. The layout argument specifies a dictionary of attributes that describe the layout. See Chapter 4 on layout management for more information about the layout manager.
setOpacity(opacity)
Sets this view’s opacity. The opacity argument must be a number between 0.0 and 1.0.
setPan(pan)
Sets the pan of the associated resource.
setPlay(start)
If start is true, starts playing the associated resource. If start is false, stops playing the associated resource.
setResource(resourceName)
Sets the resource of this view.
setResourceNumber(number)
This method takes effect if called on a view whose associated resource has multiple frames. The number argument specifies the index of the frame to be displayed.
setRotation(angle)
Sets the rotation of the view.
setShowHandCursor(show)
If show is true, shows the hand cursor. If show is false, hides the hand cursor.
setSource(url, cache, headers)
Causes this view to load its media from the specified URL at runtime. The cache argument controls the caching behavior. Its value is one of “none”, “clientonly”, “serveronly” and “both” (the default). The headers argument is a string to send with the request.
setValign(vAlign)
Sets the vertical alignment of this view. The vAlign argument can be one of these: “top”, “middle”, and “bottom”.
setVisible(visible)
If the visible argument is true, causes this view to be visible. If the visible argument is false, causes this view to be invisible.
setVolume(volume)
Sets the volume level of the associated resource. The volume argument must be a number between 0 and 100 (inclusive).
setWidth(width)
Sets the width of this view.
setX(x)
Sets the x position of this view.
setY(y)
Sets the y position of this view.
stop(frameIndex, relative)
Stops playing the associated resource. If the frameIndex argument is present, stops playing at the specified frame. If the relative argument is true, the frameIndex argument is relative to the current frame. If it is false, the frameIndex argument is relative to the first frame.
stretchResource(axis)
Stretches the view to the height and/or the width of the associated resource. The axis argument is either “x” or “y”. If the axis argument is not presents, stretches the view in both direction.
unload()
Unloads the associated resource.
updateResourceSize()
Forces the view to update its size.
In addition to attributes and methods, the LzView class also defines several events. These events will be discussed in Chapter 5, “Event Handling.”
As an example, Listing 2.1 displays an LZX application that uses the view tag.
<canvas width="300" bgcolor="#ddddee"> <view align="center" bgcolor="white" width="200" height="150"/> </canvas> |
You can call this application by using this URL:
http://localhost:8080/lps-4.0.x/app02/viewTest1.lzx
Figure 2.1 shows the output generated from the viewTest1.lzx file.
As you can see in Figure 2.1, the view appears as a white rectangle.
In a typical LZX application, you often use multiple views, nested within each other. Listing 2.2 shows an LZX application with nested views.
<canvas height="370"> <view width="150" height="150" bgcolor="black"> <view width="100" height="100" bgcolor="white"> <view width="50" height="50" bgcolor="gray"/> </view> </view> </canvas> |
Invoke the LZX application by directing your browser to this URL:
http://localhost:8080/lps-4.0.x/app02/viewTest2.lzx
Figure 2.2 shows the nested views.
The first view has a width and a height of 150 pixels. It is black in color. The second view is drawn on top of the first view, white and 100 × 100 pixels in size. The third view, the gray one, is on top of the second view.
You can use the view tag to display or play external resources, such as images, MP3 files, and other Flash files. The media types supported are JPG (JPEG), GIF, PNG, MP3, and SWF. Note that support for MP3 is limited to audio files sampled at 44.1 khz, 22 Khz, 11 Khz, 8khz, and 5.5Khz.
For example, Listing 2.3 shows an LZX application that uses view to display an image.
<canvas height="360" bgcolor="white"> <view align="center" resource="panda.jpg"/> </canvas> |
Invoke the LZX application using this resource locator:
http://localhost:8080/lps-4.0.x/app02/viewTest3.lzx
Figure 2.3 shows the generated Flash file.
The resource attribute in Listing 2.3 is assigned a relative URL. In this case, the file panda.jpg must be in the same directory as the lzx file. You can, however, assign an absolute URL to a resource on the Internet.
As another example, the code in Listing 2.4 is an LZX application that uses view to play a Flash file.
<canvas height="360" bgcolor="white"> <view align="center" resource="logo.swf"/> </canvas> |
Use this URL to compile and run the code in Listing 2.4:
http://localhost:8080/lps-4.0.x/app02/viewTest4.lzx
The result is shown in Figure 2.4.