Why won't visual elements display inside custom component extended from another custom component

0
votes

I created a custom MXML component, TurboContent, that extends the NavigatorContent class:

<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Metadata>
[DefaultProperty("mxmlContentFactory")]
</Fx:Metadata>

<s:Group id="midWrapper">
    <s:Button id="btnAdd" />
</s:Group>
<s:Group id="rightWrapper" >
    <s:DataGrid id="dgdSelect" >
        <s:columns>
            <s:ArrayList>
                <s:GridColumn headerText="Yo"></s:GridColumn>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>
    <s:Button id="btnRemove" />
    <s:Button id="btnClear" />
</s:Group>
</s:NavigatorContent>

I am trying to extend that custom component but when I add display elements to the second extended componet they elements are never seen. For instance: (The first custom component is in the comp package)

<comp:TurboContent xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:comp="comp.*">

<s:Button id="myButton"/>

</comp:TurboContent>

In this case, the 'myButton' component never shows up, but all the elements of the base component do (3 buttons and a datagrid).

2
actionscript-3flex4flash-buildermxmlcustom-component
Where did you learn this pattern for creating a component from? I'm accustomed to seeing components written in AS3, and SKINS for components written in MXML. It seems to me like you're trying to define a visual layout where you should only be defining a data model. Your code is overriding the skin from within the component (i.e., you're overriding the mxmlContent, which is what the skin is supposed to handle). But, then again, perhaps you're using some (valid) pattern I'm just unfamiliar with. - merv
Isn't Flex made to handle components like this? I am using a standard MVC pattern for Flex as has been described on various Adobe docs. MXML handles the view and AS3 handles the controller, primarily. The thing I like about Flex is that I can create a view in MXML and call a new instance of it using AS3 whenever I want. I am a decent AS3 programmer but I have only been using Flex for a few months. I learned most of my Flex knowledge through Flex in a Week. They describe how Flex should be implemented in MVC and I have tried to follow it. - smulholland2
Sorry for the late response. Yes, you are right that Flex 4 framework is an implementation of MVC, but I think the example they give is rather limited, and in my opinion, not a very strict separation of the Model and View. Anyway, I gave an answer below that gets the job done in the way that I'm used to doing it. It still might be possible to do it all in MXML, but I'm just not familiar with it, which is why I asked. - merv

2 Answers

2
votes

I'm curious to understand what you're trying to achieve?

From the pieces of code it seems you're trying to compose a new view which visually inherits the TurboContent-component and adds another button to it.

What happens really under the hood is that the NavigatorContent extends SkinnableContainer. SkinnableContainer has as a default property mxmlContentFactory, which once initialized can not be changed or substituted, or add stuff on top of it, unless you do that with ActionScript:

mxmlContentFactory = null; // or some IDeferredInstance

But then your approach of visual inheritance won't be visual inheritance, but content substitution.

The base class already has initialized it, so the subclasses can't do modifications to it.

1
votes

From what I can tell, the pattern of defining a component directly in MXML (as you referenced was done in the FIAW series) disallows the ability to then visually insert children in the container's display list. One of the problems is that the mxmlContent (which normally a skin would control) is statically defined in the component and it doesn't seem like one can use contentGroup inside the MXML component directly.

For better control, and what I consider a more strict implementation of the MVC pattern (which Flex 4, as a framework, implements), try separating your visual layout out into an MXML skin, and defining the component in AS3.

From what little I see of your component, I can't really make a judgment as to what properties of the component you want to expose to the container that will instantiate it. I'll at least give an example here of how one can pass info from the component to the skin.

I apologize for the MX components, but I only have Flex 4.1, and I wanted to make sure the program compiled fine. It shouldn't be too hard for you to swap in the spark versions.

Example Component (TurboContentAS.as)

package components {

  import mx.controls.DataGrid;
  import spark.components.NavigatorContent;

  public class TurboContentAS extends NavigatorContent {

    public function TurboContentAS() {
      super();
    }

    // Skin Parts that constitute the necessary parts of the component
    [SkinPart(required="true")]
    public var dgdSelect:DataGrid;  //just an example

    // property you want to expose to the instantiating object
    [Bindable]
    public var firstColumnHeader:String = "default header";

  }
}

Example Skin (TurboContentSkin.mxml)

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        alpha.disabled="0.5" >

    <fx:Metadata>[HostComponent("components.TurboContentAS")]</fx:Metadata>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <!-- this is where the children that you add later go-->
    <s:Group id="contentGroup" left="0" right="0" top="100" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
    <s:Group id="midWrapper">
        <s:Button id="btnAdd" label="Add" />
    </s:Group>
    <s:Group id="rightWrapper" left="200">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <mx:DataGrid id="dgdSelect">
            <mx:columns>
                <fx:Array>
      <!-- This will bind to the publicly exposed property in the component definition -->
                    <mx:DataGridColumn  headerText="{hostComponent.firstColumnHeader}"/>
                </fx:Array>
            </mx:columns>
        </mx:DataGrid>
        <s:Button id="btnRemove" label="Remove"/>
        <s:Button id="btnClear" label="Clear"/>
    </s:Group>
</s:Skin>

Example Instantiation

<components:TurboContentAS skinClass="skins.TurboContentSkin" firstColumnHeader="myHeader">
        <s:Button label="myButton"/>
    </components:TurboContentAS>