每天学一点flex（5）：DividedBox和拖拽监听

有时候经常需要使用FB来开发做一些Air工具提供自己学习使用，个人觉得Flex 的3 的版本比较适合做工具，Flex 4 重构架构后部分组件如DataGrid 这类操作反而更加难掌握，每次只能继续使用mx包组件混搭实现，Flex 有点臃肿设计，过多很多情况下都记不住。现在Flex版本很多年前adobe 已经是交给了开源组织阿帕奇基金维护了，最近看到Flex的维护组也搞了一个一套Flexjs的输出，鉴于已经很少人关注了，这套东西前后搞了很久才推出，现在想想FlexJS能诞生还算是个奇迹。Air做工具很方便，但对于一些IO流操作还是会出现瓶颈，在操作多文件的情况下，Air不如C#等来得快。做工具经常要关心文件IO流操作，接触这些要经常和文件打交道。文件输出等情况比较多一点。

今天记录先一下这个分割组件，之前经常设计的时候忘记。今天记录自己博客当中。

DividedBox 里面子对象需要设立百分比。这个组件就可以显示出中间左右拉的效果。 下面有三个面板，可以看到width都是设置了百分比。会根据软件的情况进行调整。

<mx:DividedBox direction="horizontal" width="100%" height="100%">

        <mx:Panel title="目录" width="20%" height="100%" backgroundColor="0xCCCCCC">
            <mx:FileSystemTree id="fileSystemTree" x="19" y="30" width="100%" height="100%"/>
        </mx:Panel>

        <mx:Panel title="代码" width="40%" height="100%" backgroundColor="0xCCCCCC">
            <s:TextArea id="codeTextArea" editable="false" x="283" y="30" width="100%" height="100%"/>
        </mx:Panel>
        <mx:Panel title="转换代码" width="40%" height="100%" backgroundColor="0xCCCCCC">
            <s:TextArea id="resultTextArea" fontSize="15" x="283" y="30" width="100%" height="100%"/>
        </mx:Panel>
    </mx:DividedBox>

再记录一下拖拽的监听文件操作，经常用到。

 this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,onDragEnter); 
 this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP,onDragComplete); 

private function onDragEnter(event:NativeDragEvent):void {                

    if(event.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)   &&
                  event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT)[0].nativePath.split(".")[1] == "exml")
    {  
        NativeDragManager.acceptDragDrop(this);  
    }
}

    private function onDragComplete(event:NativeDragEvent):void {
         //拖拽文件到软件后，可以监听到获取到剪贴板里面的文件File对象组。这样子就可以使用流去读取相应的文本了，或者位图，或者其他等
         var dropfiles:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;                     
         var file:File = dropfiles[0];  
        var fileStream:FileStream = new FileStream();  
        fileStream.open(file, FileMode.READ);  
        var str:String = fileStream.readMultiByte(fileStream.bytesAvailable, "utf-8");  
        fileStream.close();  

   }

拖拽文件后，会记录剪贴板上，所以通过获取到他的格式情况也可以获取相应的文件情况。
ClipboardFormats.FILE_LIST_FORMAT
ClipboardFormats.BITMAP_FORMAT
ClipboardFormats.TEXT_FORMAT