3 Replies Latest reply on Jul 7, 2009 2:48 AM by garigantua

    skinng a tree

    garigantua

      Skinng the corner radius of a Tree is proving to be more difficult than it should be unless I'm missing something obvious.  Please see the following for the example.

       

      <?xml version="1.0" encoding="utf-8"?>
      <!-- FXG/LibraryExample.mxml -->
      <s:Application 
           xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:mx="library://ns.adobe.com/flex/halo" 
           xmlns:s="library://ns.adobe.com/flex/spark"
           
           >
           
           <fx:Style>
                @namespace mx "library://ns.adobe.com/flex/halo";
                @namespace s "library://ns.adobe.com/flex/spark";
                
                .treestyle{
                     
                     /*   Why wouldn't this work  */
                     radius:                    10;
                     radial-stroke:          10;
                     
                     
                     depthColors:          #E6E2AF, #EFECCA ; 
                     background-color:     #EFECCA; 
                     
                     /*  I can skin the borders of the stroke and fill, but the selection boxes, and added color layers keep their edges */
                     /* 
                     border-skin:           ClassReference("customskins.BorderSkin");
                     */
                }
                
           </fx:Style>
           
           
           <fx:Declarations>
                <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:Declarations>
           
           
           <mx:Tree styleName="treestyle" dataProvider="{treeData}" showRoot="false" labelField="@label">
                
           </mx:Tree>
           
      </s:Application>
      

       

       

      Is there something I am missing to get radius cornering for the Tree component?  Should I be trying to access the individual highlight FXGs?

        • 1. Re: skinng a tree
          garigantua Level 1

          Sorry, there are some important comments in the code that are not so readable. 

           

           

          I can skin the borders of the stroke and fill in a custom skin, but the selection boxes, and added color layers keep their edges

           

           

          and a screenshot would be helpful...

           

          Screenshot - 7_1_2009 , 12_41_42 PM.jpg

          • 2. Re: skinng a tree
            Flex harUI Adobe Employee

            I don't believe there are "radius" and "radius-stroke" styles for Tree.  Did you see documentation somewhere?  Did you try "cornerRadius" instead?  That should round the corners, then to deal with selection you'll either have to add paddingTop/Bottom or subclass and override drawHighlightIndicator and drawSelectionIndicator.

             

            There might be an example on the internet where someone has already done that.

            • 3. Re: skinng a tree
              garigantua Level 1

              Thank you for the help and getting me towards the right direction.  I got parts of the tree skinned correctly, but there are other parts still missing.  Corner-radius doesn't seem to work.

               

              It seems like a very disjointed process to skin a tree in Flash Builder. Some graphics are overrides, others are skins, and some are not so easy to locate.  Will there be a spark implementation of the Tree component in the future?  I never got into skinning with flash and flex until gumbo.  It's great now, except for skinning halo components.  For that reason, I try to stick with sparks from now on.  The following shows how ugly skinning a halo tree can be.  Thanks.

               

              Subclassed Tree component

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Tree xmlns:fx="http://ns.adobe.com/mxml/2009" 
                         xmlns:s="library://ns.adobe.com/flex/spark" 
                         xmlns:mx="library://ns.adobe.com/flex/halo"
                         creationComplete="init()"
                         styleName="roundedTree"
                        
                        contentBackgroundColor="0x0000ff"
                        
                        backgroundColor="0xffff00"
                   >
                   <!--
                   object that determines the background color is not connected 
                   -->
                   <fx:Style>
                        @namespace mx "library://ns.adobe.com/flex/halo";
                        @namespace s "library://ns.adobe.com/flex/spark";
                        
                        .roundedTree{
                             depthColors:               #E6E2AF, #EFECCA ;   
                             
                             /*   these don't work  */
                             /* */
                             radius:                 10;
                             radial-stroke:        10;
                             corner-radius:          10;
                             
                             
                             
                             /*  I can skin the borders of the stroke and fill, but the selection boxes, and added color layers keep their edges */
                             /*  */
                             border-skin:           ClassReference("skins.BorderSkin");
                             
                        }
                        
                   </fx:Style>
                   <fx:Declarations>
                        <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:Declarations>
                   
                   <fx:Script>
                   <![CDATA[
                        import mx.controls.listClasses.IListItemRenderer;
                        
                        private function init():void{
                             dataProvider = treeData;
                             showRoot = false;
                             labelField = "@label";
                             left = 20;
                             top = 20;
                        }
                        override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void
                        {
                             var g:Graphics = indicator.graphics;
                             g.clear();
                             g.beginFill(0xff0000);
                             g.drawRoundRect(0, 0, width, height, 20, 20);
              //                g.drawRoundRectComplex(0, 0, width, height, 20, 20, 0, 0); 
                             g.endFill();
                             
                             indicator.x = x;
                             indicator.y = y;
                        }
                        override protected function drawSelectionIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void
                        {
                             var g:Graphics = indicator.graphics;
                             g.clear();
                             g.beginFill(0x0000ff);
              //               g.drawRoundRect(0, 0, width, height, 20, 20);
                             g.drawRoundRectComplex(0, 0, width, height, 20, 20, 0, 0); 
                             g.endFill();
                             
                             indicator.x = x;
                             indicator.y = y;
                        }
              
                        
                   ]]>
                   </fx:Script>
                   
                   
              </mx:Tree>
              
               
              

               

               

              custom BorderSkin

               

               

              <?xml version="1.0" encoding="utf-8"?>
              <!--
              
                   ADOBE SYSTEMS INCORPORATED
                   Copyright 2008 Adobe Systems Incorporated
                   All Rights Reserved.
              
                   NOTICE: Adobe permits you to use, modify, and distribute this file
                   in accordance with the terms of the license agreement accompanying it.
              
              -->
              <!--- The Spark skin class for the Halo Border base class. -->
              <local:SparkSkinForHalo 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 = []; //"borderStroke"
                      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">
                       <!-- border --> 
                        <s:Rect left="0" right="0" top="0" bottom="0" radiusX="20" radiusY="20">
                           <s:stroke>            
                               <s:SolidColorStroke id="borderStroke" color="0x00ff00"/>
                           </s:stroke>
                       </s:Rect>
                   
                       <!-- fill -->         
                       
                       <!--
                       
                       doesn't work???
                       
                       -->
                       <s:Rect id="background" left="1" right="1" top="1" bottom="1" radiusX="20" radiusY="20">
                           <s:fill>
                               <s:SolidColor id="bgFill"/>
                           </s:fill>
                       </s:Rect>
                       
                       
                  </s:Group>
               </local:SparkSkinForHalo>