flash/flex 之 自定义MXML组件

简介: 1. 新建 mxml组件 代码如下                         [Bindable]            private var textstr:String = "字符串按钮";            public function set BTNtext(par_...

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

目录
相关文章
|
开发者 容器
ArkUI框架,Flex布局,基础组件及封装,父子组件的双向绑定
Flex组件用于创建弹性布局,开发者可以通过Flex的接口创建容器组件,进而对容器内的其他元素进行弹性布局,例如:使三个元素在容器内水平居中,垂直等间隔分散。 例如:如下的布局代码分别表示:(垂直排列,水平居中,垂直居中)
443 0
ArkUI框架,Flex布局,基础组件及封装,父子组件的双向绑定
|
24天前
|
数据可视化 前端开发 搜索推荐
FLEX组件可视化设计器CSS3代码生成器
FLEX组件可视化设计器CSS3代码生成器
19 4
|
4月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
6月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
189 5
|
11月前
|
容器
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
79 0
好客租房116-flex布局组件导航菜单
好客租房116-flex布局组件导航菜单
112 0
好客租房116-flex布局组件导航菜单
好客租房117-flex布局组件导航菜单优化
好客租房117-flex布局组件导航菜单优化
108 0
好客租房117-flex布局组件导航菜单优化