Flex手机项目 - 文件管理器开发(具备浏览,编辑,查看等功能)
本文介绍如何使用flash builder来开发一个flex文件管理器app。由于air的跨平台特性,该应用除了可以作为windows应用,也可以发布到android和ios下使用。


--- 主页面 FilesExplorerAppHome.mxml ---
--- 图片查看 ImagesView.mxml ---
--- 新建文件夹 FolderView.mxml ---
--- 新建修改文件 FileView.mxml ---
源码下载:
FilesExplorerApp.zip
对于初始目录,File类具有如下5个静态属性,可以用来引用常用的文件位置:
File.applicationDirectory
File.applicationStorageDirectory
File.applicationStorageDirectory
File.documentsDirectory
File.desktopDirectory
File.userDirectory
我们使用的是用户文档目录File.documentsDirectory,其在各平台下对应的目录如下:
Mac Os:用户Documents目录
Windows:用户Documents目录
ios:该应用的Documents目录,如/var/mobile/Containers/Data/Application/3F2BCEE3-0C84-4C5C-BCBF-594F9F96C78D/Documents
android:file:///mnt/sdcard
该文件管理器的功能如下:
1,默认初始目录为Documents目录,列出该目录所有文件夹和文件
2,点击文件夹可进入并浏览该文件夹
3,点击..返回上一级目录
4,点击“新建文件夹”可创建一个文件夹
5,点击“新建文本文件”可创建一个txt格式的文本文件
6,点击图片类型文件,可进行图片查看
7,点击txt文件,可进行浏览编辑
效果图如下:


代码如下:
--- 应用入口 FilesExplorerApp.mxml ---
<?xml version="1.0" encoding="utf-8"?> <s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.FilesExplorerAppHome" applicationDPI="240"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; s|View { backgroundColor:#999999; color:#393839; } s|Label { fontSize:22; } s|List { alternatingItemColors: '0xCCCCCC', '0xEEEEEE'; downColor:yellow; fontSize:22; color:#393839; } </fx:Style> </s:ViewNavigatorApplication>
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="init()" title=" 文件管理器"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; /** * 文件列表显示的文件集合 */ private var dirData:Array; /** * 当前文件夹 */ private var selectedDirectory:File; /** * 页面初始化 */ private function init():void{ //设置当前文件夹 if(data != null){ selectedDirectory = data as File; }else{ selectedDirectory = File.documentsDirectory; } //读取并显示文件列表 readDir(); } /** * 读取并显示文件列表 */ protected function readDir():void { currentDirectory.text = selectedDirectory.nativePath; var docsDirectory:Array = selectedDirectory.getDirectoryListing(); var fileObj:File; dirData = []; dirList.dataProvider = new ArrayCollection(); //设置返回“上一级”链接 setParentDir(); var i:int; //先列出文件夹 for(i = 0; i < docsDirectory.length; i++) { fileObj = docsDirectory[i]; if(fileObj.isDirectory) { dirData.push(fileObj); dirList.dataProvider.addItem({ label: fileObj.name }); } } //再列出文件 for(i = 0; i < docsDirectory.length; i++) { fileObj = docsDirectory[i]; if(!fileObj.isDirectory) { dirData.push(fileObj); dirList.dataProvider.addItem({ label: fileObj.name }); } } } /** * 设置返回上一级链接 */ protected function setParentDir():void { var fileObj:File = selectedDirectory.parent; if(fileObj) { dirData.push(fileObj); dirList.dataProvider.addItem({label: "[..]" }); } } /** * 文件列表点击 */ private function dirListClick():void{ //获取点击的文件 var selectedItem:File = dirData[dirList.selectedIndex]; if(selectedItem.isDirectory){ //如果是文件夹则打开文件夹 selectedDirectory = selectedItem; readDir(); }else{ if("|jpg|png|gif|jpeg|".indexOf(selectedItem.extension.toLowerCase())>0){ //如果是图片则显示 navigator.pushView(views.ImagesView, selectedItem); }else if(selectedItem.extension.toLowerCase()=="txt"){ //如果是文本文件则编辑 navigator.pushView(views.FileView, selectedItem); } } } /** * 创建文本文件 */ private function createFile():void { navigator.pushView(views.FileView, selectedDirectory); } /** * 创建文件夹 */ private function createFold():void { navigator.pushView(views.FolderView, selectedDirectory); } ]]> </fx:Script> <s:layout> <s:VerticalLayout/> </s:layout> <s:navigationContent> <s:Button label="主页" click="data=null;init()"/> </s:navigationContent> <s:Label id="currentDirectory" width="100%" height="80" paddingLeft="10" paddingTop="7" verticalAlign="middle" /> <s:List id="dirList" width="100%" height="85%" fontFamily="Arial" contentBackgroundColor="#B6B3B3" selectionColor="#00A2FF" selectedIndex="0" click="dirListClick()" /> <s:HGroup id="buttonContainer2" width="100%" horizontalAlign="center" paddingTop="10" paddingBottom="10"> <s:Button id="folderBtn" label="新建文件夹" click="createFold()" height="55" fontSize="24" /> <s:Button id="fileBtn" label="新建文本文件" click="createFile()" height="55" fontSize="24" /> </s:HGroup> </s:View>
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="onCreationComplete()" title="图片查看"> <fx:Script> <![CDATA[ /** * 当前文件夹 */ private var selectedFile:File; /** * 页面初始化 */ protected function onCreationComplete():void { selectedFile = data as File; if(selectedFile) { img.source = selectedFile.url; } } /** * 返回 */ private function back():void { navigator.pushView(views.FilesExplorerAppHome, selectedFile.parent); } ]]> </fx:Script> <s:navigationContent> <s:Button label="返回" click="back()"/> </s:navigationContent> <s:VGroup paddingLeft="10" paddingTop="10"> <s:Image id="img" smooth="true"/> </s:VGroup> </s:View>
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="onCreationComplete()" title="新建文件夹"> <fx:Script> <![CDATA[ /** * 当前文件夹 */ private var selectedDirectory:File; /** * 页面初始化 */ protected function onCreationComplete():void { selectedDirectory = data as File; currentDirectory.text = selectedDirectory.nativePath; } /** * 新建文件夹 */ protected function createFolder():void { var name:String = directoryName.text; var newDir:File; if(!name || name == "") { newDir = selectedDirectory.resolvePath("未命名文件夹"); } else { newDir = selectedDirectory.resolvePath(name); } newDir.createDirectory(); back(); } /** * 返回 */ private function back():void { navigator.pushView(views.FilesExplorerAppHome, selectedDirectory); } ]]> </fx:Script> <s:navigationContent> <s:Button label="返回" click="back()"/> </s:navigationContent> <s:layout> <s:VerticalLayout paddingLeft="10" paddingTop="10"/> </s:layout> <s:Label id="currentDirectory" width="100%" height="80" paddingLeft="10" paddingTop="7" verticalAlign="middle" /> <s:Label x="50" width="100%" height="55" text="文件夹名称:" textAlign="left" verticalAlign="middle"/> <s:TextInput id="directoryName" width="80%" color="#FFFFFF" contentBackgroundColor="#605E5E"/> <s:Button label="确定" height="55" fontSize="24" click="createFolder()"/> </s:View>
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="onCreationComplete()"> <fx:Script> <![CDATA[ /** * 当前文件夹 */ private var selectedDirectory:File; /** * 页面初始化 */ protected function onCreationComplete():void { var temp:File = data as File; //判断参数是文件还是文件夹(决定是修改文件还是新建文件) if(temp.isDirectory){ this.title = "新建文件"; selectedDirectory = temp; }else{ this.title = "修改文件"; selectedDirectory = temp.parent; fileName.text = temp.name.substr(0,temp.name.lastIndexOf(".")); //读取文件内容 var fs:FileStream = new FileStream(); fs.open(temp, FileMode.READ); fileContent.text = fs.readUTFBytes(fs.bytesAvailable); fs.close(); } currentDirectory.text = selectedDirectory.nativePath; } /** * 新建txt文件 */ protected function createFile():void { var nameStr:String = fileName.text + ".txt"; var fileObj:File = selectedDirectory.resolvePath(nameStr); var fs:FileStream = new FileStream(); fs.open(fileObj, FileMode.WRITE); fs.writeUTFBytes(fileContent.text); fs.close(); back(); } /** * 返回 */ private function back():void { navigator.pushView(views.FilesExplorerAppHome, selectedDirectory); } ]]> </fx:Script> <s:navigationContent> <s:Button label="返回" click="back()"/> </s:navigationContent> <s:layout> <s:VerticalLayout paddingLeft="10" paddingTop="10"/> </s:layout> <s:Label id="currentDirectory" width="100%" height="80" paddingLeft="10" paddingTop="7" verticalAlign="middle" /> <s:Label width="152" height="55" text="文件名:" textAlign="left" verticalAlign="middle"/> <s:TextInput id="fileName" width="450" color="#FFFFFF" contentBackgroundColor="#605E5E"/> <s:Label width="203" height="55" verticalAlign="middle" text="内容:" textAlign="left"/> <s:TextArea id="fileContent" width="450" height="209" color="#FFFFFF" contentBackgroundColor="#605E5E" verticalAlign="top" /> <s:Button label="确定" height="55" fontSize="24" click="createFile()"/> </s:View>
源码下载:
