Réglage de la hauteur de l’en-tête d’un conteneur Spark Panel dans Flex 4

Par
tannoy
– 29 juillet 2010Publié dans : Flex 4

Traduction de l'article de Peter DeHaan:
Setting the header height on a Spark Panel container in Flex 4

L'exemple suivant montre comment vous pouvez régler la hauteur de l'en-tête d'un conteneur Spark Panel dans Flex 4 en définissant la propriété height de la skin part titleDisplay de la skin du conteneur Panel.

L'exemple suivant requiert Flash Player 10 et le SDK Adobe Flex 4. Vous pouvez télécharger la version d'évaluation d'Adobe Flash Builder 4 à l'adresse http://www.adobe.com/products/flex/. Pour télécharger la dernière version du SDK Flex 4, regardez http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

Pour plus d'informations sur le démarrage avec Flex 4 et Flash Builder 4, regardez le blog officiel de l'équipe Flex Adobe Flex Team blog.

COPIER-COLLER
XML:
  1. </p>
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <!-- http://blog.flexexamples.com/2010/07/25/setting-the-header-height-on-a-spark-panel-container-in-flex-4/ -->
  4. <s:application name="Spark_Panel_titleDisplay_height_test"
  5.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  6.         xmlns:s="library://ns.adobe.com/flex/spark"
  7.         xmlns:mx="library://ns.adobe.com/flex/mx">
  8.     <s:controlbarcontent>
  9.         <mx:form styleName="plain">
  10.             <mx:formitem label="titleDisplay height:">
  11.                 <s:hslider id="sl"
  12.                         minimum="20" maximum="100"
  13.                         change="pnl.titleDisplay.height = sl.value;" />
  14.             </mx:formitem>
  15.         </mx:form>
  16.     </s:controlbarcontent>
  17.  
  18.     <s:panel id="pnl"
  19.             title="Spark Panel title"
  20.             width="300" height="200"
  21.             horizontalCenter="0" verticalCenter="0">
  22.         <s:label text="Spark Label text"
  23.                 x="20" y="20" />
  24.     </s:panel>
  25.  
  26. </s:application>
  27. <p>

La vue du code source est activée dans l'exemple suivant.

Si vous voulez définir une hauteur de moins de 30 pixels pour la skin part titleDisplay, vous devez créer une skin personnalisée et supprimer la propriété minHeight de la skin part titleDisplay:

COPIER-COLLER
XML:
  1. </p>
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <!-- http://blog.flexexamples.com/2010/07/25/setting-the-header-height-on-a-spark-panel-container-in-flex-4/ -->
  4. <s:sparkskin name="CustomSparkPanelSkin"
  5.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  6.         xmlns:s="library://ns.adobe.com/flex/spark"
  7.         xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
  8.         blendMode="normal"
  9.         mouseEnabled="false"
  10.         minWidth="131" minHeight="127"
  11.         alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
  12.     <s:states>
  13.         <s:state name="normal" />
  14.         <s:state name="disabled" />
  15.         <s:state name="normalWithControlBar" stateGroups="withControls" />
  16.         <s:state name="disabledWithControlBar" stateGroups="withControls" />
  17.     </s:states>
  18.  
  19.     <fx:metadata>
  20.         [HostComponent("spark.components.Panel")]
  21.     </fx:metadata>
  22.  
  23.     <fx:script fb:purpose="styling">
  24.         <![CDATA[
  25.             /* Define the skin elements that should not be colorized.
  26.             For panel, border and title background are skinned, but the content area and title text are not. */
  27.             static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];
  28.  
  29.             override public function get colorizeExclusions():Array {
  30.                 return exclusions;
  31.             }
  32.  
  33.             override protected function initializationComplete():void {
  34.                 useChromeColor = true;
  35.                 super.initializationComplete();
  36.             }
  37.  
  38.             override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  39.                 if (getStyle("borderVisible") == true) {
  40.                     border.visible = true;
  41.                     background.left = background.top = background.right = background.bottom = 1;
  42.                     contents.left = contents.top = contents.right = contents.bottom = 1;
  43.                 } else {
  44.                     border.visible = false;
  45.                     background.left = background.top = background.right = background.bottom = 0;
  46.                     contents.left = contents.top = contents.right = contents.bottom = 0;
  47.                 }
  48.  
  49.                 dropShadow.visible = getStyle("dropShadowVisible");
  50.  
  51.                 var cr:Number = getStyle("cornerRadius");
  52.                 var withControls:Boolean = (currentState == "disabledWithControlBar" || currentState == "normalWithControlBar");
  53.  
  54.                 if (cornerRadius != cr) {
  55.                     cornerRadius = cr;
  56.  
  57.                     dropShadow.tlRadius = cornerRadius;
  58.                     dropShadow.trRadius = cornerRadius;
  59.                     dropShadow.blRadius = withControls ? cornerRadius : 0;
  60.                     dropShadow.brRadius = withControls ? cornerRadius : 0;
  61.  
  62.                     setPartCornerRadii(topMaskRect, withControls);
  63.                     setPartCornerRadii(border, withControls);
  64.                     setPartCornerRadii(background, withControls);
  65.                 }
  66.  
  67.                 if (bottomMaskRect) {
  68.                     setPartCornerRadii(bottomMaskRect, withControls);
  69.                 }
  70.  
  71.                 borderStroke.color = getStyle("borderColor");
  72.                 borderStroke.alpha = getStyle("borderAlpha");
  73.                 backgroundFill.color = getStyle("backgroundColor");
  74.                 backgroundFill.alpha = getStyle("backgroundAlpha");
  75.  
  76.                 super.updateDisplayList(unscaledWidth, unscaledHeight);
  77.             }
  78.  
  79.             private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void {
  80.                 target.topLeftRadiusX = cornerRadius;
  81.                 target.topRightRadiusX = cornerRadius;
  82.                 target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
  83.                 target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
  84.             }
  85.  
  86.             private var cornerRadius:Number;
  87.         ]]>
  88.     </fx:script>
  89.  
  90.     <!-- drop shadow can't be hittable so it stays sibling of other graphics -->
  91.     <s:rectangulardropshadow id="dropShadow"
  92.             blurX="20" blurY="20"
  93.             alpha="0.32" distance="11"
  94.             angle="90" color="#000000"
  95.             left="0" top="0" right="0" bottom="0"/>
  96.  
  97.     <!-- drop shadow can't be hittable so all other graphics go in this group -->
  98.     <s:group left="0" right="0" top="0" bottom="0">
  99.  
  100.         <!-- top group mask -->
  101.         </s:group><s:group id="topGroupMask" left="1" top="1" right="1" bottom="1">
  102.             <s:rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
  103.                 <s:fill>
  104.                     <s:solidcolor alpha="0"/>
  105.                 </s:fill>
  106.             </s:rect>
  107.         </s:group>
  108.  
  109.         <!-- bottom group mask -->
  110.         <s:group id="bottomGroupMask"
  111.                  left="1" top="1" right="1" bottom="1"
  112.                  includeIn="normalWithControlBar, disabledWithControlBar">
  113.             <s:rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
  114.                 <s:fill>
  115.                     <s:solidcolor alpha="0"/>
  116.                 </s:fill>
  117.             </s:rect>
  118.         </s:group>
  119.  
  120.         <!-- layer 1: border -->
  121.         <s:rect id="border" left="0" right="0" top="0" bottom="0">
  122.             <s:stroke>
  123.                 <s:solidcolorstroke id="borderStroke" weight="1" />
  124.             </s:stroke>
  125.         </s:rect>
  126.  
  127.         <!-- layer 2: background fill -->
  128.         <!--- Defines the appearance of the PanelSkin class's background. -->
  129.         <s:rect id="background" left="1" top="1" right="1" bottom="1">
  130.             <s:fill>
  131.                 <!--- Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
  132.                 <s:solidcolor id="backgroundFill" color="#FFFFFF"/>
  133.             </s:fill>
  134.         </s:rect>
  135.  
  136.         <!-- layer 3: contents -->
  137.         <!--- Contains the vertical stack of titlebar content and controlbar. -->
  138.         <s:group left="1" right="1" top="1" bottom="1" id="contents">
  139.             <s:layout>
  140.                 <s:verticallayout gap="0" horizontalAlign="justify" />
  141.             </s:layout>
  142.  
  143.             </s:group><s:group id="topGroup" mask="{topGroupMask}">
  144.                 <!-- layer 0: title bar fill -->
  145.                 <s:rect id="tbFill" left="0" right="0" top="0" bottom="1">
  146.                     <s:fill>
  147.                         <s:lineargradient rotation="90">
  148.                             <s:gradiententry color="0xE2E2E2" />
  149.                             <s:gradiententry color="0xD9D9D9" />
  150.                         </s:lineargradient>
  151.                     </s:fill>
  152.                 </s:rect>
  153.  
  154.                 <!-- layer 1: title bar highlight -->
  155.                 <s:rect id="tbHilite" left="0" right="0" top="0" bottom="0">
  156.                     <s:stroke>
  157.                         <s:lineargradientstroke rotation="90" weight="1">
  158.                             <s:gradiententry color="0xEAEAEA" />
  159.                             <s:gradiententry color="0xD9D9D9" />
  160.                         </s:lineargradientstroke>
  161.                     </s:stroke>
  162.                 </s:rect>
  163.  
  164.                 <!-- layer 2: title bar divider -->
  165.                 <s:rect id="tbDiv" left="0" right="0" height="1" bottom="0">
  166.                     <s:fill>
  167.                         <s:solidcolor color="0xC0C0C0" />
  168.                     </s:fill>
  169.                 </s:rect>
  170.  
  171.                 <!-- layer 3: text -->
  172.                 <s:label id="titleDisplay" maxDisplayedLines="1"
  173.                          left="9" right="3" top="1" bottom="0"
  174.                          verticalAlign="middle" textAlign="start" fontWeight="bold" />
  175.             </s:group>
  176.  
  177.             <!--
  178.                 Note: setting the minimum size to 0 here so that changes to the host component's
  179.                 size will not be thwarted by this skin part's minimum size.   This is a compromise,
  180.                 more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
  181.             -->
  182.             <s:group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
  183.  
  184.             <s:group id="bottomGroup" minWidth="0" minHeight="0"
  185.                      includeIn="normalWithControlBar, disabledWithControlBar">
  186.  
  187.                 </s:group><s:group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
  188.  
  189.                     <!-- layer 0: control bar divider line -->
  190.                     <s:rect left="0" right="0" top="0" height="1" alpha="0.22">
  191.                         <s:fill>
  192.                             <s:solidcolor color="0x000000" />
  193.                         </s:fill>
  194.                     </s:rect>
  195.  
  196.                     <!-- layer 1: control bar highlight -->
  197.                     <s:rect left="0" right="0" top="1" bottom="0">
  198.                         <s:stroke>
  199.                             <s:lineargradientstroke rotation="90" weight="1">
  200.                                 <s:gradiententry color="0xE5E5E5" />
  201.                                 <s:gradiententry color="0xD8D8D8" />
  202.                             </s:lineargradientstroke>
  203.                         </s:stroke>
  204.                     </s:rect>
  205.  
  206.                     <!-- layer 2: control bar fill -->
  207.                     <s:rect left="1" right="1" top="2" bottom="1">
  208.                         <s:fill>
  209.                             <s:lineargradient rotation="90">
  210.                                 <s:gradiententry color="0xDADADA" />
  211.                                 <s:gradiententry color="0xC5C5C5" />
  212.                             </s:lineargradient>
  213.                         </s:fill>
  214.                     </s:rect>
  215.                 </s:group>
  216.                 <!-- layer 3: control bar -->
  217.                 <s:group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
  218.                     <s:layout>
  219.                         <s:horizontallayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
  220.                     </s:layout>
  221.                 </s:group>
  222.            
  223.        
  224.    
  225. </s:sparkskin>
  226. <p>

Ou alors, vous pouvez étendre la skin du conteneur Spark Panel et définir la propriété height de la skin  part titleDisplay sur NaN (not a number), en utilisant ActionScript, comme le montre l'exemple suivant:

COPIER-COLLER
Actionscript:
  1. </p>
  2. /** http://blog.flexexamples.com/2010/07/25/setting-the-header-height-on-a-spark-panel-container-in-flex-4/ */
  3. package skins {
  4.     import spark.skins.spark.PanelSkin;
  5.  
  6.     public class CustomSparkPanelSkinAS extends PanelSkin {
  7.         override public function CustomSparkPanelSkinAS() {
  8.             super();
  9.             titleDisplay.minHeight = NaN;
  10.         }
  11.     }
  12. }
  13. <p>

Tags : , , , , ,