フレックス4.6のサブビューを持つ親ビューに似ているものは何ですか？

Question

フレックスのサブビューシステムで親ビューを作成する方法はありますか？たとえば、私は異なる製品の保険料を計算するアプリケーションを作成する必要があります。性別、年齢、ニコチン使用量については、すべての商品に同じ入力が必要です。私がしたいのは、これらすべての基本的なフィールドがレイアウトされた「親ビュー」（実際には表示されません）を作成し、親ビューのコンポーネントとレイアウトを自動的に表示するサブビューを作成することです。複製コードを減らすサブビューには製品固有の追加コンポーネントがあります（一部には子供の数などが必要です）、さまざまな方法で料金を計算します。

編集：2つの異なる商品があるとしましょう。 ProdAとProdB

これは、これは、ほとんどすべてのコードが以外は同じProdB

<?xml version="1.0" encoding="utf-8"?> 
<components:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" xmlns:components="spark.components.*" title="ProdB" 
      xmlns:mx="library://ns.adobe.com/flex/mx"> 
<fx:Declarations> 
    <!-- Place non-visual elements (e.g., services, value objects) here --> 
</fx:Declarations> 

<fx:Script> 
    <![CDATA[ 
     import ASClasses.OP; 

     public function makePerson(age:String, gen:String, nic:String):void{ 
      var intAge:int=int(age); 
      var newOP:OP=new OP(intAge, gen, nic); 
      dest.text=String(newOP.computeRate()); 
     } 

    ]]> 
</fx:Script> 

<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center" > 

    <s:Label text="Age:"/> 
    <s:TextInput id="age" restrict="0-9" maxChars="2"/> 

    <s:ComboBox id="GenderBox" width="140" prompt="Gender"> 
     <s:dataProvider> 
      <mx:ArrayList> 
       <fx:String>Male</fx:String> 
       <fx:String>Female</fx:String> 
      </mx:ArrayList> 
     </s:dataProvider> 
    </s:ComboBox> 

    <s:Label text="The selected gender is: {GenderBox.selectedItem}"/> 

    <s:ComboBox id="NicotineBox" width="140" prompt="Nicotine Usage"> 
     <s:dataProvider> 
      <mx:ArrayList> 
       <fx:String>Smoker</fx:String> 
       <fx:String>Non-Smoker</fx:String> 
      </mx:ArrayList> 
     </s:dataProvider> 
    </s:ComboBox> 

    <s:Label text="The selected Nicotine is: {NicotineBox.selectedItem}"/> 

    <s:Button label="Get Rate" click="makePerson(age.text, GenderBox.selectedItem, NicotineBox.selectedItem)" /> 
    <s:TextInput id="dest" />  
    <s:Button label="Back" click="navigator.popView()" styleName="back" /> 
</s:VGroup> 

するための図であるれるProdA

<?xml version="1.0" encoding="utf-8"?> 
<components:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" xmlns:components="spark.components.*" title="ProdA" 
      xmlns:mx="library://ns.adobe.com/flex/mx"> 
<fx:Declarations> 
    <!-- Place non-visual elements (e.g., services, value objects) here --> 
</fx:Declarations> 

<fx:Script> 
    <![CDATA[ 

     import ASClasses.LL; 

     public function makeLL(age:String, gen:String, nic:String):void{ 
      var intAge:int=int(age); 
      var newLL:LL=new LL(intAge, gen, nic); 
      dest.text=String(newLL.computeRate()); 
     } 

    ]]> 
</fx:Script> 

<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center"> 

     <s:Label text="Age:"/> 
     <s:TextInput id="age" restrict="0-9" maxChars="2"/> 

     <s:ComboBox id="GenderBox" width="140" prompt="Gender" > 
      <s:dataProvider> 
       <mx:ArrayList> 
        <fx:String>Male</fx:String> 
        <fx:String>Female</fx:String> 
       </mx:ArrayList> 
      </s:dataProvider> 
     </s:ComboBox> 

     <s:Label text="The selected gender is: {GenderBox.selectedItem}"/> 

     <s:ComboBox id="NicotineBox" width="140" prompt="Nicotine Usage"> 
      <s:dataProvider> 
       <mx:ArrayList> 
        <fx:String>Smoker</fx:String> 
        <fx:String>Non-Smoker</fx:String> 
       </mx:ArrayList> 
      </s:dataProvider> 
     </s:ComboBox> 

     <s:Label text="The selected Nicotine is: {NicotineBox.selectedItem}"/> 

     <s:Button label="Get Rate" click="makeLL(age.text, GenderBox.selectedItem, NicotineBox.selectedItem)" /> 
     <s:TextInput id="dest" />  
    <s:Button label="Back" click="navigator.popView()" styleName="back" /> 
</s:VGroup> 

するための図でありますいくつかの違い。私はすべての重複したコードを含む1つのビュー（Product）を持っていきたいですし、ProdAとProdBを使ってこの製品を拡張してください。プロダクトビューのすべてがProdAとProdBの両方で表示されるようにする

Answer 1

依存関係注入を使用すると（ビュー内でバインドできるパブリックプロパティが公開されます）、上記のようにインラインで定義する必要がなくなります。それがこの

[Bindable] 
public var dataProvider:ArrayList 
//..other public vars 
<s:ComboBox id="combo" width="140" prompt="{promptPublicVar}" > 
      <s:dataProvider>{dataProviderPublicVar}</s:dataProvider> 
      <s:change>publicVarContainingSelection=combo.selectedItem</s:change> 
</s:ComboBox> 

<s:Label text="{label}: {publicVarContainingSelection}"/> 

のようになります。そして、あなたは

<myNS:MyView> 
    <myNS:prompt>Gender</myNS:prompt> 
    <myNS:dataProvider><mx:ArrayList>...</mx:ArrayList></myNS:dataProvider> 
    <myNS:label>The selected Gender is: </myNS:label> 
</myNS:MyView> 

のようなもの===========推測しようとするために、任意のより多くのコードを記述するつもりはない、それを使用したいですここ============

はいくつかのパターンがあるので、何をしたい、あなたは役に立つかもしれません：

• Presentation Model
• Abstract Classes
• Template Components

抽象クラスの型として使用することができる第3のリンクも後ろコードに言及することを注意。

また、composition over inheritanceと考えることもできます。たとえば、ビューではレート情報の計算方法を知らないでください。レート計算ツールのデータコンポーネントを渡すこともできます。最も重視しているのはshould notです。これは、再利用可能なデザインに到着するのに苦労している理由の1つです。