Bookmark and Share

Lee's 程序人生

HTML CSS Javascript XML AJAX ATLAS C# C++ 数据结构 软件工程 设计模式 asp.net Java 数字图象处理 Sql 数据库
  博客园  :: 首页  :: 新随笔  :: 联系 :: 管理

转:基于模型的移动web应用程序开发 (详细开发笔记)

Posted on 2010-04-26 10:15  analyzer  阅读(324)  评论(0编辑  收藏  举报

转自:http://www.javaeye.com/topic/650649

为什么选择基于模型的开发方式

软件行业的精英们一直在寻找提高软件生产力的银弹。提高生成力的核心在于重用。这包含代码的重用、设计的重用。用户有很多相似的需求,针对这些需求提取出一些基本的模型元素从而可以在领域中复用。面向对象、基于模板、基于模型和基于框架的开发方法给行业带来了希望。

 

如果您正准备开发一个交友社区客户端的移动应用程序,需要覆盖主流的移动平台,比如iPhoneAndroidWindows PhoneSymbian以及大量的山寨系统,那么你可以有如下的选择:

1、 招聘一个团队,每位工程师有不同平台的开发经验。

2、 Soho,自学所有的平台SDK和语言,自行开发

3、 开发一个移动web应用,匹配主流的浏览器

 

选择1的前提是您不差钱。

选择2是您对自己的能力充分信任,但有可能会因为进度缓慢而丧失市场良机,也可能因为后续无力适配变化多端的机型和不同版本的SDK而无奈终止维护,这样的故事比比皆是。

那么你可能会自然的选择3来降低学习成本、研发成本以及加快开发进度。但是移动web应用在带来适配方便的同时,也丧失了本地应用程序的更为友好华丽的界面观感以及访问本地资源的权利。另外如果您还想把移动应用的开发复用到PC领域,就需要考虑更多的移植策略。

 

一个可行的解决方案就是基于模型的开发。模型是平台无关的需求抽象。和平台相关的代码层面交给框架根据环境配置、用户选项来自动生成,然后针对特定的领域和客户要求,进行再加工和编码优化。这解决了3个方面的问题:

 

1、 解决了平台之间移植复用的问题。首先选取通用的数据和流程模型元素来构架系统,然后调用合适的代码生成器来产生针对特定平台的工程。

2、 解决了设计标准和编码规范的问题。由于代码框架是由生成器产生。因此使用同样的建模描述方式就可以保持代码风格的一致性和代码规范性。

3、 支持更为敏捷的原型开发,便于客户理解系统。

 

理论看上去很美,然而要构造这样的基于模型的开发环境并投入到实际的软件生产过程中去,则并非那么容易。我了解到的EMF(基于Eclipse的模型框架)eclipse.org/modeling/emf/在这方面做了很多工作。而国内少有听闻有类似的工具在应用,尽管在鄙人看来这是一个逐渐明朗的技术趋势。

 

 


一个基于iPhone的移动web应用实例

 

现在停止大话连篇,回到移动应用程序开发的主题上来,这里我要举一个非常实用的例子来说明上述的一些观点。让我们从头体验一下在现实工作中如何使用基于模型的开发方式来快速开发移动web应用程序。

 

在这里我们将开发一个Twitter客户端的iPhone应用程序。看到iPhone应用程序,您可能会犹豫。难道我要为此去购买一个Mac机,我是不是还要先申请加入苹果开发人员计划,是不是还要买个iPhone?很幸运,在我举的这个例子中,你只要有PC机和浏览器即可。

 

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

设计界面

连接元素

建立HTTP连接

发送请求、读取资源

解析JSON数据

添加用户图标

更新界面数据

 

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

 

 

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

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

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

 

第一步:基础设置

 

1.   创建一个新Tersus project:

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

1.2.  输入Project name: Twitter

1.3.  选择Template: iPhone Application

1.4.  点击Finish 按钮

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

3.   右键点击Body --> Add ElementScroll 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>,展开它可以看到刚才添加的元素。

保存工程并运行它(焦点需要在模型编辑器中)。浏览器将会自动启动。默认情况为打开localhost:8080/twitter,我们在后面加上/iphone.html。也就是localhost:8080/twitter/iphone.html

这样将会出现如下iPhone空白界面。

 

 

图1 

(图1

 

第二步:读取Twitter数据

 

1. 在模型编辑器中,放大到<iPhone View>/Body/Top Trends Screen/List.

2. 从左边palette窗口的Basic部分拖动一个ActionTop Trends Screen取名为Init.

3. 建模Top Trends Init 动作:

3.1.   放大到Init.

3.2.   palette窗口的Basic部分拖拉一个Service. 取名Get Top Trends.

3.3.   添加一个exit(灰色小箭头)到Get Top Trends.

3.4.   Display Actions 部分拖拉一个Alert.

3.5.   Get Top TrendsexitAlert trigger(绿色小箭头)创建一个flow. Init模型看起来如下:

 

 图2

(图2

 

4.   建模Get Top Trends服务:

4.1.   Constants部分拖拉一个Text常量。数值为(search.twitter.com/trends.json)。名字改为Trends URL.

4.2.   Basic部分拖拉一个Action,取名Download URL. 给这个action添加一个trigger和一个exit

4.3.   Trends URL constant Download URLtrigger创建一个flow

4.4.  Download URLexitGet Top Trendsexit创建一个flow。这个服务现在看起来应该像下面这样:

 

图3

(图3

 

 

4.5.    建模Download URL 动作:

4.5.1.    Miscellaneous部分拖拉一个Read Resource.

4.5.2.    Text部分拖拉一个Binary to Text, 从中删除<Encoding> trigger

4.5.3.    Download URL triggerRead Resource <URL> trigger创建flow

4.5.4.    Read Resource<Content> exitBinary to Text<Binary> trigger创建一个flow    

4.5.5.    Binary to TextexitDownload URLexit创建一个flowDownload  URL 看起来如下:

 

图4

  (图4

 

 

5.  保存工程

6.  切换回浏览器窗口。应该会自动更新。

7.  你将会看到一个Alert窗口,显示从Twitter获取到的JSON格式数据。

 

注:如果您在国内,那么因为社会和谐的原因,你将得到无法访问search.twitter.com/trends.json URL的错误。不过不要担心,稍后会给出解决方法。你可以暂时把Twitter searchURL改为Google mapURL来体验上述过程。

 

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

 

1.  在模型编辑器中,放大到<iPhone View>/Body/Top Trends Screen/List.

2.  右键点击List --> Add ElementContent Item.

3.  建模Init 动作

3.1.  放大到Init Action.

3.2.  Get Top Trends添加一个exit. 命名为Parsed Data。设置其Reptetive属性。(选中exit对象,点击右键)

3.3.  右键点击Init --> Add Ancestor Reference: 选择Top Trends Screen.

3.4.  Get Top Trendsrepetitive exit(重叠的灰色小箭头)到Content Item (Scrollable Pane/List/Content Item)元素的exit创建一个flow

3.5.   删除到Alertflow

3.6.   到目前为止Init 动作应该看起来如下:

 

图5 

(图5

 

 

3.7.  删除Alert 元素。

 

4. 建模Get Top Trends:

4.1.  Miscellaneous部分拖拉一个Parse JSON.

4.2.  Download URL exitParse JSON<JSON Text> trigger创建一个flow

4.3.  Data Types部分拖拉一个Data Structre。取名: Top Trends DS.

4.4.  从同样的部分拖拉下面这些元素到Top Trends DS 并如下命名:

 

图6 

(图6

                      as_of: 类型: Text.

                      trends: 类型: Data Dtructure; Reptetive.

                      name: 类型: Text.

                      url: 类型: Text.

 

4.5.  Parse JSON <Value> exit Top Trends DS 创建一个flow

4.6.  Basic部分拖拉一个Action。取名Convert to Content Item.

4.7.  为这个动作添加一个trigger 和一个exit。设置动作为repetitive

4.8.  Top Trends DS/trends Convert to Content Item trigger创建一个flow

4.9.  Convert to Content Item exit Get Top Trends repetitive exit (Prased Data) 创建一个flow. Get Top Trends 服务模型看起来应该如下:

 

图7 

(图7

 

 

5.  建模'Convert to Content Item':

5.1.   右键点击Convert to Content Item trigger并选择Show in Repository Explorer. Repository Explorer 中拖拉trends数据结构到模型编辑器中的Convert to Content Item动作中。

5.2.  Convert to Content Item  trigger trends 创建一个flow

5.3.   同样的右键点击Convert to Content Item exit 并选择 Show in Repository Explorer. Repository Explorer 拖拉Content ItemConvert

5.4.   to Content 动作里Content Item Convert to Content Item exit 创建一个flow

5.5.   Constants部分拖拉一个Text 常量,设置数值为: Twitter48.png.

5.6.   "Twitter48.png" constant  Content Item/Icon/<Path>创建一个flow

5.7.   trend/name Content Item/Content Holder/Title Text/<Value>创建一个flow

5.8.   trend/url Content Item/Content Holder/Content Text/<Value>创建一个flow

5.9.   Convert to Content Item 看起来应该如下:

 

图8 

(图8

 

6. 添加图像:

6.1. 切换到Navigator view (Window -> Show View -> Navigator)

6.2. 下载图片downloads.tersus.com/Twitter48.png )并保存到 [Tersus Workspace]/Twitter/web.

7. 保存工程.

8. 切换回浏览器,应该会自动刷新。

 

第四步:显示页面

 

如果你在不和谐的国度,您将能看到如下页面。

 

图9

(图9

 

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

 

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

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

 

 

图10

(图10

 

 

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

 

 

图11 

(图11

 

 

总结

您再回头计算一下花费了多长时间。我第一次花了2个小时。这是在我不熟悉其快捷操作和工具界面的情况完成的。熟练的工程师恐怕可以把这个时间压缩一半。

 

好吧,我们用画笔拖来拖去完成了这个神奇的魔术。而魔术的内幕则有待您自行体会和思考了。这个平台是开源的,所以能够理解和使用到什么程度,不会有不可逾越的障碍。

 

您或许还想把这个模型应用到AndroidBlackberySymbianWindows PhoneJ2ME上去。这也正是平台开发者所正在努力的方向。

 

最后还需要补充一点,虽然我们完成的是一个移动web程序,但如果您希望和以前那样通过苹果App Store的方式来运作,也完全没有问题。

借助Tersus Studio,您可以把这个工程导出为一个iPhone本地应用程序即XCode工程。

这样您可以在一个迅速搭建的应用程序框架的基础上对工程进行再加工。

比如添加本地资源访问(相机、通讯录、加速度、位置信息、指南针、短消息、邮件等)或者更为丰富的用户界面方面的支持。

 

 


(作者 陈小峰  Android开发指南中文版》作者,《iPhone for Programmer》译者) 

我要啦免费统计