Titanium TiMVC框架:介绍与使用

移动开发
Titanium本身已做得很不错了,所以网上也已有一些优秀的MVC框架和插件等,不过试了下,感觉比较好用的就是一个叫TiMVC的框架,这个在官方market上就有,可以免费下载。

这段时间一有空就都在研究Titanium的MVC框架,因为几个项目做下来,发现一套好的框架实在是很重要,所以这也成为了当务之急!

Titanium本身已做得很不错了,所以网上也已有一些优秀的MVC框架和插件等,不过试了下,感觉比较好用的就是一个叫TiMVC的框架,这个在官方market上就有,可以免费下载:http://timvc.com/

之所以选择这个框架,是因为发现其架构清晰,有非常具体的MVC层次,使用起来方便,上手容易,而且更重要的是经过上真机测试也没什么问题,对2个系统(ios&android)的兼容性也比较好。由于官方网站上并没有详细的使用说明,只是简单地例出了层次目录和文件是什么,所以具体使用和功能我也只有直接查看其源码,经过对其源码越深入的分析,就越感觉其用起来挺顺手,呵呵~~

要学习一个框架,先要搞清楚的是其整体架构,以下就是整个TiMVC的项目结构:

TiMVC结构

上图可以看到在MVC目录下的层次结构是比较清楚的:

assets:这个是资源文件目录,包括图片和数据库文件的存放。

components:这个是组件目录,包括框架里的核心组件,一般不需修改这里的文件。

controllers:控制器目录,包含了项目里所需用到的控制器,根据需要自己创建。

core:此为框架核心文件目录,其他目录的代码均要以此为中心啦,呵呵。

models:数据模型目录,主要是与数据库交互的实体类的操作。

views:视图目录,里面每个子目录均对应一个控制器名称,子目录里的文件就是具体的action了。

OK,介绍完层次结构后,就说说其原理和使用。MVC的原理就不需我多说啦,如果不了解MVC模式的话,可上google看看。首先说一下此框架的配置,打开app.js文件就可以看到一大堆配置信息,这也是我喜欢使用它的原因之一,可以有很灵活的配置选项,非常方便哦!

不过不得不说的是,虽然其配置项不少,但基本上都不需要去更改的,大部分是框架路径的配置,所以如果只用其默认这些配置,一般来说其实意义不是很大,我之所以使用它,就是因为我可以对这些配置信息进行扩展,以达到真正方便控制整个项目流程的效果,这个在以后的文章中我会慢慢介绍.现在说一下框架的运行流程和使用吧。核心代码分析暂且不说,直接打开controller目录下的main.js文件,这个是主要的入口文件,其是继承components/controller.js文件的,在main.js里定义了一个action—home:

  1. this.home = function(r){ 
  2.         //build table data to be used in table ui 
  3.         var list = []; 
  4.         list.push({title:"Tab Example",route:"example/tabgroup",request:{},hasChild:true,newWindow:false,height:self.App.util.dP(50)}); 
  5.         if(self.App.iPhone){ 
  6.             list.push({title:"iPhone Only Dashboard Example",route:"example/dashboard",request:{},hasChild:true,newWindow:true,height:self.App.util.dP(50)}); 
  7.         } 
  8.         list.push({title:"Multi-Dashboard Example",route:"example/multidashboard",request:{},hasChild:true,newWindow:true,height:self.App.util.dP(50)}); 
  9.         list.push({title:"Database Example",route:"example/database",request:{message:'Hello from the database!'},hasChild:true,newWindow:true,height:self.App.util.dP(50)}); 
  10.  
  11.         //render /mvc/views/main/home.js view file with data 
  12.         self.render('home',{"list":list}); 

在home里主要是创建了一个list的数组,然后存放了相关的数据信息,每一条数据就是一个导航信息,包括标题,路由,请求数据等,最后一句是重点,直接render到名字为home的view里,同时将整个list数据传递过去。然后我们再打开views/main/home.js文件,其他代码先不需理会,主要看:

  1. this.addContent = function(){ 
  2.         self.rootView = Titanium.UI.createTableView({ 
  3.             data:self.data.list 
  4.         }); 
  5.         self.rootView.addEventListener('click',function(e){ 
  6.             if(e.rowData.newWindow){ 
  7.                 self.App.loadRoute(e.rowData.title,e.rowData.route,e.rowData.request); 
  8.             }else{ 
  9.                 self.App.setWindowRoute(e.rowData.route,e.rowData.request); 
  10.                 self.App.routeWindow(); 
  11.             } 
  12.         }); 

这段是为当前视图添加相关的UI代码,所有view里都以一个rootView为基础,因此要在view里创建界面,就要先创建一个self.rootView对象,然后将所有东西都放到这个view里来。而通过self.data.list,就可以获取之前controller传过来的list数据了,这个名字就与controller里写的一致。

因为以上代码创建的是一个TableView,所以在其点击事件里就可以直接调用list的数据了。这里用到了此MVC的几个核心方法:

  1. /** 
  2. * Execute controller call via route. 
  3. * @param {String} title new window title 
  4. * @param {String} route controller/action route string 
  5. * @param {Object} data json data to be passed to route (new window) 
  6. */ 
  7. this.loadRoute = function(title,route,data); 

这个是加载路由的方法,即可跳转到另一个action,再通过action跳转到另一个view界面,同时可以设置下一界面的标题和数据,数据是JSON格式。

  1. /** 
  2. * Update current window with route and request object (stringified) 
  3. * @param {String} route 
  4. * @param {Object} request 
  5. * @private 
  6. */ 
  7. this.setWindowRoute = function(route,request); 

以上是设置当前窗口的路由信息和传递的数据,一般设置完后再调用以下方法进行跳转:

  1. /** 
  2. * Route window to requested controller and action 
  3. * @private 
  4. * @returns boolean on fail 
  5. */ 
  6. this.routeWindow = function(); 

运行项目后,首先看到的将是home里的TableView视图,同时点击里面项目的话,就会根据所设置list里的数据跳转到不同的视图页面了。以上代码就简单演示了一个页面的跳转过程。

除了控制器到视图的跳转外,其实还可以动态调用不同页面的layout,在控制器里,可以调用以下方法以设置不同的layout:

  1. /** 
  2. * Set Layout string 
  3. * @param {String} set layout name string 
  4. */ 
  5. this.setLayout = function(layoutName); 

这个layout又是如何用的呢?只要打开views/layouts/default.js就可以看到默认的layout代码,通过不同的layout设置,我们可以方便地定义不同页面的结构,如所有页面都要包含headerandfooter等,就可以在layout里设置,原理和一般的MVC框架差不多(.NET或者cakephp里就有layout的概念了)

最后再总结下一些基本用法:

1.要在控制器或者视图调用核心方法,都必须以self.App开头,其实self就是等于this,至于有什么核心方法,大家打开core/timvc.js文件就知道了。

2.在控制器里跳到相应的view,使用self.render(viewName,{“data”:data});

3.路由跳转只需在view里调用self.App.loadRoute(title,controller/action,data);

4.可通过setLayout使用views/layouts目录下不同的页面结构

OK,今天就先说到这,关于此框架的研究和加强,我打算在之后文章里再慢慢介绍,也希望大家多多捧场[[67872]]

最后大家可到以下2个地址下载此框架:

http://timvc.com

https://github.com/deboorn/TiMVC

责任编辑:佚名 来源: coderblog.in
相关推荐

2012-04-19 13:52:16

TitaniumMVCRedux

2012-04-19 14:16:22

TitaniumTiMVC

2012-04-20 11:07:12

Titanium

2012-05-17 09:09:05

Titanium单元测试

2012-04-19 12:58:26

TitaniumJSS

2012-04-19 16:22:12

TitaniumTabGroup

2022-11-25 07:59:02

SpringJava

2012-05-18 11:29:55

Titaniumpros

2012-05-18 11:34:03

Titaniumcons

2012-02-13 14:41:50

Titanium架构分析

2014-05-15 09:43:11

CloudaMobile WebANodejs

2011-07-05 17:29:56

2012-04-19 10:52:52

2011-06-22 13:27:04

QT QMap

2012-04-19 17:42:46

Titanium布局

2012-02-01 09:59:05

TitaniumPhoneGapiOS

2009-12-22 16:10:21

ADO.NET框架

2009-06-22 16:24:33

JSF框架中使用的设计

2012-04-19 16:55:48

Titanium视频jQuery Mobi

2012-04-19 16:17:24

TitaniumAndroidtabbar
点赞
收藏

51CTO技术栈公众号