Flex Builder has a great way to organize its components in tree mode, which is very a good way to organize things and make things clear to any user who are coming to Flex world.
By default, every component you create that is not part of default Flex components you will have placed in the [Custom] directory of Flex Components view in your Flex/Flash Builder, and no matter what properties you add to them, they will never be visible in the Flex Properties standard view.
But what if you want to customize that and create a component that have them all like flex components do? Well, it's not that hard so let's do that.
Create the Component
First, you have to create a new Flex Library Project. Do this by going to File->New and choose Flex Library Project. Give it a name, a location, choose whatever Flex SDK you wish to build this for and then click finish.
Now you have a blank library project in which you can create whatever components you want.
Is important to use packages correctly and namespaces and not just drop the component in the [src] folder (you'll see later why). First create a package (eg. com.adm.component) in which you can add your custom component.
Okay, now let's create some methods to have something going. We'll make this component be a big button with a method to enable the button and one to change it's caption. We'll use setters and getter's for those properties because some other actions might be required when changing them. So:
So, if you now build your project, a .swc file will be generated in your [bin] folder, which you can add in other projects and use. But now, the component will be placed in the [Custom] directory in the Components View and not the one you want. We'll do that a bit later now let's just....
Give it an icon
This is really simple. All you have to do is get a nice looking .png icon (16x16 pixels preferably) and place it next to your component. Then, use the IconFile metadata tag to link it to your component.
Inspectable properties
If you have extra information about the property that will help code hints or the Property Inspector (such as enumeration values or that a String is actually a file path) then also add [Inspectable] metadata with that extra info. For our methods we have:
This will also help a lot when we'll add this properties in the Flex Properties panel. For more informations about the [Inspectable] metadata tag visit http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001658.html
Create custom component folder
So, if you want to build a professional component, you can't leave Flex add your component in the default [Custom] directory in the Components tree. So, in order to create your own folder, we must use few tricks.
First of all, you need two .xml files to describe the structure you want flex to use and overide it's default behavior.
The first file is the manifest.xml which describes the components in the package and their namespaces. In our case we'll have:
Second, we need another xml to describe the way the designer will interpret all this.
In the design.xml, you can specify the namespaces you used for the components, in this case adm will point to components in the org.adm folder.
Categories tag describes the folders you want added in the Components panel. Each category must have an id which you'll use to tell components where they should reside, a label for the category to stand as the directory name in the Components panel. defaultExpand is an optional parameter which if set to true, the folder will be showed expanded by default.
In the components tag, you specify which component goes in what category and under what title. The name parameter must match the id of a component listed in the manifest.xml. All the other parameters are pretty self explanatory.
Next, you have to include this two files in .swc package. To do that, follow the steps:
* Right Click at your project and select Properties
* In the left choose Flex Library Build Path
* Select the assets tab and mark to include manifest.xml and design.xml files
* Now select the Flex Library Compiler and include your namespace URL (in this case http://www.justin.com)
* Include the manifest file .xml you've created
* Click apply and ok to finish
After this, you should end up with something like this
comppanel Create professional Flex components
Add properties to the Flex Properties view
As I said before, no matter what properties you add to your component, they will never be visible in the Flex Properties standard view, only in the category view and that only if you use the [Inspectable] metadata tag. But few more lines in the design.xml file should take care of that.
The id of the mxmlProperties tag should be the function/variable names from your component you want to edit. You can also define default values for those properties using the defaultAttribute tag below. Here we've only used the textfield and the combo type but there are few more you can use.
For combo boxes, if you use it for a Boolean property, it will automatically be populated with [true,false] values but if want something else, the [Inspectable] metadata tag has the enumeration property where you can define the properties from this combo.
flexprop Create professional Flex components
Another thing you must do in order to apply the values as soon as you change them from the properties view, is to set the functions/variables as [Bindable].
One more thing
Now, compiling this will give you a 300 something KB .swc file which is a bit large to distribute. The user will use this component inside a flex component so embedding all the libraries and SDK inside your .swc is useless. So the next step is to go to Properties->Flex Library Build Path->Library path tab, expand the build path library try and edit everything inside the SDK tree on Link Type and choose External
Now the swc component only have 4KB. Big cut down, eh ?
Will Done
引用
http://blog.another-d-mention.ro/programming/create-professional-flex-components/
By default, every component you create that is not part of default Flex components you will have placed in the [Custom] directory of Flex Components view in your Flex/Flash Builder, and no matter what properties you add to them, they will never be visible in the Flex Properties standard view.
But what if you want to customize that and create a component that have them all like flex components do? Well, it's not that hard so let's do that.
Create the Component
First, you have to create a new Flex Library Project. Do this by going to File->New and choose Flex Library Project. Give it a name, a location, choose whatever Flex SDK you wish to build this for and then click finish.
Now you have a blank library project in which you can create whatever components you want.
Is important to use packages correctly and namespaces and not just drop the component in the [src] folder (you'll see later why). First create a package (eg. com.adm.component) in which you can add your custom component.
package com.adm.component { import mx.containers.Canvas; public class mycomponent extends Canvas { } }
Okay, now let's create some methods to have something going. We'll make this component be a big button with a method to enable the button and one to change it's caption. We'll use setters and getter's for those properties because some other actions might be required when changing them. So:
package com.adm.component { import mx.containers.Canvas; import mx.controls.Button; public class mycomponent extends Canvas { private var _title : String = 'Title'; private var _active : Boolean = true; private var btn : Button = new Button(); public function CustomComponent() { super(); this.btn.width = 100; this.btn.height = 100; this.btn.label = this.label; this.addChild(this.btn); } public function set title(val : String) : void { this._title = val; this.btn.label = val; } public function get title() : String { return this._title; } public function set active(val : Boolean) : void { this._active = val; this.btn.enabled= val; } public function get active() : Boolean { return this._active; } } }
So, if you now build your project, a .swc file will be generated in your [bin] folder, which you can add in other projects and use. But now, the component will be placed in the [Custom] directory in the Components View and not the one you want. We'll do that a bit later now let's just....
Give it an icon
This is really simple. All you have to do is get a nice looking .png icon (16x16 pixels preferably) and place it next to your component. Then, use the IconFile metadata tag to link it to your component.
.... [IconFile("icon.png")] public class mycomponent extends Canvas { private var _title : String = 'Title'; .......
Inspectable properties
If you have extra information about the property that will help code hints or the Property Inspector (such as enumeration values or that a String is actually a file path) then also add [Inspectable] metadata with that extra info. For our methods we have:
... [Inspectable(category="General", type="String", defaultValue="")] public function set title(val : String) : void ..... ..... [Inspectable(category="General", type="Boolean", defaultValue="true", enumeration="true,false")] public function set active(val : Boolean) : void
This will also help a lot when we'll add this properties in the Flex Properties panel. For more informations about the [Inspectable] metadata tag visit http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001658.html
Create custom component folder
So, if you want to build a professional component, you can't leave Flex add your component in the default [Custom] directory in the Components tree. So, in order to create your own folder, we must use few tricks.
First of all, you need two .xml files to describe the structure you want flex to use and overide it's default behavior.
The first file is the manifest.xml which describes the components in the package and their namespaces. In our case we'll have:
< ?xml version="1.0"?> <componentpackage> <component id="mycomponent" class="org.adm.component.mycomponent"/> </componentpackage>
Second, we need another xml to describe the way the designer will interpret all this.
< ?xml version="1.0" ?> <design> <namespaces> <namespace prefix="adm" uri="http://www.adm.org" /> </namespaces> <categories> <category id="Test" label="Test Panel" defaultExpand="true" /> </categories> <components> <component name="mycomponent" namespace="adm" category="Test" displayName="Rename Me" /> </components> </design>
In the design.xml, you can specify the namespaces you used for the components, in this case adm will point to components in the org.adm folder.
Categories tag describes the folders you want added in the Components panel. Each category must have an id which you'll use to tell components where they should reside, a label for the category to stand as the directory name in the Components panel. defaultExpand is an optional parameter which if set to true, the folder will be showed expanded by default.
In the components tag, you specify which component goes in what category and under what title. The name parameter must match the id of a component listed in the manifest.xml. All the other parameters are pretty self explanatory.
Next, you have to include this two files in .swc package. To do that, follow the steps:
* Right Click at your project and select Properties
* In the left choose Flex Library Build Path
* Select the assets tab and mark to include manifest.xml and design.xml files
* Now select the Flex Library Compiler and include your namespace URL (in this case http://www.justin.com)
* Include the manifest file .xml you've created
* Click apply and ok to finish
After this, you should end up with something like this
comppanel Create professional Flex components
Add properties to the Flex Properties view
As I said before, no matter what properties you add to your component, they will never be visible in the Flex Properties standard view, only in the category view and that only if you use the [Inspectable] metadata tag. But few more lines in the design.xml file should take care of that.
<component name="mycomponent" namespace="adm" category="Test" displayName="Rename Me"> <mxmlproperties> <textfield id="title" name="Component Title:" /> <combo id="active" name="Active:" /> </mxmlproperties> <defaultattribute name="active" value="true" /> </component>
The id of the mxmlProperties tag should be the function/variable names from your component you want to edit. You can also define default values for those properties using the defaultAttribute tag below. Here we've only used the textfield and the combo type but there are few more you can use.
<textfiled id="propertyOrStyle" name="Label:" [multiline="false"] /> <combo id="propertyOrStyle" name="Label:" /> <colorpicker id="propertyOrStyle" name="Label:" /> <filepicker id="propertyOrStyle" name="Label:" [wrapInEmbed="false"] /> <slider id="propertyOrStyle" name="Label:" min="0" max="10" increment="1" />
For combo boxes, if you use it for a Boolean property, it will automatically be populated with [true,false] values but if want something else, the [Inspectable] metadata tag has the enumeration property where you can define the properties from this combo.
flexprop Create professional Flex components
Another thing you must do in order to apply the values as soon as you change them from the properties view, is to set the functions/variables as [Bindable].
.... [Inspectable(category="General", type="String", defaultValue="")] [Bindable] public function set title(val : String) : void .... .... [Inspectable(category="General", type="Boolean", defaultValue="true", enumeration="true,false")] [Bindable] public function set active(val : Boolean) : void .... ....
One more thing
Now, compiling this will give you a 300 something KB .swc file which is a bit large to distribute. The user will use this component inside a flex component so embedding all the libraries and SDK inside your .swc is useless. So the next step is to go to Properties->Flex Library Build Path->Library path tab, expand the build path library try and edit everything inside the SDK tree on Link Type and choose External
Now the swc component only have 4KB. Big cut down, eh ?
Will Done
引用
http://blog.another-d-mention.ro/programming/create-professional-flex-components/
发表评论
-
表达式计算器
2011-03-14 11:37 817同时提供一个表达式计算器的类库,我自己写的,希望有共同兴趣的同 ... -
Flex 里使用正则表达式
2011-01-24 13:08 1163正则表达式一向都是那么的强大,被广泛使用与个个语言当中,以下是 ... -
Flex里的扩选边框
2010-12-23 13:49 850类似于Pohotshop里边很酷的选择框。 其功能主要通过利 ... -
Flash Player内部执行机制
2010-12-10 13:04 758参考地址: 1).http://ted.onflash.org ... -
Flex 4 ant target html-wrapper 使用用户自己的html-template
2010-10-28 13:24 2188最近在做Flex3到Flex4升级,在对ant脚本升级的时候, ...
相关推荐
FLEX控件
flex控件事件flex控件事件flex控件事件flex控件事件
Flex控件组图(便于学习、记忆) png格式 最好打印出来挂在墙上,每天看到,便于记忆^_^
Flex控件图 Flex控件图 Flex控件图
可以实现缩入折叠,翻转折叠效果,很不错哦!
Flex写的一个combox多选控件,小主一直用着的,暂未发现BUG,请大神多多指教!
Flex皮肤大全,各种样式的Flex控件皮肤大全-包括vista样式,W7样式,等等, 30 几种样式
用flex脚本创建的一个IP地址控件,在创建的时候只有给value赋值就会创建一个IP地址控件,不给value赋值不行,赋空值也行。
实现了Flex与Java的互操作,包含Flex控件的使用方法,Flex与Java的通讯。
pv3d加入Flex控件及创建热点(附部分代码)
flex 控件 可与Vb6同行 flex 控件 可与Vb6同行 flex 控件 可与Vb6同行
自扩展Flex控件,可以同时选择日期和时间 自扩展Flex控件,可以同时选择日期和时间 自扩展Flex控件,可以同时选择日期和时间
一个自定义的拖拽flex控件,可以实现复制拖拽,不复制拖拽,可以拖拽图片,也可以由文字拖拽后变成图片。
这是一个基于Adobe Flash Builder 4开发的Flex多文件上传控件,这个是Flex源码,asp.net调用Flex的源码在另一个附件里
自己写的flex 分页控件,使用简单,有源码和使用实例。
这是我自己写的一个flex组件,使用简单,在使用的时候,只需要在页面载入里,新建组件对象就OK,另外还有一个方法监听控件返回的的页数,可以实现分面。flex会生成linkButton,并且可以按需要控件显示的数量。如有不...
一个非常不错的flex时间控件 ()}" labelFunction="selectDateTime" width="150"/> public function selectDateTime(item:Date):String { return item.fullYear + "-" + item.month + "-" + item.dateUTC + ...
flex控件实例学习。想要学习flex的童鞋可以看一下。值得学习
创建第一个Flex应用——设计模式创建第一个Flex应用——设计模式创建第一个Flex应用——设计模式
创建第一个Flex应用——编码模式创建第一个Flex应用——编码模式创建第一个Flex应用——编码模式