проблемы с использованием тега ‹s:Form/› во Flex

У меня есть простая форма, содержащая два поля ввода. как показано в коде ниже:

<s:Form>
    <s:FormItem width="242" label="Name:">
        <s:TextInput x="1" y="0"/>
    </s:FormItem>
    <s:FormItem width="242" label="Evaluate at:">
        <s:TextInput/>
    </s:FormItem>
</s:Form>

проблема в том, что поля ввода находятся на расстоянии y друг от друга, и я хочу немного приблизить их. если бы я использовал <s:VGroup/> или <s:HGroup/>, есть свойство пробела, чтобы закрыть пробел, но этого свойства нет в теге формы.

Как я могу закрыть пробелы с помощью тега формы?


apache-flex flex4.5
person helpdesk    schedule 13.07.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете сделать это так, как Flextras (мне это не нравится, потому что я не фанат AS-кода для компоновки), или вы можете сделать это:

<s:Form>
    <s:layout>
        <s:FormLayout gap="0" />
    </s:layout>
    <s:FormItem width="242" label="Name:" height="25">
        <s:TextInput x="1" y="0"/>
    </s:FormItem>
    <s:FormItem width="242" label="Evaluate at:" height="25">
        <s:TextInput/>
    </s:FormItem>
</s:Form>
person J_A_X    schedule 13.07.2011
comment
даже если вы установите для свойства зазора FormLayout значение 0, у вас все равно будет этот зазор. то, что вы на самом деле устанавливаете на ноль, - это макет, а не компоненты TextInput. представьте, что вы просто используете тег ‹s:VGroup gap = 2›, где TextInput создается внутри тега VGroup. тогда разрыв достаточно близок, но с тегом ‹s:Form/›, даже с пробелом formLayout равным 0, пробелы все еще велики... - person helpdesk; 14.07.2011
comment
@henry joseph, одно быстрое решение — установить явную высоту элемента формы (как я только что сделал). Я не фанат этого, и лично я бы просто создал собственный FormItemSkin и добавил его ко всем FormItem через css. - person J_A_X; 14.07.2011

arrow_upward
2
arrow_downward

Я сделал это так, чтобы создать скин для всех моих форм. Затем в CSS я установил скин, который я создал, в качестве скина формы по умолчанию.

  1. Скопируйте FormSkin, создайте YourFormSkin.mxml
  2. Копировать FormItemSkin создать YourFormItemSkin
  3. Измените пробел в YourFormSkin.mxml
  4. Измените свойство contentGroup LEFT в FormItemSkin.mxml, изменение contentCol:0 будет наименьшим пробелом. Числа относятся к столбцам, установленным макетом формы.

Создайте или отредактируйте файл CSS, чтобы включить в него:

s|Form{
    skinClass:ClassReference("your.project.view.skins.YourFormSkin");
}
s|FormItem{
    skinClass: ClassReference("your.project.view.skins.YourFormItemSkin");
}

Теперь вы можете настроить каждую форму в своем приложении, просто отредактировав два файла скина.

person Jonathan Rowny    schedule 13.07.2011

arrow_upward
0
arrow_downward

FormItem – это контейнер, расширяющий SkinnableContainer. Таким образом, он использует класс макета; и свойство gap обычно устанавливается в классе макета.

Итак, предполагая, что вы используете один из макетов, поддерживающих свойство gap, вы можете сделать что-то вроде этого:

myFormItem.layout.gap = myNewGap;
person JeffryHouser    schedule 13.07.2011
comment
Это правда, но скин формы Spark также использует настраиваемый макет, называемый макетом элемента формы, и в основном это настройка строк/столбцов. Элементы внутри скина используют позиционирование относительно этих столбцов/строк, что означает, что БОЛЬШОЙ пробел фактически находится в файле скина. Например, скин элемента формы имеет искровую группу contentGroup, которая имеет свой собственный вертикальный макет с зазором, а также собственную позицию bottom="row1:5", что означает, что вы получаете 5 пикселей зазора в нижней части содержимого элемента формы. labelDisplay также имеет это. - person Jonathan Rowny; 13.07.2011