Button
A Button object represents a clickable button. A button is also used to raise an event, so that you can perform an action upon a click on the button. We will discuss event handling in Chapter 5, “Event Handling.”
The Button class is the template for creating Button objects. This class is a subclass of BaseButton, which in turn is a subclass of BaseComponent. The class hierarchy is shown in Figure 2.11.
Figure 2.11. The hierarchy of the Button class
The attributes of BaseButton and those of Button are listed in Tables 2.7 and 2.8, respectively.
| Name | Usage | Type | Default | Accessibility |
|---|---|---|---|---|
| disabledResourceNumber | Tag only | number | 4 | final |
| Description. The resource for the disabled state. Use 0 if the resource has at least four frames and there is no disabled state. | ||||
| downResourceNumber | Tag only | number | 3 | final |
| Description. The resource for the mouse down state. Use 0 if the resource has at least three frames and there is no down state. | ||||
| maxframes | Tag only | number | final | |
| Description. The maximum number of frames to use. | ||||
| normalResourceNumber | Tag only | number | 1 | final |
| Description. The resource for the mouse up state, and the initial state of the button. | ||||
| onresourceviewcount | Tag and JS | boolean | read-write | |
| Description. This event is raised when the value of resourceviewcount changes. | ||||
| overResourceNumber | Tag and JS | boolean | final | |
| Description. This event is raised when the resourceviewcount changes. | ||||
| reference | Tag only | string | final | |
| Description. The target of mouse events. | ||||
| resourceviewcount | Tag and JS | number | 0 | read-write |
| Description. The number of the first subviews that will respond to mouse events by changing the resource’s frame number. | ||||
| respondtomouseout | Tag and JS | boolean | true | read-write |
| Description. Indicates if this button responds to onmouseout or onmousedragout events. | ||||
| Name | Usage | Type | Default | Accessibility |
|---|---|---|---|---|
| text_padding_x | Tag and JS | number | 11 | read-write |
| Description. The amount of space to add horizontally when resizing button to its text. | ||||
| text_padding_y | Tag and JS | number | 4 | read-write |
| Description. The amount of space to add vertically when resizing button to its text. | ||||
| text_x | Tag and JS | number | read-write | |
| Description. The x position of the button text. The default is centered. | ||||
| text_y | Tag and JS | number | read-write | |
| Description. The y position of the button text. The default is centered. | ||||
The BaseButton class defines the following methods:
doSpaceDown()
Shows the down state. This method only takes effect if the space bar is down.
doSpaceUp()
Shows the up state. This method will only take effect if the space bar is up.
setResourceViewCount(resourceViewCount)Sets the resourceviewcount attribute.
showDown(sd)Called when the button’s visible state should appear to be down. The argument sd is not used.
showOver(sd)Called when the button’s visible state should appear to be raised, to indicate it can be clicked.
showUp(sd)Called when the button’s visible state should appear to be up.
The following are methods defined in the Button class.
doEnterDown()
Called by the button manager when this button is the default.
doEnterUp()
Called by the button manager when this button is the default.
The buttonTest1.lzx file in Listing 2.9 presents an LZX application that uses a button. The button’s text says, “Click Here.”
Listing 2.9. Using a button
<canvas width="150">
<button>Click Here</button>
</canvas> |
To compile the LZX application, direct your browser here to this URL:
http://localhost:8080/lps-4.0.x/app02/buttonTest1.lzx
Figure 2.12 shows the generated output.
Figure 2.12. Using button
