Flex包含Flex类库,MXML以及ActionScript程序语言,如下表所示:
包含在Flex中,但是却并没有在上图中显示的还有Flex编译以及Flex调试器。
我们使用MXML与ActionScript的组合来编写Flex程序。MXML和ActionScript程序语言都给了我们访问Flex类库的能力。使用MXML来定义程序的用户界面元素,使用ActionScript来定义客户逻辑与过程控制。
Flex类库包含Flex组件,管理器与行为。使用基于组件的Flex开发模型,开发者可以合并预编译的组件,创建新的组件,或者是组合预编译的组件为复合组件。
Flex类库与MXML和ActionScript的关系
Flex是作为ActionScript类库来实现的。这个类库包含组件(容器与控件),管理类,数据服务类以及其他特性的类。我们使用 MXML和ActionScript语言配合类库来开发程序。
MXML 标签与ActionScript类或是类的属性相对应。Flex分析MXML标签,并且编译包含相应ActionScript对象的SWF文件。例如, Flex提供了ActionScript Button类来定义Flex按钮控件。在MXML中,我们可以用下面的MXML语句来创建一个按钮控件:
<mx:Button label="Submit"/>
当我们使用MXML标签声明了一个控件,我们就创建了那个类的一个实例。这个MXML语句创建了一个按钮对象,并且初始化这个按钮对象的label属性为Submit字符串。
与ActionScript 类相对应的MXML使用与ActionScript类相同的命名约定。类名以一个大写字母开头,而且在类名中以大写字母分隔单词。每一个MXML标签属性对应着ActionScript对象的一个属性,适合于对象的一种风格,或者是这个对象的一个事件监听器。
布局我们的程序
我们使用代表用户界面的组件来声明Flex程序的用户界面。有两种类型的组件:控件与容器。控件是窗体元素,如按钮,文本框,列表框。容器是屏幕上包含控件和其他容器的矩形区域。
在Flex的根部是单一的容器,称之为程序容器,这代表整个Flash播放器的界面。这个程序容器保存所有的其他的代表对话框,面板和窗体的容器。
一个容器有预定义的规则来布局他的孩子容器和控件,包括尺寸以及位置。Flex定义了布局规则来简化富网络程序的设计与实现,然而也提供了足够的灵活性来使得我们可以创建多样的程序集合。
使用预定义的布局规则的一个优点就是我们的用户可以很快的习惯我们的程序。也就是说,通过标准化用户交互的规则,我们的用户就不需要考虑如何来导航程序,相反却可以集中于程序所提供的内容。
另一个优点就是我们不必在定义导航以及作为设计一部分的布局规则上花费大量的时间。相反,我们可以集中精力于我们想要传递的信息以及我们要提供给用户的选择,并且不需为所有用户行为的细节与程序响应担心。通过这样的方式,Flex提供了一个结构可以让我们快速容易的使用丰富的特性与交互集合来开发程序。
使用Flex Builder来布局我们的程序
我们可以使用Flex Builder构建Flex程序的用户界面。我们可以使用Flex Builder通过可视的编码与设计工具来开发Flex与ActionScript程序。我们也可以使用可以提供代码提示与代码辅助特性的编辑编写 MXML,ActionScript与CSS代码,从而帮助我们的开发工作。
在这个编辑器中,我们可以切换到设计模式来可视化的开发我们的程序,在设计画布上使用容器与组件,使用约束来布局我们的组件,并查看运行时用户界面的转化。然后我们使用定制的编译器来构建我们的工程,并且使用集成的调试工具来调试我们的工程。