Flash / Flex 学园

一个简单的例子

让我们来看一个简单的例子，以便你可以看到在实践中的MVC。我们的是model是2004年雅典奥运会奖牌排名前五名的国家。我们将根据这个model建立三个不同的view。一个view我们用表格的形式来表现，别外两个我们用柱形和条形的图表来表现。

在Flex，一个数据model能编译在树形的ActionScript对象中，使用MXML Model标签。我们的重点在MVC上，利用这一原理，把我们的model放在一个简单的XML文件中，我们结合Model标签来绑定源文件。接下来我们来考虑如何架构和设计model。Model标签的部分代码如下：

这个model会用在三个不同的view中，放在三个独立的MXML中，利用Flex方便有效的数据绑定机制。将我们需要的值存在变量中，绑定的值要用{}括起来。真实的值存在变量中，这些值是从数据源中复制的属性，值是数据源的属性值（{}括起来）,是复制的目标属性。这样可以动态绑定变量的值，并保持数据源的值和使用地方的松散耦合。

{}机制，数据绑定允许：
■使用ActionScript表达式在{}中
■使用E4X表达式在{}中
■使用ActionScript 函数在{}中

任何一个ActionScript表达式的返回值可以作为数据绑定源放在{}中。可能一个单一的绑定属性或一个串联字符串包括绑定属性。绑定属性可能是一个绑定属性的运算或一个条件表达式。如前所述，它也可能是一个E4X表达或ActionScript函数。这里的重点是对MVC的理解，所以不再讨论目前的数据绑定, 第3章将分析了不同方法的数据绑定，并根据不同法的性能进行选择。

大多数的view都用一个dataProvider属性来定义数据模型源。这个属性只是接受用{}括起来的数据，所以在Flex中可以很简单的将一个model值绑定到多个view中。我们现在来用一个实际的例子来说明如何将一个model绑定到三个不同的view（一个使用DataGrid，另外两个使用Chars）中：

这个简单的例子并不包括更新和修改model，所以这里并没有controller,下图（1-1）是运行的样式。

(1-1)

(1-1)这个应该程序用三个view来显示冠军统计数据，一个view是表格，另外两个是图表，它们使用相的model。

虽然这是一个比较基础的例子，但也是一个简单的MVC案例, 其中包括model和view的分离和松散耦合。为了让事情变得更有趣，我们让model更接近真实的情况。更确切地说，我们现在认为，该model可以存在于以下五个方面：
■本地存储的一个XML文件，并绑定到MXML模型标记，在我们的基础例子中已经用过。
■通过URL访问一个XML文件。
■放在数据库中通过应该层取得。
■由网络服务（如：webservice）取得。
■通过远程过程调用（ RPC ）从现有的不同语言(如JAVA、Python、PHP)的model，RPC可以调用远程对象。

下节继续!

(转载请注明出处,请勿使用商业用途!)