Sencha Touch快速入门（译） - Joanna Qian

Sencha Touch快速入门（译）

翻译自：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.

posted on 2013-06-27 23:49 Joanna Qian 阅读(430) 评论(0) 编辑收藏举报

刷新页面返回顶部