Discussion :

[gere34]

Bonjour, j'ai essayé à peu près tous les exemples que j'ai trouvé sur la toile et rien à faire, ça ne veut pas fonctionner.

Mon dernier essai est le suivant :
inspiré des source 1 et source 2
... mais ce n'est pas appliqué à un scroller. Je cite adobe (source) :

Skinning a Scroller control

The Scroller skin provides scroll bars and manages layout according to the verticalScrollPolicy and horizontalScrollPolicy properties in the Scroller class.

The Scroller skin layout cannot be changed because it must handle the vertical and horizontal scroll policies. Scroller skins can only provide replacement scroll bars.

GardenNav.mxml

Code :

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

1
2
3
4
5
6
 
<s:Scroller width="100%" height="100%" styleName="gardenNavScroller">
	<s:Group>
		<gardenplan:GardenPlan id="plan" width="2000" height="2000"/>
	</s:Group>
</s:Scroller>

main.mxml

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
 
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace local "*";
@namespace gardeneditor "gardeneditor.*";
 
.gardenNavScroller {
	verticalScrollBarStyleName: navScrollBarStyles;
	horizontalScrollBarStyleName: navScrollBarStyles;
}
.navScrollBarStyles {
	upArrowSkin: ClassReference(null);
	downArrowSkin: ClassReference(null);
	trackSkin: ClassReference(null);
}

[Madfrix]

Bonjour,

tu utilises un Scroller avec un namespace "s" pour Spark. Tu dois donc le skinner en créant un fichier de skin (Flex4) et non pas en changeant "à l'arrache" les parties de skins comme tu tentes de le faire.

Regarde ici, un composant de type Scroller comprend 4 parties d'habillage (toutes facultatives) à toi de les skinner comme tu veux.

De la lecture ici

(avec les articles dans la rubrique "articles similaires")

[gere34]

je sais pas si je suis vraiment nul, mais j'y arrive toujours pas. J'essai d'échanger les scrollbar de base par des scrollbar perso (classe surchargé) mais y a rien a faire. J'ai cherché des exemples mais j'ai rien trouvé en ce qui concerne les scroller. Je tombe, soit sur des exemples de modification de scrollbar, soit sur des examples d'utilisation de scroller, mais jamais sur un exemple de modification de scroller. Est ce que je doit plutôt utiliser un Group et son viewport ? (j'ai vu ça sur une doc adobe mais je trouve plus la page)

Est ce que quelqu'un pourrait me (nous) donner un exemple simple en MXML où il assigne à un <s:Scroller />, un "CustomHScrollBar" (hérité de HScrollBar) et un "CustomVScrollBarSkin" (skin perso importé ou crée à la main) ? Juste le code pour le scroller, pas celui des CustomHScrollBar et CustomVScrollBarSkin.

ps: celui qui me dit "google est ton ami" risque de me donner des envies de meurtre, j'ai passé des heures à chercher. Y a un moment où faut se dévouer pour le poser l'exemple, ça servira pas qu'à moi, j'en suis sûr.

[Jim_Nastiq]

Salut,

Je ne sais pas trop ce qui te bloques ou ce que tu veux exactement mais le net regorge d'exemple pour customiser ses scrollbars (le scroller étant un container je ne vois pas comment tu pourrais le customiser )

Alors pour faire simple dans ton css de ton appli tu met ca :

Code :

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

1
2
3
4
 
s|VScrollBar {
	skinClass: ClassReference("org.pkg.skins.VScrollerSkin");
}

ton skin mxml pour les vertical scrollbar (juste des références à 4 éléments skinnés):

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
 
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="13" minHeight="35" 
    alpha.disabled="0.5" alpha.inactive="0.5" >
 
    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.VScrollBar")]
    ]]>
    </fx:Metadata> 
 
    <fx:Script fb:purpose="styling">
        /* Define the skin elements that should not be colorized. 
           For scroll bar, the skin itself is colorized but the individual parts are not. */
        static private const exclusions:Array = ["track", "thumb", "decrementButton", "incrementButton"];
 
        /**
         * @private
         */
        override public function get colorizeExclusions():Array {return exclusions;}
 
        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
    </fx:Script>
 
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="inactive" />
    </s:states>
 
    <!---  The default skin class is VScrollBarTrackSkin.  
            @copy spark.components.supportClasses.TrackBase#track 
            @see spark.skins.spark.VScrollBarTrackSkin -->
    <s:Button id="track" top="13" bottom="13" height="54" width="13"
              focusEnabled="false" tabEnabled="false"
              skinClass="org.pkg.skins.ScrollerTrackSkin" />
 
    <!--- The default skin class is VScrollBarThumbSkin.
            @copy spark.components.supportClasses.TrackBase#thumb 
            @see spark.skins.spark.VScrollBarThumbSkin -->
    <s:Button id="thumb" width="13"
              focusEnabled="false" visible.inactive="false" tabEnabled="false"
              skinClass="org.pkg.skins.ScrollerThumbSkin" />
 
    <!--- The default skin class is ScrollBarUpButtonSkin. 
            @copy spark.components.supportClasses.ScrollBarBase#decrementButton 
            @see spark.skins.spark.ScrollBarUpButtonSkin -->
    <s:Button id="decrementButton" top="0" enabled.inactive="false"
              focusEnabled="false" tabEnabled="false"
              skinClass="org.pkg.skins.ScrollerLeftButtonSkin" />
 
    <!---  The default skin class is ScrollBarDownButtonSkin. 
            @copy spark.components.supportClasses.ScrollBarBase#incrementButton
            @see spark.skins.spark.ScrollBarDownButtonSkin -->
    <s:Button id="incrementButton" bottom="0" enabled.inactive="false"
              focusEnabled="false" tabEnabled="false"
              skinClass="org.pkg.skins.ScrollerRightButtonSkin" />
 
</s:SparkSkin>

je te laisse le soin de faire les skins des 4 éléments. et voila ttes les scrollbars vertical de ton appli sont skinnées ...

[gere34]

ok, merci pour ta rapidité
Mais j'aimerais aussi savoir comment échanger les composants, pas seulement les skins. Je sais pas si c'est possible... ce serait pour personnaliser le comportement en plus de l'habillage.

un exemple simple en MXML où il assigne à un <s:Scroller />, un "CustomHScrollBar" (hérité de HScrollBar) et un "CustomVScrollBarSkin" (skin perso importé ou crée à la main) ?

ps : c'est pour ça que j'ai mis l'intitulé "Modifier les parts d'un < s:Scroller /> (ScrollerSkin/HScrollBar/VScrollBar/HScrollBarSkin/VScrollBarSkin)". Je sais pas si ça joue pour le référencement et la recherche ?

[Jim_Nastiq]

Pour modifier le comportement il faut que tu hérites du composant, que tu fasses tes modifs, puis que tu créé un skin pour ce composant.

[gere34]

mmmh... j'ai essayé pas mal de choses, mais ça, jcrois pas