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 :
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 :
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 :
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 :
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 !
27/05/2011, 12h12
Créer une propriété de style
00
