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
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
相关推荐
Sencha Touch 2入门教程之MVC 讲解如何使用 Sencha Touch 2 mvc模式来开发一个登录界面
Sencha Touch 2入门教程之MVC例子程序源代码 用Sencha Touch 2 之MVC模式写的一个登录界面的例子
sencha touch中文翻译文档,包含sencha touch入门基础和一些控件的使用说明
在Mac下用Apacha Tomcat拾建Sencha Touch 2 平台。
Sencha Touch入门
适合Sencha Touch刚入门者学习.项目下面的Index才是显示的页面.记得发布,不发布的话是显示不出来的
Sencha Touch 学习入门资料,纯英文版的,如果对英文反感的兄弟,建议不要下载! 但是 这里面的都很基础 英文也很容易理解!
Sencha Touch手机移动开发的入门级教程,主要讲解ST2开发环境的搭建和ExtJS组件的使用及MVC下App的开发。
Sencha Touch getting-started的中文翻译 本文档介绍了如何开始使用Sencha Touch。它说明使用Sencha Touch创建基于触摸设备的Web应用程序的基本步骤。此外,它还提供了用于创建GeoTweets示例应用程序的详细步骤,这...
Sencha touch基于MVC架构的最基础入门程序,只包括包括用户登陆和增删改功能。后台使用.net,登陆账号密码都是a。自己练习时写的,比较适合刚接触sencha touch的人入门参考。
适合入门移动终端的开发利用,sencha touch2是一个跨平台的html5的移动应用开发sdk。
Sencha Architect 2是个可视化的应用构建器,它使用Sencha Touch 2来构建移动应用,使用ExtJS 4来构建桌面应用。关于此软件的学习教程少之又少,终于发现了一个不得了的文档。
Sencha Touch 2.0 Preview 2 正式版 SDK 下载 包括: 所有源代码 构建 HTML API文档 示例
sencha-touch2 mvc简单的示例以及一些基础控件使用demo,使用支持html5的浏览器打开
使用Jasmine进行BDD测试的Sencha Touch 2应用程序 概述 这是一个将Jasmine添加到Sencha Touch 2项目中的实验项目。 不幸的是,Sencha Touch 2似乎尚未集成任何测试框架,因此我试图在不对任何框架(Sensa Touch2和...
sencha 入门资料共20文档 官方翻译文档 本系列文章为翻译文章,翻译自API文档,也是入门级别的文章,请初学者仔细阅读,如果翻译有不妥的地方,请谅解。 解压密码:delta
Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理,全部基于最新的HTML5和CSS3的 WEB标准,全面兼容Android和Apple iOS设备。
Sencha Touch 企业移动应用框架 Marcy(以纽约州最高峰命名)是一个固执己见但思想开放的框架,用于使用 Sencha Touch 构建企业移动应用程序。 入门 这是一个示例安装。 sencha generate app MyApp ~/Desktop/my-...
Sencha_Touch2.0的快速入门.doc