您的位置：首页 > 其它

Sencha Touch 1.1.1 之初接触（一）怎样入手并写一个漂亮的demo[转]

2013-03-31 14:28 337 查看

转自：

　　/article/5649166.html

想到哪里写到哪里，因为是学习过程，可能有不对的地方，以后会随时回头修改。本文面向的是Sencha Touch 1.1.1版本。

1、Sencha Touch开发与普通web开发有什么区别？

Sencha Touch（为方便起见，本文后面一律简写为ST）页面的开发跟普通html页面相比，总体来说没有本质上的区别，只是引入了对html5和CSS3的支持，然后提供了对移动设备（iPad/iPhone/Android Mobile/Android Tablet/BlackBerry等）的特殊优化。事实上也正是因为html5和CSS3才使得ST可以实现如此美妙以至于可以媲美Native应用程序的交互效果。

2、特殊的Document标记

ST页面的Document标记比较特殊，在html标签之前，使用如下标签来声明此文档是html5格式：

?
　　

------------------------------------------------

　　博主经营一家发饰淘宝店，都是纯手工制作哦，开业冲钻，只为信誉！需要的亲们可以光顾一下！谢谢大家的支持！
店名：
　　小鱼尼莫手工饰品店
经营:
　　发饰、头花、发夹、耳环等（手工制作）
网店：
　　http://shop117066935.taobao.com/

---------------------------------------------------------------------

继续正题...

　

3、使用ST首先要在html代码的<head>区引入必须的公共CSS和JS文件：

?
需要注意的是，除sencha-touch.css外，ST提供了android.css/apple.css/bb6.css等三个css文件，分别对应android风格/apple风格/黑莓6三种不同的Theme，引用不同的css文件即可实现页面Theme的切换。

4、一个ST应用的通常模样

引入公共文件之后，当然就要编写自己应用程序的脚本了，如我们在大多数ST应用的例子中所见，通常情况下，应用程序脚本是写在单独的js文件中进行调用的（好处可以参见.net编程中code-behind和code-beside的对比），因此，一个常见的ST文档往往大致是这个模样：

?
　　

5、现在，我们关注的焦点将会转移到app.js这个文件了，因为它才是ST页面开发的核心。

通过我们对官网SDK中的Examples和同样出自官网的quick start代码进行分析，发现ST应用首页的js脚本（可以理解为启动程序）常用编写方式有两种：

A、Examples中采用的 —— Ext.setup方式

?
B、quick start中采用的 —— Ext.Application方式

?
由于这里我们只关注ST应用的启动代码，所以具体界面实现代码省略。对于上述两种方式的区别，鄙人暂时无力进行解读，欢迎高手指教。

6、ST如何判断终端设备类型？

我们知道，既然ST是专为移动设备而设计，那么在我们的应用第一次被访问的时候，判断客户端设备的类型是非常重要的，在ST中，我们可以这样判断：

?
当然关于设备类型还有很多其他判断属性，你可以参照ST的文档说明http://docs.sencha.com/touch/1-1/#!/api/Ext.is

7、设计一个漂亮的Demo

好了，几个前提问题基本解决，现在我们尝试写一个比HelloWorld更复杂一些的启动页面，来找一找成就感。先看原型图：



非常简单的一个登陆界面，我们确定使用apple风格的theme，使之更贴近Native的感觉。注：此例只考虑界面的实现，因此使用Ext.Panel控件进行布局设计。

8、一步步实现这个Demo

下面对实现代码按照步步深入的方式进行一下分解说明：

第一步：

?
现在只有一个空容器充满屏幕，里面显示了几个汉字，看演示效果（Android 2.3，下同）



第二步：

?
效果图显示，我们已经有了一个顶部工具栏，显示应用程序的名称



第三步：

?
现在看起来更像样一些了，底部工具栏也已经齐备



第四步：

?
显然这是最复杂的一步，不过只要学得耐心点，一样不成问题



到目前为止，我们的设计意图已经实现，最下面的链接由于屏幕高度问题被盖住了，向上拖动即可显示出来。最后再来一个全屏的效果：



怎么样？还不错吧，是不是很有Native的感觉？如果你喜欢的话，我们还可以换换Theme来看看。

第五步：切换Theme



上面这个是Sencha Touch风格



这个是Android风格



这个是BlackBerry6风格。

Enjoy it！

店名：
　　小鱼尼莫手工饰品店
经营:
　　发饰、头花、发夹、耳环等（手工制作）
网店：
　　http://shop117066935.taobao.com/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航