Sencha Touch是第一个HTML5移动开发框架，Sencha Touch~够快速地构造出基于HTML5的手机应用，通过它构造出来的程序有着与原生应用一致的用户体验，目前该框架兼容Android、iOS、BlackBerry这些主流手机平台。ExtJS是用于创建网络前端用户界面的，它是与后台技术无关的前端Ajax框架，其功能丰富，无论是界面之美，还是功能之强都高居榜首。现在ExtJS整合JOTouch等推出了适用于前沿Touchweb的Sencha Touch的框架，该框架是第一个基干HTML5的Mobile App框架，同时ExtJS更名为Sencha。Sencha Touch可以让你的Web App体现出美妙的用户界面和丰富的数据管理，它基于最新的HTML 5和CSS3的WEB标准，全面兼容Android、AppleiOS、BlackBerry设备。在个人机上，它兼容webkit为核心的浏览器，如：chrome、safari、maxthon等。
1 Sencha Touch特性介绍
(1)基于最新的WEB标准，HTML5，CSS3，JavaScript。整个库在压缩成gzip后大约只有80KB，通过禁用一些组件还会使它更小。
(2)支持世界上最好的设备，Beta版兼容Android和iOS，Android上的开发人员还可以使用一些专为Android定制的应用。
(3)增强的触摸事件，在touchstart、touchend等标准事件基础上，增加了一组自定义事件数据集成，如tap、swipe、pinch、rotate等。
(4)数据集成，提供了强大的数据包，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。
2 做好准备工作
首先，我们下载最新的Sencha TouchSDK并解压至Web服务器根目录。下载Sencha Touch 2。O的地址：http：／／cdn．sencha．io／touch／sencha-touch-2．0．0-pr1．zip。查看2．0文档：http：／／docs．sencha．corn／touch／2=0／。Sencha Touch 2．0 中所有被广泛使用的类在API目录中都有，在这些文档里面还有很多演示示例，并可以修改它们。文档中还包括所有组件，你可以清楚的了解这些组件。该文档还详细解释了Layouts，Components and Classes，如何使用tab panels，forms and carousels。SenchaTouch 2．0 的新功能可去这里了解：
http：／／html5mobi．gotoip 1．corn／discussion／6 1／sencha—tOuch一2一what—s—new—m—sencha—touch-2．0。
总而言之，需要一个免费的SenchaTouch SDK，一个本机的web服务器和一个支持HTML5的浏览器。如果你没有web服务器，建议安装wAMP或者MAMP。完成上述工作后，只需要用浏览器打开http：／／localhost／sencha-touch-folder，你就能看到欢迎界面了。
3 通过网络学习示例
在http：／／extjs．org．cn／taxonomy／term／261里，有一个《使用sencha touch开发新浪微博iPhone界面》的示例，看了以后相信不少对sencha touch感兴趣的人会为Javascript能开发出这样的手机Web App应用而感到兴奋。Sencha Touch提供相当多的原生UI组件，以满足手机上的UI设计。这个示例以iPhone界面作为参考，使用SenchaTouch开发设计模仿iPhone界面：
以iPhone的界面目标作为参考对比Sencha Touch实现的界面(如表1)：
具体实现见：http：／／www．imsankyu．com／archives／sencha——touch——develop——sina——weibo——iPhone——page／再来看一个示例：
首先看index．html文件：
<!D0CTYPE html>
<html>
<head>
<title>Getting Started<／title>
<link rel=”stylesheet”href=”touch／
resources／css／sencha—t0uch．css” type=”
test／css”>
<script type=”text／javascript”src=”
touch ／sencha-touch-al1．js’’><／script>
<script type=”teXt／javascript”src=”
app．js”><／script>
<／head>
<body><／body>
<／html>
它引入了Sencha Touch框架的js文件和CSS文件和代码文件：app．js，body标签的内容为空。接下来看app．js文件中的内容，这里只是弹出一个警告对话框：
Ext．application({
name：’Sencha’．
1aunch：function(){
alert(‘launched’)；
}})；
接下来我们启动Safari，看看他是否如我们预期的一样，或者点击代码左侧的“眼睛”图标来查看运行的效果。警报消息的弹出意味着Sencha Touch已经正确地被加载运行了。现在开始构建界面：一个TabPanel，TabPanel是一个标签式的界面，允许你在多个页面之间浏览：
Ext．application({
name：’Sencha’，
launch：function(){
Ext．create(“Ext．TabPanel”，{
fullscreen：true，
items：[
{
title：’Home’，
iconCls：’home’，
html：’W elcome’
}}})；}})，
现在，TabPanel已经显示在屏幕上了，但把标签放在顶部有点不大好看、主页按钮似乎也有些单调、还没有任何内容。下面修改tabBarPosition配置项并添加一些HTML内容：
Ext．application({
name：’Sencha’，
launch：function(){
Ext．create(“Ext．TabPanel”，{
fullscreen：true，
tabBarPosition：’bottom’，／／ tabBar
设在下方
items：[
{
title：’Home’，
iconCls：’home’， ／／添加flTab的图标html：{ ／／添加内容
‘<img src=http：／／staging．sencha．
com／img／ sencha．png ／>’，
‘<hl>W elcome to Sencha Touch<／
hl> ’，
“<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．Opr1)<／
h2> ’
]．join( )}}})；}})；
到目前为止，我们已经有了一些HTML内容了，调整一下格式。设置HTML内容的样式，只要给panel添加cls配置项即可。下面再深入一下，我们希望在一个单独的选项卡显示我们的内容，在这里先选用一些虚构的数据。
Ext．application({
name：’Sencha’，
launch：function(){
Ext．create(“Ext．TabPanel”，{
fullscreen：true，
tabBarposition：’bottom ’，
items：[
{
title：’Home’，
iconCls：’home’，
cls：’home’。
html：[
’<imgwidth=”65％ ”src=”http：／／
staging．sencha．com／img／sencha．png”>’
’<h1>Welcome to Sencha Touch<／
hl> ’。
”<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-upgradin’}
{title：’Previewing Sencha Touch 2’，
url：’sencha—touch一2一wha’}
{title：’Sencha Con 2011’，url：’
senchacon一20 1 1一now-packen-w’}
{title：’Documentation in Ext JS 4’，
url；’new—ext—js一4一d0cu’}
]}}]
})．setActiveltem(11{{{)，
最后添加一个联系表格，一个tab，包含一个FromPanel和一个FieldSet：
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 ／
> ’，
‘<hl>Welcome to Sencha Touch<／
h1> ’．
“<p>You’re creating the GettingStarted app． This demonstrates how ”
“to use tabs，lists and forms to createa 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：’extscheduler一2—0一upgradin’
{title：’Previewing Sencha Touch 2’，url：’sencha-touch-2-wha’}
{title：’Sencha Con 201 1’，url：’senchacon-201 1一n0w—packen—w’}
{title：’Documentation in Ext JS 4’，ufl：’new—ext—js一4一docu’}
}}
}，{
title：’Contact’，
iconCls：’user。，
xtype：‘formpanel’，
url：’contact．php’，
layout：。vbox ，
items {
xtype：’fieldset。，
title：’Contact Us’，
instructions：。(email address 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，一个emai1field和一个textareafield。
4 结论
Sencha Touch需要有以下文件：一个HTML文件index．html，其中引入SenchaTouch框架以及应用程序文件，一个应用程序文件app．js，它定义主屏幕的图标和程序启动时所需要做的事件，框架文件的副本touch。现在我们看到了已经完成了的非常基本的应用程序，往下可以学习使用框架的其他部分了，网上提供许多开发指南和组件的示例供大家学习，相信随着Beta版的发展，将会有更多的指南为构建不同规模的应用程序而推出。
核心关注：拓步ERP系统平台是覆盖了众多的业务领域、行业应用，蕴涵了丰富的ERP管理思想，集成了ERP软件业务管理理念，功能涉及供应链、成本、制造、CRM、HR等众多业务领域的管理，全面涵盖了企业关注ERP管理系统的核心领域，是众多中小企业信息化建设首选的ERP管理软件信赖品牌。
转载请注明出处：拓步ERP资讯网http://www.toberp.com/
本文标题：用HTML5开发移动应用
相关文章
