Flex - Effet WipeRight
introduction
La classe WipeRight définit un effet d'effacement vers la droite. L'état avant ou après du composant doit être invisible.
Déclaration de classe
Voici la déclaration pour mx.effects.WipeRight classe -
public class WipeRight
extends MaskEffects
Méthodes publiques
Sr.Non | Méthode et description |
---|---|
1 | WipeRight(target:Object = null) Constructeur. |
Méthodes héritées
Cette classe hérite des méthodes des classes suivantes -
- mx.effects.MaskEffect
- mx.effects.Effect
- flash.events.EventDispatcher
- Object
Exemple d'effet Flex WipeRight
Suivons les étapes suivantes pour vérifier l'utilisation de WipeRight Effect dans une application Flex en créant une application de test -
Étape | La description |
---|---|
1 | Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application . |
2 | Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé. |
3 | Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences. |
Voici le contenu du fichier mxml modifié src/com.tutorialspoint/HelloWorld.mxml.
<?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
width = "100%" height = "100%" minWidth = "500" minHeight = "500">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
protected function btnWipeRight_clickHandler
(event:MouseEvent):void {
imageFlex.visible = true;
}
]]>
</fx:Script>
<fx:Declarations>
<mx:WipeRight id = "wipeRight" duration = "2000" />
</fx:Declarations>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Effects Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "wipeRightPanel" title = "Using WipeRight Effect"
width = "500" height = "300" includeInLayout = "true" visible = "true">
<s:layout>
<s:VerticalLayout gap = "10" verticalAlign = "middle"
horizontalAlign = "center" />
</s:layout>
<mx:Image id = "imageFlex" visible = "{false}"
source = "http://www.tutorialspoint.com/images/flex-mini.png"
showEffect = "{wipeRight}" />
<s:Button id = "btnWipeRight" label = "Wipe Right"
click = "btnWipeRight_clickHandler(event)" />
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>
Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ ]