8 Replies Latest reply on Nov 16, 2010 12:14 PM by Devtron

    FLEX panel header gradient

    Devtron Level 3

      Does anyone know how to apply a header gradient to a Panel container?

       

      The only info I have found about this is here:

      http://stackoverflow.com/questions/1215433

       

      ^ And I do not see a solution? I know some of the themes apply gradients to panel headers, but is there a way to do this in CSS?

        • 1. Re: FLEX panel header gradient
          Devtron Level 3

          I am looking at the GraphiteGraphical PanelSkin. I no longer use this theme in my application, BUT, it did produce gradients on the panel headers (as desired).

           

          Here is the PanelSkin definition:

          <?xml version="1.0" encoding="utf-8"?>

           

          <!--

           

          ADOBE SYSTEMS INCORPORATED
          Copyright 2009 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 default skin class for a Spark Panel container.

           

          @langversion 3.0
          @playerversion Flash 10
          @playerversion AIR 1.5
          @productversion Flex 4
          -->
          <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
              minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
             
              <fx:Metadata>
                  <![CDATA[
                  /**
                  * @copy spark.skins.spark.ApplicationSkin#hostComponent
                  */
                  [HostComponent("spark.components.Panel")]
                  ]]>
              </fx:Metadata>
             
              <fx:Script fb:purpose="styling">
                  /**
                   * @private
                   */
                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                  {
                      if (getStyle("borderVisible") == true)
                      {
                          border.visible = true;
                          background.left = background.top = background.right = background.bottom = 1;
                          contents.left = contents.top = contents.right = contents.bottom = 1;
                      }
                      else
                      {
                          border.visible = false;
                          background.left = background.top = background.right = background.bottom = 0;
                          contents.left = contents.top = contents.right = contents.bottom = 0;
                      }
                     
                      dropShadow.visible = getStyle("dropShadowVisible");
                     
                      var cr:Number = getStyle("cornerRadius");
                     
                      if (cornerRadius != cr)
                      {
                          cornerRadius = cr;
                         
                          var withControls:Boolean =
                              (currentState == "disabledWithControlBar" ||
                               currentState == "normalWithControlBar");
                         
                          dropShadow.tlRadius = cornerRadius;
                          dropShadow.trRadius = cornerRadius;
                          dropShadow.blRadius = withControls ? cornerRadius : 0;
                          dropShadow.brRadius = withControls ? cornerRadius : 0;
                         
                          setPartCornerRadii(topMaskRect, withControls);
                          setPartCornerRadii(border, withControls);
                          setPartCornerRadii(background, withControls);               
                      }
                     
                      if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls);
                     
                      borderStroke.color = getStyle("borderColor");
                      borderStroke.alpha = getStyle("borderAlpha");
                      backgroundFill.color = getStyle("backgroundColor");
                      backgroundFill.alpha = getStyle("backgroundAlpha");
                     
                      super.updateDisplayList(unscaledWidth, unscaledHeight);
                  }
                 
                 
                  /**
                   * @private
                   */ 
                  private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
                  {           
                      target.topLeftRadiusX = cornerRadius;
                      target.topRightRadiusX = cornerRadius;
                      target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
                      target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
                  }
                 
                  private var cornerRadius:Number;
              </fx:Script>
             
              <s:states>
                  <s:State name="normal" />
                  <s:State name="disabled" />
                  <s:State name="normalWithControlBar" stateGroups="withControls" />
                  <s:State name="disabledWithControlBar" stateGroups="withControls" />
              </s:states>
             
              <!-- drop shadow can't be hittable so it stays sibling of other graphics -->
              <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11"
                                       angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
             
              <!-- drop shadow can't be hittable so all other graphics go in this group -->
              <s:Group left="0" right="0" top="0" bottom="0">
                 
                  <!-- top group mask -->
                  <s:Group left="3" top="3" right="3" bottom="3" id="topGroupMask" >
                      <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
                          <s:fill>
                              <s:SolidColor alpha="1"/>
                          </s:fill>
                      </s:Rect>
                  </s:Group>
                 
                  <!-- bottom group mask -->
                  <s:Group left="0" top="0" right="0" bottom="0" id="bottomGroupMask"
                           includeIn="normalWithControlBar, disabledWithControlBar">
                      <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
                          <s:fill>
                              <s:SolidColor alpha="1"/>
                           </s:fill>
                      </s:Rect>
                  </s:Group>
                 
                  <!-- layer 1: border -->
                  <s:Rect id="border" left="0" right="0" top="0" bottom="0" >
                      <s:stroke>
                          <s:SolidColorStroke id="borderStroke" weight="1" />
                      </s:stroke>
                  </s:Rect>
                 
                  <!-- layer 2: background fill -->
                  <!--- Defines the appearance of the PanelSkin class's background. -->
                  <s:Rect id="background" left="1" top="1" right="1" bottom="1">
                      <s:fill>
                          <!-- Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
                          <s:SolidColor id="backgroundFill" />
                      </s:fill>
                  </s:Rect>
                 
                  <!-- layer 3: contents -->
                  <!--- contains the vertical stack of titlebar content and controlbar -->
                  <s:Group left="1" right="1" top="1" bottom="1" id="contents">
                      <s:layout>
                          <s:VerticalLayout gap="0" horizontalAlign="justify" />
                      </s:layout>
                     
                      <s:Group id="topGroup" mask="{topGroupMask}">
                         
                          <!-- layer 0: title bar fill -->
                          <s:Rect id="tbFill" left="0" right="0" top="0" bottom="0">
                              <s:fill>
                                  <s:LinearGradient rotation="90">
                                      <s:GradientEntry color="0x696a69" />
                                      <s:GradientEntry color="0x282828" />
                                  </s:LinearGradient>
                              </s:fill>
                          </s:Rect>
                         
                          <!-- layer 3: text -->
                          <!--- Defines the appearance of the PanelSkin class's title bar. -->
                          <s:Label id="titleDisplay" maxDisplayedLines="1"
                                   left="9" right="3" top="1" bottom="0" minHeight="30"
                                   verticalAlign="middle" fontWeight="bold">
                          </s:Label>
                      </s:Group>
                     
                      <!--
                      Note: setting the minimum size to 0 here so that changes to the host component's
                      size will not be thwarted by this skin part's minimum size.   This is a compromise,
                      more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
                      -->
                      <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
                      </s:Group>
                     
                      <s:Group id="bottomGroup" minWidth="0" minHeight="0"
                               includeIn="normalWithControlBar, disabledWithControlBar" >
                         
                          <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">

           

                              <!-- layer 0: control bar divider line -->
                              <s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
                                  <s:fill>
                                      <s:SolidColor color="0x000000" />
                                  </s:fill>
                              </s:Rect>
                             
                              <!-- layer 1: control bar highlight -->
                              <s:Rect left="0" right="0" top="1" bottom="0">
                                  <s:stroke>
                                      <s:SolidColorStroke color="0x282828" />
                                  </s:stroke>
                              </s:Rect>
                             
                              <!-- layer 2: control bar fill -->
                              <s:Rect left="1" right="1" top="2" bottom="1">
                                  <s:fill>
                                      <s:SolidColor color="0x696a69" />
                                  </s:fill>
                              </s:Rect>
                          </s:Group>
                          <!-- layer 3: control bar -->
                          <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                              <s:layout>
                                  <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                              </s:layout>
                          </s:Group>
                      </s:Group>
                  </s:Group>
              </s:Group>
          </s:Skin>

           

           

           

           

           

          ^ Where is the gradient being applied to the Panel? I dont really see it?

          • 2. Re: FLEX panel header gradient
            Devtron Level 3

            Ok, I am guessing the title bar gets filled like this?

             

                            <!-- layer 0: title bar fill -->
                            <s:Rect id="tbFill" left="0" right="0" top="0" bottom="0">
                                <s:fill>
                                    <s:LinearGradient rotation="90">
                                        <s:GradientEntry color="0x696a69" />
                                        <s:GradientEntry color="0x282828" />
                                    </s:LinearGradient>
                                </s:fill>
                            </s:Rect>

             

             

             

            How can I apply that to my current panel? I no longer use this skin. Must I use a completely new skin to do this?

            • 3. Re: FLEX panel header gradient
              DaveConTech

              Hi did you ever figure this one out, or does anyone else have any suggestions?

               

              Thanks,

               

              Dave

              • 4. Re: FLEX panel header gradient
                Devtron Level 3

                ^ I found out, in FLEX 4, you must create a new skin for the Panel to get the gradient.

                 

                I havent had time to do this yet. I will probably start on this next week or so. Until then, I just have to live with the fact that re-skinning the Panel component is my only option, because nothing else works in FLEX 4.

                • 5. Re: FLEX panel header gradient
                  DaveConTech Level 1

                  So ya it is defintley those lines, but you can just have Flex Builder auto-generate a skin based on a Spark Panel and then simply change those lines for your purposes.

                  • 6. Re: FLEX panel header gradient
                    Devtron Level 3

                    ^ Woah, awesome, how do you do that (auto-generate a skin)? Any chance you could explain that a little better?

                     

                    Pardon my ignorance, but I've never skinned anything in FLEX....

                    • 7. Re: FLEX panel header gradient
                      DaveConTech Level 1

                      File->New->MXML Skin

                       

                      Then put it anywhere in the project, for Host Component you want to find the Spark Panel, keep the create as copy of the PanelSkin.

                       

                      Then just find that code you posted earlier and change the gradiant as you need to.

                       

                      Then in the Application code make sure the skinClass style of the Panel is set to whatever you named the Skin.

                      • 8. Re: FLEX panel header gradient
                        Devtron Level 3

                        ^ Woah, awesome! We got it working. Bad-***!! This rocks, thanks so much...

                         

                        The hardest part was figuring out what "host component" to use, since it does not pre-populate the list until you start typing. I got a little confused there. But once we got past that hurdle, it works like a champ.

                         

                        This issue has been an outstanding bug ticket in our defect system for quite a while now. This is huge, thanks!!