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上也有附有完整说明文档的示例,如:

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中运行

帮助:

 

你可能感兴趣的:(Sencha Touch)