flex自定义组件

最新推荐文章于 2021-03-13 02:11:59 发布
最新推荐文章于 2021-03-13 02:11:59 发布
阅读量1k 收藏 2
点赞数
分类专栏： Flex技术 文章标签： flex button layout encoding application flexbuilder

前期准备：
点击File菜单 -> New -> MXML Component，然后弹出一个对话框。
在对话框中输入组件名，选择此组件继承的类型，如：Canvas，DataGrid，ComboBox …… 等。
然后选择组件的大小，点击Finish即可。
 
关于组件继承的类型，假设Based on Canvas，那么组件的根元素即为mx:Canvas，此元素的含义为空白面板，那么设计人员可以任意在这个面板容器内放置任何东西，就像开发主程序一样。那么此组件类似一个容器。
如果Based on ComboBox，那么根元素即为mx:ComboBox，此元素的含义为下拉框，那么设计人员可以在下拉框的的内部任意定制内容或代码，那么此组件定制了一个下拉框。
例，登录组件：
 
            制作组件：
                        首先按照上面的步骤新建一个组件，名为CLogin.mxml，Based on TitleWindow。TitleWindow元素代表有标题的窗口。
                        然后切换到Design视图，选择这个TitleWindow窗口，在属性框里编辑标题（Title属性），输入“用户登录”。
                        此时的代码大体如下：
 
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">
</mx:TitleWindow>
 
然后我们加入Form控件并填入内容（FormItem），然后添加按钮以便提交，此时代码如下：
 
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">
                                                <mx:Form width="248" height="100" label="Button" x="10" y="10">
                              <mx:FormItem label="用户名" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12">
                                    <mx:TextInput id="username" width="158" height="28" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">15" textAlign="left"/>
                              </mx:FormItem>
      
                              <mx:FormItem label="密码" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12">
<mx:TextInput id="password" width="159" height="30" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">15" textAlign="left" 
displayAsPassword="true"/>
                              </mx:FormItem>
                  </mx:Form>
<mx:Button id="loginbtn" label="登录" textAlign="center" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12" x="190" y="118"/>
                        </mx:TitleWindow>
 
                        上面的登录只是布局，没加入事件处理程序，但是这已经可以算是一个登录组件了（虽然只能看不能用，呵呵）
组件制作完毕，然后就可以使用他了
 
                        使用组件：
                                    
                        打开主程序，进入Design视图，查看左下角的组件浏览器。
                        你会发现在Custom下多出来一个CLogin来，把它拖入设计面板，哈，登录组件就显示在面板上了，就这么简单。
                        代码可能会如下：
                                        <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
    <mx:Script>
          <![CDATA[
                import mx.controls.Alert;
                private function btnClick() : void {
                      Alert.show("test","Test");
                }
          ]]>
    </mx:Script>
    <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
    <ns1:CLogin x="107" y="94" width="204" height="117">
    </ns1:CLogin>
</mx:Application>
                  
                  修改命名空间xmlns:ns1变成你想要的比如xmlns:widget，最后的代码：
                  
示例代码：Hello.mxml：
 
                  <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">
    <mx:Script>
          <![CDATA[
                import mx.controls.Alert;
                private function btnClick() : void {
                      Alert.show("test","Test");
                }
          ]]>
    </mx:Script>
    <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
    <widget:CLogin x="107" y="94" width="204" height="117">
    </widget:CLogin>
</mx:Application>
 
                                    好了，一切完成。
 
                        自定义组件的属性：
                                    
看到这里大家也都应该清楚地知道，大部分Flex控件都有事件属性，比如click，move等，自定义组件会继承他们Based on 的元素的属性和事件，那么我们的CLogin组件（也可以称之为自定义元素）就会继承mx:TitleWindow的全部可以继承的属性（属性、事件、特效、样式等等），那么它的特有属性如何来做呢？下面我们来为其加上其特有属性。
 
加入自定义属性：
 
示例代码CLogin.mxml：
 
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">
                        <mx:Script>
                              <![CDATA[
                                    [Inspectable]
                                    public var status : String;
                              ]]>
      </mx:Script>
                                                <mx:Form width="248" height="100" label="Button" x="10" y="10">
                              <mx:FormItem label="用户名" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12">
                                    <mx:TextInput id="username" width="158" height="28" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">15" textAlign="left"/>
                              </mx:FormItem>
      
                              <mx:FormItem label="密码" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12">
<mx:TextInput id="password" width="159" height="30" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">15" textAlign="left" 
displayAsPassword="true"/>
                              </mx:FormItem>
                  </mx:Form>
<mx:Button id="loginbtn" label="登录" textAlign="center" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12" x="190" y="118"/>
                        </mx:TitleWindow>
 
首先我们加入一个属性status，修饰这个属性的元数据标签[Inspectable]的意思是，叫编译器和Flex Builder可以看到这个属性，并自动提示：
 
                        
                        加入自定义事件：
 
首先用元数据标签给CLogin添加自定义事件：
 
示例代码CLogin.mxml：
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">
<mx:Metadata>
                              [Event("btnClicked")]
      </mx:Metadata>
                        <mx:Script>
                              <![CDATA[
                                    [Inspectable]
                                    public var status : String;
                              ]]>
      </mx:Script>
                                                <mx:Form width="248" height="100" label="Button" x="10" y="10">
                              <mx:FormItem label="用户名" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12">
                                    <mx:TextInput id="username" width="158" height="28" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">15" textAlign="left"/>
                              </mx:FormItem>
      
                              <mx:FormItem label="密码" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12">
<mx:TextInput id="password" width="159" height="30" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">15" textAlign="left" 
displayAsPassword="true"/>
                              </mx:FormItem>
                  </mx:Form>
<mx:Button id="loginbtn" label="登录" textAlign="center" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12" x="190" y="118"/>
                        </mx:TitleWindow>
 
前面提到，MXML相当于一个类，那么mx:Metadata标签就相当于给这个CLogin类加上元数据标签。
标签为事件标签，内容为[Event("btnClicked")]，意思是自定义事件，名称为btnClicked。
 
然后我们给CLogin的登录按钮加入click事件：
 
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">
<mx:Metadata>
                              [Event("btnClicked")]
      </mx:Metadata>
                        <mx:Script>
                              <![CDATA[
                                    [Inspectable]
                                    public var status : String;
                                    private function login (): void {
                                          dispatchEvent(new Event("btnClicked"));
                                    }
                              ]]>
      </mx:Script>
                                                <mx:Form width="248" height="100" label="Button" x="10" y="10">
                              <mx:FormItem label="用户名" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12">
                                    <mx:TextInput id="username" width="158" height="28" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">15" textAlign="left"/>
                              </mx:FormItem>
      
                              <mx:FormItem label="密码" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12">
<mx:TextInput id="password" width="159" height="30" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">15" textAlign="left" 
displayAsPassword="true"/>
                              </mx:FormItem>
                  </mx:Form>
<mx:Button id="loginbtn" click="login()" label="登录" textAlign="center" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12" x="190" y="118"/>
                        </mx:TitleWindow>
 
在按钮被单击(click)的时候，我们设定执行了login方法，login方法执行命令dispatchEvent(new Event("btnClicked")) 意思是dispatchEvent发送事件通知，通知组件你自定义的btnClicked事件已经触发了。
到这里，我们通过自定义组件CLogin的登录按钮来触发btnClicked事件已经完成。
 
使用自定义事件：
 
这样，我们在主程序里就可以利用这个事件了：
 
示例代码Hello.mxml：
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">
    <mx:Script>
          <![CDATA[
                import mx.controls.Alert;
                private function btnClick() : void {
                      Alert.show("test","Test");
                }
 
                private function btnClickHandler(event: Event) : void {
                      Alert.show("Event btnClicked Called");
                }
          ]]>
    </mx:Script>
    <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
    <widget:CLogin btnClicked="btnClickHandler(event)" x="107" y="94" width="204" height="117">
    </widget:CLogin>
</mx:Application>
 
这样，一但CLogin组件里的登录按钮被单击就会触发btnClicked事件，从而执行主程序的btnClickHandler方法，弹出提示框：Event btnClicked Called
 
加入自定义效果：
 
效果是与事件不可分割的，比如之前的例子，showEffect是控件的显示来出来，也就是说visible变为true会触发showEffect所设定效果。那么自定义效果也是一样，与事件紧密联系在一起，比如btnClicked事件发生的时候要产生某种自定义效果，则在CLogin.mxml中添加效果标签：
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">
<mx:Metadata>
            [Event("btnClicked")]
[Effect(name="btnClickedEffect", event="btnClicked")]
      </mx:Metadata>
                        <mx:Script>
                              <![CDATA[
                                    [Inspectable]
                                    public var status : String;
                                    private function login (): void {
                                          dispatchEvent(new Event("btnClicked"));
                                    }
                              ]]>
      </mx:Script>
                                                <mx:Form width="248" height="100" label="Button" x="10" y="10">
                              <mx:FormItem label="用户名" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12">
                                    <mx:TextInput id="username" width="158" height="28" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">15" textAlign="left"/>
                              </mx:FormItem>
      
                              <mx:FormItem label="密码" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12">
<mx:TextInput id="password" width="159" height="30" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">15" textAlign="left" 
displayAsPassword="true"/>
                              </mx:FormItem>
                  </mx:Form>
<mx:Button id="loginbtn" click="login()" label="登录" textAlign="center" fFONT-SIZE: 10pt; COLOR: #990000; FONT-FAMILY: 'courier new'">12" x="190" y="118"/>
                        </mx:TitleWindow>
 
使用自定义效果：
                        
示例代码Hello.mxml：
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">
    <mx:Script>
          <![CDATA[
                import mx.controls.Alert;
                private function btnClick() : void {
                      Alert.show("test","Test");
                }
 
                private function btnClickHandler(event: Event) : void {
                      Alert.show("Event btnClicked Called");
                }
          ]]>
    </mx:Script>
    <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>
    <widget:CLogin btnClickedEffect="myEffect" btnClicked="btnClickHandler(event)" x="107" y="94" width="204" height="117">
    </widget:CLogin>
 
    <mx:Blur id="myEffect" blurXFrom="100" blurYFrom="100" blurXTo="0" blurYTo="0"/>
</mx:Application>
 
加入自定义样式：
 
package
{
import mx.core.UIComponent;
[Style(name="borderColor",type="uint",format="Color",inherit="no")]
[Style(name="fillColor",type="uint",format="Color",inherit="no")]
public class CustomCircle extends UIComponent {
public function CustomCircle(){
super();
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
graphics.lineStyle(1, getStyle(“borderColor"), 1.0);
graphics.beginFill(getStyle(“fillColor"),1.0);
graphics.drawEllipse(0,0,100,100);
}
}
}
 
之前举的例子都是MXML的，那么这次就换为AS的例子，事实上都是相等的，如果是MXML的话则在mx:Metadata m内写入元数据标记[Style(name="fillColor",type="uint",format="Color",inherit="no")]等。
 
使用自定义样式：
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="*"
backgroundColor="#FFFFFF">
<mx:Panel title="Style Sample" width="200" height="200"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal">
<comps:CustomCircle borderColor="#000000" fillColor="#FF0000" />
</mx:Panel>
</mx:Application>

Jason-Jin
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
flex 自定义组件
11-07
flex 自定义组件，UI，flex 自定义组件。
Flex 实践——自定义组件及调用
meteorWJ's Home—Floating clound
03-27 7172
     这一次的Flex 实践将要实现以下功能：     1、自定义一个简单的 Flex 组件     2、创建一个Index. mxml 来调用该组件           1）用 as 调用组件           2）用 mx 标签调用组件     首先创建新文件夹（user）来保存所有自定义的组件，这里我将新创建的组件命名为：UserView.mxml     在主目录下创建 Mxml A
flex自定义组件（mxml文件）
flygoa的专栏
08-29 2732
本来是每天写一点的，上次到现在差6篇，给自己提点醒，免得又忘了。今天本来是想看看TabNavigator中各个选项卡是一起初始化还是点开谁就初始化谁的，却莫名奇妙的看了一下自定义组件。关于选项卡的问题和代码都附在最后了，下面开始吧。 需要一个主页main.mxml，一个自定义组件mxmlModule.mxml 1.制作自定义组件 将要自定义组件的样式设置成自己想要的样子，这里我就画了个Lab
实现一个自定义组件
parine26的专栏
05-25 1487
实现一个自定义组件如果要创建一个自定义组件，你需要重写UIComponent类的某些方法，最少需要重写如下方法：构造函数, createChildren(), commitProperties(), measure(), layoutChrome(), updateDisplayList() 。基础语句结构如下：package myComponents{public c
自定义Flex组件
天才小熊猫的博客
10-10 602
自定义Flex组件 组件（Components）和控件（Controls）的关系？ “组件”指任何可复用的、可以与其它对象交互的对象，如 Flex 中的validators、formatters、effects、managers、controls、containers 等等； “控件”则指能够在界面上看到的组件，也称为可视化组件，如Flex中的controls、container
Flex自定义组件与自定义事件
hechuanshan的专栏
05-29 483
1、自定义组件 2、自定义事件 3、结合使用 http://blog.csdn.net/dengxingbo/article/details/5005154
flex自定义组件和自定义事件
u013258319的专栏
12-24 617
看了一个帖子，自己写了一下。主要讲了自定义组件跟自定义事件。 先看一下自定义事件。就跟在殿堂之路中写道一样。代码如生活，理解代码就如理解生活一样一样的。 什么是事件，事件是怎么运作的呢？我是这样理解的： 比如去了一家餐馆就餐，首先要制定服务员：我要求穿白裙子的那个美女为我服务（端茶倒水，上菜）；所以我落座后，说的话，都是穿白裙子妹妹，暂且叫，白美美。 这里指定服务员就比如在程序里注册事
flex自定义组件与自定义事件
Double_XX的专栏
09-25 1259
今天研究了一下flex自定义控件与事件，成功！过程详细如下： 1，首先新建一个mxml组件文件，各个参数自己填写。 <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/f
flex自定义组件的编写步骤
jinxiumeihappy的专栏
12-20 807
1，重写一个组件系统依次调用Constructor（构造方法）-->createChildren()-->commitProperties()==>measure()==>updateDisplayList() ;     a,Constructor构造方法，初始化属性，默认值 在这个方法中使用最好。     b,createChildren() 创建子对象，在组件中添加子对象。是使用a
Flex自定义组件问题
thewebcode
03-16 67
如何在脚本中引用还没有实例化的自定义组件？ 自定一个组件是只创建了一个实例还是创建了一个类？ 如果是创建了一个类，那么这个类在那个包里？...
flex 如何使用com.maclema.mysql,Flex自定义组件与自定义事件
weixin_39608394的博客
03-13 64
1、自定义组件2、自定义事件3、结合使用一、自定义组件(使用的是Flex组件，ActionScript组件相对麻烦点，可视化差点)该组件由一个TextArea和两个Button组成，如图：代码：MyComponent.mxml/*** 1. 编译期间执行* 2. 自定义组件一般可以通过dispatchEvent委派parent来处理某个事件，这就需要在parent中设置一个addEventList...
各种Flex自定义组件
10-14
FLex自定义写的控件，有时间，datagrid，tree，combox等，以及常用的处理字符串，弹出窗口
flex自定义组件事件DEMO
11-18
flex自定义组件事件DEMO，一个简单的flex自定义组件的demo
flex自定义组件介绍
03-16
flex4.5自定义组件介绍，自定义组件前提条件
计算机专业毕业设计范例845篇jsp2118基于Web停车场管理系统的设计与实现_Servlet_MySql演示录像.rar
05-24
博主给大家详细整理了计算机毕业设计最新项目,对项目有任何疑问(部署跟文档),都可以问博主哦~ 一、JavaWeb管理系统毕设项目【计算机毕设选题】计算机毕业设计选题，500个热门选题推荐,更多作品展示 计算机毕业设计|PHP毕业设计|JSP毕业程序设计|Android毕业设计|Python设计论文|微信小程序设计
Windows 10 平台 FFmpeg 开发环境搭建 博客资源
05-24
【FFmpeg】Windows 10 平台 FFmpeg 开发环境搭建 ④ ( FFmpeg 开发库内容说明 | 创建并配置 FFmpeg 项目 | 拷贝 DLL 动态库到 SysWOW64 目录 ) https://hanshuliang.blog.csdn.net/article/details/139172564 博客资源 一、FFmpeg 开发库 1、FFmpeg 开发库编译 2、FFmpeg 开发库内容说明 二、创建并配置 FFmpeg 项目 1、拷贝 dll 动态库到 C:\Windows\SysWOW64 目录 - 必须操作 特别关注 2、创建 Qt 项目 - C 语言程序 3、配置 FFmpeg 开发库 - C 语言项目 4、创建并配置 FFmpeg 开发库 - C++ 项目
基于 Spring Cloud 、Spring Boot、 OAuth2 的 RBAC 企业快速开发平台
最新发布
05-24
基于 Spring Cloud 、Spring Boot、 OAuth2 的 RBAC 企业快速开发平台， 同时支持微服务架构和单体架构。提供对 Spring Authorization Server 生产级实践，支持多种安全授权模式。提供对常见容器化方案支持 Kubernetes、Rancher2 、Kubesphere、EDAS、SAE 支持
我赚100万的商业模式.pdf
05-24
我赚100万的商业模式
flex自定义高度
05-25
在Flex中，可以使用`height`属性来指定组件的高度。如果要动态地设置组件的高度，可以使用绑定表达式或使用代码来设置。 例如，如果要设置一个名为`myComponent`的组件的高度为100像素，可以这样写： ```html <myComponent height="100"/> ``` 如果要根据其他组件的高度来设置`myComponent`的高度，可以使用绑定表达式。例如，如果要将`myComponent`的高度设置为另一个组件`otherComponent`的高度加50像素，可以这样写： ```html <myComponent height="{otherComponent.height + 50}"/> ``` 如果要使用代码来设置组件的高度，可以在组件的生命周期方法中设置`height`属性。例如，可以在`creationComplete`方法中设置： ```actionscript protected function onCreationComplete():void { myComponent.height = 100; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值