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="resources/basebutton/button-up.png"/>
<!-- second frame MUST be the mouseover state of the button -->
<frame src="resources/basebutton/button-over.png"/>
<!-- third frame MUST be the mousedown state of the button -->
<frame src="resources/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="resources/basebutton/button-up.png"/>
<!-- first frame MUST be the mouseup state of the button -->
<frame src="resources/basebutton/button-over.png"/>
<!-- second frame MUST be the mouseover state of the button -->
<frame src="resources/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 name="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 name="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.
| Name (CSS property) | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
disabledResourceNumber
|
number | Number | 4 | initialize-only |
| The resource for the disabled state. Use 0 if the resource has at least 4 frames, but there is no disabled state. | ||||
downResourceNumber
|
number | Number | 3 | initialize-only |
| The resource for the mouse down state. Use 0 if the resources has at least 3 frames, but there is no down state. | ||||
focusable
|
expression | any | false | read/write |
| Since basebutton is frequently used as part of another component. | ||||
maxframes
|
number | Number | this.totalframes | initialize-only |
| 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. | ||||
normalResourceNumber
|
number | Number | 1 | initialize-only |
| The resource for the mouse up state, and initial state of the button. | ||||
overResourceNumber
|
number | Number | 2 | initialize-only |
| The resource for the mouse over state. Use 0 if the resource has at least 2 frames, but there is no over state. | ||||
reference
|
expression | any | this | initialize-only |
| Where to send mouse events (the view that will be "clickable"). | ||||
resourceviewcount
|
number | Number | 0 | read/write |
| The first 'n' subviews that will respond to mouseevents by changing the frame number of their resource. | ||||
respondtomouseout
|
expression | any | true | read/write |
| If this button does not respond to onmouseout or onmousedragout events, set this flag to false. | ||||
Attributes inherited from <basecomponent>
doesenter, enabled, hasdefault, isdefault, style, styleable, text
Attributes inherited from <view>
aaactive, aadescription, aaname, aasilent, aatabindex, align, backgroundrepeat, bgcolor, cachebitmap, capabilities, clickable, clickregion, clip, colortransform, context, contextmenu, cornerradius, cursor, fgcolor, focusable, focustrap, font, fontsize, fontstyle, frame, framesloadratio, hasdirectionallayout, hassetheight, hassetwidth, height, layout, loadratio, mask, opacity, pixellock, playing, proxyurl, resource, resourceheight, resourcewidth, rotation, shadowangle, shadowblurradius, shadowcolor, shadowdistance, showhandcursor, source, stretches, subviews, tintcolor, totalframes, unstretchedheight, unstretchedwidth, usegetbounds, valign, visibility, visible, width, x, xoffset, xscale, y, yoffset, yscale
Attributes inherited from <node>
classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition
Methods
Methods inherited from <basecomponent>
acceptValue, doEnterDown, doEnterUp, doSpaceDown, doSpaceUp, presentValue, setStyle, setTint, updateDefault
Methods inherited from <view>
bringToFront, containsPt, getAttributeRelative, getBounds, getColor, getColorTransform, getCurrentTime, getDepthList, getDisplayObject, getID3, getMouse, getNextSelection, getPan, getPrevSelection, getProxyURL, getTotalTime, getVolume, init, isBehind, isInFrontOf, isMouseOver, measureHeight, measureWidth, play, proxyurl, searchSubviews, seek, sendAAEvent, sendBehind, sendInFrontOf, sendToBack, setAccessible, setAttributeRelative, setColor, setColorTransform, setPan, setProxyPolicy, setSource, setVolume, shouldYieldFocus, stop, unload, updateResourceSize
Methods inherited from <node>
animate, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setOption, setSelected, updateData
Events
| Name | Description |
|---|---|
onclick
|
This event is sent when button the clicked. |
onresourceviewcount
|
This event is sent when the resourceviewcount changes. |
Events inherited from <view>
onaddsubview, onbackgroundrepeat, onblur, onclick, onclickable, onclip, oncontext, oncornerradius, ondblclick, onerror, onfocus, onframe, onframesloadratio, ongesture, onheight, onkeydown, onkeyup, onlastframe, onload, onloadratio, onmousedown, onmousedragin, onmousedragout, onmouseout, onmouseover, onmousetrackout, onmousetrackover, onmousetrackup, onmouseup, onmouseupoutside, onopacity, onplay, onplaying, onremovesubview, onshadowangle, onshadowblurradius, onshadowcolor, onshadowdistance, onstop, ontimeout, ontouch, onvisible, onwidth, onx, ony