Sencha Touch快速入门(译)
2024-09-08 23:47:49
翻译自:http://www.sencha.com/learn/sencha-touch-quick-start/
1、下载Sencha Touch SDK——下载链接
2、安装Safari或Chrome——IE不适合测试Sencha touch application,Sencha只在WebKit-based的浏览器或设备上运行。
3、安装测试服务器——虽然Sencha可以在客户端直接运行,但服务器端的功能更加齐全。
IIS或XAMPP等软件均可使用
4、解压Sencha Touch SDK
解压或拷贝Sencha到C:\xampp\htdocs目录下,并重命名为touch
现在可以进行测试了: http://localhost/touch
5. 安装Android SDK(可选)
如果想创建直接的AVD(Android Virtual Device),可以在本地机器上安装Android SDK
6. 在真实设备上测试代码(可选)
- 确保你的计算机没有运行任何防火墙软件,阻塞远程客户(remote client)访问你的web server.
- 运行DOS命令(cmd)ipconfig查询你的IP地址,用该IP地址代替localhost
这样你就能使用你的真实设备(手机)访问服务器了。
你可能会遇到如下安全问题:
解决方法:
打开C:\xampp\apache\conf\extra中的httpd-xampp.conf文件,在末尾找到
<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
Order deny,allow
Deny from all
Allow from 127.0.0.0/8
ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var
</LocationMatch>
修改为
<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
Order deny,allow
Deny from all
Allow from all
ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var
</LocationMatch>
停止并重启Apache,这时候就可以看到
7. 开始开发Sencha程序
你可以在 /touch/examples找到官方示例代码,
在GitHub上也有附有完整说明文档的示例,如:
- Teagrams: Joe McCann's 'first app', demonstrating how to pull simple data from Instagram in a tablet app. Try it now, and read the tutorial.
- CityBars: using Yelp data for cities' business listings. Try it now.
- Roookies: A simple, themable app that pulls images and data from the Dribbble service. Try it now, and read the tutorial.
- Mondrian: demonstrating how a single application can work on both phone and tablet devices.Try it now, and read the tutorial.
- World Data: using Touch Charts to display world economic data. Try it now.
- Offline apps: An app that demonstrates how to take resource and third-party data offline for the when the device is disconnected. Read the tutorial.
- PhoneGap Contacts: using device APIs to get access to device contact information. Read the tutorial.
8. 第一个Sencha Touch程序
- 在你的服务器文件夹中创建新文件夹myapp和子目录lib,拷贝SDK文件(即touch文件夹)到lib中
- 创建index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<script src="app/app.js" type="text/javascript"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
</html> - 创建app文件夹,在该文件夹中创建app.js文件
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen: true,
dockedItems: [{xtype:'toolbar', title:'My First App'}],
layout: 'fit',
styleHtmlContent: true,
html: '<h2>Hello World!</h2>I did it!'
});
}
});整个项目结构如下图
在浏览器或emulator中运行
帮助:
- Tutorials and FAQs in the sencha.com Learn Section.
- Online API Documentation, also available in the
/docs
URL of your local SDK.(你本地的SDK帮助文档) - Sencha Touch Forums - populated by our huge & helpful community.
最新文章
- ASP.NET Core 中文文档 第三章 原理(17)为你的服务器选择合适版本的.NET框架
- LINQ系列:Linq to Object转换操作符
- Android下读取logcat的信息
- T24基础-基本命令(1)
- 从scrapy使用经历说开来
- 用计算器计算“异或CRC”
- 集成骨骼动画Spine的几点经验
- 四 AndEngine 画线
- dropdownlist分页
- jackson学习----解析豆瓣的图书信息
- 评价早期SaaS创业公司时,投资人在关注什么?(是否有机会发展成一个平台,长期的护城河)
- HDU 2830:Matrix Swapping II(思维)
- html标签默认样式整理
- C#小知识点记录,对象的深拷贝
- cas4.2.7 取消https
- 版本控制——TortoiseSVN (3)多版本发布
- Android中Snackbar的介绍以及使用
- JVM基础系列第13讲:JVM参数之追踪类信息
- LeakCanary监测内存泄漏的原理
- Python - 网络爬虫(Web Scraping)