I am still pretty new to Flex and the last two weeks have been a massive learning curve. However, through trial and error, lots of research and plenty of tea (thanks Drew!), I am finally coming to grips with Flex, but more importantly Actionscript.
One of the things I have been working on is a FAQ section for a web portol. To implement this I have used the following components and controls:
- A basepage
- A standard mxml Tree contol ()
- A custom ItemRenderer
- A custom DataDescriptor
- A function which is executed upon creation (creationComplete=”initTree()”)
The focus of this tutorial is however on Item 3, a custom ItemRenderer. So here goes…
Firstly the data structure that I am using is a standard xml file which has categories, an answer and a question, I have included an exmaple below:
< ? xml version="1.0" encoding="UTF-8"?>
< faq xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
< category>
< nameGuidance
< item>
< question>What is the meaning of life, the universe and everything?
< answer>42
< /item>
Secondly, the Tree control has a number of paramaters which need to be included to get the desired result:
< mx:Tree id="myTree"
styleName="faqList"
wordWrap="true"
itemClick="tree_itemClick(event);"
width="100%" height="100%"
top="20"
dataDescriptor="{new TreeDataDescriptor()}"
itemRenderer="renderers.TreeRenderer"
creationComplete="initTree()"
/>
I will try to cover the dataDescriptor, itemClick and creationComplete in other posts, but for the time being, the ItemRenderer works something like this:
- It is important to include the if (super.data) logic otherwise the application will through errors because it’s referring to an object with a null value.
- In the data method, I have set all parents (depth == 1) to have a bold style otherwise the nodes should just have normal font weight.
- In the updateDisplayList:
- I firstly remove the disclosure icons from all nodes
- Add some default text styling to nodes, which sets the selected node back to its original styling after it was selected
- Then if a 2nd level node is either highlighted (isItemHighligthed) or selected (isItemSelected) I change styling, display the disclosure icon and adjust the position of the disclosure icon
(super.disclosureIcon.x = super.width - 50;).
- Note: The moving the position of the icon is relatively simple, but I had difficulty finding information on the web about how to do this, so I’m hoping this will help someone out ther. This particular example moves the disclsure icon 50px inside the right hand border of the Tree control
package com.g3global.ipp.view.components.renderers
{
import mx.collections.*;
import mx.controls.treeClasses.*;
import mx.controls.listClasses.ListBase;
/*
* Custom Item Renderer for TreeControl
*
* @package Renderers
* @author Stephen Blake
*/
public class TreeRenderer extends TreeItemRenderer
{
/*
* Define the constructor.
*/
public function TreeRenderer()
{
super();
}
/* Override method for the data property to set the font color and style of each node.
*
* @param value Object
*/
override public function set data(value:Object):void
{
super.data = value;
if (super.data)
{
if (TreeListData(listData).depth == 1)
{
setStyle("fontWeight", 'bold');
}
else
{
setStyle("fontWeight", 'normal');
}
}
}
/* Override method to set the text for each tree node.
*
* @param unscaledWidth Number
* @param unscaledHeight Number
*/
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
// Call the method in the super class
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(super.data)
{
// Set the disclosure icon to false - overrides styles
super.disclosureIcon.visible = false;
if (TreeListData(listData).depth > 1)
{
setStyle("fontWeight", 'normal');
}
// Specific styling for children nodes that are selected or highlighted
if(ListBase(owner).isItemSelected(data) || ListBase(owner).isItemHighlighted(data) && TreeListData(listData).depth == 2)
{
super.disclosureIcon.visible = true;
super.disclosureIcon.x = super.width - 50;
setStyle('fontWeight', 'bold');
}
}
}
}
}
So that’s about it. Unfortunately I can’t link to a working demo of this feature because it is part of a much bigger application which is being built for a client.
) and then look at it in IE6 and it will most probably have layout issues.
