我的Flex之旅（2）布局容器

 

         很抱歉，博客更新速度比较慢，因此隔了1天才更新Flex之类的文章，毕竟我也是刚开始接触Flex，好了，废话不多说，让我们开始我们第二章节的学习吧。

         很多时候，我们为了处理不同的数据，把数据放在不同的区域中，于是怎么规划这些数据呢？很明显的，我们可以用容器包容这些数据，于是我们就涉及到了这样一个概念，布局容器，类似html页面一样使用DIV+CSS来划分不同区域，并且美化。

        我们新建立一个应用程序项目（不了解的请参见第一章节）

打开主应用程序文件，比如我的Demo.mxml ，在舞台上切换源代码试图，初始代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout=" absolute">
</mx:Application>

我们可以看到，第1节点是描述此文件是以XML文件格式为基础的，并且标明了编码。如下

<?xml version="1.0" encoding="utf-8"?>

同时我们看第2节点，这是以<mx:Application></mx:Application>为开始跟结束的，这是一个主容器，里面可以包含子容器或者其他组件，控件等。默认的，主容器内的布局方式为：layout="absolute",这是绝对定位，当然您可以选择主容器的布局方式为：verticl（垂直）,horizontal（水平）布局方式。

      首先我们来学习下Panel容器，在窗体左下角Components视图中找到Layout,并在里面找到Panel容器，把他拖到舞台上，如图：

   

 

      此Panel是个容器，里面可以包含其他内容或容器，现在这个容器默认什么都没有，当然我们可以为他添加一些属性，选中这个容器，在右侧属性面板中可以发现这个容器的一些属性，事件等。如图：

   

     我们可以为这个容器指定一些值：比如：ID，Title，宽，高，圆角，BorderColor,容器内的布局方式（也是verticl，absolute，horizontal）跟容器内对象的对齐方式。当然你可以慢慢的查看这些属性，事件等。细心的您可以发现在这属性面板中有三个切换卡如图：

 

您可以切换查看这个容器的一些特征。

我们为这个容器指定一些值：ID：panel/Title:this my Panel,同时在这个容器内添加2个Lable 控件，并附上值，如图:

  

您可以发挥你主观能动性，任意添加些东西进去。

     接下来，我们要介绍一个跟Panel容器密切相关的一个容器：ControlBar 这个容器通常是放在Panel容器里面，它自动会添加到Panel容器的底部，充当容器。

我们拖动一个ControlBar容器到Panel中，你将会看到它自动布局到Panel底部，这个时候您可以添加2个Button控件到ControlBar中去，效果如图：

  

整个页面源代码非常简洁如下：

 

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" cornerRadius="13">
    <mx:Panel width="250" height="200" layout="vertical" horizontalAlign="left" id="panel" 
              title="this my Panel" color="#03181D" borderColor="#EB1717" cornerRadius="0" fontWeight="bold">
        <mx:Label text="FirstName"/>
        <mx:Label text="LastName"/>
        <mx:ControlBar>
            <mx:Button label="Button"/>
            <mx:Button label="Button"/>
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>

 

接下来我们在学习下其他2个容器：Hbox,Vbox：

我们可以新建个主文件：在Src文件夹内右键New->MXML Application，或者你把上一段

<mx:Application></mx:Application>之间的代码注释掉，再添加，因为Flex一次只能运行一个主文件，或者主控制器文件。我们切换会源试图，选中需要注释的文本，按ctrl+shift+c，于是代码就注释掉了，通常的我们注释代码，而不是删除代码，毕竟以后可能会用到，同时注释的代码编译器是不管它的，也不占内存开销。

我们将Application中的布局方式改为：layout=” horizontal”, 同时我们从Layout中找到H     Box容器，并将它拖动到主容器中，此时弹出：

 

它询问你，是否设置容器的宽度为100%，Height:fit to content 高度为适应内容变化。我们设置width,height都为100%。您会看到HBox布满整个主文件区域。

我们再拖个HBox容器到Hbox容器里面，依旧弹出对话框要求你设置，我们将他设置为：

  

同时修改下这个容器的背景颜色，以方便我们观察。同时我们拖动一个VBox容器到Applicaton容器中，（注意不是放在刚才添加的Hbox中），并设置宽高（50%,100%）跟背景颜色。如图：

  

当然，我们还可以在红色区域，也即是VBox里面再添加2个容器Panel，如图：

  

您会发现：VBOX布局方式是垂直方式的，也就是在他里面的物件都是以垂直方式进行排列的。相反，Hbox布局方式是水平的，也即是在他里面的物件都是以水平方式进行排列。

我们可以根据需要选择适当的容器，对我们的应用程序界面进行布局。

接下来，我们再学习另外一个容器。Form容器。大家可能会说这不是表单吗？怎么是容器？当然，它在Flex中的确是容器作用，用来布局里面的物件，比如一些需要填写的信息，类似表单内一些需要填写的信息。但是这绝对不是表单，毕竟表单功能是收集用户填写的数据，并发送到服务器中。这个是容器，不具备上述功能。

好啦，让我们看个究竟吧，拖一个Form到黄色区域中，也即是Hbox容器中。与VBox一样会弹出选择框，供我们设置改容器所占宽高。我们就默认的确定吧！

现在我们将要填充Form，用来供用户输入。

在Controls中拖动一个TextInput控件到Form中，你会发现它貌似填充了Labl标签跟TextInput，其实不然，你切换源代码发现：

 

<mx:FormItem label="Label">
<mx:TextInput/>
</mx:FormItem>

 

其实这个是Form的一个项的标签，当然它为我们省去了再去添加Lable，当然啦textinput控件还支持密码框功能，设置TextInput的 属性：dispay as password=”true”

 当然您可能还需要为用户提示这个文本框必须填写，像一般注册页面那样标记“*”表示必须，因此我们可以选中FormItem在右侧属性面板中找到 Required:并设置为true

如图：

我们可以试试其他的控件，比如：RadionButtonGroup，它自动弹出：

  

这是单选按钮组，您可以命名这个单选按钮组，默认是2个单选按钮，你可以添加多几个单选按钮，当然你知道的，在单选按钮组里面，你只可以选中某个单选按钮，因为他们是互斥的。选中一个单选按钮，选择Selected=”true”

我们还添加个Text这个控件，它于Lable不同的是，它可以表示多行文本，而Lable只能表示一行。我们可以添加进TextArea ,此段可以提供多行输入文本。当然也有富文本控件RichTextEditor，当然你可以不让它们在FormItem中，所以可以选择性的去除作为父容器的FormItem

，您可以任意添加进去，查看效果。

    

    好了，这节就说到这里，下一节我们再介绍其他的容器，比如导航容器等。