Tree component in Royale can not render with a kind of XML data, which is working with Flex

[nihavend]

XML data below is not correctly handled by Tree component

<fx:XMLList id="PInaraData">
	<list title="Grup Listesi" id="0">
		<jobGroup title="Independents" id="-1">
			<jobProperty title="SENSORDATA_HOURLY" id="1" statu="0" port="1"/>
			<jobProperty title="SENSORDATA_DAILY" id="2" statu="0" port="1"/>
			<jobProperty title="SENSORDATA_ALWAYSON" id="3" statu="0" port="1"/>
			<jobProperty title="SENSORDATA_FIVE_MIN" id="4" statu="9" port="1"/>
			<jobProperty title="PERSONAL_PROFILE_INFO" id="5" statu="9" port="1"/>
			<jobProperty title="SENSORDATA_AVG_CONS" id="6" statu="9" port="1"/>
		</jobGroup>
	</list>
</fx:XMLList>

This is the test code for the case

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.apache.org/royale/spark"
			   xmlns:mx="library://ns.apache.org/royale/mx"
			   paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
			   height="100%" width="100%" 
			   creationComplete="loadData()"
			   >
	
	<fx:Metadata>
	</fx:Metadata>
	
	<fx:Script>
		<![CDATA[
			
			import mx.collections.XMLListCollection;
			import mx.events.ListEvent;
			
			[Bindable]
			public var selectedNode:XML;
			
			[Bindable] 
			public static var liveTreeDP:XMLList;
			
			public function loadData():void {
				liveTreeDP = treeData3Node; //<><node label="3 Node"></node></>; 
			}
			
			public function Node3View():void {
				
				try {
					liveTreeDP = treeData3Node;
					myTree.validateNow();
				} catch(err:Error) {
					//Alert.show("HATA : " + errorString);
					trace(err);
				}
				
			}
			
			public function Node6View():void {
				
				try {
					liveTreeDP = treeData6Node;
					myTree.validateNow();
				} catch(err:Error) {
					//Alert.show("HATA : " + errorString);
					trace(err);
				}
				
			}
			
			public function original():void {
				
				try {
					liveTreeDP = PInaraData;
					myTree.validateNow();
				} catch(err:Error) {
					//Alert.show("HATA : " + errorString);
					trace(err);
				}
				
			}
			
			private function tlosTree_itemClickHandler(e:ListEvent):void {
				
			}
			
			protected function liveTree_itemDoubleClickHandler(event:ListEvent):void {
				
			}
			
			public function treeChanged(event:Event):void {
				selectedNode=Tree(event.target).selectedItem as XML;
			}
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<fx:XMLList id="treeData3Node">
			<node label="3 Node">
				<node label="Inbox">
					<node label="Marketing"/>
					<node label="Product Management"/>
					<node label="Personal"/>
				</node>
				<node label="Outbox">
					<node label="Professional"/>
					<node label="Personal"/>
				</node>
				<node label="Spam"/>
			</node>	
		</fx:XMLList>
		<fx:XMLList id="treeData6Node">
			<node label="6 Node">
				<node label="Inbox">
					<node label="Marketing"/>
					<node label="Product Management"/>
					<node label="Personal"/>
				</node>
				<node label="Outbox">
					<node label="Professional"/>
					<node label="Personal"/>
				</node>
				<node label="Spam"/>
				<node label="Sent"/>
				<node label="Region">
					<node label="First"/>
					<node label="Second"/>
				</node>
				<node label="Division">
					<node label="Up"/>
					<node label="Down"/>
				</node>
			</node>	
		</fx:XMLList>
		
		<fx:XMLList id="treeData">
			<node label="Mail Box">
				<node label="Inbox">
					<node label="Marketing"/>
					<node label="Product Management"/>
					<node label="Personal"/>
				</node>
				<node label="Outbox">
					<node label="Professional"/>
					<node label="Personal"/>
				</node>
				<node label="Spam"/>
				<node label="Sent"/>
			</node>	
		</fx:XMLList>
		
		<fx:XMLList id="PInaraData">
			<list title="Grup Listesi" id="0">
				<jobGroup title="Independents" id="-1">
					<jobProperty title="SENSORDATA_HOURLY" id="1" statu="0" port="1"/>
					<jobProperty title="SENSORDATA_DAILY" id="2" statu="0" port="1"/>
					<jobProperty title="SENSORDATA_ALWAYSON" id="3" statu="0" port="1"/>
					<jobProperty title="SENSORDATA_FIVE_MIN" id="4" statu="9" port="1"/>
					<jobProperty title="PERSONAL_PROFILE_INFO" id="5" statu="9" port="1"/>
					<jobProperty title="SENSORDATA_AVG_CONS" id="6" statu="9" port="1"/>
				</jobGroup>
			</list>
		</fx:XMLList>
	</fx:Declarations>	
	
	<s:layout>
		<s:VerticalLayout gap="10" paddingRight="10" paddingLeft="10" paddingTop="10" paddingBottom="20" />
	</s:layout>
	
	<s:Button id="TreeNode" click="Node3View()"  label="3 Node"/>
	<s:Button id="SixNode" click="Node6View()"  label="6 Node"/>
	<s:Button id="Original" click="original()"  label="Original"/>
	
	<mx:Panel title="Tree Control Example"
			  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"
			  height="50%" width="50%">
		
		<mx:Label width="100%" 
				  text="Select a node in the Tree control."/>
		
		<mx:HDividedBox width="100%" height="100%">
			<mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
					 showRoot="false" dataProvider="{liveTreeDP}" change="treeChanged(event)"/>
			<mx:Tree id="myTreeStatic" width="50%" height="100%" labelField="@label"
					 showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
			<mx:TextArea height="100%" width="50%"
						 text="Selected Item: {selectedNode.@label}"/>
		</mx:HDividedBox>
		
	</mx:Panel>
	
</s:Application>

This is the view in flex which is also expected from Royale :

[nihavend]

Two root cause of the malfunction I discovered @greg-dove @aharui :

1. The first node is not displayed, begins from the second node to display.
2. title attribute is not handled, label is required

I am going to try to find out how Tree component constructs the tree.

[aharui]

"3 Node" and "6 Node" are currently not displayed because there is only one top-level node and the current code assumes that is XML wrapping a list of children instead of an XMLList of one child.

We'll have to do some experiments to see how Flash handled the one-child XMLList literal.

I don't see where the code sets the labelField to @title, so that may be why you are saying that label is required

[nihavend]

Flex handles the xml as all tree data, not get the top level node definition as a container rather than the root node of the viewable three node, I am looking forward for your experiments.

You are right, I missed to check the label function. It should be implemented in ListBase.as but not yet.

Original flex source :

    public function set labelFunction(value:Function):void
    {
        _labelFunction = value;

        itemsSizeChanged = true;
        invalidateDisplayList();

        dispatchEvent(new Event("labelFunctionChanged"));
    }

Royale is missing.

Do you advise me to work on labelFunction implementation ?

[aharui]

You can work on labelFunction if you want. labelFunction is working in AdvancedDataGrid so maybe the implementation just needs to be moved to a base class. But I think for your specific case, you should only need to set labelField="@title"

[aharui]

There is some interesting Flex compiler behavior. Here is the test case I put together:

<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
               applicationComplete="runTest()">
    <fx:Script>
        <![CDATA[
            private function runTest():void
            {
                trace("fxxmlList: " + fxxmlList.length());
                trace("fxxmlList2: " + fxxmlList2.length());
                //trace("fxxmlList3: " + fxxmlList3.length());
                trace("xmlList: " + xmlList.length());
                trace("xmlList2: " + xmlList2.length());
                trace("xmlList3: " + xmlList3.length());
                //trace("xmlList4: " + xmlList4.length());
                trace("xmlList5: " + xmlList5.length());
                //trace("xmlList6: " + xmlList6.length());
            }
            
            // String with one top node
            private var xmlList:XMLList = new XMLList(
                '<node label="Mail Box">' +
                  '<node label="Inbox">' +
                    '<node label="Marketing"/>' +
                    '<node label="Product Management"/>' +
                    '<node label="Personal"/>' +
                  '</node>' +
                  '<node label="Outbox">' +
                    '<node label="Professional"/>' +
                    '<node label="Personal"/>' +
                  '</node>' +
                  '<node label="Spam"/>' +
                  '<node label="Sent"/>' +
                '</node>');
            
            // String with XMLListLiteral as one top node
            private var xmlList2:XMLList = new XMLList(
                '<>' +
                  '<node label="Inbox">' +
                    '<node label="Marketing"/>' +
                    '<node label="Product Management"/>' +
                    '<node label="Personal"/>' +
                  '</node>' +
                  '<node label="Outbox">' +
                    '<node label="Professional"/>' +
                    '<node label="Personal"/>' +
                  '</node>' +
                  '<node label="Spam"/>' +
                  '<node label="Sent"/>' +
                '</>');
            
            // String with no top node
            private var xmlList3:XMLList = new XMLList(
                '<node label="Inbox">' +
                  '<node label="Marketing"/>' +
                  '<node label="Product Management"/>' +
                  '<node label="Personal"/>' +
                '</node>' +
                '<node label="Outbox">' +
                  '<node label="Professional"/>' +
                  '<node label="Personal"/>' +
                '</node>' +
                '<node label="Spam"/>' +
                '<node label="Sent"/>');
            
            /* single node is XML (not XMLList) so Flex compiler says no.
            // XMLLiteral (one top node)
            private var xmlList4:XMLList = <node label="Mail Box">
                                             <node label="Inbox">
                                               <node label="Marketing"/>
                                               <node label="Product Management"/>
                                               <node label="Personal"/>
                                             </node>
                                             <node label="Outbox">
                                               <node label="Professional"/>
                                               <node label="Personal"/>
                                             </node>
                                             <node label="Spam"/>
                                             <node label="Sent"/>
                                           </node>;
            */
                        
            // XMLListLiteral as one top node
            private var xmlList5:XMLList = <>
                                             <node label="Inbox">
                                               <node label="Marketing"/>
                                               <node label="Product Management"/>
                                               <node label="Personal"/>
                                             </node>
                                             <node label="Outbox">
                                               <node label="Professional"/>
                                               <node label="Personal"/>
                                             </node>
                                             <node label="Spam"/>
                                             <node label="Sent"/>
                                           </>;
            
            /* Flex compiler outputs errors about the Outbox and following nodes
            // XML nodes but no top node
            private var xmlList6:XMLList =  <node label="Inbox">
                                              <node label="Marketing"/>
                                              <node label="Product Management"/>
                                              <node label="Personal"/>
                                            </node>
                                            <node label="Outbox">
                                              <node label="Professional"/>
                                              <node label="Personal"/>
                                            </node>
                                            <node label="Spam"/>
                                            <node label="Sent"/>
            */
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- one top node -->
        <fx:XMLList id="fxxmlList">
            <node label="Mail Box">
                <node label="Inbox">
                    <node label="Marketing"/>
                    <node label="Product Management"/>
                    <node label="Personal"/>
                </node>
                <node label="Outbox">
                    <node label="Professional"/>
                    <node label="Personal"/>
                </node>
                <node label="Spam"/>
                <node label="Sent"/>
            </node>
        </fx:XMLList>
        
        <!-- no top node -->
        <fx:XMLList id="fxxmlList2">
            <node label="Inbox">
                <node label="Marketing"/>
                <node label="Product Management"/>
                <node label="Personal"/>
            </node>
            <node label="Outbox">
                <node label="Professional"/>
                <node label="Personal"/>
            </node>
            <node label="Spam"/>
            <node label="Sent"/>
        </fx:XMLList>
        
        <!-- XMLLListLiteral as one top node
             Flex compiler says that CDATA is not allowed, so no way
             to use XMLListLiteral in fx:XMLList
        <fx:XMLList id="fxxmlList3"><![CDATA[
            <>
            <node label="Inbox">
                <node label="Marketing"/>
                <node label="Product Management"/>
                <node label="Personal"/>
            </node>
            <node label="Outbox">
                <node label="Professional"/>
                <node label="Personal"/>
            </node>
            <node label="Spam"/>
            <node label="Sent"/>
            </>
            ]]>
        </fx:XMLList>
        -->
        
        <!-- Flex compiler says to use the CDATA like in fxxmlList3
        <fx:XMLList id="fxxmlList4">
            <>
            <node label="Inbox">
            <node label="Marketing"/>
            <node label="Product Management"/>
            <node label="Personal"/>
            </node>
            <node label="Outbox">
            <node label="Professional"/>
            <node label="Personal"/>
            </node>
            <node label="Spam"/>
            <node label="Sent"/>
            </>
        </fx:XMLList>
        -->

    </fx:Declarations>

    <mx:Label text="XMLList Test" />
</mx:Application>

The output is:

[trace] fxxmlList: 1
[trace] fxxmlList2: 4
[trace] xmlList: 1
[trace] xmlList2: 4
[trace] xmlList3: 4
[trace] xmlList5: 4

The most interesting results for me are:

• in fx:XMLList, you can't use XMLListLiterals but you must use them in AS.
• in XMLList String conversion, the XMLListLiteral is essentially ignored and whatever else remains is the list.

We will adjust Royale to match this behavior.

[aharui]

XMLList behavior should now match in commit be13d15db2f55d46dda5b53d393cb72218a972d5

However, the test case still will not show the root node because showRoot is set to false in the test case.

[nihavend]

You can work on labelFunction if you want. labelFunction is working in AdvancedDataGrid so maybe the implementation just needs to be moved to a base class. But I think for your specific case, you should only need to set labelField="@title"

Title works for the example, I confirm. But I need the labelfunction for the real project. I am going to create issue for labelFunction on follow on new thread.