Forums Développement Multimédia

Aller au contenu

s:VGroup et alignement horizontal

CODE Actionscript

8 réponses à ce sujet

#1 Super Puissant

    Ceinture Jaune

  • Members
  • PipPip
  • 19 messages

Posté 26 October 2011 - 11:21 AM

Bonjour,

j'ai un s:vgroup dans lequel je place un empilement de choses diverses et variées.

le vgroup est aligné à gauche.

je souhaiterais une légère marge pour décaler certains éléments, à la manière de ceci :

-objetA
__-objetB
-objetC
______-objetD
ect..(considérer les '_' comme des espaces)

comment m'y prendre?

#2 Badwolf

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 667 messages

Posté 26 October 2011 - 11:25 AM

au sein d'un VGROUP, l'intervalle(gap) des éléments est homogène, donc tu ne pourra pas le faire via les propriétés du VGROUP.

par contre, je pense qu'il est possible de créer des décalages spécifiques a chaque object via css par exemple.

mais sans connaitre le type des objets, je peux pas d'en dire plus.
Haoooooooooooooooooooooooooooooooooooooooooooooou !!!

#3 Super Puissant

    Ceinture Jaune

  • Members
  • PipPip
  • 19 messages

Posté 26 October 2011 - 14:52 PM

dans un VGroup, le gap correspond à l'espacement vertical entre chaque élément.
moi je cherche à obtenir un émargement horizontal avant chaque élément.

j'ai VGroup avec :
-gap=0
-horizontalAlign=left

et je souhaiteras pour mes éléments dans le vgroup :
-l'équivalent de left=10 (par exemple)
ou
-l'équivalent de horizontalCenter=-x

provisoirement j'ai réussi à obtenir l'effet d'émargement en faisant ceci :
<VGroup>
<!-- pour chaque élément -->
<Group width="100%">
<element left=10/>
<Group>
<!-- ainsi de suite... -->
</VGroup>
mais c'est très laid.

#4 deuxsucres

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 115 messages

Posté 27 October 2011 - 18:50 PM

Bonjour,

Pouvez-vous utiliser un composant List à la place du VGroup et réaliser un skin spécifique d'itemRenderer capable de créer un décalage en fonction de la donnée à rendre ?

#5 Super Puissant

    Ceinture Jaune

  • Members
  • PipPip
  • 19 messages

Posté 28 October 2011 - 11:01 AM

C'est en effet une bonne idée.

Cependant ma politique est d'éviter au maximum List. (je n'utilise les itemRenderer qu'avec des collections)

La piste que j'étudie actuellement est de décliner les skins des éléments que j'introduis dans le VGroup.
en effet je n'y met que des s:Button, s:CheckBox, et s:RadioButton et les skins que j'utilise sont très légers.

donc sans doute je vais prévoir plusieurs versions de chaque skin : le button avec un décalage de 10, puis le même button avec un décalage supplémentaire.

#6 deuxsucres

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 115 messages

Posté 28 October 2011 - 20:32 PM

Pourquoi voulez-vous absolument vous passez du composant List ?

Vous pouvez faire un skin par composant qui prenne en charge un style supplémentaire, genre "gap". Vous pourrez gérez le décalage, soit en définissant cette propriété de style, soit en passant par les classes de style. Vous éviteriez ainsi de faire plusieurs skins par composant.

Pouvez-vous nous donner plus d'infos sur le projet, une visions plus large ? Nous aurions peut-être de meilleures idées.

#7 Super Puissant

    Ceinture Jaune

  • Members
  • PipPip
  • 19 messages

Posté 29 October 2011 - 11:27 AM

ce que je veux faire c'est une petite interface verticale, elle contient plusieurs Button, RadioButtons et CheckBoxes. (plus des Labels et des éléments graphiques)

pas besoin d'item dans ce cas.
l'émargement horizontal c'est esthétique, entre autres ; pour bien séparer un RadioButton particulier des autres RadioButton du RadioButtonGroup. mais aussi pour mettre en forme ma petite interface.

pour éviter de faire plusieurs skins avec plusieurs émargements différents j'ai pensé faire des skin avec une émargement externalisé :

-coté skin :

[BINDABLE]
public var monEmargementGauche:int;

//

puis d'une manière ou d'une autre ;
this.left (ou paddingLeft, on verra) = monEmargementGauche;


-coté interface :

<s:Button (...) monEmargementGauche="25"/>
<s:Button (...) monEmargementGauche="32"/>
ainsi de suite...


autre question;

si j'écris en as pour instancier dynamiquement:
var bt:Button=new Button();
puis-je passer la valeur de ma variable monEmargementGauche dans le constructeur comme lorsque j'instancie une classe perso ;

var bt:ButtonPerso=new ButtonPerso(25);
avec comme constructeur
public function ButtonPerso (emGauche:int){
monEmargementGauche=emGauche;
}


ou bien dois-je obligatoirement écrire en deux temps:
var bt:Button=new Button();
bt.monEmargementGauche=25;

?

Modifié par Super Puissant, 29 October 2011 - 11:29 AM.


#8 deuxsucres

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 115 messages

Posté 29 October 2011 - 12:59 PM

Vous pouvez utiliser l'une ou l'autre des possibilités, mais je déconseille de passer la valeur par le constructeur (uniquement pour des questions de cohérence de code). Peu importe la possibilité retenue, cette solution va vous obliger, pour chaque composant, à créer une classe de composant supplémentaire et une classe de skin supplémentaire. Beaucoup de travail pour une simple marge.

Avec les styles, vous pouvez éviter de surcharger les classes Button, CheckBox... :

var myButton:spark.components.Button = new spark.components.Button() ;
myButton.setStyle("marginLeft", 12) ;
addElement(myButton) ;
 

Et dans le skin :

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  super.updateDisplayList(unscaledWidth, unscaledHeight) ;
 
  var marginLeft:Number = getStyle("marginLeft") ;
  //Placer mes éléments en fonction de la valeur marginLeft.
}
 


#9 Super Puissant

    Ceinture Jaune

  • Members
  • PipPip
  • 19 messages

Posté 29 October 2011 - 15:21 PM

ok merci excellent.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)