Sencha Touch 2入门教程

1.什么是Sencha Touch？

Sencha Touch让您能够快速、轻松地创建基于HTML5的移动应用程序，在Android、iOS和黑莓设备中工作，并运行在浏览器中与本地应用程序一致的体验。

 

2.开始

首先，你需要从Sencha网站下载免费的Sencha Touch 2 SDK和SDK工具，你还需要：

在你的计算机中运行的本地web服务器

一个现代浏览器，建议使用Chrome或Safari。

如果你在Windows中运行IIS，请注意您必须添加MIME类型application/x-json后Sencha Touch才可以正常工作，相关信息详见：http://stackoverflow.com/a/1121114/273985

 

3.安装

首先, 将SDK zip文件解压到你的项目目录，通常，这个文件夹在你的HTTP server中能够访问。例如，你应该能够从您的Web浏览器访问到http://localhost/sencha-touch-2.0.0-gpl和Sencha Touch文档。

您还需要进行SDK工具安装。 SDK工具将Sencha命令行工具添加到系统路径，这样就可以产生一个新的应用程序模板，其中包括。要检查您是否已经安装了SDK中的工具，改变您的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.
...

注意：您使用Sencha命令时，必须在下载的SDK目录或生成的Touch应用程序目录内。

 

4.生成你的第一个应用

现在用你安装的Sencha Touch和SDK工具，来生成应用程序。确保你依然在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
...

这将产生一个Sencha Touch骨架应用程序命名空间的GS变量（入 门），位于在目录/ GS（Sencha Touch SDK目录的上一层）。骨架应用程序中包含所有文件，您需要创建一个Touch应用程序，包括默认 index.html，复制Touch SDK、CSS、图像和配置文件到本地应用程序包内。

 

我们检查，你的应用程序是否已经成功生成可以在Web浏览器中打开它。假设你在Web根目录文件夹中提取的SDK，你应该能够访问http://localhost/GS和默认的应用程序：

5.探索代码

使用你喜欢的IDE或文本编辑器打开GS目录。目录结构看起来像这样：

这里的每个文件和目录的描述：

• app-目录，其中包含您的应用程序的模型，视图，控制器和存储。

• app.js-主要的Javascript是您的应用程序的入口点。

• app.json-应用程序的配置文件 - 通过Builder创建您应用程序一个压缩后的版本。

• index.html-应用程序的默认HTML入口文件

• packager.json-该配置文件使用Packager创建你的应用程序的iOS和Android原生版应用程序商店。

• resources-应用程序资源目录，其中包含CSS和图像

• sdk-Sencha Touch SDK。你不需要更改此文件夹的内容。

 

在编辑器中打开app.js，应用程序的主入口点。

launch function是应用程序的入口点。在默认的应用程序中，我们需要首先隐藏应用程序的加载指示器，然后创建一个实例，我们的主视图，并把它添加到Viewport。

 

Viewport是卡布局，您可以将组件添加到您的应用程序。默认的应用程序添加主视图Viewport的，所以它在屏幕上是可见的。让我们来看看在主视图里面的代码。

 

在代码编辑器中打开app/view/Main.js 编辑第10行代码:

title: 'Home Tab'

现在修改第19行代码:

title: 'Woohoo!'

另外, 修改22-26行代码:

html: [
    "I changed the default <b>HTML Contents</b> to something different!"
].join("")

现在刷新浏览器中的应用程序然后观察有什么改变:

6.下一步

下一步是按照入门应用指南，这建立在你刚刚做了什么，并引导您在15分钟内创建一个简单但功能强大的应用程序。您也可以按照本指南的视频。

如果你想跳过前面的框架，我们建议您查看下面的指南和资源获取更详细的信息：

Guides 指南

    Components and Containers 组件和容器

    Intro to Applications 应用程序简介

    The Layout System 布局系统

    The Data Package 数据包

    What's New in Sencha Touch 2 Sencha Touch 2新功能

Application Examples 应用程序实例

    Kitchen Sink 

    Twitter

    Kiva

Component Examples 组件实例

    Carousel 滑动

    Forms 表单

    Date Picker 日期选择器

 

Sencha Touch 2官方文档地址：http://docs.sencha.com/touch/2-0/#!/guide/getting_started

原创翻译，转载请注明原文链接：http://www.9it.me/article-177.html