this.destroy(); this.tpDestroyDel = new LzDelegate(this, 'handletpdestroy' , this.tabpane, 'ondestroy' ); this.setAttribute( 'selected' , true ); this.setAttribute( 'text' , t ); The base tab class. This class is to be used only in conjunction with basetabs and basetabapane classes. You can pass the name of this class in the 'tabclass' attribute of basetabpane, tabpane, basetabs, and tabs classes. Basetabs uses this class as its default 'tabclass'. tab tab one two three ]]>

See Also:

<basetabsbar>, <basetabs>, and <basetabpane>

super.init(); var sel = this.getSelection(); if (!sel) { if (subviews[0] != null) subviews[0].setAttribute('selected', true); } if (item == null) return; if (this._initcomplete) { this._selector.select(item); this.setAttribute("value", item ); relayerTabs(); item.updateDefault(); } else { this._initialselection = item; } // turn off doesenter when selected so that default buttons work this.setAttribute( 'doesenter', false ); A non-visual container for basetab components.

A basetabsbar is a non-visual container class that uses a default x-axis <simplelayout> to lay out its <basetab> children. basetabsbar is contained in a <basetabs> component.

<canvas height="75"> <include href="base"/> <class name="aquatab" extends="basetab" width="40" height="20" bgcolor="aqua"> <text>tab</text> </class> <class name="spacetabsbar" extends="basetabsbar" bgcolor="black" layout="class: simplelayout; axis: x; spacing: 4"> </class> <basetabs x="10" y="10" tabclass="aquatab" barclass="spacetabsbar"> <basetabpane> <text>one</text> </basetabpane> <basetabpane> <text>two</text> </basetabpane> <basetabpane> <text>three</text> </basetabpane> </basetabs> </canvas>

See Also:

<basetab>, and <basetabs>

v.parent = this.parent; return this; super.init(); _recalculateContentWidth(null); _recalculateContentHeight(null); this._contentWDel = new LzDelegate(this, "_recalculateContentWidth", this, "onwidth"); this._contentHDel = new LzDelegate(this, "_recalculateContentHeight", this, "onheight"); parent.parent._calculateContentWidth(this.width, parent.inset_left, parent.inset_right, parent.parent.bordersize); parent.parent._calculateContentHeight(this.height, parent.inset_top, parent.inset_bottom, parent.parent.bordersize); if (null != this.datapath) { this.datapath.setXPath(dp); } else { var data_args = { xpath : dp } if (this.visibility != "collapse") { data_args.datacontrolsvisibility = (this.visibility == "collapse"); } new lz.datapath ( this, data_args ); } 0) { myChildren = c.slice(0, _keepchildren); c.splice(0, _keepchildren); } // Intercept basetabpane initstage for its content. Note: createChildren // gets called before init. var istage = "late" if (this['initstage'] != null) { istage = this.initstage; } this.initstage = null; // NOTE [2008-06-20 ptw] This seems fraught with danger. // Components shouldn't be mucking at this level myChildren.push( { 'class': lz.basetabpanecontent, attrs: { name: 'content', parent: this, initstage: istage }, children: c } ); super.createChildren( myChildren ); ]]> this.selected = s; if (this.selected != this.tab.selected) this.tab.setAttribute("selected", s); A non-visual tabpane for the basetabs component.

A basetabpane is the non-visual container for content in basetabs. Each basetabpane has a corresponding basetab created. Normally, you won't want to extend this class. If you want a consistent background across all basetabpanes, you can add a background to your basetabscontent component. If you want a different background for each basetabpane, you could do that in the content placed inside of your basetabpane.

Be aware that the content of basetabpane is initstage="late". You can override this by declaring an initstage on a specific subclass or instance of basetabpane.

<basetabpane initstage="normal">  </basetabpane> The parent of a basetabpane is basetabs, but its immediate parent is the default placement of the basetabscontent. <canvas height="140" debug="true"> <debug x="150" y="10"/> <include href="base"/> <class name="aquatab" extends="basetab" width="40" height="20" bgcolor="aqua"> <text>tab</text> </class> <class name="borderedtabscontent" extends="basetabscontent" bgcolor="black"> <attribute name="defaultplacement" value="borderedcontent" type="string"/> <view name="borderedcontent" x="${parent.parent.bordersize}" y="${parent.parent.bordersize}" width="${parent.width-(2*parent.parent.bordersize)}" height="${parent.height-(2*parent.parent.bordersize)}" clip="true" bgcolor="red"/> </class> <basetabs x="10" y="10" bordersize="3" tabclass="aquatab" contentclass="borderedtabscontent"> <basetabpane name="one"> <handler name="onvisible" args="isvisible"> if (isvisible) { Debug.debug("parent: %w", parent); Debug.debug("immediate parent: %w", immediateparent); } </handler> <text>one</text> </basetabpane> <basetabpane> <text>two</text> </basetabpane> <basetabpane> <text height="${parent.height}" width="${parent.width}" bgcolor="green"> three </text> </basetabpane> </basetabs> </canvas>

See Also:

<basetab>, <basetabs>, and <basetabscontent>

The non-visual container for basetabpanes.

basetabscontent is the non-visual container (and immediate parent) of basetabpanes. Extend basetabscontent to give the content area of your basetabs a look, e.g., adding borders to your content. basetabscontent is a child of the basetabs component.

basetabscontent should be in basetabs. If width and height are not set, basetabscontent will stretch to the largest content item. You can pass the name of this class in the contentclass attribute of basetabs and tabs. basetabs uses this class as its default contentclass

<canvas height="75"> <include href="base"/> <class name="aquatab" extends="basetab" width="40" height="20" bgcolor="aqua"> <text>tab</text> </class> <class name="borderedtabscontent" extends="basetabscontent" bgcolor="black"> <attribute name="defaultplacement" value="borderedcontent" type="string" /> <view name="borderedcontent" x="${parent.parent.bordersize}" y="${parent.parent.bordersize}" width="${parent.width-(2*parent.parent.bordersize)}" height="${parent.height-(2*parent.parent.bordersize)}" clip="true" bgcolor="red"/> </class> <basetabs x="10" y="10" bordersize="3" tabclass="aquatab" contentclass="borderedtabscontent"> <basetabpane> <text>one</text> </basetabpane> <basetabpane> <text>two</text> </basetabpane> <basetabpane> <text>three</text> </basetabpane> </basetabs> </canvas>

See Also:

<basetabpane> and <basetabs>

// Create tabsbar if (this['barclass'] && lz[this.barclass]) { this.bar = new lz[this.barclass](this, {}, null, true); } else if ($debug) { Debug.error('%s.%s invalid: %s', this, 'barclass', this['barclass']); } if (this.bar == null) { this.bar = new lz.basetabsbar(this, {}, null, true); if ($debug) { Debug.warn('%s.barclass defaulted to %s', this, this.bar.constructor.tagname); } } // Create tabscontent, if it hasn't been already created if (this['contentclass'] && lz[this.contentclass]) { this.content = new lz[this.contentclass](this, {}, null, true); } else if ($debug) { Debug.error('%s.%s invalid: %s', this, 'contentclass', this['contentclass']); } if (this.content == null) { this.content = new lz.basetabscontent(this, {}, null, true); if ($debug) { Debug.warn('%s.contentclass defaulted to %s', this, this.content.constructor.tagname); } } this._maxTabpaneContentWidth) { setAttribute("_maxTabpaneContentWidth", checkW); } } else if (this.width != _contentWidth) { setAttribute("_maxTabpaneContentWidth", this.width); setAttribute("_contentWidth", this.width); } ]]> this._contentHeight) { setAttribute("_contentHeight", checkH); } } else { var myh = this.height - this.bar.height; if (myh != this._contentHeight) { setAttribute("_contentHeight", myh); } } ]]> A non-visual container for basetabpanes.

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.

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

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

<basetab>, <basetabsbar>, <basetabpane>, and <basetabscontent>