Flex手机项目 - 文件管理器开发（具备浏览，编辑，查看等功能）

2014-12-30 发布：hangge 阅读：874

本文介绍如何使用flash builder来开发一个flex文件管理器app。由于air的跨平台特性，该应用除了可以作为windows应用，也可以发布到android和ios下使用。

对于初始目录，File类具有如下5个静态属性，可以用来引用常用的文件位置：

File.applicationDirectory

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>

--- 主页面 FilesExplorerAppHome.mxml ---

<?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>

--- 图片查看 ImagesView.mxml ---

<?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>

--- 新建文件夹 FolderView.mxml ---

<?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>

--- 新建修改文件 FileView.mxml ---

<?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>

源码下载：

FilesExplorerApp.zip