basebutton

basebutton
Prev	Base Components	Next

Description

A basebutton is a view that encapsulates the basic event mechanisms of a button (onclick, onmousedown, onmouseover).

There are no visual elements to a basebutton so it requires a multi-frame resource to work correctly.

The example below shows how to construct a basebutton and how to respond to its events.

First, the images that will be used are shown below:

            <canvas height="150">
              <!-- first create the multi-frame resource and give it a name -->
              <resource name="mybutton_rsrc">
               <!-- first frame MUST be the mouseup state of the button -->  
                <frame src="../images/basebutton/button-up.png"/>
                <!-- second frame MUST be the mouseover state of the button -->
                <frame src="../images/basebutton/button-over.png"/>
                <!-- third frame MUST be the mousedown state of the button -->
                <frame src="../images/basebutton/button-down.png"/>
              </resource>
              
              <!-- Second, assign the resource to a basebutton tag -->
              <basebutton resource="mybutton_rsrc"/>
            </canvas>

Using the example above, the basebutton will appear initially on screen in the 'mouseup' state and it will respond to the mouse events by showing the correct images associated with each event. In order to have the button do more than just switch images, a script needs to be added. There are three basic approaches for creating scripts to be executed by a basebutton once it has been clicked, and these approaches are shown below.

            <canvas>
              <resource name="mybutton_rsrc">
                <frame src="../images/basebutton/button-up.png"/>
                <!-- first frame MUST be the mouseup state of the button -->     
                <frame src="../images/basebutton/button-over.png"/>
                <!-- second frame MUST be the mouseover state of the button -->     
                <frame src="../images/basebutton/button-down.png"/>
                <!-- third frame MUST be the mousedown state of the button -->     
              </resource>
              
              <!-- APPROACH 1: include a script in the event attribute, onclick -->
              <basebutton resource="mybutton_rsrc" onclick="this.animate('x', 100, 1000, true)"/>
              
              <!-- APPROACH 2: include a script in the onclick attribute that calls a method -->
              <basebutton resource="mybutton_rsrc" onclick="this.doMyMethod()">
                <method ="doMyMethod">
                  this.animate('x', 100, 1000, true, {motion: 'easeout'}); 
                  this.animate('x', -100, 1000, true, {motion: 'easein'}); 
                </method>
              </basebutton>
              
              
              <!-- APPROACH 3: have the handler respond to the onclick event directly -->
              <basebutton resource="mybutton_rsrc">
                <handler ="onclick">
                  this.animate('x', 100, 1000, true, {motion: 'easeout'}); 
                  this.animate('x', -100, 1000, true, {motion: 'easein'}); 
                </handler>
              </basebutton>
              
              <simplelayout axis="y" spacing="20"/>
            </canvas>

You can also use these approaches to respond to the other mouse events as well, if there is a need to do more then just switch images.

Abstract class for making buttons with up-over-down states.

Superclass Chain

node (LzNode) » view (LzView) » basecomponent » basebutton

Known Subclasses

Known Direct Subclasses: basebuttonrepeater, button, closebox, custombutton, multistatebutton, stylishbutton

Details

Properties (9)

disabledResourceNumber: <attribute name="disabledResourceNumber" type="number" value="4" />

public final var disabledResourceNumber : Number;

The resource for the disabled state, default: 4. Use 0 if the resource has at least 4 frames, but there is no disabled state.
downResourceNumber: <attribute name="downResourceNumber" type="number" value="3" />

public final var downResourceNumber : Number;

The resource for the mouse down state, default: 3. Use 0 if the resources has at least 3 frames, but there is no down state.
focusable: <attribute name="focusable" value="false" />

public var focusable;

Since basebutton is frequently used as part of another component, default is false.
maxframes: <attribute name="maxframes" type="number" value="$once{this.totalframes}" />

public final var maxframes : Number;

The maximum number of frames to use, defaults to the number of frames for the resource associated with this view. This is useful for a subclass that has no resource for this view. Default is the total frames of basebutton.
normalResourceNumber: <attribute name="normalResourceNumber" type="number" value="1" />

public final var normalResourceNumber : Number;

The resource for the mouse up state, and initial state of the button. Default: 1.
overResourceNumber: <attribute name="overResourceNumber" type="number" value="2" />

public final var overResourceNumber : Number;

The resource for the mouse over state, default: 2. Use 0 if the resource has at least 2 frames, but there is no over state.
reference: <attribute name="reference" value="this" />

public final var reference;

Where to send mouse events (the view that will be "clickable"), default: this.
resourceviewcount: <attribute name="resourceviewcount" type="number" value="0" />

public var resourceviewcount : Number;

The first 'n' subviews that will respond to mouseevents by changing the frame number of their resource.
respondtomouseout: <attribute name="respondtomouseout" value="true" />

public var respondtomouseout;

If this button does not respond to onmouseout or onmousedragout events, set this flag to false. Default: true.

Methods (8)

doEnterDown(): <method name="doEnterDown" />

public function doEnterDown();

Called by the button manager when this button is the default
doEnterUp(): <method name="doEnterUp" />

public function doEnterUp();

Called by the button manager when this button is the default
doSpaceDown(): <method name="doSpaceDown" />

public function doSpaceDown();

When the space bar is down, basebutton shows its down state.
doSpaceUp(): <method name="doSpaceUp" />

public function doSpaceUp();

When the space bar is up, basebutton shows its up state.
setResourceViewCount(): <method name="setResourceViewCount" args="rvc" />

public function setResourceViewCount(rvc : Number);

Setter for attribute resourceviewcount.
showDown(): <method name="showDown" args="sd" />

public function showDown(sd : Boolean);

This function is called whenever the button's visible state should appear to be down.
showOver(): <method name="showOver" args="sd" />

public function showOver(sd : Boolean);

This function is called whenever the button's visible state should appear to be hilited to indicate that it can be clicked.
showUp(): <method name="showUp" args="sd" />

public function showUp(sd : Boolean);

This function is called whenever the button's visible state should appear to be up.

Events (2)

onclick: <attribute name="onclick" />

public event onclick;

This event is sent when button the clicked.
onresourceviewcount: <attribute name="onresourceviewcount" />

public event onresourceviewcount;

This event is sent when the resourceviewcount changes.

LZX Synopsis

</class>

JavaScript Synopsis

public basebutton extends basecomponent {

public final var disabledResourceNumber : Number;

public final var downResourceNumber : Number;

public var focusable ;

public final var maxframes : Number;

public final var normalResourceNumber : Number;

public final var overResourceNumber : Number;

public final var reference ;

public var resourceviewcount : Number;

public var respondtomouseout ;

prototype public function doEnterDown ();

prototype public function doEnterUp ();

prototype public function doSpaceDown ();

prototype public function doSpaceUp ();

prototype public event onclick ;

prototype public event onresourceviewcount ;

prototype public function setResourceViewCount (rvc : Number);

prototype public function showDown (sd : Boolean);

prototype public function showOver (sd : Boolean);

prototype public function showUp (sd : Boolean);

}

Name

Synopsis