flex 组件学习.doc

1. DataGrid 组件样式属性 backgroundColor 背景色 backgroundAlpha 背景色透明度 数值从0.001.00 alternatingItemColors 间隔背景颜色 间隔项的颜色这个属性要设置2 个色彩，某一项的背景色和下一项的背景色 headerColors 标题头背景渐变颜色 这个属性要设置2 个色彩，标题头背景渐变起始色和 标题头背景渐变结束色 horizontalGridLines 是否显示横向分隔线 是否显示每一行之间的横向分隔线 true false horizontalGridLineColor 横向分隔线颜色 horizontalGridLines 为true 时有效 verticalGridLines 是否显示垂直方向分隔线 是否显示每一行之间的横向分隔线 true false 此属性只对内容中的分隔线有效，标题头的分隔线是默认的 verticalGridLineColor 垂直方向分隔线颜色 verticalGridLineColor 为true 时有效 useRollOver 是否实现鼠标经过时的变化效果 true false rollOverColor 鼠标经过一行时的本行背景色 useRollOver 为true 时有效 textRollOverColor 鼠标经过一行时的本行文字颜色 useRollOver 为true 时有效（这个属性好像无效?） color 文字颜色 textSelectedColor 被选中行的文字颜色 （这个属性好像无效?） selectionColor 被选中行的背景颜色 textIndent 每一行文字缩进距离 数值从030 2. Tree 组件样式属性 backgroundColor 背景色 backgroundAlpha 背景色透明度 数值从0.001.00 alternatingItemColors 间隔行的颜色 这个属性设置2 个色彩，某一行的背景色和下一行的背景色 depthColors 树级结构中每级的背景色 这个属性可设置多个色彩，中间以逗号分隔。对应 从树的顶级到最后一级每1 级的背景色。设置此属性会覆盖 alternatingItemColors 中的设置 useRollOver 是否使用鼠标经过每一行时的效果 true false rollOverColor 鼠标经过每一行时的背景色 useRollOver 为true 时有效 textRollOverColor 鼠标经过每一行时的文字颜色 useRollOver 为true 时有效 borderThickness 边框的粗细 数值从020 color 文本颜色 selectionColor 被选中行的背景色 textSelectedColor 被选中行的文本颜色 textIndent 文字缩进值 文字相对于图标的缩进值 从050 indentation 每一层级相对于上一层级的缩进值 从050 openDuration 打开和关闭本层内容的速度 从01000 selectionDuration 被选中层级的背景色渐变速度 从030003. 使用容器控制界面布局一、 管理程序的布局 容器类组件都位于mx.containers包中。Container类是UIComponent的子类，是所有Flex容器类的父类，每个容器类都在它的基础上添加自己的功能。1.1控制Application 的布局 Application 是一个特殊的容器，位于界面元素的根部，包含了整个程序的所有元素。layout ： 值为absolute时，horizontalAlign水平对齐和verticalAlign垂直对齐不起作用，界面上的元素将由各自的坐标决定。 值为vertical 或 horizontal时，元素的位置由horizontalAlign和verticalAlign控制。width 长， height 高。决定SWF文件的尺寸。我们可以设置如下的属性，所有组件公有：horizontalGap 水平间距vericalGap 垂直间距paddingTop 顶部边距paddingLeft 左边距paddingRight 右边距paddingBottom 底边距Constraint layout 约束布局，只能在layout属性值为absolute才能使用，具有这一特性的容器有：Application、Canvas、Panel和Panel的子类TitleWingdow点击元素得到如下界面：如果对某一组件使用了约束布局，它会被强制定位在相应的位置，设置的X,Y坐标会失效。ApplicationContolBar是和Application相关的一个容器，通常用来提供全局导航。有水平（默认）和垂直方向选择。它的dock属性，表示是否强行停靠在Application的顶部。默认false，被当作一个普通的组件。true，始终在顶部，宽度为100%。Xml代码 1. 2. 5. 6. 7. 8. 9. 10. 11. 1.2 Canvas Canvas 直接继承自Container，体积小，使用灵活。在它里面的元素只能由X,Y来定位。如果元素超出 Canvas 的区域范围， Canvas 会自动增加滚动条。每个容器默认情况下都会自动带滚动条。可以通过horizontalScrollPolicy和 verticalScrollPolicy 的属性值来控制，on/off/auto。在AS中对应ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO。 1.3 VBox 和 HBox VBox 和 HBox 都是Box的子类，和Canvas相比,Box对子级元素采取规则的布局方式，其中VBox内的元素垂直方向分布，而HBox水平方向分布。通过horizontalAlign和verticalAlign控制容器内的元素对齐方式。Xml代码 1. 2. 3. 5. 6. 7. 8. 9. 10. 11. 12. 1.4 用DividedBox分割界面 DividedBox继承自Box类，它有两个子类：HDividedBox和VDividedBox。类似于HBox和VBox，多了在子级元素之间增加了可以拖动的分割块。拖动分割块可以动态的调整分割块附近元素的长宽。borderStyle是组件的样式之一，表示边框样式，默认：none，表示无边框。solid为实心线条。liveDragging：true 表示在拖动时，在松开鼠标后，调整位置。false 拖动时调整。Xml代码 1. 2. 3. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 二、 窗口布局 Panel组件就是这样一个窗口组件，它直接继承Container。和它的子类TitleWindow都具有窗口程序的特点：有标题条，可以放置其他内容，形成一个整体。2.1 Panel 组件 fontSize 表示字体大小，默认是10.一般中文12显示较清晰。title 表示窗口的标题。ControBar Panel的一个容器，位置不可调整总是在底部，布局模式跟HBox相同。可以放置按钮等组件。Xml代码 1. 2. 3. 5. 6. 8. 9. 10. 11. 为窗口添加关闭按钮：Xml代码 1. 2. 3. 4. 10. 11. 13. 14. 16. 17. 18. 19. 20. 21. 22. 将上面的代码保存为MXML，然后使用下面的代码new一个实例出来：Xml代码 1. 2. 3. 5. 6. 7. Application 的 applicationComplete 事件 会在主程序初始化后被触发。接下来为窗口实现拖动功能，使用PopUpManager这个对象弹出Panel窗口，窗口将置于最上层，被称为Pop-Up弹出窗口。Xml代码 1. 2. 4. 5. 23. 24. 25. PopUpManager.addPopUp函数可以将对象置于父级对象的顶层，对应的removePopUp可以删除弹出的对象。addPopUp有4个参数：window:IFlexDisplayObject, 弹出的对象parent:DisplayObject, 分配给新弹出窗口层级的对象modal:Boolean=false, true的话，变成模式窗口，直到窗口关闭，其他元素不可用。childList:String=null 将添加新窗口的对象，默认为PopUpManagerChildList. PARENT所有组件都可以被弹出，会触发组件的内部预写方法。如Panel，弹出后，内部的isPopUp属性变为true，就可拖动了。Flex 中父窗口和子窗口的数据交换的实现如下. 1 在Flex2中弹出式窗口的API如下 Package : mx.managers Class : PopUpManager Methods : addPopUp(window:IFlexDisplayObject, parent:DisplayObject, modal:Boolean = false, childList:String = null):void 参数解释: window : 要弹出的对象，这对象必须实现了IFlexDisplayObject接口,比如TitleWindow. parent : 子窗口的父窗口对象. modal : 模式弹出(true)还是非模式弹出(false). childList :弹出式对象在那个对象下弹出. PopUpManagerChildList.APPLICATION PopUpManagerChildList.POPUP PopUpManagerChildList.PARENT (默认). 2 实例 Java代码 1. 2. 3. 4. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. - 49. 50. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 84. 85. 86. - 87. packagecom.demo 88. 89. Bindable 90. publicclassPersonVO 91. 92. 93. publicvarid:String=; 94. publicvarname:String=; 95. publicvarlanguage:String=; 96. publicvaremail:String=; 97. publicvarworkYears:String=; 98. publicvarmarried:Boolean=false; 99. 100. 101. 102. 2.2 TitleWindow 组件 继承Panel ，多了一个关闭按钮。Xml代码 1. 2. 3. 4. 10. 11. 12. 13. 14. showCloseButton指定是否显示关闭按钮。close指定点击关闭按钮调用的方法。是TitleWindow的关闭事件。creationComplete 事件，对象的初始化后触发的事件。三、 动态控制对象的布局 3.1 使用Tile 显示多个按钮 Tile直接继承Container，使用起来非常方便。适合重复排列的元素。direction 属性值为 horizontal时，设置其子级对象的布局方向为水平方向。tileWidth 和 tileHeight 用来控制每个子级对象的长和宽。Xml代码 1.