Question

有没有办法在flex中创建子视图系统的父视图？例如，我需要创建一个计算不同产品保险费率的应用程序。所有产品都需要具有相同的性别，年龄和尼古丁使用量输入。我想要做的是有一个'父视图'（实际上不会显示），其中包含所有这些基本字段，然后创建子视图，自动显示父视图的组件和布局，这将削减重复代码。子视图将具有产品特有的其他组件（有些还需要接收子项数等），并以不同方式计算费率。

编辑：假设我有两种不同的产品。 ProdA和ProdB

这是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>

这是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和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>

===========不打算再写代码来猜测你想要什么，所以============

这里有一些你可能会觉得有用的模式：

请注意，第三个链接还提到了后面的代码，它可以用作一种抽象类。

另外，您可能需要考虑composition over inheritance。例如，您的视图不应该知道或关心如何计算费率信息，但可以将速率计算器数据组件传递给它。最重要的是should not为自己创造 - 这也是您在重复使用设计时遇到困难的原因之一。

什么类似于在flex 4.6中具有子视图的父视图？

1 个答案: