Блог

Я пытаюсь создать простую форму в flex (flash Builder 4). Я разместил контейнер формы и элементы FormItems внутри. Элементами формы являются, например, стандартные поля «клиент», такие как имя, фамилия, адрес, город, штат, почтовый индекс.

По умолчанию поля располагаются вертикально, а метки полей выровнены по правому краю, что выглядит красиво.

Однако я бы хотел, чтобы некоторые поля были горизонтальными — например, что-то вроде этого:

   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

Кроме того, есть ли какие-либо хорошие книги / сайты / etc, В которых обсуждается дизайн пользовательского интерфейса / дизайн форм и тому подобное в Flex, которые я могу просмотреть?

Единственный способ, который я нашел для достижения этой цели, — использовать mx:Grid . Главным образом потому, что у mx:GridItem s есть атрибут colSpan or rowSpan . Кроме того, я использую пустые 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>
  

Надеюсь, это поможет,

Koen

Ответ заключается в том, чтобы просто использовать CSS. Создайте стиль метки в CSS, который задает выравнивание текста по ‘левому краю’. Затем возьмите этот стиль надписи и примените его к свойству labelStyleName в 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.

Вам следует избегать использования нескольких HGroups, если вы хотите выровнять столбцы, это может легко нарушиться при уменьшении размера окна браузера, так что оно не сможет отображать все содержимое сразу. Логика переполнения содержимого, скорее всего, нарушит выравнивание. Вместо этого используйте mx: Grid в качестве окончательного решения или s: Form для очень простых случаев.