Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle Spark PopUpAnchor

Compatible Flex 4. 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 12 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 PopUpAnchor fait partie du jeu de composants Spark. Il n'a pas d'équivalent MX.

NDT: Un pop-up (de l'anglais pop-up window ou pop-up tout court) est une fenêtre secondaire qui s'affiche au dessus de l'application principale. Comme il est difficile de traduire ce terme en quelques mots, nous utiliserons le terme anglophone dans cet article.

Le contrôle PopUpAnchor affiche un composant en pop-up dans une mise en page. Il n'a pas d'apparence visuelle, mais il a des dimensions. Le contrôle PopUpAnchor est utilisé dans le contrôle DropDownList. Le contrôle PopUpAnchor affiche le composant en pop-up en l'ajoutant au PopUpManager, et redimensionne et positionne le composant en pop-up de manière relative à lui même. Comme le composant pop-up est géré par le PopUpManager, il apparaît devant tous les autres contrôles.

Avec le contrôle PopUpAnchor, vous pouvez créer différents types de fonctionnalités pop-up, telles que les suivantes:

  • Au clic sur un bouton ou sur un lien hypertexte, un formulaire s'affiche en pop-up, permettant d'envoyer des commentaires.
  • Au clic sur un bouton, un champ de recherche s'affiche en pop-up.

Ces 2 premiers scénarios contiennent chacun 3 contrôles: le contrôle Bouton ou lien hypertexte, le contrôle PopUpAnchor, et le composant qui s'affiche en pop-up (le formulaire ou le champ de recherche).

  • Au passage de la souris sur le haut d'une application, le menu fait apparaître un calendrier de rendez-vous. Puis un double-clic sur un rendez-vous ouvre en pop-up une boîte de dialogue de modification de ce rendez-vous.

Création d'un composant en pop-up avec le contrôle PopUpAnchor

Vous définissez un contrôle PopUpAnchor en MXML en utilisant la balise <s:PopUpAnchor>, 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.

Utilisez le contrôle PopUpAnchor avec 2 autres composants: le contrôle qui ouvre le pop-up, et le composant qui s'ouvre en pop-up (référencé comme composant en pop-up). La valeur de la propriété popUp est le composant en pop-up.

L'exemple suivant crée une application avec un bouton dont le texte est Show slider. Le clic sur le bouton ouvre un composant VSlider en pop-up. Quand vous sélectionnez une valeur en utilisant le slider, l'événement thumbRelease est déclenché et le pop-up se ferme.

<?xml version="1.0" encoding="utf-8"?>
<!-- controls\popup\PopUpSimple.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:HGroup>
        <s:Button label="Show slider" 
            click="slide.displayPopUp = true"/>
        <s:PopUpAnchor id="slide">
            <s:VSlider  
                maxHeight="40" 
                thumbRelease="slide.displayPopUp = false"/>
        </s:PopUpAnchor>
    </s:HGroup>
 
</s: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.

Dimensionnement et positionnement d'un composant en pop-up

Le contrôle PopUpAnchor redimensionne et positionne le composant en pop-up de manière relative à lui même. Si le composant en pop-up est trop large pour tenir dans son emplacement, le contrôle PopUpAnchor s'adapte.

La largeur du composant en pop-up est déterminé dans cet ordre:

  • Si la propriété popUpWidthMatchesAnchorWidth a pour valeur true, la largeur actuelle du contrôle PopUpAnchor est utilisée.
  • La valeur de la propriété explicitWidth du composant en pop-up est utilisée, si elle est spécifiée.
  • La valeur de la propriété measuredWidth du composant en pop-up est utilisée.

La hauteur du composant en pop-up est déterminé dans cet ordre:

  • Si la propriété popUpHeightMatchesAnchorHeight a pour valeur true, la hauteur actuelle du contrôle PopUpAnchor est utilisée.
  • La valeur de la propriété explicitHeight du composant en pop-up est utilisée, si elle est spécifiée.
  • La valeur de la propriété measuredHeight du composant en pop-up est utilisée.

La propriété popUpPosition contrôle la position du composant en pop-up. Les valeurs possibles sont des propriétés statiques de la classe PopUpPosition et sont les suivantes:

Valeur Description
above Le bas du composant en pop-up est adjacent au haut du contrôle PopUpAnchor. Le bord gauche du composant en pop-up est aligné verticalement avec le bord gauche du contrôle PopUpAnchor
below Le haut du composant en pop-up est adjacent au bas du contrôle PopUpAnchor. Le bord gauche du composant en pop-up est aligné verticalement avec le bord gauche du contrôle PopUpAnchor.
left Le bord droit du composant en pop-up est adjacent au bord gauche du contrôle PopUpAnchor. Le bord haut du composant en pop-up est aligné horizontalement avec le bord haut du contrôle PopUpAnchor.
right Le bord gauche du composant en pop-up est adjacent au bord droit du contrôle PopUpAnchor. Le bord haut du composant en pop-up est aligné horizontalement avec le bord haut du contrôle PopUpAnchor.
center Le centre du composant en pop-up est positionné sur le centre du contrôle PopUpAnchor.
topLeft Le composant en pop-up est positionné au même positions haut gauche par défaut que le contrôle PopUpAnchor.

Transformation et animation d'un composant en pop-up

Les transformations incluent la mise à l'échelle, la rotation, et l'inclinaison. Les transformations qui sont appliquées au contrôle PopUpAnchor ou à ses ancêtres avant que le composant en pop-up ne s'affiche, sont toujours appliquées au composant en pop-up lorsqu'il s'affiche. Toutefois, si ces modifications sont appliquées alors que le pop-up est ouvert, les changements ne sont appliqués au pop-up que la prochaine fois où il s'ouvre. Pour appliquer des transformations au pop-up lorsqu'il est ouvert, appelez la méthode updatePopUpTransform().

Vous pouvez appliquez des effets au pop-up pour animer son ouverture ou sa fermeture. Comme les transformations appliquées au contrôle PopUpAnchor sont appliquées au pop-up, vous pouvez appliquer les effets soit au contrôle PopUpAnchor soit au composant en pop-up.

Considérez ce qui suit avant de décider d'appliquer un effet sur le contrôle PopUpAnchor ou sur son composant en pop-up:

  • Appliquez les effets Move, Fade, Resize, et Zoom au contrôle PopUpAnchor. L'application de ces effets au contrôle PopUpAnchor permet de respecter certaines contraintes de mise en page du contrôle.
  • Appliquez les effets Mask et Shader directement sur le composant en pop-up. Ces effets requièrent l'application d'un masque à la cible ou la capture d'une image de la cible.
  • Si l'effet est appliqué au contrôle PopUpAnchor ou à ses ancêtres tandis que le pop-up est ouvert, appelez la méthode updatePopUpTransform(). L'appel à cette méthode applique de nouveau l'effet au pop-up tandis que l'effet est joué.

L'exemple suivant utilise des états pour contrôler l'affichage du composant en pop-up. Il utilise des transitions pour jouer des animations entre les états. Quand vous cliquez sur le bouton Email, un formulaire d'e-mail apparaît progressivement dans l'application. Cliquez sur Send ou Cancel , et le formulaire d'e-mail disparaît. En incluant le contrôle PopUpAnchor dans l'état emailOpen (includeIn=“emailOpen”), le formulaire est instancié uniquement quand il est affiché.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" >
 
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
 
    <fx:Style>
    .popUpBox
    {
        backgroundColor : #e9e9e9; 
        borderStyle : "solid";
        paddingTop : 2;
        paddingBottom : 2; 
        paddingLeft : 2; 
        paddingRight : 2;
    }
    </fx:Style>
 
    <s:states>
        <s:State name="normal" />
        <s:State name="emailOpen" />
    </s:states>
 
    <s:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Sequence>
                <s:Fade target="{emailPopUp.popUp}"
                    duration="250"/>
            </mx:Sequence>
        </mx:Transition> 
    </s:transitions>
 
    <s:Group x="60">
        <s:Button label="Send email" 
            click="currentState = 'emailOpen'"/>
        <s:PopUpAnchor id="emailPopUp" 
            left="0" bottom="0" 
            popUpPosition="below" 
            styleName="popUpBox" 
            includeIn="emailOpen" 
            displayPopUp.normal="false" 
            displayPopUp.emailOpen="true">
            <mx:Form>
                <mx:FormItem label="From :">
                    <s:TextInput/>
                </mx:FormItem>
                <mx:FormItem label="To :">
                    <s:TextInput/>
                </mx:FormItem>
                <mx:FormItem label="Subject :">
                    <s:TextInput/>
                </mx:FormItem>
                <mx:FormItem label="Message :">
                    <s:TextArea width="100%" 
                        height="100" 
                        maxChars="120"/>
                </mx:FormItem>
                <mx:FormItem direction="horizontal">
                    <s:Button label="Send" 
                        click="currentState = 'normal'"/>  
                    <s:Button label="Cancel" 
                        click="currentState = 'normal'" />
                </mx:FormItem>
            </mx:Form>
        </s:PopUpAnchor>
    </s:Group>
</s: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.

Vous pouvez aussi contrôler le moment où le contrôle PopUpAnchor est détruit. Regardez Create and apply view states, particulièrement les sections Controlling when to create added children et Controlling caching of objects created in a view state. Ces sections discutent des propriétés itemCreationPolicy et itemDestructionPolicy.

L'exemple suivant affiche un bouton Search avec un pop-up animé. Cliquez sur le bouton, et un champ de texte de saisie et un bouton Find apparaissent en pop-up à droite. Cliquez sur le bouton Find, et le champ de texte de saisie et le bouton Find sont masqués. L'animation est joué directement sur les composants en pop-up.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Style>
        .popUpBox
        {
            backgroundColor : #e9e9e9; 
            borderStyle : "solid";
            paddingTop : 2;
            paddingBottom : 2; 
            paddingLeft : 2; 
            paddingRight : 2;
        }
    </fx:Style>
 
    <fx:Declarations>
        <mx:Sequence id="hideSearch">
            <s:Scale target="{searchPopUp.popUp}" 
                     scaleXFrom="1" 
                     scaleXTo=".1" 
                     duration="250"/>
            <mx:SetPropertyAction target="{searchPopUp}" 
                                  name="displayPopUp" 
                                  value="false"/>
        </mx:Sequence>
 
        <mx:Sequence id="showSearch">
            <mx:SetPropertyAction target="{searchPopUp}" 
                                  name="displayPopUp" 
                                  value="true"/>
            <s:Scale target="{searchPopUp.popUp}" 
                     scaleXFrom=".1" 
                     scaleXTo="1" 
                     duration="200"/>
        </mx:Sequence>
    </fx:Declarations>
 
    <s:HGroup>
        <s:Button label="Search database" click="showSearch.play() "/>
        <s:PopUpAnchor id="searchPopUp" 
                       left="0" right="0" 
                       popUpPosition="right" 
                       styleName="popUpBox">
            <s:HGroup>
                <s:TextInput id="searchField"
                             width="80" />
                <s:Button label="Find now" 
                          click="hideSearch.play();"/>
            </s:HGroup>
        </s:PopUpAnchor>
    </s:HGroup>
</s: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.