第一章开发SenchaTouchApp

开发SenchaTouchApp更多ST资料请访问：、SenchaTouch简介SenchaTouch可以让你的WebApp看起来像NativeApp。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的WEB标准，全面兼容Android和AppleiOS设备。下面是Sencha官方给出的几点特性:1.基于最新的WEB标准–HTML5，CSS3，JavaScript。整个库在压缩后大约80KB，通过禁用一些组件还会使它更小。2.支持世界上最好的设备。Beta版兼容Android和iOS，Android上的开发人员还可以使用一些专为Android定制的主题。3.增强的触摸事件。在touchstart、touchend等标准事件基础上，增加了一组自定义事件数据集成，如tap、swipe、pinch、rotate等。4.数据集成。提供了强大的数据包，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。2、SenchaTouch框架结构先下载SenchaTouch框架下载地址：下面让我们看看下载的包里都有哪些东西。将下载的sencha-touch开发包解压我们可以看到以下文件docs是官方的api文档文件、examples是官方提供的示例程序。主框架这里有四个文件可供选择，sencha-touch.js、sencha-touch-debug.js、sencha-touch-all-debug.js、sencha-touch-all.jsresources文件夹下我们可以看到框架的样式文件（css、css-debug、images、sass、themes），同样，css-debug文件夹下是有便于调试的.css文件。打开文件夹，我们又可以看到（android.css、apple.css、bb6.css、sencha-touch.css），这分别是框架带给我们的四个主题。只会影响界面的显示效果，为了保持显示上的一致，我们可以在面向android的应用上使用android.css而面向iphone的应用，使用apple.css。3、重中之重——你的浏览器开发js的时候，没有什么是比一款优秀浏览器更重要的了。chorme、safari。都是不错的选择。(FireFox不支持SenchaTouch框架)笔者使用的是google的chrome浏览器。没有的话就快去下一个呗。地址给你chorme官网关于chorme浏览器的调试功能，我会在下一篇教程中介绍。4、开发环境Eclipse5、第一个SenchaTouch项目1.首先点击左上角的图标，创建一个新的项目。在弹出的窗口中选择PHPProject。输入Projectname如：HelloTouch，并点击Finish。这样便新建了一个普通的PHP项目。2.开发过程中，我们统一使用方便调试的debug文件。Css文件方面，我们选择了框架默认的sencha-touch.css。直接将sencha-touch-debug.js以及css-debug文件夹拖入File窗口里我们刚建的项目中。这里要注意，拖入文件的时候sencha-touch.css不会随着css-debug文件夹一起加入项目，要另外拖一次。结果如下图所示3.双击打开index.html，在head/head标签之间加入linkrel=stylesheethref=css-debug/sencha-touch.csstype=text/css以及scripttype=text/javascriptsrc=sencha-touch-debug.js/script。接着创建我们自己的js文件，命名为app.js。然后在index.html中引入这个文件，方法跟上面引入sencha-touch-debug.js是一样的。到现在我们得到了这样的一个index.html。!DOCTYPEhtmlPUBLIC-//W3C//DTDHTML4.01Transitional//EN=Content-Typecontent=text/html;charset=UTF-8linkrel=stylesheethref=css-debug/sencha-touch.cssscripttype=text/javascriptsrc=sencha-touch-debug.js/scriptscripttype=text/javascriptsrc=app.js/scripttitleInserttitlehere/title/headbody/body/html4.打开app.js输入我们的程序代码Ext.Loader.setPath({'Ext':'./src'});Ext.application({onReady:function(){Ext.Msg.alert('Hi','HelloLiusir',Ext.emptyFn);}});5.最后，在浏览器输入，运行结果如图所示：更多ST资料请访问：