FlexStore研究一:FlexStore主界面的布局

001:  整个是在Canvas(c0)里面,width=100%,height=100%. 水平和垂直的Scroll都禁掉.

002放置背景图片,这里有两张背景图片,其中一张最初不可见,当用户选择不同的风格时两者切换. 这两张图片的 width=100%,height=100%,showEffect=fade,这个属性的作用就是说当这张图片显示或隐藏的时候,是淡    出或淡入

**********************************************************************************************************************

003:  定义一个VBox(v1),width=100%,height=100%,关键还在于MarginTop=12,这个控制了在这个VBox里面的第一个子控件离这个VBox的Top为12pixes,还有一个属性VerticalGap = 8,这个属性表明,所有在这个VBox 里面的子控件之间的垂直方向的距离都为8piexs.另外一个 HorizontalAlign=center,这个属性决定了在这个VBox里面的所有控件在水平方向的对齐都是在中间的.

004:  在VBox(v1)里面定义一个Canvas(c1),宽度为990.

005:  在这个Canvas(c1)里面定义一个ApplicationControlBar(acb1),宽度是100%,也就是990,高度是30,这个30也决定了这个Canvas的高度也是30,这个ApplicationControlBar的一个属性cornerRadius = 3,的意思是这个控件的四个角的弯曲度为3

006:  在ApplicationControlBar(acb1), 里面定义9个子控件,其中首尾两个是 width=200 的Spacer,中间是一些Lable+VRule,  其中VRule的高度是20

007:  在Canvas(c1)的里面, 定义一个Image，id=logo，y=1，这个y坐标其实就是相对于这个Canvas来说的，为什么不是0，而是1，我觉得有点奇怪，尝试修改了一下，发觉，如果设置y=0的话，这个图片就会往上偏一点的。同时我还尝试了x=1，忽然发觉x=1的话，会往右偏一点的，应该设置成x=0。它默认就是x=0。

008:  在Canvas(c1) 的里面，定义两个Button，其中一个隐藏，用于切换，它们都设置了layoutConstraints，也就是离Canvas右边距为0，离Canvas顶部为1。

注：到这边为止，flexStore中的那个工具条已经构造完毕了。接下来就是构造中间的主模块了。

***********************************************************************************************************************

009:  接着在VBox(v1)的里面，也就是Canvas(c1)的下面，定义一个Canvas(c2),width=990,height=550, 水平和垂直的Scroll都禁止掉。

010:  在这个Canvas(c2)里面定义一个HBox(h1),width=100%,height=100%,也就是990和550，BoderStyle=solid,dropShadow=true,这个属性的意思就是有阴影，CornerRadius=4,就是四个角的弯曲度。

011:  在这个HBox(h1),就要做主要的文章了，从大局来看，在它的里面定义了三个VBox和一个Cart，在第二个与第三个之间定义了一个Spacer,width=100%.这个是比较关键的。从小的方面来看，最左边的VBox主要是定义了两张图片，这个VBox占去的width=17,这样的话HBox(h1)的width=990-17=973。中间的VBox比较复杂包含了一系列的控件，但是挺简单，不做介绍了。它的width=265,所以HBox(h1)的width=973-265=708，接下来就是Cart了，它的宽度也是265，这样HBox的宽度=708-265=443，最后的一个VBox也是由两张图片组成，宽度也是17，这样的话HBox的宽度=443-17=426。这个最终的426宽度就是那个Spacer所占有的宽度。

注：到这边为止，flexStore的中间的主模块已经完成了70%，还有30%就是那块显示手机的CatalogPanel了。

***********************************************************************************************************************

012:  在Canvas(c2)里面，接着定义，自定义的组件catalogPanel(cp1),y=4,x=285,y=4很简单，就是让这个控件离这个Canvas的顶端为4，这个x=285的算法是这样的，左边的两个VBox的宽度分别是17和265，加起来的话就是283，这样的话，285就是离这个边2，而这个catalogPanel的宽度是685，这样一加的话285+685=970，剩下的20，就是3piex空间+最右边的VBox的17piex，刚刚好，全部OK，这块catalogPanel刚好把中间的全部覆盖。

到此为止，大局方面的布局控制已经写完。