随笔-159  评论-114  文章-7  trackbacks-0
Flex开发自定义控件(基础篇)

前期准备：

      点击 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代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.       <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"    
  3.               width="286" height="208" layout="absolute" title="用户登录">  
  4. </mx:TitleWindow>  
<?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 ），然后添加按钮以便提交，此时代码如下：

Xml代码 复制代码
  1. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">  
  2.   
  3.         <mx:Form width="248" height="100" label="Button" x="10" y="10">  
  4.   
  5.                 <mx:FormItem label="用户名" fontSize="12">  
  6.                         <mx:TextInput id="username" width="158" height="28" fontSize="15"    
  7.                                 textAlign="left"/>  
  8.                 </mx:FormItem>  
  9.   
  10.                 <mx:FormItem label="密码" fontSize="12">  
  11.                         <mx:TextInput id="password" width="159" height="30" fontSize="15"    
  12.                                 textAlign="left" displayAsPassword="true"/>  
  13.                 </mx:FormItem>  
  14.   
  15.          </mx:Form>  
  16.   
  17.          <mx:Button id="loginbtn" label="登录" textAlign="center" fontSize="12" x="190" y="118"/>  
  18.   
  19. </mx:TitleWindow>  
<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="用户名" fontSize="12">
<mx:TextInput id="username" width="158" height="28" fontSize="15"
textAlign="left"/>
</mx:FormItem>
<mx:FormItem label="密码" fontSize="12">
<mx:TextInput id="password" width="159" height="30" fontSize="15"
textAlign="left" displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Button id="loginbtn" label="登录" textAlign="center" fontSize="12" x="190" y="118"/>
</mx:TitleWindow>
 

上面的登录只是布局，没加入事件处理程序，但是这已经可以算是一个登录组件了（虽然只能看不能用，呵呵）

组件制作完毕，然后就可以使用他了

使用组件：

打开主程序，进入 Design 视图，查看左下角的组件浏览器。

你会发现在 Custom 下多出来一个 CLogin 来，把它拖入设计面板，哈，登录组件就显示在面板上了，就这么简单。

代码可能会如下：

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.   
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">  
  4.   
  5.     <mx:Script>  
  6.   
  7.           <![CDATA[  
  8.  
  9.                 import mx.controls.Alert;  
  10.  
  11.                 private function btnClick() : void {  
  12.  
  13.                       Alert.show("test","Test");  
  14.  
  15.                 }  
  16.  
  17.           ]]>  
  18.   
  19.     </mx:Script>  
  20.   
  21.     <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>  
  22.   
  23.     <ns1:CLogin x="107" y="94" width="204" height="117">  
  24.   
  25.     </ns1:CLogin>  
  26.   
  27. </mx:Application>  
<?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代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.   
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">  
  4.   
  5.     <mx:Script>  
  6.   
  7.           <![CDATA[  
  8.  
  9.                 import mx.controls.Alert;  
  10.  
  11.                 private function btnClick() : void {  
  12.  
  13.                       Alert.show("test","Test");  
  14.  
  15.                 }  
  16.  
  17.           ]]>  
  18.   
  19.     </mx:Script>  
  20.   
  21.     <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>  
  22.   
  23.     <widget:CLogin x="107" y="94" width="204" height="117">  
  24.   
  25.     </widget:CLogin>  
  26.   
  27. </mx:Application>  
<?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 ：

Xml代码 复制代码
  1. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">  
  2.   
  3.         <mx:Script>  
  4.                 <![CDATA[  
  5.  
  6.                                     [Inspectable]  
  7.  
  8.                                     public var status : String;  
  9.  
  10.                 ]]>  
  11.         </mx:Script>  
  12.   
  13.         <mx:Form width="248" height="100" label="Button" x="10" y="10">  
  14.   
  15.                 <mx:FormItem label="用户名" fontSize="12">  
  16.                         <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>  
  17.                 </mx:FormItem>  
  18.   
  19.                 <mx:FormItem label="密码" fontSize="12">  
  20.                         <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"  
  21.                                 displayAsPassword="true"/>  
  22.                 </mx:FormItem>  
  23.   
  24.         </mx:Form>  
  25.   
  26.         <mx:Button id="loginbtn" label="登录" textAlign="center" fontSize="12" x="190" y="118"/>  
  27.   
  28. </mx:TitleWindow>  
<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="用户名" fontSize="12">
<mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
</mx:FormItem>
<mx:FormItem label="密码" fontSize="12">
<mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Button id="loginbtn" label="登录" textAlign="center" fontSize="12" x="190" y="118"/>
</mx:TitleWindow>
 

首先我们加入一个属性 status ，修饰这个属性的元数据标签 [ Inspectable ] 的意思是，叫编译器和 Flex Builder 可以看到这个属性，并自动提示：

加入自定义事件：

 

首先用元数据标签给 CLogin 添加自定义事件：

示例代码 CLogin.mxml ：

Xml代码 复制代码
  1. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">  
  2.   
  3.         <mx:Metadata>  
  4.   
  5.                 [Event("btnClicked")]   
  6.   
  7.         </mx:Metadata>  
  8.   
  9.          <mx:Script>  
  10.   
  11.                  <![CDATA[  
  12.  
  13.                        [Inspectable]  
  14.  
  15.                        public var status : String;  
  16.  
  17.                  ]]>  
  18.          </mx:Script>  
  19.   
  20.          <mx:Form width="248" height="100" label="Button" x="10" y="10">  
  21.   
  22.                  <mx:FormItem label="用户名" fontSize="12">  
  23.                          <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>  
  24.                  </mx:FormItem>  
  25.   
  26.                  <mx:FormItem label="密码" fontSize="12">  
  27.                          <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"  
  28.                                  displayAsPassword="true"/>  
  29.                  </mx:FormItem>  
  30.   
  31.           </mx:Form>  
  32.   
  33.           <mx:Button id="loginbtn" label="登录" textAlign="center" fontSize="12" x="190" y="118"/>  
  34.   
  35. </mx:TitleWindow>  
<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="用户名" fontSize="12">
<mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
</mx:FormItem>
<mx:FormItem label="密码" fontSize="12">
<mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Button id="loginbtn" label="登录" textAlign="center" fontSize="12" x="190" y="118"/>
</mx:TitleWindow>

      前面提到， MXML 相当于一个类，那么 mx:Metadata 标签就相当于给这个 CLogin 类加上元数据标签。

标签为事件标签，内容为 [ Event ( "btnClicked" )] ，意思是自定义事件，名称为 btnClicked 。

然后我们给 CLogin 的登录按钮加入 click 事件：

Xml代码 复制代码
  1. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">  
  2.   
  3.         <mx:Metadata>  
  4.   
  5.                 [Event("btnClicked")]   
  6.   
  7.         </mx:Metadata>  
  8.   
  9.         <mx:Script>  
  10.                 <![CDATA[  
  11.  
  12.                        [Inspectable]  
  13.  
  14.                        public var status : String;  
  15.  
  16.                        private function login (): void {  
  17.  
  18.                              dispatchEvent(new Event("btnClicked"));  
  19.  
  20.                         }  
  21.  
  22.                  ]]>  
  23.         </mx:Script>  
  24.   
  25.         <mx:Form width="248" height="100" label="Button" x="10" y="10">  
  26.   
  27.                 <mx:FormItem label="用户名" fontSize="12">  
  28.                         <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>  
  29.                 </mx:FormItem>  
  30.   
  31.                 <mx:FormItem label="密码" fontSize="12">  
  32.                         <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"  
  33.                                 displayAsPassword="true"/>  
  34.                 </mx:FormItem>  
  35.   
  36.          </mx:Form>  
  37.   
  38.          <mx:Button id="loginbtn" click="login()" label="登录" textAlign="center" fontSize="12" x="190" y="118"/>  
  39.   
  40. </mx:TitleWindow>  
<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="用户名" fontSize="12">
<mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
</mx:FormItem>
<mx:FormItem label="密码" fontSize="12">
<mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Button id="loginbtn" click="login()" label="登录" textAlign="center" fontSize="12" x="190" y="118"/>
</mx:TitleWindow>

      在按钮被单击 (click) 的时候，我们设定执行了 login 方法， login 方法执行命令 dispatchEvent( new Event( "btnClicked" )) 意思是 dispatchEvent 发送事 件通知，通知组件你自定义的 btnClicked 事件已经触发了。

到这里，我们通过自定义组件 CLogin 的登录按钮来触发 btnClicked 事件已经完成。

使用自定义事件：

这样，我们在主程序里就可以利用这个事件了：

示例代码 Hello.mxml ：

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.   
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">  
  4.   
  5.     <mx:Script>  
  6.   
  7.           <![CDATA[  
  8.  
  9.                 import mx.controls.Alert;  
  10.  
  11.                 private function btnClick() : void {  
  12.  
  13.                       Alert.show("test","Test");  
  14.  
  15.                 }  
  16.  
  17.   
  18.  
  19.                 private function btnClickHandler(event: Event) : void {  
  20.  
  21.                       Alert.show("Event btnClicked Called");  
  22.  
  23.                 }  
  24.  
  25.           ]]>  
  26.   
  27.     </mx:Script>  
  28.   
  29.     <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>  
  30.   
  31.     <widget:CLogin btnClicked="btnClickHandler(event)" x="107" y="94" width="204" height="117">  
  32.   
  33.     </widget:CLogin>  
  34.   
  35. </mx:Application>  
<?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 中添加效果标签：

Xml代码 复制代码
  1. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">  
  2.   
  3.         <mx:Metadata>  
  4.   
  5.                 [Event("btnClicked")]   
  6.   
  7.                 [Effect(name="btnClickedEffect", event="btnClicked")]   
  8.   
  9.         </mx:Metadata>  
  10.   
  11.         <mx:Script>  
  12.                 <![CDATA[  
  13.  
  14.                         [Inspectable]  
  15.  
  16.                         public var status : String;  
  17.  
  18.                         private function login (): void {  
  19.  
  20.                               dispatchEvent(new Event("btnClicked"));  
  21.  
  22.                         }  
  23.  
  24.                   ]]>  
  25.         </mx:Script>  
  26.   
  27.         <mx:Form width="248" height="100" label="Button" x="10" y="10">  
  28.   
  29.                 <mx:FormItem label="用户名" fontSize="12">  
  30.                         <mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>  
  31.                 </mx:FormItem>  
  32.   
  33.                 <mx:FormItem label="密码" fontSize="12">  
  34.                         <mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"  
  35.                                 displayAsPassword="true"/>  
  36.                 </mx:FormItem>  
  37.   
  38.         </mx:Form>  
  39.   
  40.         <mx:Button id="loginbtn" click="login()" label="登录" textAlign="center" fontSize="12" x="190" y="118"/>  
  41.   
  42. </mx:TitleWindow>  
<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="用户名" fontSize="12">
<mx:TextInput id="username" width="158" height="28" fontSize="15" textAlign="left"/>
</mx:FormItem>
<mx:FormItem label="密码" fontSize="12">
<mx:TextInput id="password" width="159" height="30" fontSize="15" textAlign="left"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:Button id="loginbtn" click="login()" label="登录" textAlign="center" fontSize="12" x="190" y="118"/>
</mx:TitleWindow>

使用自定义效果：

                       

示例代码 Hello.mxml ：

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.   
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:widget="*">  
  4.   
  5.     <mx:Script>  
  6.   
  7.           <![CDATA[  
  8.  
  9.                 import mx.controls.Alert;  
  10.  
  11.                 private function btnClick() : void {  
  12.  
  13.                       Alert.show("test","Test");  
  14.  
  15.                 }  
  16.  
  17.   
  18.  
  19.                 private function btnClickHandler(event: Event) : void {  
  20.  
  21.                       Alert.show("Event btnClicked Called");  
  22.  
  23.                 }  
  24.  
  25.           ]]>  
  26.   
  27.     </mx:Script>  
  28.   
  29.     <mx:Button id="bb" x="107" y="37" label="Button" click="btnClick()"/>  
  30.   
  31.     <widget:CLogin btnClickedEffect="myEffect" btnClicked="btnClickHandler(event)" x="107" y="94" width="204" height="117">  
  32.   
  33.     </widget:CLogin>  
  34.   
  35.     
  36.   
  37.     <mx:Blur id="myEffect" blurXFrom="100" blurYFrom="100" blurXTo="0" blurYTo="0"/>  
  38.   
  39. </mx:Application>  
<?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>
 

加入自定义样式：

As3代码 复制代码
  1. package   
  2. {   
  3.     import mx.core.UIComponent;   
  4.        
  5.     [Style(name="borderColor",type="uint",format="Color",inherit="no")]   
  6.        
  7.     [Style(name="fillColor",type="uint",format="Color",inherit="no")]   
  8.        
  9.     public class CustomCircle extends UIComponent    
  10.     {   
  11.         public function CustomCircle()   
  12.         {   
  13.             super();   
  14.         }   
  15.            
  16.         override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void    
  17.         {   
  18.             super.updateDisplayList(unscaledWidth, unscaledHeight);   
  19.                
  20.             graphics.lineStyle(1, getStyle("borderColor"), 1.0);   
  21.                
  22.             graphics.beginFill(getStyle("fillColor"),1.0);   
  23.                
  24.             graphics.drawEllipse(0,0,100,100);   
  25.         }   
  26.     }   
  27. }  
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代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.   
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
  4.   
  5. xmlns:comps="*"  
  6.   
  7. backgroundColor="#FFFFFF">  
  8.   
  9.     <mx:Panel title="Style Sample" width="200" height="200"  
  10.        
  11.         paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal">  
  12.        
  13.         <comps:CustomCircle borderColor="#000000" fillColor="#FF0000" />  
  14.        
  15.     </mx:Panel>  
  16.   
  17. </mx:Application>  
<?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>
 

posted on 2009-12-24 16:06 北国狼人的BloG 阅读(449) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by: 博客园 模板提供：沪江博客 Copyright ©2024 北国狼人的BloG