Créer une propriété de style

**gobgob** · 27/05/2011, 12h12

Bonjour,

J'essaie de créer un nouveau conteneur et son skin par défaut en me basant sur un SkinnableContainer et sur son skin par défaut. J'aimerais qu'il ressemble à un BorderContainer, donc avec des bords paramétrables à l'aide de propriétés de style. J'aimerais également placer un Label sur le bord supérieur à gauche.

J'ai conçu une petite bibliothèque à coté de mon projet Air pour définir ce nouveau conteneur et son skin.

Actuellement j'ai donc ça:

LabelledGroupSkin

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
<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" alpha.disabled="0.5">
    <fx:Metadata>[HostComponent("com.svarlet.newSkins.labelledGroup.LabelledGroup")]</fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[         
               public static const DEFAULT_BG_COLOR:uint = 0xFFFFFF;
 
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                    if (isNaN(hostComponent.getStyle("borderWeight1"))) {
                         stroke.weight = 1;
                    } else {
                         stroke.weight = hostComponent.getStyle("borderWeight1");
                         stroke.color = hostComponent.getStyle("borderColor1");
                    }
 
                if (isNaN(getStyle("backgroundColor")))
                {
                         bgFill.color = DEFAULT_BG_COLOR;
                    bgFill.alpha = 0;
                }
                else
                {
                    bgFill.color = getStyle("backgroundColor");
                    bgFill.alpha = getStyle("backgroundAlpha");
                }
                    labelDisplay.setStyle("backgroundColor", bgFill.color);
                    contentGroupLayout.paddingTop = uint(labelDisplay.getStyle("fontSize"))/2;
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>        
    </fx:Script>
 
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <!--- Defines the appearance of the SkinnableContainer class's background. -->
    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="bgFill" color="{DEFAULT_BG_COLOR}"/>
        </s:fill>
          <s:stroke>
               <s:SolidColorStroke id="stroke" joints="round" caps="round" />
          </s:stroke>
    </s:Rect>
 
    <!--
        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
    -->
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup"
                left="{stroke.weight}" right="{stroke.weight}"
                top="{stroke.weight}" bottom="{stroke.weight}"
                minWidth="0" minHeight="0">
        <s:layout>
            <s:VerticalLayout id="contentGroupLayout"/>
        </s:layout>
    </s:Group>
 
 
     <s:Label id="labelDisplay"
                left="20" top="{-uint(labelDisplay.getStyle('fontSize'))/2}"
                paddingLeft="3" paddingRight="3" />
</s:Skin>

LabelledGroup:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           skinClass="com.svarlet.newSkins.labelledGroup.LabelledGroupSkin">
     <fx:Script>
          <![CDATA[
               import spark.components.Label;
 
               [SkinPart(required="true")]
               public var labelDisplay:Label;
 
               private var _label:String;
 
               override protected function partAdded(partName:String, instance:Object):void
               {
                    if (instance == labelDisplay) {
                         labelDisplay.text = label;
                    }
               }
 
               [Bindable("labelChanged")]
               public function get label():String
               {
                    return _label;
               }
 
               public function set label(value:String):void
               {
                    _label = value;
                    if (labelDisplay)
                         labelDisplay.text = label;
                    dispatchEvent(new Event("labelChanged"));
               }
          ]]>
     </fx:Script>
 
     <fx:Metadata>
          [Style(name="borderWeight1", type="uint", format="Length")]
          [Style(name="borderColor1", type="uint", format="Color")]
     </fx:Metadata>
</s:SkinnableContainer>

Un composant de mon appli Air basé sur ce nouveau composant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<labelledGroup:LabelledGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                    xmlns:s="library://ns.adobe.com/flex/spark" 
                                    xmlns:mx="library://ns.adobe.com/flex/mx"
                                    xmlns:labelledGroup="com.svarlet.newSkins.labelledGroup.*"
                                    label="toto component !"
                                    width="400" height="200">
     <labelledGroup:layout>
          <s:VerticalLayout />
     </labelledGroup:layout>
 
     <s:Button label="test" />
     <s:List width="100%" height="100%" />
     <s:Button label="test2" />
</labelledGroup:LabelledGroup>

Lorsque je lance l'appli, mon composant apparait avec une bordure noire de 1px. Jusque là pas de problème.

Lorsque je spécifie une valeur pour les styles borderColor1 et borderWeight1, j'ai à l'execution l'erreur suivante dès le demarrage:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
Error: Required skin part labelDisplay cannot be found.
     at spark.components.supportClasses::SkinnableComponent/findSkinParts()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:726]
     at spark.components.supportClasses::SkinnableComponent/attachSkin()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:701]
     at spark.components.supportClasses::SkinnableComponent/validateSkinChange()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:443]
     at spark.components.supportClasses::SkinnableComponent/createChildren()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:406]
     at spark.components::SkinnableContainer/createChildren()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:879]
     at mx.core::UIComponent/initialize()[E:\dev\hero_private\frameworks\projects\framework\src\mx\core\UIComponent.as:7624]
     at com.svarlet.newSkins.labelledGroup::LabelledGroup/initialize()
     at com.svarlet.remindMe.presentation.common::Toto/initialize()
     at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\hero_private\frameworks\projects\framework\src\mx\core\UIComponent.as:7485]
     at mx.core::UIComponent/addChildAt()[E:\dev\hero_private\frameworks\projects\framework\src\mx\core\UIComponent.as:7189]
     at spark.components::Group/addDisplayObjectToDisplayList()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\Group.as:2037]
     at spark.components::Group/http://www.adobe.com/2006/flex/mx/internal::elementAdded()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\Group.as:1628]
     at spark.components::Group/setMXMLContent()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\Group.as:633]
     at spark.components::Group/createChildren()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\Group.as:855]
     at mx.core::UIComponent/initialize()[E:\dev\hero_private\frameworks\projects\framework\src\mx\core\UIComponent.as:7624]
     at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\hero_private\frameworks\projects\framework\src\mx\core\UIComponent.as:7485]
     at mx.core::UIComponent/addChildAt()[E:\dev\hero_private\frameworks\projects\framework\src\mx\core\UIComponent.as:7189]
     at spark.components::Group/addDisplayObjectToDisplayList()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\Group.as:2037]
     at spark.components::Group/http://www.adobe.com/2006/flex/mx/internal::elementAdded()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\Group.as:1628]
     at spark.components::Group/setMXMLContent()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\Group.as:633]
     at spark.components::Group/set mxmlContent()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\Group.as:573]
     at spark.components::SkinnableContainer/set mxmlContent()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:657]
     at spark.components::SkinnableContainer/createDeferredContent()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:1050]
     at spark.components::SkinnableContainer/createContentIfNeeded()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:1078]
     at spark.components::SkinnableContainer/createChildren()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:885]
     at spark.components::Application/createChildren()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\Application.as:1274]
     at mx.core::UIComponent/initialize()[E:\dev\hero_private\frameworks\projects\framework\src\mx\core\UIComponent.as:7624]
     at spark.components::Application/initialize()[E:\dev\hero_private\frameworks\projects\spark\src\spark\components\Application.as:1259]
     at spark.components::WindowedApplication/initialize()[E:\dev\hero_private\frameworks\projects\airspark\src\spark\components\WindowedApplication.as:1834]
     at RemindMe/initialize()
     at mx.managers.systemClasses::ChildManager/childAdded()[E:\dev\hero_private\frameworks\projects\framework\src\mx\managers\systemClasses\ChildManager.as:189]
     at mx.managers.systemClasses::ChildManager/initializeTopLevelWindow()[E:\dev\hero_private\frameworks\projects\framework\src\mx\managers\systemClasses\ChildManager.as:359]
     at mx.managers::SystemManager/initializeTopLevelWindow()[E:\dev\hero_private\frameworks\projects\framework\src\mx\managers\SystemManager.as:3063]
     at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::kickOff()[E:\dev\hero_private\frameworks\projects\framework\src\mx\managers\SystemManager.as:2849]
     at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::preloader_completeHandler()[E:\dev\hero_private\frameworks\projects\framework\src\mx\managers\SystemManager.as:2729]
     at flash.events::EventDispatcher/dispatchEventFunction()
     at flash.events::EventDispatcher/dispatchEvent()
     at mx.preloaders::Preloader/timerHandler()[E:\dev\hero_private\frameworks\projects\framework\src\mx\preloaders\Preloader.as:542]
     at flash.utils::Timer/_timerDispatch()
     at flash.utils::Timer/tick()

D'une part, je ne comprend pas pourquoi j'ai cette erreur car j'ai pourtant bien défini un Label nommé labelDisplay dans mon skin par défaut...

D'autre part, pourquoi le simple fait de spécifier une valeur pour ces deux propriétés de style a t'elle déclenché cette erreur ?

Enfin, pourquoi lorsque je n'utilisais pas de "SkinPart", les bordures disparaissaient totalement lorsque je spécifiais des valeurs pour mes deux nouvelles propriétés de styles ? (sans les spécifier, j'avais la bordure de base noire d'1px de large...)

Merci d'avance pour votre aide !

**gobgob** · 27/05/2011, 14h19

Je viens de faire un autre test en respécifiant la valeur de la propriété skinClass de mon composant.

Pour résumer:
LabelledGroup utilise un skin LabelledGroupSkin.
TotoComponent hérite de LabelledGroup.

Du coup innocemment, je me suis dit que la valeur de la propriété de style "skinClass" de LabelledGroup serait aussi héritée par TotoComponent.

Apparemment non...

Alors, si les valeurs des propriétés de style ne sont pas héritées, comment fait on pour définir une valeur par défaut ? ou alors qu'ai je raté pour permettre un héritage des valeurs de ces propriétés de styles ?

**gobgob** · 27/05/2011, 16h19

J'ai fini par trouver comment définir un skin par défaut pour un composant personalisé. C'est la seule manière de proposer un composant à un autre développeur sans le forcer à redéfinir un skin pour pouvoir correctement l'utiliser.

Il faut créer un fichier defaults.css à la racine de la bibliothèque du composant et spécifier au compilateur de le prendre en compte.

J'ai suivi le premier de ces 3 articles pour y arriver:
http://www.unitedmindset.com/jonbcam...ing-custom-spa rk-components/
http://www.betadesigns.co.uk/Blog/20...n-for-custom-f lashbuilder-components/
http://flexdevtips.blogspot.com/2009...et-in-swc-flex -library.html

Cependant, si les 3 articles proposent le même cheminement, ils utilisent tous des arguments du compilateur différents...
Du coup si quelqu'un peut éclaircir ce point....

Créer une propriété de style

Flex

Discussions similaires

Partager

Partager