The basetabs component conceptually houses a
row of tabs that control the visibility of a stack of
basetabpanes. When a
basetabpane is added to the
basetab component, a corresponding
basetab is created for that
basetabpane.
Due to the non-visual nature of basetab, a
visible subclass of basetab is used in the next
example to demonstrate the correlation between
basetabpane and basetab
items.
Example 39. introduction to basetabs
<canvas height="75">
<include href="base"/>
<class name="aquatab" extends="basetab" width="40" height="20" bgcolor="aqua">
<text>tab</text>
</class>
<basetabs x="10" y="10" tabclass="aquatab">
<basetabpane>
<text>one</text>
</basetabpane>
<basetabpane>
<text>two</text>
</basetabpane>
<basetabpane>
<text>three</text>
</basetabpane>
</basetabs>
</canvas>
As can be seen, three basetab items have
been created for the three <basetabpane>s
declared.
Though the <basetabpane> element is the
child of a <basetab> element, in the runtime view
hierarchy instances of basetabs are the
immediate parents of a basetabsbar (where
basetab components are placed and laid out) and
basetabscontent (where the
basetabpane components are placed and laid
out).
The following diagram illustrates the correlation between
basetabs, basetabsbar
(the container for basetab items), and
basetabscontent (the container for
basetabpanes).
You can change the look and feel of your basetabs by using a
different basetab,
basetabsbar, and/or
basetabscontent.
Example 40. modifying the basetabs look
<canvas height="75">
<include href="base"/>
<class name="mytab" extends="basetab" width="40" height="20" bgcolor="lime">
<text>mytab</text>
</class>
<class name="mytabsbar" extends="basetabsbar" bgcolor="navy" layout="class: simplelayout; axis: x; spacing: 5"/>
<class name="mytabscontent" extends="basetabscontent" bgcolor="silver"/>
<basetabs x="10" y="10" tabclass="mytab" barclass="mytabsbar" contentclass="mytabscontent">
<basetabpane>
<text>one</text>
</basetabpane>
<basetabpane>
<text>two</text>
</basetabpane>
<basetabpane>
<text>three</text>
</basetabpane>
</basetabs>
</canvas>
See Also:
The base tabs object. This is the outermost containing component within which there are a basetabsbar and the basetabscontent.| Name (CSS property) | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
bar
|
expression | any | null | readonly |
| This is a reference to its basetabsbar. | ||||
barclass
|
string | String | basetabsbar | initialize-only |
| Class to instantiate to contain tab items. | ||||
bordersize
|
number | Number | 0 | read/write |
| The size of the border surrounding a basetabpane. | ||||
content
|
expression | any | null | readonly |
| This is a reference to basetab's content area. This is where all basetabpanes in tabs are placed. | ||||
contentclass
|
string | String | basetabscontent | initialize-only |
| Class to instantiate to contain basetabpanes. | ||||
inset_bottom
|
number | Number | 8 | read/write |
| The bottom inset for content appearing within a basetabpane. | ||||
inset_left
|
number | Number | 8 | read/write |
| The left inset for content appearing within a basetabpane. | ||||
inset_right
|
number | Number | 8 | read/write |
| The right inset for content appearing within a basetabpane. | ||||
inset_top
|
number | Number | 8 | read/write |
| The top inset for content appearing within a basetabpane. | ||||
layout
|
expression | any | class: simplelayout; axis: y; spacing: 0 | read/write |
| Basetab's layout for its basetabsbar and basetabscontent area. | ||||
tabclass
|
string | String | basetab | initialize-only |
| Class to instantiate tab items for basetabsbar. Can be overridden by basetabpane. | ||||
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
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