Flex权威指南3学习笔记之一------界面知识(一)

最近在学习flex，正在看《Flex 权威指南》，把一些重要的知识记录下来，刚入门的可以看一下，高手就不用看了 呵呵

 

 

一、容器的相关知识

常见容器及布局规则

容器	规则
VBox	子元素垂直排列，每个子元素在前一个元素的下方
HBox	子元素水平排列，每个子元素在前一个元素的右侧
Canvas	在制定的位置绘制子元素，(x,y)控制其坐标
Application	使用layout属性，可以获得类似前三种布局方式
Tile	将子元素排成一个或多个横行或者竖行，每个Tile的单元格时相同的
Panel	Box容器的子类，可以获得VBox、HBox、Canvas的布局方式
ControlBar	停靠在Panel或者TileWindow的底部，可以有VBox和HBox布局，主要取决于direction属性
Application-ControlBar	整个应用程序都能访问的组件，布局方式类似Control

 

二、布置电子商务应用程序

在《Flex 权威指南3》中，采取的是用可视化拖取的方式绘制界面，为了对这些界面元素有一个初步的了解，我们采用手写代码的方式，在真正的开发过程中，手写的方式要比可视化操作适用的多。

 

1.打开EComm.mxml文件

2.在<mx:Application>标签内部，添加如下代码

 

 

<mx:ApplicationControlBar dock="true" width="100%" height="90"> </mx:ApplicationControlBar>

<mx:Label x="0" y="0" text="Flex"/> <mx:Label x="0" y="41" text="GROCER"/> <mx:Button x="811" y="25" label="View Cart" id="btnViewCart"/> <mx:Button y="25" label="Checkout" id="btnCheckout" x="738"/>

 

ApplicationControlBar的宽度和整个应用程序一致，高度为90。另外，在Application 的最上边，并且dock="true",这样可以保证Application始终出现在应用程序的最上边，不会随滚动条滚动而消失。

3.在<ApplicationControlBar>中输入以下代码：

<mx:Canvas width="100%" height="100%"><mx:Canvas>Canvas可以充满整个ApplicationControlBar中，它的子组件见通过坐标进行绝对固定。

 

4.在Canvas中输入以下的代码

5.在ApplicationBar下边输入

<mx:HBox x="0" y="0" width="100%" height="100%" id="bodyBox"> <mx:VBox width="100%" height="100%" id="products"> <mx:Label text="Milk" id="prodName"/> <mx:Label text="$1.99" id="price"/> <mx:Button label="Add To Cart" id="add"/> </mx:VBox> </mx:HBox>

HBox中的组件会水平排列，目前只有一个VBox还看不到效果；而VBox中的组件会垂直排列。

6.在HBox 的下部输入：

<mx:Label x="847" y="395" text="(c) 2006, FlexGrocer"/>

用于显示版权信息的标签，放在整个应用程序的右下角

所有代码如下所示：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:ApplicationControlBar dock="true" width="100%" height="90"> <mx:Canvas width="100%" height="100%"> <mx:Label x="0" y="0" text="Flex"/> <mx:Label x="0" y="41" text="GROCER"/> <mx:Button x="811" y="25" label="View Cart" id="btnViewCart"/> <mx:Button y="25" label="Checkout" id="btnCheckout" x="738"/> </mx:Canvas> </mx:ApplicationControlBar> <mx:Label x="847" y="395" text="(c) 2006, FlexGrocer"/> <mx:HBox x="0" y="0" width="100%" height="100%" id="bodyBox"> <mx:VBox width="100%" height="100%" id="products"> <mx:Label text="Milk" id="prodName"/> <mx:Label text="$1.99" id="price"/> <mx:Button label="Add To Cart" id="add"/> </mx:VBox> </mx:HBox> </mx:Application>

运行结果如下：