使用Sencha Touch构建移动Web应用程序

最新推荐文章于 2021-06-26 16:00:29 发布

cuxiong8996

最新推荐文章于 2021-06-26 16:00:29 发布

阅读量295

点赞数

文章标签： python java 编程语言大数据 linux

原文链接：https://www.ibm.com/developerworks/web/library/wa-senchatouch/index.html

版权

总览

在软件开发世界中，两个重要的趋势变得越来越重要：移动应用程序开发和基于标准HTML5 Web开发。每种开发类型的学习曲线可能都很陡峭。开发本机移动应用程序通常需要具备特定平台和技能的知识，例如iPhone的Objective-C和Android的Java™（这只是两个平台）。由于HTML5是基于标准的，因此最近得到了发展。尽管供应商正在Swift努力以合并并遵守这些早期规范，但HTML5仍不成熟。

Sencha Touch 1.0的最新版本将移动应用程序开发的前沿世界与HTML5 Web开发融合在一起，从而形成了一个用于构建移动Web应用程序的简单易用的框架。在本文中，学习开始使用Sencha Touch框架所需的一切。

Sencha Touch

学习构建移动应用程序（尤其是从Web开发人员的角度来看）可能很麻烦。提供了多种平台供您选择和学习技术。尽管对HTML5的支持Swift增长，但仍未准备好用于复杂的Web应用程序，特别是业务线应用程序。

常用缩写

Ajax ：异步JavaScript + XML
API ：应用程序编程接口
CSS ：级联样式表
HTML ：超文本标记语言
JSON ：JavaScript对象表示法
SDK ：软件开发套件
UI ：用户界面

Sencha Touch将丰富HTML5平台和移动Web应用程序开发结合在一起成为一种愉快的媒介。该框架对开发人员友好，类似于使用Ext JS JavaScript框架。如果您具有中等到高级JavaScript经验，那么Sencha Touch是可以接受的。如果您已经具备JavaScript和CSS开发人员的技能，Sencha Touch也可以立即将您变成移动应用程序开发人员。

Sencha是一家提供核心商业产品的公司，但它也支持开源软件。 Sencha Touch 1.0是免费的，可用于个人和商业用途。

平台支援

WebKit浏览器（包括流行的Apple iOS和Google Android平台）目前支持Sencha Touch。有人可能会认为这种支持还不够—必须支持所有平台，Sencha Touch才能得到认真对待。在移动Web开发领域采用框架时，明智的做法是寻找两件事：平台丰富性和功能丰富性。需要一个框架，该框架以对开发人员友好的方式并且广泛地从HTML5 / CSS3中抽象出最多的东西。在这方面，Sencha非常聪明地支持两个最受欢迎的平台，并利用它们的资源为开发人员提供丰富且易于使用的功能。

你需要知道的

要开始使用Sencha Touch，您需要的是JavaScript语言和CSS的使用知识。如前所述，该框架抽象了您通常从头开始组装的许多功能和样式。

如果您想进一步探索，并可能构建自己的自定义组件或修改自己品牌的样式，则需要更深入HTML5和CSS3技能。有关更多信息，请参见“ 相关主题”部分。

入门

要开始使用Sencha Touch：

从Sencha下载该框架。（请参阅相关主题。）
将内容提取到开发网站的根目录。
考虑将提取的文件夹重命名为通用名称，例如sencha-touch，以便您可以在以后的框架版本中使用相同的文件夹名称，而无需更新引用该文件夹的其他文件。
使用WebKit浏览器（例如Google Chrome），在http：// localhost / sencha-touch / examples /中打开示例页面。尽管您的环境看上去可能略有不同，但是您应该看到类似于图1的屏幕。

图1. Sencha Touch示例

通过构建Sencha Touch应用程序来探索一些框架功能。

使用清单1中的源代码在网站的根目录中创建一个名为index.html的新HTML文件。
清单1.示例HTML5文档
```
<!DOCTYPE HTML>
<html>
<head>
<title>Touch Test</title>
</head>

<body>
</body>
</html>
```
创建单个文件后，您将正式成为HTML5开发人员。顶部的<!DOCTYPE HTML>文档类型是关键。这样可以确保将文档解释为HTML5。
修改清单1中的代码，如清单2所示。
清单2.安装Sencha Touch脚本和样式
```
<!DOCTYPE HTML>
<html>
<head>
<title>Touch Test</title>


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


<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>

</head>

<body>
</body>
</html>
```
上面的代码为Sencha Touch框架添加了CSS和JavaScript文件。您已挂接了这些文件的调试版本，建议将其用于开发目的，因为它们会产生更好的错误消息。要部署，只需将调试版本换成精简版本。您还可以添加自己的自定义CSS文件和JavaScript文件以构建应用程序。

为了使示例简单，请包含一些嵌入式JavaScript代码。首先修改您的代码以使其类似于清单3 。

清单3.最简单的Sencha Touch应用程序

<!DOCTYPE HTML>
<html>
<head>
<title>Touch Test</title>

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

<!-- sencha touch javascript -->
<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>

<!-- application script -->
<script type="text/javascript">
    Ext.setup( {
        onReady: function() {
            // create the root panel
            new Ext.Panel({
                fullscreen: true,
                html: "Sencha Touch is ready!"
            });
        }
    });
</script>

</head>

<body>
</body>
</html>

在Google Chrome浏览器中运行该页面，您应该看到类似于图2的内容。
图2.最简单的Sencha Touch应用程序

外部设置

Ext.setup功能的其他几个有用的配置选项可用。有关详细信息，请参见Sencha Touch安装的docs文件夹中的API文档。

清单3中的代码引入了一段JavaScript代码，您将在本文中重复使用这些代码来探索框架功能。如果您使用过Ext JS，此代码可能看起来很熟悉。 Ext.setup功能是您的Sencha Touch应用程序的起点。它接受带有许多配置选项的对象。该示例使用onReady选项，该选项带有一个函数来评估文档准备就绪的时间。 onReady函数创建应用程序的根面板。根面板占用所有可用空间，并分别使用fullscreen和html选项包含一个简单的字符串。

在Android模拟器中运行应用程序

到目前为止，您已经使用Google Chrome浏览器来完成开发工作。这是一个好方法，尤其是在尝试处理JavaScript和CSS错误时。使用设备仿真器开始应用程序测试。本节说明如何安装Android模拟器。

下载适用于您的操作系统平台的最新Android SDK并将其解压缩到磁盘。
该SDK包含启动和运行模拟器所需的所有实用程序，但还需要执行一些步骤。
Android模拟器要求您创建一个Android虚拟设备（AVD），这基本上是对实际的Android设备进行建模的配置选项。要创建AVD，请在Android SDK的tools文件夹中运行android实用工具。
Android SDK和AVD Manager应该打开，外观类似于图3 。

图3. Android SDK和AVD Manager

此时，如果您尝试使用“ 新建...”按钮创建新的虚拟设备，请注意一个标为Target的重要字段已被禁用。在创建新的虚拟设备之前，请先将附件下载到SDK。

从左侧菜单中选择“ 可用软件包 ”。
展开标有https://dl-ssl.google.com/android/repository/repository.xml的网站，以显示要安装的可用软件包的列表。
选择最新的SDK平台，如图4所示，然后单击Install Selected 。
图4. Android SDK的可用软件包
通过单击下一个窗口中的“ 安装”按钮来接受安装。
下载和安装完成后，单击“ 关闭” 。

您刚刚为要创建的任何AVD安装了潜在的目标。此目标是运行2.2版的Android设备。下一步是创建AVD。

从AVD管理器的左侧菜单中选择“ 虚拟设备” ，然后单击“ 新建...” 。
输入sencha-avd作为Name，然后选择刚安装的Android 2.2目标作为Target 。保留所有其他默认设置。
单击创建AVD 。
在确认窗口中单击“ 确定 ”，然后关闭AVD管理器。

现在，运行仿真器所需的一切都在本地开发环境中。要运行模拟器，请执行以下操作：打开终端窗口，将目录更改为Android SDK安装的根目录，然后输入清单4中的命令。

清单4.调用Android仿真器

tools/emulator -avd sencha-avd

您可以使用Android模拟器中的网络浏览器浏览到位于http：// localhost /的测试应用程序，但是会看到一个404大型404 。这是因为在模拟器中引用localhost或127.0.0.1实际上是在模拟器本身的上下文中。要引用您的本地开发环境，请使用地址10.0.2.2 ，这将产生图5所示的屏幕。

图5.在Android模拟器中运行的示例

清单3中定义的示例的屏幕快照已在显示Sencha Touch的Android仿真器中运行，现在可以使用了！

Sencha Touch UI组件之旅

掌握了基础知识之后，本节将介绍一些Sencha Touch UI组件。

纽扣

您只需使用一些配置选项就可以创建许多按钮样式。清单5中的代码创建了所有可用按钮的垂直堆叠集合。该示例应用程序已扩展为包括要添加到根面板的一系列项目，在这种情况下，是带有垂直堆叠的按钮集合的单个面板。

这些按钮的样式基于ui配置选项。支持的按钮类型为normal ， back ， round ， action和forward 。

清单5.按钮

<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        items: [
          // add a panel to the root panel
          // this will contain a vertical layout of buttons
          { 
            xtype: "panel",
            layout: "vbox",
            items: [
              {
                xtype: "button",
                ui: "normal",
                text: "Normal"  
              },
              {
                xtype: "button",
                ui: "back",
                text: "Back"  
              },
              {
                xtype: "button",
                ui: "round",
                text: "Round"  
              },
              {
                xtype: "button",
                ui: "action",
                text: "Action"  
              },
              {
                xtype: "button",
                ui: "forward",
                text: "Forward"  
              }
            ]  
          }
        ]
      });
    }
  });
</script>

图6显示了结果。

图6. Sencha Touch中可用的按钮样式

形式

表单套件包含所有常见的可疑对象以及更多。很明显，正在处理和合并HTML5特定的功能。 HTML5支持字段类型（例如，电子邮件，网址和日期选择器）和属性（例如，占位符文本）。 Sencha Touch使其更易于使用。清单6显示了一些功能。

清单6.表单控件的采样

<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        items: [
          // add a panel to the root panel
          { 
            xtype: "form",
            items: [
              {
                xtype: "textfield",
                name: "name",
                label: "Name",
                placeHolder: "your name here"  
              },
              {
                xtype: "emailfield",
                name: "email",
                label: "Email",
                placeHolder: "you@example.com"  
              },
              {
                xtype: "urlfield",
                name: "url",
                label: "Url",
                placeHolder: "http://www.example.com"  
              },
              {
                xtype: "datepickerfield",
                name: "date",
                label: "Date",
                picker: { yearFrom: 2010 }  
              }
            ]  
          }
        ]
      });
    }
  });
</script>

运行清单6中的代码将产生一个类似于图7的屏幕。 “日期”字段处于焦点状态，显示停在底部的日期选择器控件。

图7.可用表单字段的采样

清单

在开发移动Web应用程序时，您的工作空间有限。对基于列表的UI组件的支持变得很重要。 Sencha Touch配备了对各种类型列表的支持，包括简单列表，分组列表和嵌套列表。从框架下载的Kitchen Sink演示中获取的图8展示了一个分组列表。列表右侧的垂直字母堆栈为跳转到列表的特定部分提供了一种有用的方法。

图8. Kitchen Sink演示中的分组列表

图标和工具栏

Sencha Touch随附了一个令人印象深刻的内置图标库，可以随时使用。您所需要做的就是为您想要的图标指定一个代表CSS类的字符串。清单7显示了如何构建两个工具栏：一个固定在根面板的顶部，另一个固定在底部。每个工具栏均配置有少量可用图标的示例。

还有更多图标可用。查看API文档和示例以获取更多信息。

清单7.工具栏中的图标

<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        dockedItems: [
          {
            xtype: "toolbar",
            dock: "top",
            items: [
              {
                iconMask: true,
                ui: "plain",
                iconCls: "add"
              },
              {
                iconMask: true,
                ui: "plain",
                iconCls: "delete"
              },
              {
                iconMask: true,
                ui: "plain",
                iconCls: "star"
              },
              {
                iconMask: true,
                ui: "plain",
                iconCls: "home"
              }
            ]
          },
          {
            xtype: "toolbar",
            dock: "bottom",
            items: [
              {
                iconMask: true,
                iconCls: "download"
              },
              {
                iconMask: true,
                iconCls: "favorites"
              },
              {
                iconMask: true,
                iconCls: "search"
              },
              {
                iconMask: true,
                iconCls: "user"
              }
            ]  
          }
        ]
      });
    }
  });
</script>

运行清单7中的代码之后，您应该看到类似于图9的屏幕。

图9.图标和样式的采样

轮播和标签页

使用您已经探索过的编码模式，可以轻松实现轮播和标签页。清单8显示了一个选项卡式界面和一个转盘。

清单8.构造转盘和标签

<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.TabPanel({
        fullscreen: true,
        items: [
          {
            title: "Tab 1",
            html: "First tab"  
          },
          {
            title: "Tab 2",
            html: "Second tab"  
          },
          {
            title: "Tab 3",
            html: "Third tab"  
          }
        ]
      });
    }
  });
</script>

<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Carousel({
        fullscreen: true,
        items: [
          {
            html: "First item"  
          },
          {
            html: "Second item"  
          },
          {
            html: "Third item"  
          }
        ]
      });
    }
  });
</script>

轮播和标签页的代码和功能相似。轮播通过在左右方向上执行滑动手势或单击停靠在底部的圆形图标之一来在卡之间移动。默认情况下，两个控件都使用幻灯片动画在卡片之间切换。

图10显示了选项卡界面。

图10. Sample选项卡界面

图11显示了轮播界面。

图11.样本轮播界面

叠加层

您可以使用多个叠加控件。您的选项包括标准警报，确认和提示控件，以及普通模式控件。

地图

在移动Web开发中，最受欢迎的组件之一是地图。 Sencha Touch使使用Ext.Map组件在应用程序中包含地图变得非常简单。清单9显示了如何在示例应用程序中包括地图。请记住，要包含Google Maps APIJavaScript文件，此示例才能正常工作。

清单9.使用地图

<!DOCTYPE HTML>
<html>
<head>
<title>Touch Test</title>

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

<!-- Google Maps API -->
<script type="text/javascript"
              src="//maps.google.com/maps/api/js?sensor=true"></script>

<!-- sencha touch javascript -->
<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>

<!-- application script -->
<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        items: [
          {
            xtype: "map"  
          }
        ]
      });
    }
  });
</script>

</head>

<body>
</body>
</html>

生成的地图窗口如图12所示。

图12.示例地图控件

事件和数据访问

Sencha Touch支持您在移动应用程序中可能期望的几个关键事件，例如触摸开始/结束，滚动开始/结束，点击，双击，轻扫和捏合。如果您过去曾经做过Ext JS工作，那么数据访问将看起来很熟悉。

Sencha Touch框架支持带填充的JSON（JSONP），Yahoo！查询语言（YQL）和Ajax请求。与Sencha Touch数据包结合使用，它们提供了将数据绑定到UI组件的灵活机制。

风格与设计

创建自己的主题可能是一件相当困难的事情。 Sencha Touch框架具有关键功能，使修改默认样式和设计变得更加容易。

该框架使用语法很棒的样式表（Sass），它是CSS3的扩展，除其他外，它使您可以使用变量和选择器继承为主题开发增加更多功能。更改单个变量可以影响整个主题，就这么简单。

创建一个新主题不在本文讨论范围之内。相关主题有几个链接可帮助您入门。

结论

本文介绍了Sencha Touch，这是一个使用HTML5，CSS3和JavaScript构建的移动Web应用程序框架。您学习了如何创建一个简单的Sencha Touch应用程序，以及如何使用设备仿真器对其进行测试。您还探索了一些UI组件。

本文只是对Sencha Touch框架的介绍。现在您已经了解了基础知识，可以考虑使用下面的“ 相关主题”更深入地研究这些概念。

翻译自: https://www.ibm.com/developerworks/web/library/wa-senchatouch/index.html