2009-05-22 11 views
0

フレックスで簡単なフォームレイアウトをコーディングしたいと思います。次のようなものがあります。ベストプラクティス:Flexでレイアウトをコーディングするにはどうすればよいですか?

最初は、レイアウト用にvboxとhboxを使用してコーディングを試みました。私はそのようなItemRenderか何かでこのコードを再利用開始した場合、次の

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

と同じように私は、パフォーマンスでやけど。

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の任意のレイアウトマネージャは、私の頭痛の私を緩和するために存在している場合

だから、私は不思議でしたか?または、レイアウトを一般的にコーディングするより良い方法がある場合は、

答えて

4

フォームのレイアウトに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

「フォーム」レイアウトを本当に使用している場合、Flexにはフォーム「コンポーネント」/レイアウトマネージャがあります。パフォーマンスの違いはわかりませんが、コードの清潔さは改善されます(メンテナンスに役立ちます - あなたの問題を解決するのには間違いありません)。 HTH

0

個人的に私はフォームにはItemRendersを使用しませんが、DataGridにはItemEditorsを使用することをお勧めします。フォームを作成している場合は、上記のようにFormコンポーネントを使用してください。フォーム自体の性質が非常に動的でない限り、Statesを使用してフォーム要素を交換してください。その場合は、純粋なActionScriptスクリプトとMXMLアプローチを併用することをおすすめします。

関連する問題