Flex学习笔记1------页面布局

      现在许多公司招聘开始需要懂Flex，刚好本人现在上班的公司也需要会Flex技术，我就开始学习Flex，一本好的参考书是必不可少的，这里推荐美国人塔伯写的《Flex3权威指南》，一共527页，书中由浅入深的演示，在学习过程中几乎感觉不到任何困难。

     今天看完了前4课，将中间部分重要的知识记录下来，方便复习巩固和交流。个人对Flex的第一印象是做出来的东西漂亮。暂时还没觉得有什么特别的优势，随着学习的深入，可能会体会到其他的优势。

     1.搭建FLEX开发环境：

      在MYECLIPSE8.5安装FLEX-Builder3插件方法：将FLEX-Builder3安装文件夹下的eclipse文件夹下的features和plugins两个文件夹拷贝到MYECLIPSE8.5安装文件夹下的myPlugin文件夹中，如果没有这个文件夹，自己建一个。然后在MYECLIPSE8.5安装文件夹下的

dropins文件夹中新建一个文本文档flexBuilder.txt，内容输入path=D://Flex Builder 3 Plug-in//com.adobe.flexbuilder.update.site，加下划线的部分替换成你FLEX-Builder3安装路径。然后将flexBuilder.txt重命名为flexBuilder.link,然后删掉MYECLIPSE8.5安装文件夹下的configuration下的org.eclipse.update删除，重启MYECLIPSE就可以看到已经集成了FLEX，至此，你就可以在MYECLIPSE中开发Flex了。

     

      2.页面布局

      如果用过可视化开发环境或者用过SWINGS，这个并不陌生，就是对页面进行分块。在开发过程中，我把几个需要注意的地方挑了出来：

     打开自动编译：勾选上project菜单下的build automatically。

     如果mx:Application的布局方式为水平或者垂直，将不能使用x和y指定其中空间的位置，所以，如果想通过XY坐标指定Application容器内的元素的位置，需要将Application的layout属性设置为Absolute.每一个Flex应用程序只能有一个<mx:Application>标签

需要熟悉各种容器的布局规则.:

     ApplicationControlBar :能以HBox和VBox容器的方式布局，取决于direction属性（默认水平horizontal）该容器用来放置在整个应用程序都能访问的组件，如果ApplicationControlBar 是Application标签的第一个子元素且dock属性为true，则ApplicationControlBar

会停靠在应用程序绘制区域的顶部，占满应用程序的最大宽度，而且不随应用程序滚动而滚动，个人觉得ApplicationControlBar 这个特性适合做导航条和店铺LOGO。

     ControlBar可用于将工具栏停靠在Panel和TitlewWindow容器的底部，其布局方式也由direction属性决定，ControlBar这个特性适合做版权之类的信息。

     Panel可以像VBOX,HBOX或CANVAS容器之中的任何一种那样布局，这取决于layout属性，Panel出了可以包含子元素，还提供了标题栏区域，可以包含他的标题和状态信息。

     Canvas按开发者指定的XY坐标绘制子元素，如果不指定XY，默认就是左上角（0,0）.

     此外还有title，application，vbox，hbox等布局方式

     基于约束条件的布局：正常的约束条件必须在允许绝对定位的容器（Canvas Panel module和application）中使用，增强型约束条件也是一样的，下面是原书中一段示例增强型约束的代码

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:constraintColumns>
  <mx:ConstraintColumn id="col1" width="33%"/>
  <mx:ConstraintColumn id="col2" width="33%"/>
  <mx:ConstraintColumn id="col3" width="33%"/>
 </mx:constraintColumns>
 <mx:constraintRows>
  <mx:ConstraintRow id="row1" height="50%"/>
  <mx:ConstraintRow id="row2" height="50%"/>
 </mx:constraintRows>
 <mx:TextArea id="ta1" left="col1:5" right="col1:5" top="row1:10" bottom="row1:20"/>
 <mx:TextArea id="ta2" left="col1:5" right="col2:5" top="row2:10" bottom="row2:20"/>
 <mx:TextArea id="ta3" left="col3:5" right="col3:5" top="row1:10" bottom="row2:20"/>
</mx:Application>

 

运行后结果见附件。