flex自定义组件（mxml文件）

悠悠 2022-06-01 11:13 181阅读 0赞

本来是每天写一点的，上次到现在差6篇，给自己提点醒，免得又忘了。今天本来是想看看TabNavigator中各个选项卡是一起初始化还是点开谁就初始化谁的，却莫名奇妙的看了一下自定义组件。关于选项卡的问题和代码都附在最后了，下面开始吧。

需要一个主页main.mxml，一个自定义组件mxmlModule.mxml

1.制作自定义组件

将要自定义组件的样式设置成自己想要的样子，这里我就画了个Label。

![1346178956_4395.jpg][]

效果如图：

![1346179029_3958.jpg][]

2.自定义属性

给自定义组件添加自定义的属性，这里我把自定义属性赋值给了Label的text属性，也就是说当我设置自定义属性时也就是在设置Label的text属性了。

![1346179398_2620.jpg][]

3.自定义事件

我们也可以给自定义组件添加事件，事件可以是本来就有的，也可以是自己写的，自定义事件在我的flex父子页面交互（触发事件）这篇文章里有介绍。

![1346179967_8842.jpg][]

事件定义好，但需要在什么时候派发是需要我们来写了。我这里有两个事件，myFunction事件是在自定义组件创建好的时候触发，myEvent是在单击Label时触发

![1346180202_9677.jpg][]

初始化自定义组件完成时派发

![1346180300_5996.jpg][]

单击Label时派发

![1346180392_6467.jpg][]

4.在主页引入自定义组件

因为我是将主页和自定义组件是放在同级目录下的，所以直接使用\*将自定义组件引入，其中的mm就是我们要使用组件时的前缀了。

![1346179610_3644.jpg][]

5.使用自定义组件

这里直接将自定义组件使用标签形式创建出来，可以看到我在A选项卡中定义了一个自定义组件，在B选项卡中定义了一个自定义组件，

![1346180782_2388.jpg][]

触发事件后所执行的方法定义

![1346180958_7597.jpg][]

6.效果图

![1346181124_3280.jpg][]

刚进入主页，因为创建第一个自定义组件完成，触发了事件，执行相应方法

![1346181173_7169.jpg][]

可以看到Label中是有值的，这是因为我们设置了自定义属性了而那个自定义属性又是设置Label的text属性的

![1346181230_8030.jpg][]

单击Label触发事件，执行相应方法

![1346181276_6990.jpg][]

点击B选项卡，可以发现这时候才触发第二个自定义组件创建完成的事件，这是否说明了TabNavigator的各个选项卡是分开创建的。

![1346181348_4178.jpg][]

B选项卡中自定义组件的单击事件没有设置相应的执行方法所以单击没反应

附上代码

main.mxml

<?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    			   xmlns:s="library://ns.adobe.com/flex/spark" 
    			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
    			   xmlns:mm = "*"
    			   >
    	
    	<fx:Script>
    		<![CDATA[
    			import mx.controls.Alert;
    			internal function doMyEvent(event:Event):void{
    				Alert.show("我触发事件了");
    			}
    			public function doMyFunction(mark:String):void{
    				Alert.show(mark);
    			}
    		]]>
    	</fx:Script>
    	
    	<s:VGroup horizontalAlign="center" verticalAlign="middle" width="80%" height="200">
    		<s:Button label="弹出选项卡页"/>
    		<mx:TabNavigator  width="100%" height="100%">
    			<s:NavigatorContent width="100%" height="100%" label="A选项卡">
    				<s:HGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
    					<mm:mxmlModule myAttribute="A选项卡，点我触发事件"  myEvent="doMyEvent(event)" myFunction="doMyFunction('我是A选项卡')"/>
    				</s:HGroup>
    			</s:NavigatorContent>
    			<s:NavigatorContent width="100%" height="100%" label="B选项卡">
    				<mm:mxmlModule myAttribute="B选项卡,单击事件没有相应的执行函数，所以点我没反应的" myFunction="doMyFunction('我是B选项卡')"/>
    			</s:NavigatorContent>
    		</mx:TabNavigator> 
    	</s:VGroup>
    </s:Application>

mxmlModule.mxml

<?xml version="1.0" encoding="utf-8"?>
    <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
    		 xmlns:s="library://ns.adobe.com/flex/spark" 
    		 xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="100"
    		 creationComplete="init()"
    		 >
    	
    	<fx:Declarations>
    		
    	</fx:Declarations>
    	
    	<fx:Script>
    		<![CDATA[
    			[Bindable]
    			private var _myAttribute:String;//绑定自定义组件
    			
    			//属性的set，get方法，在页面上引用自定义组件的属性的时候其实是引用了这个set方法的方法名
    			public function set myAttribute(_myAttribute:String):void{
    				this._myAttribute = _myAttribute;
    			}
    			
    			public function get myAttribute():String{
    				return _myAttribute;
    			}
    			
    			//点击label派发事件
    			internal function onClick():void{
    				this.dispatchEvent(new Event("myEvent"));
    			}
    			//组件创建完成时派发事件
    			internal function init():void{
    				this.dispatchEvent(new Event("myFunction"));
    			}
    			
    		]]>
    	</fx:Script>
    	
    	
    	<fx:Metadata>
    		[Event(name="myFunction",type="flash.events.Event")]
    		[Event(name = "myEvent",type ="flash.events.Event")]
    	</fx:Metadata>
    	
    	<s:VGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
    		<s:Label text="{_myAttribute}" click="onClick()" />
    	</s:VGroup>
    </s:Group>

[1346178956_4395.jpg]: https://img-my.csdn.net/uploads/201208/29/1346178956_4395.jpg
[1346179029_3958.jpg]: https://img-my.csdn.net/uploads/201208/29/1346179029_3958.jpg
[1346179398_2620.jpg]: https://img-my.csdn.net/uploads/201208/29/1346179398_2620.jpg
[1346179967_8842.jpg]: https://img-my.csdn.net/uploads/201208/29/1346179967_8842.jpg
[1346180202_9677.jpg]: https://img-my.csdn.net/uploads/201208/29/1346180202_9677.jpg
[1346180300_5996.jpg]: https://img-my.csdn.net/uploads/201208/29/1346180300_5996.jpg
[1346180392_6467.jpg]: https://img-my.csdn.net/uploads/201208/29/1346180392_6467.jpg
[1346179610_3644.jpg]: https://img-my.csdn.net/uploads/201208/29/1346179610_3644.jpg
[1346180782_2388.jpg]: https://img-my.csdn.net/uploads/201208/29/1346180782_2388.jpg
[1346180958_7597.jpg]: https://img-my.csdn.net/uploads/201208/29/1346180958_7597.jpg
[1346181124_3280.jpg]: https://img-my.csdn.net/uploads/201208/29/1346181124_3280.jpg
[1346181173_7169.jpg]: https://img-my.csdn.net/uploads/201208/29/1346181173_7169.jpg
[1346181230_8030.jpg]: https://img-my.csdn.net/uploads/201208/29/1346181230_8030.jpg
[1346181276_6990.jpg]: https://img-my.csdn.net/uploads/201208/29/1346181276_6990.jpg
[1346181348_4178.jpg]: https://img-my.csdn.net/uploads/201208/29/1346181348_4178.jpg