构建基于 Sencha Touch 框架的 Mobile web 应用

Sencha Touch 特性

Sencha Touch 的出现是 Mobile web 开发人员的福音，它提供的众多吸引人的特性让它成为目前业界最炙手可热的框架。

• 基于最新的 web 标准——HTML5，CSS3，JavaScript。整个库压缩和 gzip 后大约 120KB，通过禁用一些组件还会使它更小。
• 支持目前世界上最好的移动设备。Sencha Touch 目前支持 Apple iOS，Android 和 BlackBerry 等目前 3G 市场上最流行的移动设备，它为不同的设备定制了不同的主题，用户可以通过使用这些主题使 web 应用在移动设备上的展现更华丽。Sencha Touch 的目标是成为一个跨平台的框架，并支持和兼容更多的移动设备。
• 增强的触摸事件。除了 touchstart，touchend 等标准事件基础外，Sencha Touch 增加了一组自定义触摸事件，如 tap、double tap、swipe、tap and hold、pinch、rotate 等。
• 数据集成。Sencha Touch 提供了强大的数据包，通过 Ajax、JSONP、YQL 等方式用户可以很容易的从各种各样的数据源拿到数据并绑定到组件模板，写入本地离线存储。

Sencha Touch 是 HTML5 Mobile 应用领域的领头羊，是目前为止最强大的移动平台开发框架，它把自己定位为框架而不是类库。随着 Mobile web 应用市场的扩大，Sencha Touch 还在不断的改进和完善中，不久的将来它还会提供更多的功能和更完善的设备支持。

回页首

Sencha Touch 功能增强模块介绍

• 用户界面组件，容器和布局组件

  Sencha Touch 提供了丰富的用户界面组件，包括常用的按钮，单选框，复选框，文本框，日期选择控件，表格，列表等等，通过运用 Sencha Touch 定制的样式和主题，这些控件在移动设备上看起来和本地应用的 UI 组件没有什么区别。在容器和布局方面，Sencha Touch 也可以和 Adobe 的 Flex 相媲美，不仅提供了基础的 HBoxLayout，VBoxLayout 还提供了 DockLayout，CardLayout，FieldLayout 等更适合开发支持触屏设备的 Mobile web 应用的组件，关于每个组件详细的内容可以参考参考资源中列出的 Sencha Touch 的 API 文档。本文的最后一小节提供了一个工程代码示例，该工程主要使用了 Sencha Touch 提供的布局和用户界面组件构建了一个简单的 Mobile web 应用，代码中包含了关于所使用的用户组件的详细注释。

• WebKit/CSS3 样式技巧增强

  Sencha Touch 充分运用了 CSS3 的新特性使基于 webKit 浏览器运行的 Sencha Touch 应用更炫更酷。它支持并增强了对 Animations（动画），Transitions（转换效果），Gradients（渐变），shadows（阴影效果），Font Face（用户自定义字库），Marquee（文字移动效果），Multiple Backgrounds（多背景），RGBA（高清色彩显示通道）等样式效果的展示。

• 数据包

  Sencha Touch 的一个最大特性就是提供了功能强大的数据包。在 Ext.data 包中提供了丰富的 API 实现对 AJAX，JSONP，YQL 等数据访问方式的支持，并提供了 API 供用户更简单方便的操作和展现 JSON 数据， XML 数据等。用户还可以扩展基础接口实现对更复杂数据的操作和访问。

  Ext.data 数据包中最基础的是 Ext.data.Model，它就像 Java 的 Object 类一样是定义所有对象的基础类，代表应用程序中的数据类型：用户，产品，销售等任何东西。清单 1 是一个定义产品模型的代码片段。

  
  
  清单 1. Product 模型定义代码示例
  

    //Ext.regModel 告诉 Sencha Touch 使用设置的字段创建一个新的模型 , 可以在以后通过名称  // 引用这个模型来轻松地配置组件加载的产品数据 Ext.regModel('Product', {     fields: [         {name: 'name',        type: 'string'},         {name: 'description', type: 'string'},         {name: 'price',       type: 'float'},         {name: 'image_url',   type: 'string'},         {name: 'in_stock',    type: 'boolean'}     ]  }); 

  
  

  创建好数据模型后，就可以创建用来展示数据的 Ext.DataView，DataView 提供了如何获取数据和展现数据的功能，每个 DataView 至少需要包涵一个 Ext.data.Store 和一个 Ext.XTemplate 类，Stores 是模型的实例集合，它通过代理类载入数据，代理类定义了数据的获取方式和数据类型，它还提供了一个 Reader 告诉代理类从服务器加载数据时如何解码得到的数据流。Ext.XTemplate 定义数据展现的方式，它是一个强大的模板类，一旦 Stores 加载了数据，DataView 会自动将每一个加载完毕的记录在模板的基础上渲染出 HTML 展现给用户。清单 2 是一个 DataView 定义样例：

  
  
  清单 2. DataView 定义代码示例
  

    //store 定义获取数据的方式（用 ajax 代理获取 URL 为‘ /product.json ’的数据）和数据类型  //(Product)，XTemplate 定义数据展现的方式 //store 定义获取数据的方式和数据类型，XTemplate 定义数据展现的方式 var productsList = new Ext.DataView({     store: new Ext.data.Store({         model: 'Product',         // 代理类的定义        proxy: {     // 代理类型是 ajax             type: 'ajax',             // 数据来源            url : '/products.json',             // 数据是 Json 格式            reader: {                 type: 'json',                 root: 'products'            }         }     }),     tpl: new Ext.XTemplate(         '<tpl for=".">',             '<div>',                 '<img src="{image_url}" />',                 '<div class="button">Buy</div>',             '</div>',         '</tpl>'    ),     fullscreen: true  }); 

  
  

  清单 2 中请求的 products.json 文件内容如清单 3 所示，它是一组 Json 对象，当使用 ajax 代理获取该文件的时候会返回一个 Json 对象的数组。

  
  
  清单 3. products.json
  

    {     "products": [         {"name": "Some Product",    "price": 9.99,                  "image_url": "product1.jpg", "in_stock": true },         {"name": "Another Product", "price": 7.50,                  "image_url": "product2.jpg", "in_stock": true },         {"name": "A third product", "price": 2.35,                  "image_url": "product3.jpg", "in_stock": false },         ...     ]  } 

  
  

  DataView 还提供了一组事件供用户监听，包括数据选择，拖拽等信息，用户可以根据监听到的不同事件做相应的操作。清单 4 是监听 DataView 事件的代码示例。

  
  
  清单 4. DataView 监听 itemtap 事件代码示例
  

    productsList.on('itemtap', function (dataview, index, el, e) {     // ‘ itemtap'事件将会在用户点击了’ buy ‘按钮后出发    if (e.getTarget('div.button')) {         var product = dataview.store.getAt(index);         //something need to implement for buy the product     }  }); 

  
  

• 数据验证和数据关联

  Sencha Touch 提供了五种基本的数据验证方式，用户可以将验证方式的定义直接和对象的定义绑定，就像定义数据库表的列约束一样方便和简洁。这五种验证方式是：

  • Presence

    Presence 验证数据不能为空值。

  • Length

    Length 验证数据的长度，可以定义最大长度和最小长度。

  • Format

    Format 验证数据的格式是否符合预定义的格式，比如定义某个时间属性的格式是“yyyy-mm-dd”，那么“20110324”这样的值就被认为是不合法的。

  • Inclusion

    Inclusion 验证数据是否属于某个预定义的范围，该范围可以是一个闭合区间，也可以是一些可能值的集合。

  • Exclusion

    Exclusion 验证数据是否不属于某个预定义的范围。

  清单 5 是一个包含数据验证定义的 Product 模型定义。

  
  
  清单 5. 数据验证定义代码示例
  

    // 定一个 SampleApp 的命名空间 Ext.ns('SampleApp');  SampleApp.Product = Ext.regModel('Product', {     fields: [         {name: 'id',      type: 'int'},         {name: 'user_id', type: 'int'},         {name: 'name',    type: 'string'},         {name: 'price',   type: 'float'},         {name: 'sku',     type: 'string'}     ],      validations: [         //name 属性是必须的        {type: 'presence', name: 'name'},         //sku 属性的格式必须是 4 个数字后面至少有一个字母        {type: 'format',   name: 'sku', matcher: /[0-9]{4}[A-Z]+/},         //name 属性的长度至少为 3         {type: 'length',   name: 'name', min: 3}     ],      proxy: {         type: 'localstorage',         id  : 'products'    }  }); 

  
  

  定义了模型的数据验证内容后，我们就可以运用 Sencha Touch 提供的数据验证 API 对模型对象进行验证，清单 6 定义了一个具体的 Product 对象，并对对象进行验证。

  
  
  清单 6. 验证模型对象代码示例
  

    // 创建了一个 Product 对象 var product = new SampleApp.Product({     name : 'Sencha Touch',     sku  : 'not a valid sku',     price: 99  });  // 调用 validate 方法返回验证错误信息 var errors = product.validate();  errors.isValid()) // 返回“false”因为 sku 属性有错 errors.items; // 返回一个包涵该对象所有验证错误信息的数组  errors.forField('sku'); // 返回’ sku ‘属性的验证错误信息

  
  

  validate() 方法是数据验证 API 的核心方法，调用 validate() 方法后会对所有的 Validation 定义自动进行验证并返回一个 Ext.data.Errors 对象。

  数据库中的表关联关系大家都很熟悉，通过定义主键外键可以定义两个表的关联关系。Sencha Touch 支持类似于数据库表关联关系的基于对象的关联关系定义，通过 associations 关键字，用户可以在对象的定义中包涵对象关联关系的定义，目前支持两种关联关系：“hasMany”和“belongsTo”，用户可以自己扩展实现“one-two-many”，“one-to-one”等其他关联关系。清单 7 展示了如何定义用户和产品之间的“hasMany”和“belongsTo”关系。

  
  
  清单 7. hasMany 和 belongsTo 关系定义代码示例
  

    SampleApp.User = Ext.regModel('User', {     fields: [         {name: 'id',       type: 'int'},         {name: 'name',     type: 'string'},         {name: 'gender',   type: 'string'},         {name: 'username', type: 'string'}     ],      validations: [         {type: 'inclusion', name: 'gender',   list: ['male', 'female']},         {type: 'exclusion', name: 'username', list: ['admin']}     ],      associations: [         {type: 'hasMany', model: 'Product', name: 'products'}     ],      proxy: {         type: 'localstorage',         id  : 'users'    }  });  SampleApp.Product = Ext.regModel('Product', {     // 定义 Product 的属性和数据验证 ...     associations: [         {type: 'belongsTo', model: 'User'}     ]  }); 

  
  

  定义了对象之间的关系之后，就可以使用 Sencha Touch 提供的 API 进行关联数据的加载，同步等操作，清单 8 是关联数据操作的代码示例。

  
  
  清单 8. 关联数据操作代码示例
  

    var user = new SampleApp.User({id: 10});  // 加载所有用户 id=10 的产品 user.products().load({   callback: function (records, operation) {       alert(records.length);   }  });  // 给 id=10 的用户增加一个产品 user.products().add({     name: 'Ext JS 4.0',     sku : '1234A' });  // 调用 sync 方法将通过用户关联关系增加的产品添加到产品列表 user.products().sync(); 

  
  

回页首

SenchaSampleProject 工程代码示例

本文提供了一个 SenchaSampleProject 工程供读者参考，该工程主要使用了 Sencha Touch 提供的布局和用户界面组件并提供了详细的代码注释。图 1 是该工程运行结果截图。

图 1. SenchaSampleProject 运行结果示例

回页首

部署和运行示例代码

下载代码到本地计算机，打开 Eclipse，点击 File->import->Existing Projects into Workspace 如图 2 所示，选择 archive file 并指定到代码所在的本地路径，点击 Finish 按钮。

图 2. 导入工程到 Eclipse

工程导入 Eclipse 后会自动编译，右键点击项目选择 Run AsRun On Server 就可以运行程序。

回页首

结束语

本文对 Sencha Touch 框架和它提供的特性做了简单介绍，并通过一些代码示例给读者更直观的认识，最后提供了一个工程示例向读者展示了如何运用 Sencha Touch 提供的用户界面组件开发基于 Sencha Touch 框架的 Mobile web 应用。 Sencha Touch 以它开发简单，兼容性好，支持标准化，提供丰富的华丽的用户界面组件以及强大的数据操作 API 等无与伦比的优势成为目前 Mobile web 应用开发最炙手可热的框架，虽然它也存在运行速度慢，UI 反应延时等问题，但是随着技术的进步，这些不足会不断的改进和消除。