The following example shows how you can remove or modify the border on the Halo Tree control (with default Spark skin) in Flex 4 by setting the borderSkin style.
Full code after the jump.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".
<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2009/08/28/removing-the-border-from-the-halo-tree-control-in-flex-4/ --> <s:Application name="Halo_Tree_borderSkin_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <mx:Tree id="tree1" labelField="@label" showRoot="true" borderSkin="{null}" width="160" horizontalCenter="0" verticalCenter="0"> <mx:XMLListCollection id="MailBox"> <fx:XMLList> <folder label="Mail"> <folder label="INBOX"/> <folder label="Personal Folder"> <Pfolder label="Business" /> <Pfolder label="Demo" /> <Pfolder label="Personal" isBranch="true" /> <Pfolder label="Saved Mail" /> </folder> <folder label="Sent" /> <folder label="Trash" /> </folder> </fx:XMLList> </mx:XMLListCollection> </mx:Tree> </s:Application>
View source is enabled in the following example.
Or, you can modify the Halo Tree border skin, as seen in the following example:
<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2009/08/28/removing-the-border-from-the-halo-tree-control-in-flex-4/ --> <s:Application name="Halo_Tree_borderSkin_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" backgroundColor="red"> <mx:Tree id="tree1" labelField="@label" showRoot="true" borderSkin="skins.CustomBorderSkin" width="160" horizontalCenter="0" verticalCenter="0"> <mx:XMLListCollection id="MailBox"> <fx:XMLList> <folder label="Mail"> <folder label="INBOX"/> <folder label="Personal Folder"> <Pfolder label="Business" /> <Pfolder label="Demo" /> <Pfolder label="Personal" isBranch="true" /> <Pfolder label="Saved Mail" /> </folder> <folder label="Sent" /> <folder label="Trash" /> </folder> </fx:XMLList> </mx:XMLListCollection> </mx:Tree> </s:Application>
And the custom border skin, skins/CustomBorderSkin.mxml, is as follows:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/28/removing-the-border-from-the-halo-tree-control-in-flex-4/ --> <local:SparkSkinForHalo name="CustomBorderSkin" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:local="mx.skins.spark.*" implements="mx.core.IRectangularBorder"> <fx:Script> <![CDATA[ import mx.core.EdgeMetrics; import mx.core.IUIComponent; import mx.graphics.RectangularDropShadow; /* Define the skin elements that should not be colorized. */ static private const exclusions:Array = ["background"]; override public function get colorizeExclusions():Array { return exclusions; } /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */ static private const contentFill:Array = ["bgFill"]; override public function get contentItems():Array { return contentFill; } /* Define the border item. */ static private const borderItem:Array = []; override protected function get borderItems():Array { return borderItem; } override protected function get defaultBorderItemColor():uint { return 0x696969; } static private const metrics:EdgeMetrics = new EdgeMetrics(1, 1, 1, 1); private var dropShadow:RectangularDropShadow; public function get borderMetrics():EdgeMetrics { return metrics; } public function get backgroundImageBounds():Rectangle { return null; } public function set backgroundImageBounds(value:Rectangle):void { } public function get hasBackgroundImage():Boolean { return false; } public function layoutBackgroundImage():void { } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { graphics.clear(); super.updateDisplayList(unscaledWidth, unscaledHeight); if (parent && parent is IUIComponent && !IUIComponent(parent).enabled) alpha = 0.5; else alpha = 1; // Draw drop shadow, if needed if (getStyle("dropShadowEnabled") == false || getStyle("dropShadowEnabled") == "false" || width == 0 || height == 0) { return; } // Create a RectangularDropShadow object, set its properties, // and draw the shadow if (!dropShadow) dropShadow = new RectangularDropShadow(); dropShadow.distance = 5; dropShadow.angle = 90; dropShadow.color = 0; dropShadow.alpha = 0.8; dropShadow.blurX = 20; dropShadow.blurY = 20; dropShadow.drawShadow(graphics, x, y, width, height); } private function getDropShadowAngle(distance:Number, direction:String):Number { if (direction == "left") { return distance >= 0 ? 135 : 225; } else if (direction == "right") { return distance >= 0 ? 45 : 315; } else { // direction == "center" return distance >= 0 ? 90 : 270; } } ]]> </fx:Script> <s:Group left="0" right="0" top="0" bottom="0"> <!-- fill --> <s:Rect id="background" left="1" right="1" top="1" bottom="1"> <s:fill> <s:SolidColor id="bgFill" color="0xFFFFFF" /> </s:fill> </s:Rect> </s:Group> </local:SparkSkinForHalo>
The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.
You can also set the borderSkin style in an external .CSS file or <Style/> block, as seen in the following example:
<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2009/08/28/removing-the-border-from-the-halo-tree-control-in-flex-4/ --> <s:Application name="Halo_Tree_borderSkin_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/halo"; mx|Tree { /* borderSkin: ClassReference(null); */ borderSkin: ClassReference("skins.CustomBorderSkin"); } </fx:Style> <mx:Tree id="tree1" labelField="@label" showRoot="true" width="160" horizontalCenter="0" verticalCenter="0"> <mx:XMLListCollection id="MailBox"> <fx:XMLList> <folder label="Mail"> <folder label="INBOX"/> <folder label="Personal Folder"> <Pfolder label="Business" /> <Pfolder label="Demo" /> <Pfolder label="Personal" isBranch="true" /> <Pfolder label="Saved Mail" /> </folder> <folder label="Sent" /> <folder label="Trash" /> </folder> </fx:XMLList> </mx:XMLListCollection> </mx:Tree> </s:Application>
Or, you can set the borderSkin style using ActionScript, as seen in the following example:
<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2009/08/28/removing-the-border-from-the-halo-tree-control-in-flex-4/ --> <s:Application name="Halo_Tree_borderSkin_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <fx:Script> <![CDATA[ import skins.CustomBorderSkin; protected function btn_click(evt:MouseEvent):void { tree1.setStyle("borderSkin", CustomBorderSkin); } ]]> </fx:Script> <s:Button id="btn" label="Set Tree border skin" click="btn_click(event);" left="10" top="10" /> <mx:Tree id="tree1" labelField="@label" showRoot="true" width="160" horizontalCenter="0" verticalCenter="0"> <mx:XMLListCollection id="MailBox"> <fx:XMLList> <folder label="Mail"> <folder label="INBOX"/> <folder label="Personal Folder"> <Pfolder label="Business" /> <Pfolder label="Demo" /> <Pfolder label="Personal" isBranch="true" /> <Pfolder label="Saved Mail" /> </folder> <folder label="Sent" /> <folder label="Trash" /> </folder> </fx:XMLList> </mx:XMLListCollection> </mx:Tree> </s:Application>
This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.
