基于模型开发iPhone twitter客户端

本文介绍使用基于模型的开发方式来快速开发移动web应用程序。
我们将开发一个Twitter客户端的iPhone应用程序。

看到iPhone应用程序，您可能会犹豫。难道我要为此去购买一个Mac机，我是不是还要先申请加入苹果开发人员计划，是不是还要买个iPhone？幸运的是，这里介绍的开发方式，你只要有PC机和浏览器即可，大部分工作都由模拟器来完成。

如果您有过iPhone开发经验，那么应该知道使用XCode构建一个显示Twitter最新消息的客户端，基本上需要做如下几件事情：

*）设计界面
*）连接元素
*）建立HTTP连接
*）发送请求、读取资源
*）解析JSON数据
*）添加用户图标
*）更新界面数据

根据您对XCode工具、iPhone SDK以及Objective C语言的掌握程度，可能会花费几天或几个小时不等的时间来完成这个任务。

那么让我们试试下面基于模型的方法是不是给我们带来一些Amazing Magic。

首先您得下载必要的开发工具Tersus Studio windows版本：http://www.tersus.com/#Id=240。

这是一个基于Eclipse的开源开发平台。

第一步：基础设置

--------------------------------------------------------------------------------

1.   创建一个新Tersus project:

o    选择File -> New -> Tersus Project.

o    输入Project name:  Twitter

o    选择Template: iPhone Application

o    点击Finish 按钮

2.       在模型编辑器（即中间的主窗口）中，双击放大到 <iPhone View>/Body.

3.       右键点击Body --> Add Element: Scroll Pane. 名字修改为: Top Trends Screen.

4.       放大到 Top Trends Screen.

5.       右键点击Top Trends Screen -->Add Element: List.

这样我们就创建了一个包含一个列表控件的带滚动条的<iPhone View>。注意该工程Outline窗口中有两个视图，分别是<Desktop View>和<iPhone View>，这里因为我们创建的是iPhone应用，因此我们仅关注<iPhone View>，展开它可以看到刚才添加的元素。保存工程并运行它（焦点需要在模型编辑器中）。浏览器将会自动启动。默认情况为打开https://localhost:8080/twitter，我们在后面加上/iphone.html。也就是https://localhost:8080/twitter/iphone.html。这样将会出现如下iPhone空白界面：



第二步：读取Twitter数据

--------------------------------------------------------------------------------

在模型编辑器中，放大到<iPhone View>/Body/Top Trends Screen/List.
从左边palette窗口的Basic部分拖动一个Action到Top Trends Screen. 取名为Init.
建模Top Trends Init 动作:
放大到Init.
从palette窗口的Basic部分拖拉一个Service. 取名Get Top Trends.
添加一个exit（灰色小箭头）到Get Top Trends.
从Display Actions 部分拖拉一个Alert. 
从Get Top Trends的exit到Alert trigger（绿色小箭头）创建一个flow. Init模型看起来如下:



建模Get Top Trends服务:
从Constants部分拖拉一个Text常量。数值为'http://search.twitter.com/trends.json'。名字改为Trends URL.
从Basic部分拖拉一个Action，取名Download URL. 给这个action添加一个trigger和一个exit。 
从Trends URL constant 到Download URL的trigger创建一个flow。
从Download URL的exit到Get Top Trends的exit创建一个flow。这个服务现在看起来应该像下面这样：



建模Download URL 动作:
从Miscellaneous部分拖拉一个Read Resource.
从Text部分拖拉一个Binary to Text， 从中删除<Encoding> trigger。
从Download URL 的trigger到Read Resource 的<URL> trigger创建一个flow。
从Read Resource的<Content> exit到Binary to Text的<Binary> trigger创建一个flow。
从Binary to Text的exit到Download URL的exit创建一个flow。Download URL 看起来如下:



保存工程
切换回浏览器窗口。应该会自动更新。
你将会看到一个Alert窗口，显示从Twitter获取到的JSON格式数据。
注：如果您在国内，那么因为社会和谐的原因，你将得到无法访问https://search.twitter.com/trends.json URL的错误。不过不要担心，稍后会给出解决方法。你可以暂时把Twitter search的URL改为Google map的URL来体验上述过程。

第三步：以iPhone的风格显示数据


--------------------------------------------------------------------------------

在模型编辑器中，放大到<iPhone View>/Body/Top Trends Screen/List.
右键点击List --> Add Element: Content Item.
建模Init 动作:
放大到Init Action.
给Get Top Trends添加一个exit. 命名为Parsed Data。设置其Reptetive属性。（选中exit对象，点击右键）
右键点击Init --> Add Ancestor Reference: 选择Top Trends Screen.
从Get Top Trends的repetitive exit（重叠的灰色小箭头）到Content Item (Scrollable Pane/List/Content Item)元素的exit创建一个flow。
删除到Alert的flow。
到目前为止Init 动作应该看起来如下:



删除Alert 元素。
建模Get Top Trends:
从Miscellaneous部分拖拉一个Parse JSON.
从Download URL 的exit到Parse JSON的<JSON Text> trigger创建一个flow。
从Data Types部分拖拉一个Data Structre。取名: Top Trends DS.
从同样的部分拖拉下面这些元素到Top Trends DS 并如下命名:
   
as_of: 类型: Text.

trends: 类型: Data Dtructure; Reptetive.

name: 类型: Text.

url: 类型: Text.

从Parse JSON 的<Value> exit 到Top Trends DS 创建一个flow。
从Basic部分拖拉一个Action。取名Convert to Content Item.
为这个动作添加一个trigger 和一个exit。设置动作为repetitive
从Top Trends DS/trends 到Convert to Content Item 的trigger创建一个flow。
从Convert to Content Item 的exit 到Get Top Trends 的repetitive exit (Prased Data) 创建一个flow.
Get Top Trends 服务模型看起来应该如下：


    

建模'Convert to Content Item':
右键点击Convert to Content Item 的trigger并选择Show in Repository Explorer. 从Repository Explorer 中拖拉trends 数据结构到模型编辑器中的Convert to Content Item 动作中。
从Convert to Content Item 的 trigger 到trends 创建一个flow。
同样的: 右键点击Convert to Content Item 的exit 并选择 Show in Repository Explorer. 从Repository Explorer 拖拉Content Item到Convert to Content 动作里. 从Content Item 到Convert to Content Item 的exit 创建一个flow。
从Constants部分拖拉一个Text 常量，设置数值为: Twitter48.png.
从"Twitter48.png" constant 到 Content Item/Icon/<Path>创建一个flow。
从trend/name 到Content Item/Content Holder/Title Text/<Value>创建一个flow。
从trend/url 到Content Item/Content Holder/Content Text/<Value>创建一个flow。
Convert to Content Item 看起来应该如下:


                    

添加图像:
切换到Navigator view (Window -> Show View -> Navigator)
下载图片: http://downloads.tersus.com/Twitter48.png  并保存到 [Tersus Workspace]/Twitter/web.
保存工程.
切换回浏览器，应该会自动刷新。
如果您的所在地能够访问twitter网站，您将看到如下页面：







如果您有幸在和谐的国度里享受纯净的生活，还想见到如上叽叽喳喳的消息界面，那么您将需要付出一些额外的努力：

1、              安装freegate软件。请Google之。

2、              设置Tersus Studio http代理：Windows->Preference->General->Network Connections







到此为此，您没有写一行代码！您的工作台上只有如下的模型图：






好吧，我们用鼠标拖来拖去完成了这个神奇的魔术。如果熟练的话，画出这个模型图也许半个小时都不到。您或许还想把这个模型应用到Android、Blackbery、Symbian、Windows Phone、J2ME上去。这也正是平台开发者所正在努力的方向。毫无疑问，这代表着一种先进的软件生产方式。我们可以在模型产生的代码框架基础上继续开发。


最后还需要补充一点，虽然我们完成的是一个移动web程序，但如果您希望和以前那样通过苹果App Store的方式来运作，也完全没有问题。借助Tersus Studio，您可以把这个工程导出为一个iPhone本地应用程序即XCode工程。这样您可以在一个迅速搭建的应用程序框架的基础上对工程进行再加工。比如添加本地资源访问（相机、通讯录、加速度、位置信息、指南针、短消息、邮件等）或者更为丰富的用户界面方面的支持。