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.youkuaiyun.com/detail/xanxus46/4417216