flash/flex 之 自定义MXML组件

1.

新建 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="400" height="300">     <fx:Script>         <![CDATA[                        [Bindable]             private var textstr:String = "字符串按钮";             public function set BTNtext(par_str:String):void             {                 mystr = par_str;             }             public function get BTNtext():String             {                 return mystr;             }         ]]>     </fx:Script>     <s:layout>         <s:BasicLayout/>     </s:layout>     <fx:Declarations>         <!-- 将非可视元素（例如服务、值对象）放在此处 -->         <fx:String id="mystr">这是通过属性定义的按钮标题</fx:String>     </fx:Declarations>     <s:Button x="10" y="10" label="{mystr}"/>     <s:Button x="40" y="40" label="{textstr}"/> </s:Group>

2.

组件建好之后就会在开发环境

右下角的组件列表中显示出来

如图所示

image

可以把此组件拖动到主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:Modules="Modules.*"                 xmlns:Component="Component.*">     <fx:Script>         <![CDATA[         ]]>     </fx:Script>     <fx:Declarations>         <!-- 将非可视元素（例如服务、值对象）放在此处 -->     </fx:Declarations>     <Component:componentMXML x="93" y="77" BTNtext="测试一下按钮文本">     </Component:componentMXML> </s:Application>

3.

运行程序

结果如下

image