Flex自定义组件 之 使用AS3定义

简介:


看了看手册英文的,自己修改了下更适合中国"国情"


组件定义MyComp2.as

package mycomp
{
  import flash.events.KeyboardEvent;
  
  import mx.controls.TextArea;

  public class MyComp2 extends TextArea
  {
    public function MyComp2()
    {
      super();
      addEventListener(KeyboardEvent.KEY_DOWN,handleKeyDown);
    }
    private function handleKeyDown(evt:KeyboardEvent):void
    {
      if(evt.ctrlKey && evt.keyCode==90)
      text="";
    }
    
  }
}

注意类名和文件名同,同时包结构也要和目录结构一致。

扩展了TextArea添加了一个事件处理,用户按Ctrl+Z时会清空文本框。

主文件Main2.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="mycomp.*" layout="vertical">
  <mx:Style>
    MyComp2{fontSize:14px;}
  </mx:Style>
  <MyComp:MyComp2 id="myTxt" color="#008800" text="这是一段测试用的文本..." />
</mx:Application>

注意名字空间mycomp.*这里很像import mycomp.*;呵呵。

结果:



注:
我们也可以不改变名字,人采用原来的,如下TextArea.as:
package mycomp
{
  import mx.controls.TextArea;
  import flash.events.KeyboardEvent;

   public  class TextArea extends mx.controls.TextArea
  {
     public function TextArea()
    {
      super();
      addEventListener(KeyboardEvent.KEY_DOWN,handleKeyDown);
    }
     private function handleKeyDown(evt:KeyboardEvent): void
    {
       if(evt.ctrlKey && evt.keyCode==90)
      text="";
    }
  }
}


主文件:
<? xml  version ="1.0"  encoding ="utf-8" ?>
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  xmlns:MyComp ="mycomp.*"  layout ="vertical" >
   < mx:Style >
    TextArea{fontSize:14px;}
   </ mx:Style >
   < MyComp:TextArea  id ="myTxt"  color ="#008800"  text ="这是一段测试用的文本..."  />
   < mx:TextArea  text ="这是系统默认的文本框"  />
</ mx:Application >



本文转自 xcf007 51CTO博客,原文链接: http://blog.51cto.com/xcf007/102438 ,如需转载请自行联系原作者

相关文章
|
开发者 容器
ArkUI框架,Flex布局,基础组件及封装,父子组件的双向绑定
Flex组件用于创建弹性布局,开发者可以通过Flex的接口创建容器组件,进而对容器内的其他元素进行弹性布局,例如:使三个元素在容器内水平居中,垂直等间隔分散。 例如:如下的布局代码分别表示:(垂直排列,水平居中,垂直居中)
503 0
ArkUI框架,Flex布局,基础组件及封装,父子组件的双向绑定
|
3月前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
147 10
|
4月前
|
数据可视化 前端开发 搜索推荐
FLEX组件可视化设计器CSS3代码生成器
FLEX组件可视化设计器CSS3代码生成器
77 4
|
7月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
9月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
237 5
|
9月前
|
容器 API UED
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
336 0
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
|
容器
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
93 0
|
前端开发 Java 开发工具
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
360 0
好客租房116-flex布局组件导航菜单
好客租房116-flex布局组件导航菜单
123 0
好客租房116-flex布局组件导航菜单
|
开发框架 小程序 Android开发
列表组件list-view的使用、flex布局教程,以APICloud AVM框架为例
avm.js是 APICloud 推出的多端开发框架。使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App,且多端渲染效果统一;全新的 App 引擎 3.0 不依赖 webView,提供百分百的原生渲染,保障 App 性能和体验与原生 App 一致。
524 0