jQuery MiniUI,快速开发WebUI界面

Sencha Touch 2 快速入门


什么是Sencha Touch?

Sencha Touch使得你可以便捷地创造一个基于HTML5的手机应用,支持Android、iOS和黑莓等设备,并且在浏览器中创造原生APP般的体验。

你需要准备好

首先,你需要下载免费的Sencha Touch 2 SDK 和 SDK Tools (或者Sencha Cmd ) 。你还需要:
一个本地的web server
现代浏览器;推荐 Chrome 和 Safari (请不要用IE6!!)
如果你是在Windows上使用IIS,请记得添加 application/x-json 这个MIME Type,否则Sencha Touch不能正常工作。你可以从这里知道应该如何做:
http://stackoverflow.com/a/1121114/273985(很抱歉我并不使用IIS,没有对这个链接中的方法进行测试)。

安装

首先,把SDK压缩包解压到你的项目目录。最好,这个目录可以被你的HTTP服务器访问。比如,你可以从你浏览器访问 http://localhost/sencha-touch-* 来访问Sencha Touch的文档。
你还需要运行SDK Tools( Sencha Cmd,注意SDK Tools 和 Sencha Cmd只需要安装一个,在我的机器上,Sencha Cmd工作更加正常)安装程序。SDK Tools会在你的PATH环境变量中增加sencha命令行工具,你可以用它来产生一个全新的模板应用。为了检查你的SDK tools是否安装好,切到你的Sencha Touch目录,输入sencha命令。比如:

$ cd ~/webroot/sencha-touch-2.0.0-gpl/
$ sencha
Sencha Command v2.0.0 for Sencha Touch 2
Copyright (c) 2012 Sencha Inc.
......

注意:你必须在下载好的SDK文件夹或者产生好的Touch app目录中使用sencha命令

产生你的第一个应用

现在,你有了Sencha Touch和安装好的SDK tools,于是可以开始生成一个应用了。保证你仍然在Sencha Touch SDK目录下,输入下列命令:

$ sencha generate app GS ../GS
[INFO] Created file /Users/nickpoulden/Projects/sencha/GS/.senchasdk
[INFO] Created file /Users/nickpoulden/Projects/sencha/GS/index.html
[INFO] Created file /Users/nickpoulden/Projects/sencha/GS/app.js
...

这将会产生一个叫做GS的Sencha Touch应用骨架,放在../GS目录下。骨架应用中包含了所有你创建一个Touch应用所需要的东西,包括默认的index.html,一份Touch SDK的拷贝,CSS,图片和打包你的应用所需的配置文件。

让我们检查一下你的应用是否生成成功。假设你的SDK位于webroot文件夹,你应该能从http://localhost/GS看到默认app:

浏览代码

使用你最喜欢的IDE或者文本编辑器打开GS文件夹。文件夹结构如下:

下面有一个对于每个文件和文件夹的简介:

  • app - 放着模型(Models),视图(Views),控制器(Controllers)和存储(Stores)的目录。
  • app.js - 主Javascript入口。
  • app.json - 配置文件,用来创建你的应用的缩小(minified)版本。
  • index.html - 你的应用的HTML文件。
  • packager.json - 配置文件,用来打包成iOS和Android应用。
  • resources - CSS和图片。
  • sdk(touch) - Sencha Touch SDK的拷贝。你不应该修改这个文件夹中的内容。

打开app.js,你应用的主入口点。

launch函数是你应用的入口点。在默认应用下,他将会先隐藏loading画面,然后创建一个Main视图的实例,并把它加入Viewport。
Viewport采用的卡片布局,让你可以添加元件到目录中。默认应用添加Main视图到viewport,然后我们看看Main视图的代码吧。

打开app/view/Main.js,我们可以修改title属性:

title: 'Home tab'
title: 'Woohoo!'

我们还可以修改页面内容:

html: [
   "我<b>修改</b>了默认页面!!"
].join("")

现在,刷新你的浏览器,看看你的修改结果。

作者:
原文: http://www.verydemo.com/demo_c131_i9067.html