0 Replies Latest reply on Jun 25, 2009 10:59 PM by theLoggerGuy

    Making a custom s:Panel like a mx:Panel

    theLoggerGuy Level 1

      Hello all,

       

      I am trying to gain some experience in Flex 4 and chose what I thought would be quite a simple enough task, but it has me stumped.  All I want to do is add the "status" property to a spark Panel's title area.  So I thought, extend the component and add a custom skin.  Unfortunately this code will prevent the "title" property from displaying!!  I found that if I comment out the [SkinPart( required="false" )] in the MySparkPanel.mxml file then the "status" reapears, but the "status" vanishes.  I would really like both to be visible at the same time.  Any insight would be greatly appreciated.

       

       

       

      <!-- MyApplication.mxml -->

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" xmlns:components="components.*">
         
          <s:layout>
              <s:HorizontalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"/>
          </s:layout>
         
          <components:MySparkPanel width="200" height="100%" title="Title" status="Status"/>  
      </s:Application>

       

      ========================================================================================== ==========

       

       

       

      <!-- MySparkPanel.mxml -->

      <?xml version="1.0" encoding="utf-8"?>
      <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/halo" skinClass="components.MySparkPanelSkin">
         
          <fx:Script>
              <![CDATA[
                  import spark.primitives.supportClasses.TextGraphicElement;
                 
                 
                  [SkinPart( required="false" )]
                  /**
                   *
                   */
                  public var statusField: TextGraphicElement;
                 
                 
                  //----------------------------------
                  //  status
                  //----------------------------------
                  [Bindable]
                  /**
                   *  Status displayed in the title bar.
                   *
                   *  @default ""
                   */
                  public function get status(  ): String
                  {
                      return _status;
                  }
             
                  /**
                   *  @private
                   */
                  public function set status( value: String ): void
                  {
                      _status = value;
             
                      if ( statusField )
                      {
                          statusField.text = _status;
                      }
                  }
                 
                 
                  /**
                   *
                   */
                  override protected function partAdded( partName: String, instance: Object ): void
                  {
                      super.partAdded( partName, instance );
                     
                      if ( instance == statusField )
                      {
                          statusField.text = status;
                      }
                  }
                 
                 
                  /**
                   * @private
                   *
                   * Private declarations.
                   */
                  private var _status: String = "";
              ]]>
          </fx:Script>
         
      </s:Panel>

       

      ========================================================================================== =

       

      <!-- MySparkPanelSkin.mxml -->

      <?xml version="1.0" encoding="utf-8"?>
      <!--- A custom skin class for a Spark Panel container. -->
      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">
         
          <!--fx:Script>
              /* Define the skin elements that should not be colorized.
                 For panel, border and title backround are skinned, but the content area and title text are not. */
              static private const exclusions:Array = [ "background", "titleField", "contentGroup", "statusField" ];

       

              /**
               * @copy spark.skins.SparkSkin#colorizeExclusions
               */       
              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" ];
             
              /**
               * @inheritDoc
               */
              override public function get contentItems(  ):Array
              {
                  return contentFill
              };
          </fx:Script-->
         
          <s:states>
              <s:State name="normal" />
              <s:State name="disabled" />
          </s:states>
         
          <!-- drop shadow -->
          <s:Rect left="0" top="0" right="0" bottom="0">
              <s:filters>
                  <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" knockout="true" />
              </s:filters>
              <s:fill>
                  <s:SolidColor color="0" />
              </s:fill>
          </s:Rect>
         
          <!-- layer 1: border -->
          <s:Rect left="0" right="0" top="0" bottom="0">
              <s:stroke>
                  <s:SolidColorStroke color="0" alpha="0.50" 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 color="0xFFFFFF" id="bgFill" />
              </s:fill>
          </s:Rect>
         
          <!-- layer 3: title bar fill -->
          <s:Rect left="1" right="1" top="1" height="30">
             <s:fill>
                  <s:LinearGradient rotation="90">
                      <s:GradientEntry color="0xE2E2E2" />
                      <s:GradientEntry color="0xD9D9D9" />
                  </s:LinearGradient>
             </s:fill>
          </s:Rect>
         
          <!-- layer 4: title bar highlight -->
          <s:Rect left="1" right="1" top="1" height="30">
             <s:stroke>
                  <s:LinearGradientStroke rotation="90" weight="1">
                      <s:GradientEntry color="0xEAEAEA" />
                      <s:GradientEntry color="0xD9D9D9" />
                  </s:LinearGradientStroke>
             </s:stroke>
          </s:Rect>
          <s:Rect left="1" right="1" top="31" height="1">
              <s:fill>
                  <s:SolidColor color="0xC0C0C0" />
              </s:fill>
          </s:Rect>
         
          <!-- layer 5: text -->
          <!--- Defines the appearance of the PanelSkin class's title bar. -->
          <s:SimpleText id="statusField" lineBreak="explicit" left="10" right="10" top="2" height="30"
                   verticalAlign="middle" fontWeight="bold" textAlign="right">
          </s:SimpleText>
         
          <s:SimpleText id="titleField" lineBreak="explicit" left="10" right="10" top="2" height="30"
                   verticalAlign="middle" fontWeight="bold">
          </s:SimpleText>

       

          <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1">
          </s:Group>

       

      </s:SparkSkin>