上一篇文章介绍了HTML5 web应用开发框架tiggr,本文介绍如何使用tiggr构建web应用程序。
使用tiggr创建应用程序通常需要经过以下五个步骤:
1、手机界面的原型设计
2、建立REST服务以供应用程序使用
3、为界面UI组件绑定事件和行为
4、在浏览器或其他设备中测试应用程序
5、导出或生成适合运行在各种手机系统的应用程序
手机界面的原型设计
Tiggr设计器的左侧是jQury Mobile的UI设计界面,它可以帮助你方便快速地设计出你想要的原型。选择UI组件并拖拽到手机界面,同时你可以在界面右侧部分为这些UI组件绑定事件、行为和设置属性。如下图:
设置REST服务
如果应用程序没有数据,那将缺少很多趣味性。应用程序可以通过REST服务处理JSON格式或XML格式的数据,设置REST服务通常由下面三个步骤组成:
1、输入服务地址URL
2、设置要请求的参数
3、获得服务反馈的参数
为了使用REST服务,一个特殊的数据源组件被植入手机界面,为了反馈数据给服务,UI输入组件接受参数的输入,然后服务响应参数请求并把结果返回给输出组件。
UI组件映射如图:
为组件绑定事件和行为
为UI组件定义事件并添加被调用的行为,例如,要调用我们上面设置的服务,我们可以为某个组件添加点击事件和调用数据源的行为。当应用程序运行的时候,点击这个组件即可掉用远程服务。
需要注意的是:我们知道尽管你还没有打算创建一款真正的应用,但也许你已经想要在这个过程中植入自定义Javascript或调用第三方JS库,其实这也是非常简单的。如图所示:
在浏览器或其他设备中测试应用程序
你可以在桌面浏览器、手机浏览器或Tiggr测试器中测试你生成的应用程序,如下图:
注意:ANDROID版本的Tiggr 手机测试器应用程序已经发布到ANDROID MARKET,你可以在你的应用程序搜索框中搜索TIGGR MOBILE TESTER找到该应用。iphone办的Tiggr手机测试器已经发布到这里以供下载,请在使用之前阅读readme文档。
导出或生成适合运行在各种手机系统的应用程序
你可以把应用程序中的资源导出为任何你想要的形式,可以是HTML/JS/CSS的文档列表,可以是Ecilpse工程文件,也可以是ANDROID使用的apk应用程序,或者是iPhone平台下的xcode 工程等。如图:






