开始Sencha Touch 2之旅 -- Sencha Touch 官方指南系列
2016-06-20 10:59
501 查看
Sencha Touch是什么?
Sencha Touch (以下简称ST)能够帮助你快速地构造出基于HTML5的手机应用。通过ST构造出来的程序有着与原生应用一致的用户体验,目前已全面支持Android、IOS、黑莓这些主流平台。
准备工作
您不需要太多的准备。只需要:一个免费的Sencha Touch SDK。
一个本机的web服务器。
一个支持HTML5的浏览器(推荐使用Chrome和Safari)。
首先,下载最新的Sencha Touch SDK并解压至您的Web服务器根目录。如果您没有Web服务器,或者您不确定是否有,我们建议您安装一个简单的,如:WAMP和MAMP。
完成上述工作后,只需要用浏览器打开http://localhost/sencha-touch-folder,你就能看到ST的欢迎界面了。一切OK的话,我们就可以用ST来打造第一个应用程序了。
第一个程序
想让ST应用最高效地运行,请参照我们的示例进行开发。这是个约定,帮助我们写出易维护的程序,这在团队开发时尤其重要。第一步,创建一个文件夹来存放您的应用程序。这里面你至少需要包含以下文件:
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"> <script type="text/javascript" src="touch/sencha-touch-all.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body></body> </html>
这大概是您这辈子所写过的最简单的HTML页面了。它仅仅引入了ST(框架的js文件和css文件)和您自己的app.js。注意,body标签的内容为空 - ST将会自动帮我们渲染它。接下来,让我们来看看app.js文件中的内容。我们仍然从最简单的例子入手,只是弹出一个警告对话框:
Ext.application({ name: 'Sencha', launch: function() { alert('launched'); } });
怎么样,简单吧。接下来让我们启动Safari(或者Chrome),看看他是否如我们预期的一样。(或者点击代码左侧的眼睛图标来查看运行的效果)。
到目前为止,这个程序什么也干不了。但警报消息的弹出意味着ST已经正确地被加载并运行了。我们开始着手构建界面:一个TabPanel。TabPanel是一个标签式的界面,他允许你在多个页面之间浏览。在这里,我们只生成一个页面 - 主页(Home page):
Ext.application({ name: 'Sencha', launch: function() { Ext.create("Ext.TabPanel", { fullscreen: true, items: [ { title: 'Home', iconCls: 'home', html: 'Welcome' } ] }); } });
现在,TabPanel已经显示在屏幕上了,但是我们的主页,内容可以更丰富一些。把标签放在顶部有点不大好看,主页按钮似乎也有些单调。让我们动手吧,修改tabBarPosition配置项并添加一些HTML内容:
Ext.application({ name: 'Sencha', launch: function() { Ext.create("Ext.TabPanel", { fullscreen: true, tabBarPosition: 'bottom', items: [ { title: 'Home', iconCls: 'home', html: [ '<img src="http://staging.sencha.com/img/sencha.png" />', '<h1>Welcome to Sencha Touch</h1>', "<p>You're creating the Getting Started app. This demonstrates how ", "to use tabs, lists and forms to create a simple app</p>", '<h2>Sencha Touch (2.0.0pr1)</h2>' ].join("") } ] }); } });
到目前为止,我们已经有了一些HTML内容了,但不大好看(点击预览按钮查看代码示例)。为了使它更好看,我们只要给panel添加cls配置项即可。只是增加了一个CSS类,就搞定了。这里CSS是定义在examples/getting_started/app.css文件中的。添加了CSS之后,我们的主页就变成了这个样子:
Ext.application({ name: 'Sencha', launch: function() { Ext.create("Ext.TabPanel", { fullscreen: true, tabBarPosition: 'bottom', items: [ { title: 'Home', iconCls: 'home', cls: 'home', html: [ '<img src="http://staging.sencha.com/img/sencha.png" />', '<h1>Welcome to Sencha Touch</h1>', "<p>You're creating the Getting Started app. This demonstrates how ", "to use tabs, lists and forms to create a simple app</p>", '<h2>Sencha Touch (2.0.0pr1)</h2>' ].join("") } ] }); } });
现在我们已经有了一个体面的主页,接下来我们稍微做一些扩展。我们希望在一个单独的选项卡显示我们的最新博客文章列表。我们先用虚拟的数据 - 在这里我选取了几个我最喜欢的来自http://sencha.com/blog的职位。关于List的代码我们写在"Home"选项卡下方。(点击预览按钮运行代码示例)
Ext.application({ name: 'Sencha', launch: function() { Ext.create("Ext.TabPanel", { fullscreen: true, tabBarPosition: 'bottom', items: [ { title: 'Home', iconCls: 'home', cls: 'home', html: [ '<img width="65%" src="http://staging.sencha.com/img/sencha.png" />', '<h1>Welcome to Sencha Touch</h1>', "<p>You're creating the Getting Started app. This demonstrates how ", "to use tabs, lists and forms to create a simple app</p>", '<h2>Sencha Touch (2.0.0pr1)</h2>' ].join("") }, { xtype: 'list', title: 'Blog', iconCls: 'star', itemTpl: '{title}', store: { fields: ['title', 'url'], data: [ {title: 'Ext Scheduler 2.0', url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'}, {title: 'Previewing Sencha Touch 2', url: 'sencha-touch-2-what-to-expect'}, {title: 'Sencha Con 2011', url: 'senchacon-2011-now-packed-with-more-goodness'}, {title: 'Documentation in Ext JS 4', url: 'new-ext-js-4-documentation-center'} ] } } ] }).setActiveItem(1); } });
我们回头再来添加点击这些List项的逻辑。文章的最后,我们再来添加一个联系表格。我们的最后一个tab,包含的是一个FromPanel和一个FieldSet:
//We've added a third and final item to our tab panel - scroll down to see it Ext.application({ name: 'Sencha', launch: function() { Ext.create("Ext.TabPanel", { fullscreen: true, tabBarPosition: 'bottom', items: [ { title: 'Home', iconCls: 'home', cls: 'home', html: [ '<img width="65%" src="http://staging.sencha.com/img/sencha.png" />', '<h1>Welcome to Sencha Touch</h1>', "<p>You're creating the Getting Started app. This demonstrates how ", "to use tabs, lists and forms to create a simple app</p>", '<h2>Sencha Touch (2.0.0pr1)</h2>' ].join("") }, { xtype: 'list', title: 'Blog', iconCls: 'star', itemTpl: '{title}', store: { fields: ['title', 'url'], data: [ {title: 'Ext Scheduler 2.0', url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'}, {title: 'Previewing Sencha Touch 2', url: 'sencha-touch-2-what-to-expect'}, {title: 'Sencha Con 2011', url: 'senchacon-2011-now-packed-with-more-goodness'}, {title: 'Documentation in Ext JS 4', url: 'new-ext-js-4-documentation-center'} ] } }, //this is the new item { title: 'Contact', iconCls: 'user', xtype: 'formpanel', url: 'contact.php', layout: 'vbox', items: [ { xtype: 'fieldset', title: 'Contact Us', instructions: '(email address is optional)', items: [ { xtype: 'textfield', label: 'Name' }, { xtype: 'emailfield', label: 'Email' }, { xtype: 'textareafield', label: 'Message' } ] }, { xtype: 'button', text: 'Send', ui: 'confirm', handler: function() { this.up('formpanel').submit(); } } ] } ] }).setActiveItem(2); } });
在第三个tab中,我们添加了一个表格,其中包含三个字段和一个提交按钮。我们使用了VBOX布局 布局来定位下方的提交按钮。fieldset本身配置了一个title 和一些 instructions(提示)。提示。最后,我们用了一个 textfield,一个emailfield 还有一个 textareafield.
你可以在examples/getting_started文件夹下找到本示例的文章代码。
更多内容
现在,我们已经搞定了一个非常基本的应用程序,是时候探索框架的其他内容了。在这里,我们提供一些开发指南和组件的实例供大家学习。并且随着Beta版的发展,我们也将会推出更多的指南用以构建较大规模的应用程序。本文译自Sencha Touch 2 的官方指南。
翻译者:威老。
鉴于本人英语水平所限,难免会有些纰漏,欢迎大家指出。
转载请注明作者及原文地址,谢谢。
更多内容请关注 移动WEB开发社区
Sencha
Touch 2 官方指南翻译帖 导航
转载请注明原文地址
作者:威老
博客地址:http://www.cnblogs.com/weilao
相关文章推荐
- 【Java】form表单提交中文乱码
- WebViewJavascriptBridge详细使用
- 总冠军-克里夫兰骑士
- .NET Core HtmlAgilityPack HTML解析利器
- Net线程安全集合
- python 读取机器信息
- ORA-01591错误解决处理
- 打印数组,里面字符串显示中文的方法!
- 账号密码登录,还是手机快捷登录疑问
- selenium webdriver 学习总结-Selenium API常用(四)
- 日志式文件系统
- 跳台阶问题
- 匿名与局部类
- github项目解析(六)-->自定义实现ButterKnife框架
- 【QTP】自动关闭msgbox
- 科学作息时间表
- 制作与使用静态链接库(.lib)文件
- 20160620001 FileUpload控件获取上传文件的路径
- 怎么把PDF转换成word文档编辑
- selenium webdriver 学习总结-JUnit4 入门(三)