Custom MXML Royale Component Binding Issues

[Brian Raymes]

Hi all,

I've been seeing a strange binding issue as of late, and I can't seem to track 
down where or how it is failing. Perhaps I'm doing something wrong?

Here is a basic example. Let's pretend I have a custom component that I want to 
reuse, called FlexibleForm.

<?xml version="1.0" encoding="utf-8"?>
<html:Form xmlns:fx=http://ns.adobe.com/mxml/2009
    xmlns:j="library://ns.apache.org/royale/jewel"
    xmlns:js="library://ns.apache.org/royale/basic"
    xmlns:html="library://ns.apache.org/royale/html"
    className="flexible-form">

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

    <fx:Script>
        <![CDATA[
            import org.apache.royale.core.IChild;

            [Bindable]
            public var content:Array;

            override public function addedToParent():void
            {
                super.addedToParent();

                for each (var child:IChild in content)
                    unorganizedList.addElement(child);
            }
        ]]>
    </fx:Script>

    <html:beads>
        <js:ContainerDataBinding />
    </html:beads>

    <!-- other stuff -->

    <html:Ul localId="unorganizedList"
        className="flex-form-ul" />

    <!-- other stuff -->

</html:Form>


If I were to have another item, like this, say IconLabelFormItem:

<?xml version="1.0" encoding="utf-8"?>
<form:FlexibleFormItem xmlns:fx=http://ns.adobe.com/mxml/2009
    xmlns:j="library://ns.apache.org/royale/jewel"
    xmlns:js="library://ns.apache.org/royale/basic"
    xmlns:html="library://ns.apache.org/royale/html"
    xmlns:form="com.something.components.form.*"
    label="Type">

    <fx:Script>
        <![CDATA[
            import com.something.Key;

            [Bindable]
            public var key:Key;
        ]]>
    </fx:Script>

    <form:beads>
        <js:ContainerDataBinding />
    </form:beads>

    <j:HGroup width="100%"
        itemsVerticalAlign="itemsCenter"
        gap="3">

        <js:MaterialIcon text="{key.icon}"
            className="{key.iconClassName}" />

        <j:Label text="{key.typeName}"
            multiline="true"
            style="font-size: 1.5em" />

    </j:HGroup>

</form:FlexibleFormItem>


Then, if I were to use both to do the following:

<?xml version="1.0" encoding="utf-8"?>
<form:FlexibleForm xmlns:fx=http://ns.adobe.com/mxml/2009
    xmlns:j="library://ns.apache.org/royale/jewel"
    xmlns:js="library://ns.apache.org/royale/basic"
    xmlns:html="library://ns.apache.org/royale/html"
    xmlns:item="com.something.items.*">

    <fx:Script>
        <![CDATA[
            import com.something.Key;

            [Bindable]
            public var key:Key;
        ]]>
    </fx:Script>

    <item:IconLabelFormItem key="{key}" />

</form:FlexibleForm>


The MaterialIcon and Label will be empty as if the bindings did not fire. Yes, 
the ContainerDataBinding is not defined in the last file, but I've noticed that 
doesn't seem necessary if extending a component that already declares the 
binding bead.

If I simply remove the outer HGroup, the bindings fire correctly. See the 
following example:

<?xml version="1.0" encoding="utf-8"?>
<form:FlexibleFormItem xmlns:fx=http://ns.adobe.com/mxml/2009
    xmlns:j="library://ns.apache.org/royale/jewel"
    xmlns:js="library://ns.apache.org/royale/basic"
    xmlns:html="library://ns.apache.org/royale/html"
    xmlns:form="com.something.components.form.*"
    label="Type">

    <fx:Script>
        <![CDATA[
            import com.something.Key;

            [Bindable]
            public var key:Key;
        ]]>
    </fx:Script>

    <form:beads>
        <js:ContainerDataBinding />
    </form:beads>

    <!-- <j:HGroup width="100%"
        itemsVerticalAlign="itemsCenter"
        gap="3"> -->

        <js:MaterialIcon text="{key.icon}"
            className="{key.iconClassName}" />

        <j:Label text="{key.typeName}"
            multiline="true"
            style="font-size: 1.5em" />

    <!-- </j:HGroup> -->

</form:FlexibleFormItem>

I have two issues to discuss:


  1.  How do I find out how/why the bindings are failing? This is not the first 
time I've seen this issue. Sometimes, a fix to an issue like this may be making 
a binding like this: "{key.something.icon}" to "{key.somethignIcon}" (by adding 
a getter). In this case, it isn't working.
  2.  How does one extend a custom mxml file to set a default property to put 
items into a child component? Is the addedToParent approach incorrect?

Thank you for your assistance!


Brian