Hi all,
I am using tree component of Flex 2.0 to create my custom menu. I
used itemRenderer inside it. Menu of application is populating at
runtime, and I am rendering it via xml.
Problems I am facing are,
1. My menu items which are at same level are getting displayed
in zigzag order (there indentation or padding from left isn't coming
appropriately). I have calculated their left padding at runtime, by
multiplying constant (say 5 pixels) with menuLevel attribute of
respective object.
2. I have disabled individual menu based on the disableMenuLnk
attribute. But some time it show the menu item in gray (disabled)
color and some time it doesn't show it in gray(disabled) color.
Please let me if I am missing anything in code or any solution to
this problem.
To know more details you can call me on 9766346233.
Below is the XML format by which I am populating the Menu:-
<menu>
<menuitem menuId="1" parentMenuId="0" label="Menu-1"
applicationId="8" actionURL="actionURL.do" visible="Y"
disableMenuLnk="Y" menuLevel="1" isLeafItem="N">
<menuitem menuId="2" parentMenuId="1" label="Menu-2a"
applicationId="8" actionURL="actionURL.do" visible="Y"
disableMenuLnk="Y" menuLevel="2" isLeafItem="Y"></menuitem>
<menuitem menuId="3" parentMenuId="1" label="Menu-2b"
applicationId="8" actionURL="actionURL.do" visible="Y"
disableMenuLnk="Y" menuLevel="2" isLeafItem="Y"></menuitem>
</menuitem>
<menuitem menuId="1" parentMenuId="0" label="Menu-2"
applicationId="13" actionURL="actionURL.do" visible="Y"
disableMenuLnk="N" menuLevel="1" isLeafItem="N">
<menuitem menuId="2" parentMenuId="1" label="Menu-3"
applicationId="13" actionURL="actionURL.do" visible="Y"
disableMenuLnk="N" menuLevel="2" isLeafItem="N">
<menuitem menuId="3" parentMenuId="2" label="Menu-
3a" applicationId="13" actionURL="actionURL.do" visible="Y"
disableMenuLnk="N" menuLevel="3" isLeafItem="Y"></menuitem>
<menuitem menuId="4" parentMenuId="2" label="Menu-
3b" applicationId="13" actionURL="actionURL.do" visible="Y"
disableMenuLnk="N" menuLevel="3" isLeafItem="Y"></menuitem>
<menuitem menuId="5" parentMenuId="2" label="Menu-
3c" applicationId="13" actionURL="actionURL.do" visible="Y"
disableMenuLnk="N" menuLevel="3" isLeafItem="Y"></menuitem>
<menuitem menuId="6" parentMenuId="2" label="Menu-3-
4" applicationId="13" actionURL="actionURL.do" visible="Y"
disableMenuLnk="N" menuLevel="3" isLeafItem="N">
<menuitem menuId="7" parentMenuId="6"
label="Menu-3-4a" applicationId="13" actionURL="actionURL.do"
visible="Y" disableMenuLnk="N" menuLevel="4"
isLeafItem="Y"></menuitem>
<menuitem menuId="8" parentMenuId="6"
label="Menu-3-4b" applicationId="13" actionURL="actionURL.do"
visible="Y" disableMenuLnk="N" menuLevel="4"
isLeafItem="Y"></menuitem>
</menuitem>
</menuitem>
</menuitem>
</menu>
Code of tree component:-
<mx:Tree id="myTree" width="100%" height="100%" showRoot="false"
labelField="@label" borderStyle="none"
itemRenderer="myPackage.MenuRenderer" variableRowHeight="true"
itemClick="menuItemClicked(event)" itemOpen="menuItemOpened(event)"
itemClose="menuItemClosed(event)"/>
Code of itemRenderer:-
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; width="100%"
show="menuItemCreationComplete()"
creationComplete="menuItemCreationComplete()"
horizontalScrollPolicy="off">
<mx:Script>
<![CDATA[
import mx.controls.treeClasses.*;
import mx.collections.*;
import mx.core.UIComponent;
import mx.controls.Alert;
import somePackage.CommonConstants;
[Bindable]
private var menuItemIndent:Number =
CommonConstants.MENU_ITEM_INDENT;
[Bindable]
private var menuItemHeight:Number =
CommonConstants.MENU_ITEM_HEIGHT;
[Bindable]
private var parentMenuItemHeight:Number =
CommonConstants.PARENT_MENU_ITEM_WIDTH;
[Bindable]
private var leafMenuItemHeight:Number =
CommonConstants.LEAF_MENU_ITEM_WIDTH;
[Embed (source="/assets/common/MenuOpen.png")]
[Bindable]
private var MenuClose:Class;
[Embed (source="/assets/common/MenuClose.png")]
[Bindable]
private var MenuOpen:Class;
[Embed (source="/assets/common/MenuLeaf.png")]
[Bindable]
private var MenuLeaf:Class;
[Bindable]
private var CurrentIcon:Object;
private function menuItemCreationComplete():void
{
if(menuItemHeight < menuText.textHeight)
{
menuItemHeight = 0.75 * menuText.textHeight;
}
CurrentIcon = new Object();
CurrentIcon = MenuClose;
try{
if([EMAIL PROTECTED] == 'Y' &&
[EMAIL PROTECTED] == 'Y'){
enabled = false;
}else{
enabled = true;
}
}
catch(e:Error){}
}
public function setMenuOpenedIcon():void{
CurrentIcon = MenuOpen;
}
public function setMenuClosedIcon():void{
CurrentIcon = MenuClose;
}
]]>
</mx:Script>
<mx:VBox width="100%" verticalScrollPolicy="off">
<mx:HBox width="100%" paddingLeft="[EMAIL PROTECTED] *
menuItemIndent}" verticalScrollPolicy="off" verticalAlign="middle">
<mx:Image source="{([EMAIL PROTECTED] == 'Y')? null:
CurrentIcon}"/>
<mx:VBox width="{(([EMAIL PROTECTED] == 'Y')?
leafMenuItemHeight: parentMenuItemHeight)}" verticalAlign="middle">
<mx:TextArea id="menuText"
text="[EMAIL PROTECTED]" width="100%" wordWrap="true" editable="false"
alpha="0" selectable="false"
borderStyle="none" verticalScrollPolicy="off"
height="{menuItemHeight}" styleName="{([EMAIL PROTECTED]
== 'Y')? 'TreeLeafNode': ''}"/>
</mx:VBox>
</mx:HBox>
</mx:VBox>
</mx:Canvas>
