Рекомендации: Как вы кодируете макеты во Flex? - PullRequest
Новая
       17

Рекомендации: Как вы кодируете макеты во Flex?

0 голосов
/ 23 мая 2009

Я хочу написать простой макет формы во flex. Примерно так: 

[label] [text field]
[label] [text field]

Первоначально я пытался кодировать это, используя vboxes и hbox для моего макета. Как следующее 

<hbox>
   <vbox>
      <label />
      <textfield />
   </vbox>
   <vbox>
      <label />
      <textfield />
   </vbox>
</hbox>

Я сгораю от производительности, если начинаю многократно использовать этот код в ItemRender или что-то в этом роде.

Я где-то читал, что чрезмерное использование HBox и VBox сильно влияет на производительность, потому что код должен самостоятельно вычислять точное положение этих компонентов.

С учетом этого ответа я переключился на использование Canvas. Примерно так: 

<canvas>
   <label x="0" y="0" />
   <text field x="30" y="0" />

   <label x="0" y="15" />
   <textfield x="30" y="15" />
</canvas>

Это начинает становиться кошмаром само по себе, когда вы хотите скрыть и показать определенные текстовые поля. Или, если у вас есть textArea и вы хотите использовать перенос слов. Я начал динамически размещать объекты на холсте, основываясь на позициях других элементов, но это становится кошмаром обслуживания.

Вопрос:

Итак, мне было интересно, есть ли менеджеры по макету для Flex, чтобы избавить меня от моей головной боли? Или, в общем случае, есть лучший способ кодирования моих макетов.

Ответы [ 3 ]

4 голосов
/ 23 мая 2009

Я бы использовал теги Form, FormItem и FormHeading для макета форм. Примерно так: 

        <mx:Form width="100%" height="100%">
        <mx:FormHeading label="Enter values into the form."/>

        <mx:FormItem label="First name">
            <mx:TextInput id="fname" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="Date of birth (mm/dd/yyyy)">
            <mx:TextInput id="dob" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="E-mail address">
            <mx:TextInput id="email" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="Age">
            <mx:TextInput id="age" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="SSN">
            <mx:TextInput id="ssn" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="Zip">
            <mx:TextInput id="zip" width="200"/>
        </mx:FormItem>

        <mx:FormItem label="Phone">
            <mx:TextInput id="phone" width="200"/>
        </mx:FormItem>
    </mx:Form>

Выезд: http://livedocs.adobe.com/flex/3/langref/mx/containers/Form.html#includeExamplesSummary для справки.

0 голосов
/ 23 мая 2009

Лично я бы не использовал ItemRenders для форм, но вы можете использовать ItemEditors в DataGrid для отдельных элементов. Если вы создаете формы, используйте компонент Form с его функциями, как указано выше. Используйте States для замены элементов формы, если природа самой формы не является очень динамичной, и в этом случае вы можете использовать чисто ActionScript вместо подхода MXML.

0 голосов
/ 23 мая 2009

Если вы действительно используете макет «формы», во Flex есть «компонент» формы / менеджер компоновки. Я не знаю разницы в производительности, которую вы получите, но чистота кода улучшится (помогает с поддержкой - определенно поможет вам в ваших проблемах). НТН

...