月份：2014年5月

今天遇到一个问题，通过css定义自定义组件的皮肤的时，组件的样式失效，仍然为默认样式，（但是通过直接设置组件的skinClass属性时生效）其原因是自定义组件的默认皮肤的设置方法有问题。下面讲讲如何设置自定义组件的皮肤。用code可以将问题表述为：the right way to set customer component’ default skin, won’t cause skin defined in css not working problem. 下面是代码示例： 总共包含4个文件：

/SkinTest.mxml //主应用程序 
/com/ct/codesample/MyComp.as //自定义组件 
/com/ct/codesample/MyCompSkin.mxml // 皮肤1 
/com/ct/codesample/MyCompSkin2.mxml // 皮肤2

MyComp.as代码：

package com.ct.codesample
{
    import flash.events.Event;

    import spark.components.Label;
    import spark.components.supportClasses.SkinnableComponent;

    /**
     * MyComp，即作为示例的自定义组件，具有一个属性：description，以及2个Label外观元素：
     * titleLabelDisplay和valuelabelDisplay。MyComp.as文件只负责组件的逻辑部分。
     * 
     * @author cachetian
     *      2014-05-21
     */
    public class MyComp extends SkinnableComponent
    {
        public function MyComp()
        {
            super();
        }

        private var _description:String

        /**
         * 约定：description的格式必须为<title>,<value>，例如："组件示例,这是一个组件示例"
         */
        public function get description():String
        {
            return _description;
        }

        // 标记description更改过的标记
        private var isDescriptionChanged:Boolean = false;

        public function set description(value:String):void
        {
            _description = value;
            // 因为属性设置的有可能比皮肤早，所以先要标记一下，稍后皮肤创建的时候记得更新。
            isDescriptionChanged = true;
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            // TODO Auto Generated method stub
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            //
            // 这里是组件的逻辑部分示例
            //
            if (isDescriptionChanged)
            {
                isDescriptionChanged = false;
                var slice:Array = description.split(",");
                if (slice.length > 1)
                {
                    titleLabelDisplay.text = slice[0];
                    valuelabelDisplay.text = slice[1];
                }
            }
        }

        [SkinPart]
        public var titleLabelDisplay:Label;

        [SkinPart]
        public var valuelabelDisplay:Label;

        //
        // 注意，这里是设置默认样式的方法
        //
        override protected function attachSkin():void
        {
            if (getStyle("skinClass") == null)
            {
                // 设置默认样式
                setStyle("skinClass", Class(MyCompSkin));
            }
            super.attachSkin();
        }
    }
}

MyCompSkin.mxml代码：

    
        
            [HostComponent("com.ct.codesample.MyComp")]
        
        
            
            
            
            
        
    

MyCompSkin2.mxml代码：

    
        
            [HostComponent("com.ct.codesample.MyComp")]
        
        
            
            
            
            
        
    

SkinTest.mxml代码：

    
        
            @namespace s "library://ns.adobe.com/flex/spark";
            @namespace mx "library://ns.adobe.com/flex/mx";
            @namespace codesample "com.ct.codesample.*";
            .s2{
                skinClass:ClassReference("com.ct.codesample.MyCompSkin2");
            }
            #main_layout{
                gap:10;
                top:10;
                left:10;
                right:10;
            }
        
        
            
            
        
    

下面是运行结果：

最后总结一下，我不知道如何是最正确的设置默认Skin的方法，但是至少知道在Constructor构造函数中设置是错误的，会引起我上面说的错误，应该在稍后一点的时机，简单的可以重新在attachSkin方法里。

在Flex中一般可以使用URLLoader发起Http请求，示例代码如下：

package com.ct.codesample
{
    import flash.events.Event;
    import flash.events.IOErrorEvent;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.net.URLRequestMethod;
    import flash.net.URLVariables;

    /**
     * URLLoader 使用例子
     * @author tianmu
     *          2014-05-18
     */
    public class UsingURLLoader
    {
        public function UsingURLLoader()
        {
        }
        
        public function main():void
        {
            try
            {
                var urlLoader:URLLoader = new URLLoader();
                var urlVariable:URLVariables = new URLVariables();
                var urlRequest:URLRequest = new URLRequest();
                
                // 添加事件监听
                addEventListeners(urlLoader);
                
                // 添加输入参数
                urlVariable.username = "ct";
                urlRequest.data = urlVariable;
                urlRequest.url = "http://localhost:8080/HttpServer/hello";
                urlRequest.method = URLRequestMethod.POST;
            
                urlLoader.load(urlRequest);
            }
            catch (error:Error)
            {
                trace("An Error Occur! Error Message is :" + error.message);
                trace(error.getStackTrace());
            }
        }
        
        protected function addEventListeners(urlLoader:URLLoader):void
        {
            urlLoader.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
            urlLoader.addEventListener(Event.COMPLETE, onComplete);
        }
        
        protected function onIOError(event:IOErrorEvent):void
        {
            trace("onIOError");
            if (null != event)
            {
                trace(event.text);
            }
        }
        
        protected function onComplete(event:Event):void
        {
            trace("onComplete");
            if (null != event)
            {
                try
                {
                    // 获取返回值
                    var dataStr:String = (event.target as URLLoader).data;
                    trace(dataStr);
                    
                    // 解析JSON对象
                    var dataObj:Object = JSON.parse(dataStr);
                    if ("ok" == dataObj.result)
                    {
                        trace(dataObj.greeting);
                    }
                }
                catch (error:Error)
                {
                    trace("An Error Occur! Error Message is :" + error.message);
                    trace(error.getStackTrace());
                }
            }
        }
    }
}