您的位置：首页 > 其它

开始 Sencha Touch 2 之旅之一

2011-12-15 09:55 471 查看
何为Sencha Touch？

Sencha Touch能够帮助你快速地构造出基于HTML5的手机应用。构造出来的程序有着与原生应用一致的用户体验，目前该框架兼容Android、IOS、黑莓这些主流平台。在PC上，兼容的webkit核心的浏览器，如：chrome、safari、maxthon等等。

必要的准备工作：

第一步无需做的太多。只需要做下面的事情：下载一个免费的Sencha Touch SDK；安装一个本机的web服务器；使用一个支持HTML5的浏览器(推荐使用Chrome和Safari)。首先，下载最新的Sencha Touch SDK并解压至Web服务器根目录。如果你没有Web服务器，可以安装WAMP或者MAMP。

完成上述工作后，并且文件已放到正确的目录中，只需要用浏览器打开http://localhost/sencha-touch-folder（或这是web服务所配置的来源地址），你就能看到Sencha Touch的欢迎界面了。如果一切准备就绪的话，我们就可以开始进行应用程序的打造了。

开始打造应用程序

参照sencha touch所提供的示例进行开发，可以获得最佳的性能，帮助我们写出易维护的程序，这在团队开发时尤其重要。

首先：建立一个文件夹来存放应用程序。这里面你至少需要包含以下文件：

index.html - 一个简单的HTML文件，在里面引入ST框架以及应用程序文件。

app.js - 应用程序文件。定义主屏幕的图标和程序启动时所需要做的事情。

touch - ST框架文件的副本。

让我们先从index.html文件下手

<!DOCTYPE html>

<html>

<head>

<title>Getting Started</title>

<link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">

< type="text/java" src="touch/sencha-touch-all.js"></>

< type="text/java" src="app.js"></>

</head>

<body></body>

</html>


这可能是你所写过的HTML页面中最简单的页面了，它的不同点是仅仅引入了Sencha Touch（框架的js文件和css文件）和自己写的代码文件：app.js。注意，body标签的内容为空 - ST将会自动帮我们渲染它。接下来，让我们来看看app.js文件中的内容。我们仍然坚持从最简单的例子入手的原则，只是弹出一个警告对话框：

Ext.application({

name: 'Sencha',

launch: () {

alert('launched');

}

});

这就是我们开始时所做的简单工作。接下来用Safari(或者Chrome)来验证，看看是否如预期的一样。(或者点击代码左侧的眼睛图标来查看运行的效果)。

迄今为止，这个程序什么也干不了。但警报消息的弹出意味着Sencha Touch已经正确地被加载并运行了。现在开始着手构建界面：一个TabPanel。TabPanel是一个标签式的界面，允许你在多个页面之间浏览。在这里只生成一个页面 - 主页(Home page):

Ext.application({

name: 'Sencha',

launch: () {

Ext.create("Ext.TabPanel", {

fullscreen: true,

items: [

{

title: 'Home',

iconCls: 'home',

html: 'Welcome'

}

]

});

}

});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航