Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les contrôles HRule et VRule

Compatible Flex 3. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 06 avril 2010

Cet article est une traduction de l'aide Adobe Flex.

Adobe a donné son accord concernant la traduction de la documentation.

Introduction

Le contrôle HRule (Horizontal Rule) crée une ligne horizontale et le contrôle VRule (Vertical Rule) crée une ligne verticale. Vous utilisez fréquemment ces contrôles pour créer des lignes de séparation dans un conteneur.

L'image suivante montre les contrôles HRule et Vrule:

Création des contrôles HRule et VRule

Vous définissez un contrôle HRule en MXML en utilisant la balise <mx:HRule> et un contrôle VRule en MXML en utilisant la balise <mx:VRule>, comme le montre l'exemple suivant. Spécifiez une valeur à la propriété id si vous souhaitez utiliser votre contrôle ailleurs dans une balise MXML ou dans un bloc ActionScript.

<?xml version="1.0"?>
<!-- controls\rule\RuleSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:VBox>
        <mx:Label text="Above"/>
        <mx:HRule/>
        <mx:Label text="Below"/>
    </mx:VBox>
    <mx:HBox>
        <mx:Label text="Left"/>
        <mx:VRule/>
        <mx:Label text="Right"/>
    </mx:HBox>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Cet exemple crée le fichier swf correspondant à l'image précédente.

Vous pouvez utiliser les propriétés des contrôles HRule et VRule pour spécifier la largeur de la ligne, la couleur de trait, et la couleur de l'ombre portée, comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- controls\rule\RuleProps.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:VBox>
        <mx:Label text="Above"/>
        <mx:HRule shadowColor="0xff0000"/>
        <mx:Label text="Below"/>
    </mx:VBox>
    <mx:HBox>
        <mx:Label text="Left"/>
        <mx:VRule strokeWidth="10" strokeColor="0x00ff00"/>
        <mx:Label text="Right"/>
    </mx:HBox>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Ce code produit l'image suivante:

Dimensionnement des contrôles HRule et VRule

Pour les contrôles HRule et VRule, la propriété strokeWidth détermine la façon dont Flex dessine la ligne, comme suit:

  • Si vous définissez la propriété strokeWidth sur 1, Flex dessine une ligne de 1 pixels.
  • Si vous définissez la propriété strokeWidth sur 2, Flex dessine deux lignes adjacentes de 1 pixels, horizontales pour un contrôle HRule ou verticales pour un contrôle VRule. C'est la valeur par défaut.
  • Si vous définissez la propriété strokeWidth sur une valeur supérieure à 2, Flex dessine la ligne sous la forme d'un rectangle comprenant 4 bordures d'une largeur de 1 pixels et sans remplissage.

L'exemple suivant montre les 3 options:

A. strokeWidth = 1 B. defaut strokeWidth = 2 C. strokeWidth = 10

Si vous spécifiez la propriété height d'un contrôle HRule sur une valeur supérieure à la propriété strokeWidth, Flex dessine la ligne dans un rectangle de la hauteur spécifiée et centre verticalement la ligne dans le rectangle. La hauteur de la ligne est la hauteur spécifiée par la propriété strokeWidth.

Si vous spécifiez la propriété width d'un contrôle VRule sur une valeur supérieure à la propriété strokeWidth, Flex dessine la ligne dans un rectangle de la largeur spécifiée et centre horizontalement la ligne dans le rectangle. La largeur de la ligne est la largeur spécifiée par la propriété strokeWidth.

Si vous spécifiez la propriété height d'un contrôle HRule ou la propriété width d'un contrôle VRule sur une valeur inférieure à la propriété strokeWidth, la ligne est dessiné comme si elle avait la propriété strokeWidth égale aux propriétés height ou width.

Note: Si les propriétés height et width sont définies avec des valeurs en pourcentage, les valeurs de pixels réels sont calculées avant que les propriétés height et width ne soient comparées à la propriété strokeWidth.

Les propriétés strokeColor et shadowColor déterminent les couleurs des contrôles HRule et VRule. La propriété strokeColor spécifie la couleur de la ligne comme suit:

  • Si vous définissez la propriété strokeWidth sur 1, spécifie la couleur de la ligne entière.
  • Si vous définissez la propriété strokeWidth sur 2, spécifie la couleur de la bordure haute pour le contrôle Hrule, ou la bordure gauche pour le contrôle VRule.
  • Si vous définissez la propriété strokeWidth sur une valeur supérieure à 2, spécifie la couleur des bordures haute et gauche.

La propriété shadowColor spécifie l'ombre portée de la ligne comme suit:

  • Si vous définissez la propriété strokeWidth sur 1, ne fait rien.
  • Si vous définissez la propriété strokeWidth sur 2, spécifie la couleur de la bordure basse pour le contrôle Hrule, ou la bordure droite pour le contrôle VRule.
  • Si vous définissez la propriété strokeWidth sur une valeur supérieure à 2, spécifie la couleur des bordures basse et droite.

Définition des propriétés de styles

Les propriétés strokeWidth, strokeColor, et shadowColor sont des propriétés de style. Cependant, vous pouvez les définir en MXML en tant qu'attributs de la balise, les définir en utilisant la balise <mx:Style> en MXML, ou les définir en utilisant la méthode setStyle() en ActionScript.

L'exemple suivant utilise la balise <mx:Style> pour définir la valeur par défaut de la propriété stokeColor de tous les contrôles HRule sur une valeur #00FF00 (vert citron), et la valeur par défaut de la propriété shadowColor sur une valeur #0000FF (bleu). Cet exemple définit aussi un sélecteur de classe, appelé thickRule, avec une propriété strokeWidth de 5 que vous pouvez utiliser avec n'importe quelle instance d'un contrôle HRule ou d'un contrôle VRule.

<?xml version="1.0"?>
<!-- controls\rule\RuleStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Style>
        .thickRule {strokeWidth:5}
        HRule {strokeColor:#00FF00; shadowColor:#0000FF}
    </mx:Style>
 
    <mx:HRule styleName="thickRule"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Cet exemple produit l'image suivante: