flex - раскладка элементов формы как вертикально, так и горизонтально - PullRequest
Новая
       22

flex - раскладка элементов формы как вертикально, так и горизонтально

4 голосов
/ 06 мая 2011

Я пытаюсь создать простую форму в flex (flash builder 4).Я поместил контейнер формы и FormItems внутри.Элементами формы являются, например, стандартные поля "customer", такие как 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

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

Ответы [ 3 ]

7 голосов
/ 06 мая 2011

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

1 голос
/ 07 мая 2011

Ответ - просто использовать CSS. Создайте стиль метки в CSS, который указывает textAlign на 'left'. Затем возьмите этот стиль метки и примените его к свойству 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.

0 голосов
/ 25 марта 2013

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

...