0

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

编辑：假设我有 2 种不同的产品。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 扩展这个产品。这样 Product 视图中的所有内容都会同时显示在 ProdA 和 ProdB 中

4

1 回答 1

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>

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

以下是一些您可能会觉得有用的模式：

请注意，第三个链接还提到了 Code behind，它可以用作一种抽象类。

此外，您可能需要考虑组合而不是继承。例如，您的视图不应该知道或关心如何计算费率信息，但可以将费率计算器数据组件传递给它。它最强调不应该为自己创造——这是你很难达到可重用设计的原因之一。

于 2012-03-22T17:15:56.250 回答