使用tiggr五步创建手机应用

上一篇文章介绍了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服务

设置REST服务

为了使用REST服务,一个特殊的数据源组件被植入手机界面,为了反馈数据给服务,UI输入组件接受参数的输入,然后服务响应参数请求并把结果返回给输出组件。

UI组件映射如图:

UI组件映射

UI组件映射

为组件绑定事件和行为

为UI组件定义事件并添加被调用的行为,例如,要调用我们上面设置的服务,我们可以为某个组件添加点击事件和调用数据源的行为。当应用程序运行的时候,点击这个组件即可掉用远程服务。

为组件绑定事件和行为

为组件绑定事件和行为

需要注意的是:我们知道尽管你还没有打算创建一款真正的应用,但也许你已经想要在这个过程中植入自定义Javascript或调用第三方JS库,其实这也是非常简单的。如图所示:

植入自定义Javascript或调用第三方JS库

植入自定义Javascript或调用第三方JS库

在浏览器或其他设备中测试应用程序

你可以在桌面浏览器、手机浏览器或Tiggr测试器中测试你生成的应用程序,如下图:

测试应用程序

测试应用程序

注意:ANDROID版本的Tiggr 手机测试器应用程序已经发布到ANDROID MARKET,你可以在你的应用程序搜索框中搜索TIGGR MOBILE TESTER找到该应用。iphone办的Tiggr手机测试器已经发布到这里以供下载,请在使用之前阅读readme文档。

导出或生成适合运行在各种手机系统的应用程序

你可以把应用程序中的资源导出为任何你想要的形式,可以是HTML/JS/CSS的文档列表,可以是Ecilpse工程文件,也可以是ANDROID使用的apk应用程序,或者是iPhone平台下的xcode 工程等。如图:

导出应用程序

导出应用程序

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">