Flex手机项目 - 文件管理器开发（具备浏览，编辑，查看等功能）
作者：hangge | 2014-12-30 15:06
本文介绍如何使用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>
源码下载：
FilesExplorerApp.zip
全部评论（0）