3.17.在TabNavigator内创建、启用和禁用TAB组件(TabControls)
3.17.1 问题
我们需要从TabNavigator 动态添加和移除tab 项,或者偶尔禁用某些tab 项。
3.17.2 解决办法
使用TabNavigator 的addChild 和removeChild 方法添加或者移除子组件,同时设置子组件的enabled 属性来启用或者禁用TabNavigator 里的某个tab 项。
3.17.3 讨论
所有添加到TabNavigator 中的子组件,都会在TabNavigator 顶部的导航条添加一个新tab项。同样移除子组件的时候也会自动移除对应的tab 项。通过绑定TabNavigator 的dataProvider 属性也能行得通。
dataProvider 的所有改变都会引起TabNavigator 更新及其顶部导航条子组件的增加或者减少。这里,组件内创建了访问方法以提供对TabNavigator控件的访问:
要使用该控件,传入任意一个Container 对象的实例,此时,Canvas,对组件来说,通过使用该组件的id 属性的引用来调用方法名。随着Container 的传入,其label 属性也传入到TabNavigator 内,这个label 属性将用来设置即将添加的新tab 项的标题。其中,例子中的Button 控件,用来添加、移除和禁用对应的控件。
我们需要从TabNavigator 动态添加和移除tab 项,或者偶尔禁用某些tab 项。
3.17.2 解决办法
使用TabNavigator 的addChild 和removeChild 方法添加或者移除子组件,同时设置子组件的enabled 属性来启用或者禁用TabNavigator 里的某个tab 项。
3.17.3 讨论
所有添加到TabNavigator 中的子组件,都会在TabNavigator 顶部的导航条添加一个新tab项。同样移除子组件的时候也会自动移除对应的tab 项。通过绑定TabNavigator 的dataProvider 属性也能行得通。
dataProvider 的所有改变都会引起TabNavigator 更新及其顶部导航条子组件的增加或者减少。这里,组件内创建了访问方法以提供对TabNavigator控件的访问:
+展开
-XML
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="300">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
public function
addChildToNavigator(value:UIComponent):void
{
navigator.addChild(value);
}
public function removeNavigatorChild(value:int =
0):void
{
if(value == 0){
navigator.removeChildAt(navigator.numChildren-1);
}eelse
{
navigator.removeChildAt(value);
}
}
public function disableTab(value:int = 0):void{
if(value == 0){
(navigator.getChildAt(navigator.numChildren - 1)
as UIComponent).enabled = false;
}e
else
{
(navigator.getChildAt(value) as
UIComponent).enabled = false;
}
}
public function get tabNumChildren():Number{
return navigator.numChildren;
}
]]>
</mx:Script>
<mx:TabNavigator id="navigator">
</mx:TabNavigator>
</mx:Canvas>
height="300">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
public function
addChildToNavigator(value:UIComponent):void
{
navigator.addChild(value);
}
public function removeNavigatorChild(value:int =
0):void
{
if(value == 0){
navigator.removeChildAt(navigator.numChildren-1);
}eelse
{
navigator.removeChildAt(value);
}
}
public function disableTab(value:int = 0):void{
if(value == 0){
(navigator.getChildAt(navigator.numChildren - 1)
as UIComponent).enabled = false;
}e
else
{
(navigator.getChildAt(value) as
UIComponent).enabled = false;
}
}
public function get tabNumChildren():Number{
return navigator.numChildren;
}
]]>
</mx:Script>
<mx:TabNavigator id="navigator">
</mx:TabNavigator>
</mx:Canvas>
要使用该控件,传入任意一个Container 对象的实例,此时,Canvas,对组件来说,通过使用该组件的id 属性的引用来调用方法名。随着Container 的传入,其label 属性也传入到TabNavigator 内,这个label 属性将用来设置即将添加的新tab 项的标题。其中,例子中的Button 控件,用来添加、移除和禁用对应的控件。
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:cookbook="oreilly.cookbook.*">
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.containers.Canvas;
private function addCanvas():void
{
var canvas:Canvas = new Canvas();
cavas.title = "Tab "+
this.tabNavigator.tabNumChildren.toString();
var label:Label = new Label();
label.text = "Hello Label "+
this.tabNavigator.tabNumChildren.toString();
canvas.addChild(label);
canvas.minHeight = 200;
canvas.minWidth = 200;
this.tabNavigator.addChildToNavigator(canvas);
}
]]>
</mx:Script>
<cookbook:TabNavigatorDemo id="tabNavigator"/>
<mx:HBox y="300">
<mx:Button click="addCanvas()" label="add child"/>
<mx:Button click="tabNavigator.removeNavigatorChild()"
y="300" label="remove child"/>
<mx:Button click="tabNavigator.disableTab()" y="300"
label="disable child"/>
</mx:HBox>
</mx:Application>
layout="absolute" xmlns:cookbook="oreilly.cookbook.*">
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.containers.Canvas;
private function addCanvas():void
{
var canvas:Canvas = new Canvas();
cavas.title = "Tab "+
this.tabNavigator.tabNumChildren.toString();
var label:Label = new Label();
label.text = "Hello Label "+
this.tabNavigator.tabNumChildren.toString();
canvas.addChild(label);
canvas.minHeight = 200;
canvas.minWidth = 200;
this.tabNavigator.addChildToNavigator(canvas);
}
]]>
</mx:Script>
<cookbook:TabNavigatorDemo id="tabNavigator"/>
<mx:HBox y="300">
<mx:Button click="addCanvas()" label="add child"/>
<mx:Button click="tabNavigator.removeNavigatorChild()"
y="300" label="remove child"/>
<mx:Button click="tabNavigator.disableTab()" y="300"
label="disable child"/>
</mx:HBox>
</mx:Application>
加支付宝好友偷能量挖...