Modifier le Text Alignement d'un Title dans un component Spark Panel de Flex 4
Posté le 24 septembre 2009 à 1:38 | Tags: Flash Builder Beta 4, skin, SparkSkin, textAlign, titleDisplayL'exemple suivant vous montre comment modifier l'alignement du title (textAlign) d'un composant Spark Panel dans Flash Builder 4 / Flex 4 Gumbo en utilisant diverses méthodes :
1. Utilisation directe de la propriété titleDisplay.setStyle « textAlign »
2. Utilisation d'un style css
3. Création d'un custom skin du panel
Mise en avant : textAlign – titleDisplay
Attention : vous devez impérativement disposer du SDK 4.0.0.10007 ou supérieur.
1. Utilisation simple de la propriété titleDisplay.setStyle « textAlign »
| MXML | | Copier le code |
<?xml version="1.0" encoding="utf-8"?> |
<!-- http://www.flash-builder-tutorial.fr/2009/09/24/modifier-le-text-alignement-dun-title-dans-un-component-spark-panel-de-flex-4/ --> |
<s:Application name="Spark_Panel_titleDisplay_textAlign_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" viewSourceURL="srcview/index.html"> |
<s:controlBarContent> |
<mx:Form paddingTop="0" paddingBottom="0"> |
<mx:FormItem label="textAlign:"> |
<s:DropDownList id="dropDownList" |
requireSelection="true" |
change="dropDownList_change(event);"> |
<s:dataProvider> |
<s:ArrayList source="[left,center,right,start,end]" /> |
</s:dataProvider> |
</s:DropDownList> |
</mx:FormItem> |
</mx:Form> |
</s:controlBarContent> |
<fx:Script> |
<![CDATA[ |
import spark.events.IndexChangeEvent; |
protected function dropDownList_change(evt:IndexChangeEvent):void { |
pnl.titleDisplay.setStyle("textAlign", dropDownList.selectedItem); |
} |
]]> |
</fx:Script> |
<s:Panel id="pnl" |
title="The quick brown fox jumps over the lazy dog" |
width="400" height="150" |
horizontalCenter="0" verticalCenter="0" /> |
</s:Application> |
Rendu (nécessite Flash Player 10) :
This movie requires Flash Player 10
Télécharger la source de l'exemple
2. Définition de l'alignement du Text Title du composant Spark Panel dans un style css externe ou dans un block de script
| MXML | | Copier le code |
<?xml version="1.0" encoding="utf-8"?> |
<!-- http://www.flash-builder-tutorial.fr/2009/09/24/modifier-le-text-alignement-dun-title-dans-un-component-spark-panel-de-flex-4/ --> |
<s:Application name="Spark_Panel_titleDisplay_textAlign_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" viewSourceURL="srcview/index.html"> |
<fx:Style> |
@namespace s "library://ns.adobe.com/flex/spark"; |
@namespace mx "library://ns.adobe.com/flex/halo"; |
s|Panel #titleDisplay { |
textAlign: center; |
} |
</fx:Style> |
<s:Panel id="pnl" |
title="The quick brown fox jumps over the lazy dog" |
width="400" height="150" |
horizontalCenter="0" verticalCenter="0" /> |
</s:Application> |
Rendu (nécessite Flash Player 10) :
This movie requires Flash Player 10
Télécharger la source de l'exemple
3. Création d'un Custom Skin à partir du composant Spark Panel avec la définition direct de la propriété textAlign dans le Label du Panel Spark
Code de l'application :
| MXML | | Copier le code |
<?xml version="1.0" encoding="utf-8"?> |
<!-- http://www.flash-builder-tutorial.fr/2009/09/24/modifier-le-text-alignement-dun-title-dans-un-component-spark-panel-de-flex-4/ --> |
<s:Application name="Spark_Panel_titleDisplay_textAlign_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" viewSourceURL="srcview/index.html"> |
<s:Panel id="pnl" |
title="The quick brown fox jumps over the lazy dog" |
skinClass="skins.CustomPanelSkin" |
width="400" height="150" |
horizontalCenter="0" verticalCenter="0" /> |
</s:Application> |
Code de la classe personnalisée (skin class), skins/CustomPanelSkin.mxml :
| MXML | | Copier le code |
<?xml version="1.0" encoding="utf-8"?> |
<!-- http://www.flash-builder-tutorial.fr/2009/09/24/modifier-le-text-alignement-dun-title-dans-un-component-spark-panel-de-flex-4/ --> |
<s:SparkSkin name="CustomPanelSkin" |
xmlns:fx="http://ns.adobe.com/mxml/2009" |
xmlns:s="library://ns.adobe.com/flex/spark" |
alpha.disabled="0.5" |
blendMode="normal" |
mouseEnabled="false" |
minWidth="131" minHeight="127"> |
<s:states> |
<s:State name="normal" /> |
<s:State name="disabled" /> |
<s:State name="normalWithControlBar" stateGroups="withControls" /> |
<s:State name="disabledWithControlBar" stateGroups="withControls" /> |
</s:states> |
<fx:Metadata> |
[HostComponent("spark.components.Panel")] |
</fx:Metadata> |
<fx:Script> |
<![CDATA[ |
/* Défini les éléments du skin qui ne doivent pas être coloriés |
Le Panel, les backGrounds du border et title sont skinnés, mais le "content area" et "title" ne le sont pas */ |
static private const exclusions:Array = ["background", "titleDisplay", "contentGroup"]; |
override public function get colorizeExclusions():Array { |
return exclusions; |
} |
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; |
} |
super.updateDisplayList(unscaledWidth, unscaledHeight); |
} |
[Bindable] |
public var cornerRadius:Number; |
]]> |
</fx:Script> |
<!-- le drop shadow ne peut pas être atteint donc il reste un "sibling" (un lien/une relation) d'autres 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" |
tlRadius="{cornerRadius}" trRadius="{cornerRadius}" |
blRadius="0" blRadius.withControls="{cornerRadius}" |
brRadius="0" brRadius.withControls="{cornerRadius}" /> |
<!-- le drop shadow ne peut pas être atteint donc tous les composants graphiques doivent aller dans ce groupe --> |
<s:Group left="0" right="0" top="0" bottom="0"> |
<!-- top group mask --> |
<s:Group id="topGroupMask" left="1" top="1" right="1" bottom="1"> |
<s:Rect left="0" top="0" right="0" bottom="0" |
topLeftRadiusX="{cornerRadius}" topRightRadiusX="{cornerRadius}" |
bottomLeftRadiusX.withControls="{cornerRadius}" |
bottomRightRadiusX.withControls="{cornerRadius}"> |
<s:fill> |
<s:SolidColor alpha="0"/> |
</s:fill> |
</s:Rect> |
</s:Group> |
<!-- bottom group mask --> |
<s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask" |
includeIn="normalWithControlBar, disabledWithControlBar"> |
<s:Rect left="0" top="0" right="0" bottom="0" |
topLeftRadiusX="{cornerRadius}" topRightRadiusX="{cornerRadius}" |
bottomLeftRadiusX.withControls="{cornerRadius}" |
bottomRightRadiusX.withControls="{cornerRadius}"> |
<s:fill> |
<s:SolidColor alpha="0"/> |
</s:fill> |
</s:Rect> |
</s:Group> |
<!-- layer 1: border --> |
<s:Rect id="border" left="0" right="0" top="0" bottom="0" |
topLeftRadiusX="{cornerRadius}" topRightRadiusX="{cornerRadius}" |
bottomLeftRadiusX.withControls="{cornerRadius}" |
bottomRightRadiusX.withControls="{cornerRadius}" > |
<s:stroke> |
<s:SolidColorStroke color="{getStyle('borderColor')}" alpha="{getStyle('borderAlpha')}" 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" |
topLeftRadiusX="{cornerRadius}" topRightRadiusX="{cornerRadius}" |
bottomLeftRadiusX.withControls="{cornerRadius}" |
bottomRightRadiusX.withControls="{cornerRadius}"> |
<s:fill> |
<!-- Defines the PanelSkin class's background fill. The default color is 0xFFFFFF. --> |
<s:SolidColor color="{getStyle('backgroundColor')}" |
alpha="{getStyle('backgroundAlpha')}" /> |
</s:fill> |
</s:Rect> |
<!-- layer 3: contents --> |
<!--- contains the vertical stack of titlebar content and controlbar --> |
<s:Group id="contents" left="1" right="1" top="1" bottom="1"> |
<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="1"> |
<s:fill> |
<s:LinearGradient rotation="90"> |
<s:GradientEntry color="0xE2E2E2" /> |
<s:GradientEntry color="0xD9D9D9" /> |
</s:LinearGradient> |
</s:fill> |
</s:Rect> |
<!-- layer 1: title bar highlight --> |
<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0"> |
<s:stroke> |
<s:LinearGradientStroke rotation="90" weight="1"> |
<s:GradientEntry color="0xEAEAEA" /> |
<s:GradientEntry color="0xD9D9D9" /> |
</s:LinearGradientStroke> |
</s:stroke> |
</s:Rect> |
<!-- layer 2: title bar divider --> |
<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0"> |
<s:fill> |
<s:SolidColor color="0xC0C0C0" /> |
</s:fill> |
</s:Rect> |
<!-- layer 3: text --> |
<!--- Défini l'apparence de la "title bar" pour la classe de ce "PanelSkin" --> |
<s:Label id="titleDisplay" maxDisplayedLines="1" |
left="9" right="3" top="1" bottom="0" minHeight="30" |
verticalAlign="middle" fontWeight="bold" |
textAlign="center" /> |
</s:Group> |
<!-- Note : définir la taille minimale à 0 pour que les composants parents puissent changer |
la taille ne sera pas bloquée/entravée par la taille minimum de cette partie du skin. C'est un compromis. |
Pour plus d'information, rendez-vous ici : http://bugs.adobe.com/jira/browse/SDK-21143 --> |
<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" /> |
<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:LinearGradientStroke rotation="90" weight="1"> |
<s:GradientEntry color="0xE5E5E5" /> |
<s:GradientEntry color="0xD8D8D8" /> |
</s:LinearGradientStroke> |
</s:stroke> |
</s:Rect> |
<!-- layer 2: control bar fill --> |
<s:Rect left="1" right="1" top="2" bottom="1"> |
<s:fill> |
<s:LinearGradient rotation="90"> |
<s:GradientEntry color="0xDADADA" /> |
<s:GradientEntry color="0xC5C5C5" /> |
</s:LinearGradient> |
</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:SparkSkin> |
Rendu final (nécessite Flash Player 10) :
This movie requires Flash Player 10