flex - 纵向和横向布置表单项

时间:2011-05-06 12:31:04

标签: flex forms layout user-interface

我正在尝试在flex中创建一个简单的表单(flash builder 4)。我在里面放了一个表单容器和FormItems。表单项例如是标准的“客户”字段,例如First,Last,Address,City,State,Zip。

默认情况下,它会垂直放置字段,并使字段标签右对齐,看起来不错。

但是,我希望某些字段是水平的 - 例如,像这样:

  First __________   Last ___________
Address _____________________
   City ___________    St ___   Zip ____

我尝试将第一个/最后一个放在HGroup容器中,但这不太合适 - 我放弃了标签的正确理由,看起来像这样:

First __________  Last ___________
Address _____________________
City ___________  St ___  Zip ____

这是我如何尝试制作第一个/最后一个视角的一个例子,但是推荐不合适 - 但是城市和推荐是合理的:

<mx:Form x="0" y="307" width="100%"> 
 <s:HGroup> 
      <mx:FormItem label="First"> <s:TextInput/></mx:FormItem>
      <mx:FormItem label="Last"><s:TextInput/></mx:FormItem>
 </s:HGroup>
 <mx:FormItem label="Referral"><s:TextInput/></mx:FormItem><mx:FormItem label="City">
  <s:TextInput/>
 </mx:FormItem>
</mx:Form>

这几乎就像我需要一种具有colSpan能力的表格布局,或者?

此自定义组件看起来很有前景,但似乎无法在fb4中使用至少http://cookbooks.adobe.com/post_Multi_Column_Form_Layout-9644.html

此外,是否有任何好的书籍/网站/等讨论用户界面设计/表单设计以及Flex中我可以浏览的类似内容?

3 个答案:

答案 0 :(得分:7)

我发现实现这一目标的唯一方法是使用mx:Grid。 主要是因为mx:GridItem具有colSpanrowSpan属性。此外,我使用空mx:FormItem代替标签,因为您可以使用required属性为必填字段显示(*)。

以下是一个例子:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
  <mx:Form width="100%" height="100%">
    <mx:Grid width="100%" height="100%">
      <mx:GridRow>
        <mx:GridItem>
          <mx:FormItem label="First" required="true"/>
        </mx:GridItem>
        <mx:GridItem>
          <s:TextInput/>
        </mx:GridItem>
        <mx:GridItem>
          <mx:FormItem label="Last"/>
        </mx:GridItem>
        <mx:GridItem>
          <s:TextInput/>
        </mx:GridItem>
      </mx:GridRow>
      <mx:GridRow>
        <mx:GridItem width="100%" height="100%">
          <mx:FormItem label="Last"/>
        </mx:GridItem>
        <mx:GridItem width="100%" height="100%" colSpan="3">
          <s:TextInput width="100%"/>
        </mx:GridItem>
      </mx:GridRow>
    </mx:Grid>
  </mx:Form>
</s:Group>

希望这有帮助,

柯恩

答案 1 :(得分:1)

答案是使用CSS。在CSS中创建一个label style,指定textAlign为'left'。然后采用该标签样式并将其应用于labelStyleName property on the formItem

这是一个完整的应用程序,演示了修复:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        .labelStyleName {
            textAlign:left;
        }
    </fx:Style>

    <mx:Form x="0" y="307" width="100%"> 
        <s:HGroup> 
        <mx:FormItem label="First"  horizontalAlign="left" labelStyleName="labelStyleName"> 
            <s:TextInput/>
        </mx:FormItem>
        <mx:FormItem label="Last" horizontalAlign="left" labelStyleName="labelStyleName">
            <s:TextInput/>
        </mx:FormItem>
        </s:HGroup>
        <mx:FormItem label="Referral"  horizontalAlign="left" labelStyleName="labelStyleName">
            <s:TextInput/>
        </mx:FormItem>
        <mx:FormItem label="City"  horizontalAlign="left" labelStyleName="labelStyleName">
            <s:TextInput/>
        </mx:FormItem>
    </mx:Form>  

</s:Application>

如果您想要更具体的输入项目排队;您可能需要指定labelWidth值。

答案 2 :(得分:0)

如果希望列对齐,则应避免使用多个HGroup,当您缩小浏览器窗口的大小时,它可能很容易中断,因此无法一次显示所有内容。内容溢出逻辑将最有可能打破对齐。使用mx:Grid作为最终解决方案或s:表单用于非常简单的情况。