Sencha Touch之Hello World

最新推荐文章于 2024-09-28 23:59:47 发布

chenlong12580

最新推荐文章于 2024-09-28 23:59:47 发布

阅读量2.4k

点赞数

分类专栏： HTML5 文章标签： stylesheet 浏览器 ui function safari javascript

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

距离上次写日志已经非常之久了，主要是中途有一个期中考试，呵呵大学也有期中考试，这也是我大学最后的考试周了！闲话少说，这次我接着上一次的写，主要是写第一个APP，按照老规矩，应该是Hello World!，已经有一段时间没接触Web 开发了，所以先上官网看看，刚好有这个例子，自己先试着做一遍，慢慢熟悉熟悉，呵呵！

首先必须下载Sencha Touch SDK,这个我们上次已经下载好了，SDK里面包含一些文档，示例等文件，当然，里面最重要的还是我们做开发要用到的两个文件：sencha-touch.js，sencha-touch.css！

接下来我们就来创建这次的工程，首先约定的工程目录为：workspace/helloworld，在它下面新建index.html文件，在它下面建立子目录lib，将SDK中的文件当到lib目录下，这里我们把所有的SDK包含的文件都放在下面，其实并不是所有文件都有用，这时我们第一次写，所以全放进去，等熟悉之后就知道该放哪些文件了！最后的目录应该如下图所示：

打开index.html文件，加入如下内容：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Hello World</title> 

        <script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
        <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /> 

    </head>
    <body></body>
</html>
这个相信大家都能看懂！

这样基本的框架搭建好了，此刻用浏览器浏览index.html文件发现没有任何内容，这是因为我们的
<body></body>标签中没有任何内容，我们一般都用JavaScript文件实现我们的UI和显示的内容。
一般情况下，我们都将自己的Application Code放在单独的.js文件中，然后向上面那样通过link来引用，
但这个hello world实在是太简单了，我们直接添加再index.html文件中，即再上述index.html文件的<body>
</body>标签对中添加如下内容：

<script type="text/javascript"> 

    new Ext.Application({
        launch: function() {
            new Ext.Panel({
                fullscreen: true,
                html: 'Hello World!'
            });
        }
    });

</script>
下面对上述代码做一些说明：

new Ext.Application({
    ...
});
相信很多人对这个结构都很熟悉，这几行的作用就是实例化一个Ext.Application类，我们传递给这个构造器的参数是一个
可以设置属性参数的对象，例如使用者再添加浏览器书签时显示的图标等！
一般情况，我们传递的最重要的参数是当文档完全加载时应用所执行的动作，这就是我们所知道的'launch' 属性，
'launch' 属性应该被定义为一个函数，如下所示：

launch: function() {
    ...
}
我们可以在这个函数里面编写应用所有的UI代码！

new Ext.Panel({
    ...
});
在这个应用中，我们仅仅实例化了一个UI组件：Panel。至于UI组件，我们再接下来的文章中会专门讲解，
然后就给这个Panel组件设置了两个属性，一个是显示的大小：全屏显示；另一个是显示的内容：Hello World
.
好了，到这里基本内容已经结束，我们来看一下效果，推荐使用的浏览器是 Chrome or Safari，
但我只装了FireFox，测试结果如下