View

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.

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.

Listing 2.1. The viewTest1.lzx file

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

Nested Views

In a typical LZX application, you often use multiple views, nested within each other. Listing 2.2 shows an LZX application with nested views.

Listing 2.2. 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.

Displaying External Resources

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.

Listing 2.3. Displaying 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.

Listing 2.4. Playing Flash

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