[Flex 2] 02 Flex

 

 

###################
# Flex与Web设计
###################

大多数企业级的Web设计都需有3层结构：
    * 表现层(Presentation Tier)：这一层构建的是用户看到的内容。有时候，人们也把这一层叫做图形用户界面(graphical user interface,GUI)。
    * 业务逻辑层(Business Logic Tier)：幕后工作就发生在此层。程序代码就是在这里确定什么可以留下来、什么不可以留下来以及到其他服务器和数据库的连接。这是完成实质性工作的地方。
    * 骨干层(Backbone Tier)：根据业务逻辑层中声明的规则来收集和分发数据的数据库服务器就处在这一层。

      人们有时候把诸如此类的设计叫做n-层设计。除了刚才列出的基本的3层设计，有些设计方案还有额外的服务器层和数据层。

    Flex主要是参与表现层的建设。事实上，人们常常把Flex称为呈现服务器。它的主要功能是运用为创建RIA(第1章有介绍)而设计的工具来创建用户交互。

 

###################
# Flex应用程序框架
###################

    Flex应用程序框架有其自身的层次结构。

      位于最上方的是MXML和ActionScript3.0。其意义非常重大，因为它意味着Flex使用是Web设计中的两个最流行的工具：XHTML和面向对象编程(object-oriented programming, OOP)。MXML类似于XHTML，ActionScript3.0则遵守了OOP的那些最严格的准则。
      现在，如果光凭这两样仍不够的话，我们还可以同时运用MXML和ActionScript3.0对Adobe Flash Player 9的能力进行驾驭。这意味着我们实际上获得了3方面的最佳组合：一门类XHTML的语言（MXML）、OOP(ActionScript3.0)和Flash的能力。3者合而为一。

    Flex还自带了一个丰富的类文件（预建程序）集合，该集合包含了成功构建RIA所需要的大部分工具(其中包括用来连接到数据源的Flex Data Services(Flex数据服务))。即，我们需要的大部分东西已经构建好了，我们要做的就是在需要的地方调用它，并加入各种想要的自定义内容。Flash Player会知道如何处理这些预建的类文件，并使用它们构建出一个能与用户交互的RIA表现。

1 MXML

    MXML是一门基于XML的语言，它提供了一种简便的方法来调用和管理应用程序的视觉元素。同样，大部分的视觉元素都是已经预建好，等着我们直接调用的。

    XML是一种描述性语言，或者更确切地说，是一种标记语言(markup language)，用来以文档方式描述各种各样的结构。例如，如果你使用XHTML，它就会描述文档的正文和标题等内容位于何处。Java或JavaScript之类的编程语言通常所具有的结构，是标记语言所不具备的。标记语言无法为循环代码作出判断。
      与XHTML和XML一样，MXML会为我们的应用程序提供结构。不过，Flex中所做的要更进一步：我们可以使用MXML调用预建的组件，或者根据需要从零开始创建新的组件。我们可让用户以无缝的方式从一个界面过渡到另一个界面。我们可以通过层叠样式表(Cascading Style Sheet,CCS)和皮肤之类的方式来更改应用程序的外观。
      用MXML架设网页结构的方式和使用XML的方式几乎相同。不过与XML不同的是，MXML还允许我们利用视觉效果和行为来布置复杂的界面。换句话说，大家还要被MXML的简易性蒙蔽了。简单并不代表我们的工作会受到限制————它反而会显著提高我们的开发效率。

    ///作为一种标记语言，MXML可以清晰地展示其结构，便于我们设计用户界面

2 ActionScipt 3.0

      出色如MXML，（正如所用标记语言一样）也会有一些局限性。

在Web设计早期，这些局限之处是利用JavaScript的开发来解决的，它扩充了HTML的能力。在Flex环境下，与JavaScript相同功用的是ActionScript：我们利用ActionScript 3.0来扩展MXML的能力。

      利用AS3.0，我们可以在组件间添加动态的交互。例如，我们可能想要有一个标示语(label)来根据用户选中的复选框动态地显示某一段信息。

      另外，前面谈到的所有的组件都是使用ActionScript 3.0创建的。而且，在把应用程序编译成SWF文件时，前面谈到的MXML代码会被转换成AS 3.0代码。

    ///从一定角度可以说，Flex在为程序员提供方便（即去除时间轴等复杂概念）同时，还简化了编程操作（MXML的使用），使上手更容易

3 Flex Data Services

    Flex是一个非常复杂的RIA呈现系统，但如果不能与当前系统和数据库整合起来，一切就没有意义。Flex要具有可呈现的内容，就须与当前的数据库和中间件（业务逻辑）整合在一起。而将Flex连接到动态的服务器端代码(如Java、.NET、CodeFusion、PHP、ASP或Web服务)的正是FDS。

    ///Flex是用来呈现数据的，没有数据，无所呈现，Flex也就没有存在的意义
    ///Flex无法直接连接数据库，Flex Data Service充当Flex与动态服务器端连接的桥梁

      从理论上讲，Flex SDK是在命令行上工作的。例如，在Flash中，为了生成运行应用程序所需的SWF文件，我们要发布FLA文件。和Java一样，Flex SDK是独立于平台的，因为它其实不是安装在操作系统中的。正如在Java中那样，在Flex中，这通常意味着我们需要在命令行提示符下发出命令来生成SWF文件。
    ///新建"Flex Project"时我们可知，可建应用程序有两种类型，即Web application (runs in Flash Player) 和 Desktop application (runs in Adobe AIR)。前者只需浏览器有Flash Player插件（跨平台性，或Windows的Firefox，或Ubuntu的Chrome，无所不可；但最近苹果的iPad却与Adobe扛上了，就是不支持Flash Player）即可，后者只需安装AIR平台支持（跨平台性，有多个操作系统的版本）即可，可以看出Flex的确不是安装在操作系统中的。

 

###################
# Flex Builder环境
###################

<!--Flex Code-->
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx:Application>

MXML文件以一个XML声明(XML declaration)开头。这是因为它们必须遵守XML的规则。这些规则大致总结如下：

      ＊ 每个起始标签必须有一个对应的结尾标签。
      ＊ 标签区分大小写。
      ＊ 每个标签必须含有属性。
      ＊ 标签必须有严格的层级关系。

      根标签(root tag)就是名为Application的标签。其他所有标签必须位于起始Application标签和结尾Application标签之内。注意MXML标签是以标识符mx:开头的。这与Flex的一个叫做命名空间(namespace)的我有关。

      构建Flex应用程序的时候，我们实际上是在构建一个多容器的配置，这些容器可以容纳其他容器或视觉元素，如按钮、文本字段、复选框等。Application标签除了被视作是根XML标签之外，还是一个主容器。（可拿Java编程中的main来类比）

      如没有Application容器，则什么事都不会发生。

 

 

###################
# 为何使用Flex
###################

      随着越来越多的用户转向使用移动设备以及其他一些方式访问因特网，浏览器也变得并不总是和使用PC访问网站时的浏览器一般大小了。基于这个原因，我们的应用程序需要能轻松调整到各种各样的尺寸和状态。
      用过XHTML的人就会知道，调整到各种状态所需要的那种灵活性并不总是轻轻松松就能够达到的。

      为让Flex能够轻松调整到各种大小，我们须将布局设置为absolute。绝对布局意味着我们必须给放在应用程序中的每个组件设置x和y属性；否则，所有组件都会堆在左上角。
      对于Constraints区块，每个复选框都是一个锚点(anchor)。锚点会锁定组件相对于浏览器大小的位置。如，可让组件总是距离浏览器的上下左右4个边有一定距离。如浏览器大小调整了，组件也会重新调整大小以保持那段距离。（相应属性为bottom,top,left,right）

    <!--End-->