电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 Sencha Touch 开发超炫的跨平台移动 Web 应用（5） [打印本页]

作者: look_w 时间: 2018-9-23 13:50 标题: 使用 Sencha Touch 开发超炫的跨平台移动 Web 应用（5）

事件处理：人机交互和 UI 组件之间的切换，需要事件来驱动或触发，因此各 UI 组件都支持一系列特定的事件及其处理方法，可参阅。示例中需要依靠叶子节点触摸事件 leafitemtap 将显示界面切换为 Detail Card，就需要在 NestedList 组件上注册处理方法，其代码为：清单 7

1
2
3
4
5
6

nestedList.on('leafitemtap', function(subList, subIdx, el, e,
detailCard) {
var ds = subList.getStore(), r = ds.getAt(subIdx);
detailCard.setValue(r.get("description"));

});

其回调函数的参数依次代表“触控条目（item）所在 List 组件”，“触控条目的 ID”，“触控条目 element 对象”，“触控事件对象”和“接下来要显示的 Detail Card 组件对象”。

部署到 Apache Tomcat 6.x 进行测试编写好对应的 HTML、JavaScript 和后台处理的 Servlet 之后，可将动态 Web 工程打包成为标准的 WAR 包，部署至 Tomcat 的 webapp 文件夹，启动服务器；随后打开 Android Virtual Devices，启动其中的浏览器程序，并在 URL 地址栏输入 http://<localhost IP address>:8080/myblog/，便可以对该应用进行测试了，运行的画面如所示。由于 Sencha Touch 应用的跨平台性，使用其他任意一款基于 Webkit 内核的浏览器，如 iPhone4 的 Safari，也能得到相关的测试结果，而不仅限于文中示例的 Android 设备浏览器。
图 8 应用运行及测试画面

总结开发与原生程序一样酷炫界面的 Web 移动应用，一直是 Web 开发者的梦想，Sencha Touch 移动 Web 开发框架使得这一梦想不再遥远。该框架以其丰富的 UI 组件，个性化的动画效果，稳定的数据及事件处理机制，易扩展的编程模型，在移动 Web 应用这个新领域崭露头角。本文利用一个博客浏览程序简要介绍了利用该框架编写程序的流程及基本方法，然而距离一个成熟的 Web 应用还有相当的距离，如用户登录的安全性、多用户并发时后台的伸缩性以及客户端 JavaScript 的性能都有待提高，因此值得广大开发者深入的学习及实践。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)