I've been trying to do a couple of things and I couldn't.
I've been trying to skin a mx:FileSystemTree, to show de data horizontally, I think it's almost impossible, anyone has an idea how to make it?
The second thing I'm trying is to add an itemRenderer to the FileSystemTree wanting to add a pair of buttons(add and delete, which I already had working). Everything I tried so far is giving the same error:
TypeError: Error #1034: Type Coercion failed: cannot convert SKins::FileSystemItemRenderer@971c479 to mx.controls.listClasses.IListItemRenderer.
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="750" height="500">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:VGroup width="607" height="134">
<s:HGroup width="607" height="68">
<s:Button label="Button"/>
<s:Button label="Button"/>
</s:HGroup>
<s:TextInput width="600"/>
</s:VGroup>
<mx:HDividedBox>
<mx:FileSystemTree id="tree" width="615" height="480" allowMultipleSelection="true"
borderVisible="false" defaultLeafIcon="@Embed('../assets/folder.png')"
directory="{new File(raiz)}" dragEnabled="true" dropEnabled="true"
folderClosedIcon="@Embed('../assets/folder.png')"
folderOpenIcon="@Embed('../assets/openFolder.png')" fontSize="45"
fontStyle="normal" fontWeight="normal" iconFunction="selectIcon"
itemRenderer="SKins.FileSystemItemRenderer" showIcons="true"
textAlign="left" textDecoration="none" verticalAlign="middle"/>
</mx:HDividedBox>
</s:WindowedApplication>
That's the code which is going to show the tree.
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Label text="{data}"/>
</s:ItemRenderer>
I have tried with a simple renderer receiving the error #1034.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/08/creating-an-alternating-item-renderer-in-a-spark-list-control-in-flex-4/ -->
<s:MXTreeItemRenderer name="IListItemRenderer"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:HGroup id="hGr" left="4" right="4" top="4" bottom="4">
<s:RichText id="lbl" text="({itemIndex}) {data.label}" width="100%" />
<mx:Image id="img" source="{data.img}" toolTip="{data.img}" width="100" height="67" />
</s:HGroup>
</s:MXTreeItemRenderer>
I also have tried another renderer, but with the same results.
Not sure about showing data horizontally, but your 2nd point about itemrenderer is working fine for me. Here is the working code
<?xml version="1.0" encoding="utf-8"?>
<s:MXTreeItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:HGroup id="hGr" left="4" right="4" top="4" bottom="4">
<s:Rect id="indentationSpacer"
width="{treeListData.indent}" height="22"
alpha="0">
<s:fill>
<s:SolidColor color="0xFFFFFF" />
</s:fill>
</s:Rect>
<s:Group id="disclosureGroup">
<s:BitmapImage source="{treeListData.disclosureIcon}"
width="16" height="16"
visible="{treeListData.hasChildren}" />
</s:Group>
<s:BitmapImage source="{treeListData.icon}"
width="16" height="16"/>
<s:RichText id="lbl" text="{data.nativePath}" toolTip="{data.nativePath}" width="100%" maxDisplayedLines="1" />
<s:Button label="Button"/>
<s:Button label="Button"/>
</s:HGroup>