Dreamer’s Blog

英文原文：《Building RIAs from front to back – Part 2: Layout beyond the standard container in Flex 2》
原文地址：http://www.adobe.com/devnet/flex/articles/frontback_pt2.html
原文作者：Andrew Trice， Keun Lee

译者：Dreamer。此文未经允许，谢绝转载。这个是一系列的文章，第一部分早就出来了，过了好长时间才出了这个第二部分。建议先阅读第一部分，这个我也翻译了：http://www.zhuoqun.net/index.php/archives/52。

从前往后创建RIAs – 第二部分：Flex 2中超越标准容器的布局

这篇文章是“从前往后创建RIAs”系列文章的第二部分，这一系列文章描述了如何根据用户体验创建程序，并从零开始讲解了如何开发更好的富因特网应用程序。我们建议您在阅读第二部分之前先阅读“从前往后创建RIAs – 第一部分：理解这种方式”。在本文中，你将会学习到如何在Flex 2中创建超越标准容器的布局，还会学习如何使用Flex 2中的CSS特性以及CSS样式引擎。

传统地，在Adobe Flex应用程序中，布局是基于多层次容器的，由Panel，Canvas，ViewStacks, HBoxes Vboxes以及很多其它容器组成。看图1：

图1.Flex 1.5样式的布局

在传统的基于容器的Flex 1.5布局中，这种效果需要一个<mx:Panel>，一个<mx:VBox>，和一系列的<mx:HBox>（每个<mx:HBox>包含一个<mx:Label>和一个<mx:TextInput>）。下面的代码可以在Flex 1.5中创建图1所示的程序：

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Panel title=”Flex Demo - 1.5 Style Layout”
paddingBottom=”10″ paddingLeft=”10″ paddingTop=”10″ paddingRight=”10″>

<mx:VBox width=”100%” height=”100%”>

<mx:HBox width=”100%” >
<mx:Label text=”Field 1″ width=”50″ />
<mx:TextInput width=”100%” />
</mx:HBox>

<mx:HBox width=”100%” >
<mx:Label text=”Field 2″ width=”50″ />
<mx:TextInput width=”100%” />
</mx:HBox>

<mx:HBox width=”100%” >
<mx:Label text=”Field 3″ width=”50″ />
<mx:TextInput width=”100%” />
</mx:HBox>

<mx:HBox width=”100%” >
<mx:Label text=”Field 4″ width=”50″ />
<mx:TextInput width=”100%” />
</mx:HBox>

<mx:HBox width=”100%” >
<mx:Label text=”Field 5″ width=”50″ />
<mx:TextInput width=”100%” />
</mx:HBox>

<mx:HBox width=”100%” horizontalAlign=”center”>
<mx:Button width=”30″ label=”OK” />
<mx:Button width=”60″ label=”Cancel” />
</mx:HBox>

</mx:VBox>

</mx:Panel>

</mx:Application>

这种布局有什么错误吗？

绝对没有，不过有更好的方法来实现它。

Flex 2让你可以使用CSS将元素相对定位到它们所在的容器。从根本上来说，这就意味着在Flex 2中可以创建和上面的例子相似的组件，但是不需要嵌套容器。如果你比较一下图1和图2（在下面），你将会看到它们几乎一样。但是从代码的角度来看，它们是很不同的。

用户界面组件对象现在支持”left”, “right”, “top” 和 “bottom” CSS样式。这些属性允许你将组件相对定位于它们所在容器中。所以，如果你有一个<mx:Label>元素，它有一个属性top=”10″，这个Label将总是与其所在容器的顶部保持10像素的距离。

图2.Flex 2样式的布局

尽管这个程序看起来和图1一样，但是代码却使用了CSS定位：

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Panel title=”Flex Demo - 2 Style Layout”
paddingBottom=”10″ paddingLeft=”10″ paddingTop=”10″ paddingRight=”10″ layout=”absolute” height=”233″ width=”260″>

<mx:Label text=”Field 1″ width=”50″ top=”10″ left=”10″/>
<mx:TextInput right=”10″ left=”65″ top=”8″/>

<mx:Label text=”Field 2″ width=”50″ top=”40″ left=”10″/>
<mx:TextInput right=”10″ left=”65″ top=”38″/>

<mx:Label text=”Field 3″ width=”50″ top=”70″ left=”10″/>
<mx:TextInput right=”10″ left=”65″ top=”68″/>

<mx:Label text=”Field 4″ width=”50″ top=”100″ left=”10″/>
<mx:TextInput right=”10″ left=”65″ top=”98″/>

<mx:Label text=”Field 5″ width=”50″ top=”130″ left=”10″/>
<mx:TextInput right=”10″ left=”65″ top=”128″/>

<mx:Button width=”30″ label=”OK” bottom=”10″ right=”80″/>
<mx:Button width=”60″ label=”Cancel” right=”10″ bottom=”10″/>

</mx:Panel>

</mx:Application>

这部分代码简单清爽的多。这只是Flex 2中基于CSS布局的好处之一。另外一个好处就是这个框架不再需要像Flex 1.5的布局那样嵌套容器。这是一个很大的优点。当Flex被编译成SWF文件在浏览器中被渲染时，每个容器都将作为一个额外的对象。因为组件变少了，所以运行时的movie clip对象也少了，所以，在渲染布局相同的页面时使用的资源也少了！

CSS定位全面改善了整个程序的速度，初始化，文件大小以及渲染时间。在这个例子中，你不会在性能表现上发现太大的差异，但是如果你有一个包含成百个页面和/或组件的大型程序的时候，在性能上将会有极大的不同。

Flex 2基于CSS布局的另外一个好处就是所有的定位都可以使用Flex CSS样式引擎实现。图3（如下）可能看起来很像图2：

图3.Flex 2的CSS样式布局

尽管图3看起来非常像图2，但是实现它的代码非常不同：

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Style>

.label1{ width:10; top:10; left:10; }
.textInput1{ right:10; left:65; top:8; }

.label2{ width:10; top:40; left:10; }
.textInput2{ right:10; left:65; top:38; }

.label3{ width:10; top:70; left:10; }
.textInput3{ right:10; left:65; top:68; }

.label4{ width:10; top:100; left:10; }
.textInput4{ right:10; left:65; top:98; }

.label5{ width:10; top:130; left:10; }
.textInput5{ right:10; left:65; top:128; }

.button1{ width:30; bottom:10; right: 80; }
.button2{ width:60; bottom:10; right: 10; }

</mx:Style>

<mx:Panel title=”Flex Demo - 2 CSS Style Layout”
paddingBottom=”10″ paddingLeft=”10″ paddingTop=”10″ paddingRight=”10″
layout=”absolute” height=”233″ width=”260″>

<mx:Label text=”Field 1″ styleName=”label1″ />
<mx:TextInput styleName=”textInput1″ />

<mx:Label text=”Field 2″ styleName=”label2″ />
<mx:TextInput styleName=”textInput2″ />

<mx:Label text=”Field 3″ styleName=”label3″ />
<mx:TextInput styleName=”textInput3″ />

<mx:Label text=”Field 4″ styleName=”label4″ />
<mx:TextInput styleName=”textInput4″ />

<mx:Label text=”Field 5″ styleName=”label5″ />
<mx:TextInput styleName=”textInput5″ />

<mx:Button label=”OK” styleName=”button1″ />
<mx:Button label=”Cancel” styleName=”button2″ />

</mx:Panel>

</mx:Application>

是的，它比图2所示的程序有更多代码。为什么我们需要更多代码？

CSS定位允许你将显示/定位逻辑从实际程序的逻辑中分离出来。这使得用户界面设计师和工程师可以各自单独工作。工程师可以开发程序功能，而用户界面设计师则可以在同时设计样式。他们在工作过程中不需要等待彼此。当用户界面设计完成的时候，样式可以被简单地“拖”到工程师的代码里，然后工程师只需要做很少的额外工作程序可以加上样式。

这样做的好处不只是设计师和工程师角色的分离。这样做一个程序就可以很容易地重新加载皮肤，组件也可以很容易地被重新定位。观察一下图4，看看这个与上面的不一样的程序，它的最精华的地方就是没有对图3所示程序的逻辑作任何更改。唯一更改的是CSS样式的定义。

图4.相反的Flex 2 CSS样式布局

请看代码中对CSS所作的更改：

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Style>

.label1{ width:10; top:10; right:10; }
.textInput1{ left:10; right:65; top:8; }

.label2{ width:10; top:40; right:10; }
.textInput2{ left:10; right:65; top:38; }

.label3{ width:10; top:70; right:10; }
.textInput3{ left:10; right:65; top:68; }

.label4{ width:10; top:100; right:10; }
.textInput4{ left:10; right:65; top:98; }

.label5{ width:10; top:130; right:10; }
.textInput5{ left:10; right:65; top:128; }

.button1{ width:30; bottom:10; left: 80; }
.button2{ width:60; bottom:10; left: 10; }

</mx:Style>

<mx:Panel title=”Flex Demo - 2 CSS Style Layout (alternate)”
paddingBottom=”10″ paddingLeft=”10″ paddingTop=”10″ paddingRight=”10″
layout=”absolute” height=”233″>

<mx:Label text=”Field 1″ styleName=”label1″ />
<mx:TextInput styleName=”textInput1″ />

<mx:Label text=”Field 2″ styleName=”label2″ />
<mx:TextInput styleName=”textInput2″ />

<mx:Label text=”Field 3″ styleName=”label3″ />
<mx:TextInput styleName=”textInput3″ />

<mx:Label text=”Field 4″ styleName=”label4″ />
<mx:TextInput styleName=”textInput4″ />

<mx:Label text=”Field 5″ styleName=”label5″ />
<mx:TextInput styleName=”textInput5″ />

<mx:Button label=”OK” styleName=”button1″ />
<mx:Button label=”Cancel” styleName=”button2″ />

</mx:Panel>

</mx:Application>

因为位置绑定（如同其它的绑定一样）是相对于其所在容器的，如果所在容器的大小改变了，该容器的大小也会随之改变（看图5）。图4和图5之间唯一的区别就是<mx:Panel>容器的宽度增加了。

图5.改变有位置限定的元素的大小

不要因此产生误解。HBoxe, Vboxe，以及根据x,y定位的Canvas并不是没有用了，它们在Flex库中是很有用的组件而且使用起来依然方便。不同的是你将不再是只能依赖它们。Hbox和VBox在将组件相邻放置的时候依然很有用。现在，你可以容易地使用CSS定位将一个HBox绑定到屏幕的特定位置。

图6.使用混合方式创建的复杂布局

图6所示的程序布局更加接近现实中程序的布局。图6使用了一系列基于容器的布局和CSS定位来快速可靠地将控件定位到一起。在左边是一个TabNavigator控件，它使用CSS定位将它的边框绑定到Panel容器的边框。DateChooser和 DataGrid使用CSS定位绑定到TabNavigator受其约束。还有一个VBox控件使用CSS定位将自己绑定在右边界。这个VBox控件包含了一系列CheckBox控件。尽管这个例子是静态编码的，但是这一系列的CheckBox控件可以在运行时根据数据源的记录个数动态添加。使用VBox控件允许你利用VBox的逻辑来管理动态的CheckBox。下面是图6所示程序的代码：

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”> <mx:Style>
.panel {
top: 10;
bottom:10;
left:10;
right:10;
}

.tabnav {
top: 10;
bottom:10;
left:10;
right:130;
}

.dg {
top: 10;
bottom:10;
left:10;
right:192;
}

.dc {
top: 10;
right: 10;
}

.vbox {
top: 30;
bottom:10;
right:10;
}
</mx:Style>

<mx:Panel
title=”Complex Layout Using Mixed Approach”
layout=”absolute” styleName=”panel”>

<mx:TabNavigator styleName=”tabnav”>

<mx:Canvas label=”Canvas” width=”100%” height=”100%”>

<mx:DataGrid styleName=”dg”>
<mx:columns>
<mx:DataGridColumn headerText=”Column 1″ />
<mx:DataGridColumn headerText=”Column 2″ />
<mx:DataGridColumn headerText=”Column 3″ />
</mx:columns>
</mx:DataGrid>

<mx:DateChooser styleName=”dc”/>

</mx:Canvas>

<mx:HBox label=”HBox” width=”100%” height=”100%” />

<mx:VBox label=”VBox” width=”100%” height=”100%” />

</mx:TabNavigator>

<mx:VBox width=”110″ verticalGap=”3″ styleName=”vbox”>

<mx:CheckBox label=”Checkbox 1″/>
<mx:CheckBox label=”Checkbox 2″/>
<mx:CheckBox label=”Checkbox 3″/>
<mx:CheckBox label=”Checkbox 4″/>
<mx:CheckBox label=”Checkbox 5″/>
<mx:CheckBox label=”Checkbox 6″/>
<mx:CheckBox label=”Checkbox 7″/>
<mx:CheckBox label=”Checkbox 8″/>
<mx:CheckBox label=”Checkbox 9″/>
<mx:CheckBox label=”Checkbox 10″/>

</mx:VBox>

</mx:Panel>

</mx:Application>

简而言之，使用Adobe Flex可以有很多方式来创建迷人并且丰富的程序。使用Flex 2中的CSS样式引擎可以创建更灵活/较简单/强度小的布局，而且实现了编码和设计的更大层次的分离。紧记，这些不是Flex 2所能做的全部，这只不过是冰山一角而已。请关注我们其它将要发布的文章，我们将在其中更加深入地讲解视图状态和过渡、远程过程调用和data services、以及加载皮肤和可视化。

分享收藏