sencha touch结合phonegap开发android下的文件浏览器
sencha touch结合phonegap开发android下的文件浏览器
大家好，今天我给大家介绍一下通过两个新的html5技术sencha touch 和phonegap来开发android应用。
首先，众所周知，sencha touch是结合了extjs和jquery mobile这两个javascript神器而开发的一个js库，其诞生的目的就是为了使webapp成为nativeapp，甚至使其更像nativeapp，通过html5，javascript，css能够大大地缩短开发移动应用的周期，而且html的灵活性和绚丽是java和object-c所不能媲美的。
然而，想让html进入移动终端，并不是一件易事，首先平台的差异无疑是一堵高大的围墙。因此，phonegap应运而生，顾名思义，phonegap目的就是消除不同移动平台的差异，同时消除webapp与nativeapp的差异。phonegap相信很多人都用过，我也不例外，但是一直都是用它来为sencha touch打包，这确实有点大材小用，因为phonegap的api相当犀利，例如加速度传感器，照相机，振动器，文件操作等等，这些本来js都是无法实现的，但phonegap早已帮我们做好了javascript和本地代码的接口。
好了，现在我通过一个文件浏览器的例子来说明一下如何利用sencha touch和phonegap来开发本地应用。
首先写好sencha tocuh的代码，这里我就不多说，大家可以参考sencha官网的sencha touch API，这里用了一个container，其布局为card，动画为slide，有两个item，一个是home主页，另一个是文件浏览器fileList。
好，大家应该发现，为什么fileList里面没有东西？这是因为我是用pc的浏览器打开的，所以phonegap的函数根本没有执行。但如果我把它打包到手机中，文件列表就会出现，不错，phonegap就是如此神奇。
图上完后，开始讲代码了，从fileList这个View讲起，fileList定义如下:
Ext.define('xanxus.view.fileList',{
extend:'Ext.Panel',
xtype:'fileList',
config:{
// fullscreen:true,
layout:{
type:'vbox',
// align:'center',
pack:'center'
},
defaults:{
flex:1
},
items:[
{
xtype:'titlebar',
title:'选择要阅读的pdf',
docked:'top'
},
{
xtype:'label',
id:'currentPath',
html:'当前位置是：'
},
{
xtype:'button',
text:'返回首页',
action:'returnHome',
ui:'action',
// width:'30%',
docked:'bottom'
}
]
}
})很清楚地看到，fileList里面包含titlebar，label显示当前路径和一个返回首页的button，但是我并没有创建一个List，这是因为我在controller里动态地控制增加和删除list，而list定义如下：
fileStore=Ext.create('Ext.data.Store',{
fields:[{name:'fileName',type:'string'},{name:'fileIcon',type:'string'}],
sorters:'fileName'
});fileList = Ext.create('Ext.dataview.List', {
store:fileStore,
styleHtmlContent:true,
itemTpl:'<img src="resources/images/{fileIcon}.png" alt="{fileIcon}"/><strong>{fileName}</strong>',
flex:9,
listeners:{
itemtap:function (view, index, target, record, e, eOpts) {
itemName = record.get('fileName');
if (itemName == "...上一级") {
parentPath = currentPath.substring(0, currentPath.lastIndexOf('/'));
parentName = parentPath.substring(parentPath.lastIndexOf('/') + 1);
parentEntry = new DirectoryEntry(parentName, parentPath);
currentPath = parentPath;
dirReader = parentEntry.createReader();
dirReader.readEntries(getFiles, onError);
}
else {
parentEntry = new DirectoryEntry(itemName, currentPath + '/' + itemName);
fileType = itemName.substring(itemName.lastIndexOf('.') + 1);
if (parentEntry.isDirectory && fileType != "pdf") {
currentPath = currentPath + '/' + itemName;
dirReader = parentEntry.createReader();
dirReader.readEntries(getFiles, onError);
}
//如果是pdf文件则交给pdf插件处理
else {
// window.plugins.message.Toast(onSuccess, onError, fileType);
pdfPath = currentPath.substring(currentPath.indexOf(':') + 3);
pdfPath = pdfPath + '/' + itemName;
window.plugins.pdfView.showPdf(onSuccess, onError, pdfPath);
}
}
}
}
});看到这里大家应该知道我是干什么了，我这个文件浏览器，是为了找出文件系统中的pdf文件，所以这里有一个我自己写的pdf插件，这也是phonegap强大之处，因为如果你在开发时觉得js和phonegap的功能不能满足自己应用时，可以开发出自己的phonegap插件，而关于如何制作插件，在我下一篇文章中会讲到。好，现在首先来看看phonegap的file类，这里我用到的是DirectoryEntry，该对象代表文件系统中的一个目录，以及DirectoryReader，该对象包含目录中所有的文件和子目录的列表对象，可通过DirectoryEntry的createReader()创建，从而通过其readEntry方法找出该目录下所有的子文件和目录，该方法参数分别是成功和失败的回调函数。getFiles为成功的回调函数，参数为一个包含FileEntry和DirectoryEntry的对象数组。代码如下：
function getFiles(entries) {
//把当前fileList里的记录删除掉
fileList.getStore().removeAll();
showPath = "当前位置是：" + currentPath.substring(currentPath.indexOf(':') + 3);
Ext.getCmp('currentPath').setHtml(showPath);
for (var i = 0; i < entries.length; i++) {
//文件夹显示
if (entries[i].isDirectory) {
fileList.getStore().add({
'fileName':entries[i].name,
'fileIcon':'folder'
})
}
else {
fileName = entries[i].name;
fileType = fileName.substring(fileName.lastIndexOf('.') + 1);
//pdf文件才显示
if (fileType == "pdf") {
fileList.getStore().add({
'fileName':fileName,
'fileIcon':'pdf'
})
}
}
}
//加入上一级项目
if (currentPath != 'file:///mnt/sdcard') {
fileList.getStore().insert(0, {
'fileName':'...上一级',
'fileIcon':'upfolder'
})
}
}
//插入当前路径下的文件列表
container.items.items[1].add(fileList);
}
})好了，一个文件浏览器制作完成，但是如何打包到移动终端里呢？根据phonegap官网的开始指导，我们首先要把phonegap的库加载，phonegap的库包括js和jar，可以到以下地址下载：phonegap与sencha touch的js库，phonegap1.8的java库。
然后，我们通过以下语句调用phonegap的file类：
document.addEventListener("deviceready", onDeviceReady, false);function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFSuccess, onError);
}function onFSuccess(fs) {
fileSystem = fs;
currentPath = fileSystem.root.fullPath;
currentPathName = currentPath.substring(currentPath.lastIndexOf('/') + 1);
dirReader = fileSystem.root.createReader();
dirReader.readEntries(getFiles, onError);
}首先注册一个时间监听器，为加载phonegap库准备，然后我们请求android的文件系统，requestFileSystem，第一个参数为sdcard的根目录，第三个参数是成功请求的回调函数，该函数的参数是phonegap里面的FileSystem对象，我们可以通过fileSystem.root得到一个sdcard根目录的DirectoryEntry对象，然后跟前面一样，对该目录下的子文件和子目录进行查找。
至此，我们的文件浏览器已经开发完成了，全部代码可以到以下地址下载：http://download.csdn.net/detail/xanxus46/4417216