Archives pour la catégorie Effect

Flex 4 (6) – Composants graphiques qui n’apparaissent plus après une migration depuis Flex 3 [Résolu]

J’ai eu aujourd’hui, un commentaire sur la page de la ToasterLib, me demandant s’il y avait une version Flex 4 de cette librairie. Je me suis donc attelé à la tâche cette après-midi. Même si mon apprentissage de Flex 4 est loin d’être au point, la ToasterLib n’a que peu de dépendances vers Flex (Canvas, Label tout au plus), je pensais donc que cela allait être aisé.

Mais je commence à comprendre pourquoi Adobe conseille de ne pas faire de migrations « bêtes et méchantes » Flex 3 vers Flex 4. Il faut en effet être méticuleux dans le remplacement des composants, connaître leurs équivalences et les petites modifications de comportement.

Migration de la ToasterLib

Pour créer une version utilisable avec Flex 4 de la ToasterLib, j’ai pris mon projet Flex 3 sous Flex Builder 3, j’ai crée une branche SVN nommée « ToasterLibFx4″ et j’ai fait un checkout de ce projet dans Flash Builder 4. A l’import, je précise bien que je veux utiliser le SDK Flex 4.0 me voilà opérationnel.

Je commence donc à modifier les Canvas en SkinnableContainer, à mettre les paddings/horizontalCenter/verticalCenter sur les propriétés « layout » des composants (on verra cette partie plus tard dans les tutoriaux Flex 4). Après ces quelques modifications, mon projet d’exemples compile et fonctionne presque correctement en seulement 30 minutes! « Presque » correctement car déjà un premier problème se présente…

L’effet Move d’entrée est joué mais le composant n’est pas visible avant la fin de l’effet

Le premier effet qui est appliqué aux Toast est un effet d’arrivée crée par un Move appliqué au Toast. Petite surprise, celui-ci semble ne pas se produire et on voit seulement le Toast à la fin de la durée de l’effet (500ms). Avant ce délai, le composant n’est même pas visible. Les effets suivants (Blur, Fade) et même le Move qui se produit à la disparition du Toast sont par contre joués comme ils le devraient.

Première piste, vérifier que l’effet est bien joué pendant une durée correcte:

...
var moveEffect:Effect = _effectDescriptor.getMoveToStackTopEffect(toastMessage, moveFromPoint, moveToPoint);
moveEffect.addEventListener(EffectEvent.EFFECT_START, function onEffectStart(event:EffectEvent):void{trace ("start: " + getTimer());});
moveEffect.addEventListener(EffectEvent.EFFECT_END,function onEffectStart(event:EffectEvent):void{trace ("end: " + getTimer());});
moveEffect.play()
...
start: 3103
end: 3599

Pas de problème à ce niveau là, le Move est bien lancé quand on fait play(). Il faut donc chercher une autre piste.

Deuxième piste, vérifier que l’on ne lance pas l’effet trop tôt (de-sychronisation):

...
var moveEffect:Effect = _effectDescriptor.getMoveToStackTopEffect(toastMessage, moveFromPoint, moveToPoint);
setTimeout(moveEffect.play, 1000);
...

On décale ici la lecture de l’effet d’une seconde. A l’écran, on voit alors que le Toast apparait en (0,0) puis l’effet se joue, ce qui fait que le Toast « sursaute ». Seulement, s’il on réduit le délai à 100ms, le composant ne s’affiche plus, comme avant. Avec l’habitude d’utiliser Flex, on acquiert un petit doigt spécial qui nous dit que le composant a besoin d’être entièrement crée (évènement FlexEvent.CREATION_COMPLETE) pour que l’effet puisse se jouer.

Voici donc le troisième test:

// TODO
// find a way to trigger the effect onCreationComplete without using an anonymous function
// that will prevent the toastmessage from being collected
toastMessage.addEventListener(FlexEvent.CREATION_COMPLETE, function onToastMessageCreationComplete(e:Event):void{moveEffect.play()});

Ici, on s’inscrit sur l’évènement CREATION_COMPLETE du toast. Quand celui-ci se produit, on lance l’effet. J’ai choisi ici de passer par une fonction anonyme qui me permet de garder directement la variable « moveEffect » dans le « scope » de la fonction. En effet, avec une méthode de handler classique, je n’aurai plus eu accès à la variable « moveEffect ».

Attention, comme précisé dans le commentaire, ce n’est pas une bonne pratique car cela signifie que même fermés, les Toasts seront mal ou pas du tout détruits par le Garbage Collector. Dans le futur, il faudra trouver une meilleure solution ;)

Presque sans surprise, cette solution fonctionne. Je ne sais pas pourquoi mais avec Flex 3, je n’avais pas besoin de faire cette manipulation. Peut-être est-ce un bug, je ne sais pas vraiment.

En passant d’une Box à un BorderContainer, les composants enfants ne s’affichent plus

Pour être plus cohérent avec Flex 4, je décide de « migrer » la classe ToastMessageBase. La classe ToastMessageBase est comme son nom l’indique, la classe dont on va hériter pour créer un « Toast ». Cette classe, avec Flex 3, héritait de Box. Puisque j’ai besoin d’un « Canvas avec border », je choisis de remplacer Box par BorderContainer qui va me donner le même fonctionnel.

Lire la suite

Flex 4 – Différences entre Flex 3 et Flex 4 (5-Layout et Effects)

Traduction de l’article Differences between Flex 3 and Flex 4 beta de Joan Lafferty.

Modifications apportées sur les Effect en Flex 4

De nombreuses améliorations ont été faites sur l’architecture des Effect dans Flex 4. Les effets Halo (Flex 3) ne fonctionnaient que sur les composants basés sur UIComponent. Les effets Spark (Flex 4) peuvent agir sur n’importe quelle cible, même les primitives graphiques du framework. Tous ces effets se trouvent dans le package spark.effects.*.

Puisque ces effets fonctionnent sur les composants Halo, les composants Spark et les primitives graphiques, Adobe recommande l’utilisation des effets Spark pour toutes vos futures applications.

Voir l’article de Chet Hasse sur Effects in Adobe Flex 4 SDK beta

Modifications apportées sur le Layout (mise en page)

Dans les versions précédentes de Flex, la mise en page des composants et des conteneurs était définie dans chaque composant. C’est pourquoi on avait des composants tels que List, TileList et HorizontalList, qui apportaient tous les mêmes fonctionnalités sauf que leur mise en page était différente.

Dans Flex 4, la mise en page a été découplée des composants. Maintenant, les composants Spark tels que Application, List, ButtonBar et Panel peuvent définir leur mise en page de manière déclarative. Dans tous les composants, cela est géré par la classe Group et la mise en page des enfants de Group est laissé à un objet « layout » associé. Cette mise en page supporte à la fois les composants Spark et Halo en plus des primitives graphiques FXG. La mise en page peut même être changée à l’exécution.

En tant que développeur, vous pourrez facilement écrire des « layout » personnalisées et basculer de layout directement dans votre composant. Voici un exemple qui définit une liste verticale, une liste horizontale et une tiled list (en grille):

Vertical List (layout par défaut)

<s:List />

Horizontal List

<s:List>
    <s:layout>
        <s:HorizontalLayout />
    </s:layout>
</s:List>

Tiled List

<s:List>
    <s:layout>
        <s:TileLayout />
    </s:layout>
</s:List>

Lire la suite

Livre Flex – Flex Conception, développement et mise en oeuvre d’applications professionnelles

Une première sur Flex Tutorial, voici l’analyse d’un livre sur Flex, en Français. Ce livre, est intitulé « Flex – Conception, développement et mise en œuvre d’applications professionnelles » aux éditions ENI. Il a été écrit par Olivier CHOQUET, Ingénieur conseil et formateur Flex / AS3 s’il on en croit son CV.

Au sommaire de ce livre, on peut trouver:

  • Flex et la programmation objet
  • La création de composants personnalisés
  • Travailler avec les données
  • Valider et formater les données
  • La gestion du glissé-déposé
  • Les animations et effets
  • Les interfaces multi-écrans
  • Personnalisation des interfaces
  • Utiliser des ressources externes
  • La localisation des applications
  • Les composants Flex Charting
  • Échanges de données avec des serveurs
  • Utilisation de la passerelle AMFPHP
  • Utilisation de la micro-architecture Cairngorm

J’ai donc lu ce gros bébé de 450 pages (disponible aussi à la vente au format PDF) et je dois avouer que je suis assez déçu de la qualité de l’ouvrage. Tout d’abord, il est toujours assez frustrant de lire un livre avec des bouts de code et des exemples que l’on doit télécharger pour voir ce que cela donne. Surtout la partie Charting qui, puisqu’imprimée en noir et blanc et parfois assez illisible, mais passons sur ce détail.

Ce livre est dédié à un « Public : Concepteurs d’applications développeurs, chefs de projet… » et ce n’est pas vraiment l’impression qui en ressort. Comme l’indique la table des matières, on part de la base avec une introduction à l’ActionScript 3 et au MXML. Viennent ensuite des chapitres qui sont souvent un peu ‘ »light » sur les différentes familles de composants du framework Flex (Validators, Styles, States, L10n …). Cela s’éparpille un peu et au final, on voit les bases mais en aucun cas des applications professionnelles. Les seules parties qui restent intéressantes sont les 2 dernières sur AMFPHP et Cairngorm car assez fournies en exemples.

Les yeux des habitués des documentations Adobe reconnaitront aussi quelques abus au niveau des droits d’auteur. La partie Flex Charting par exemple est simplement une traduction du document Adobe Flex 3, ADVANCED DATA VISUALIZATION DEVELOPER GUIDE, pdf disponible en téléchargement sur les livedocs de Flex. J’ai moi-même réalisé une traduction minutieuse de ce document, répartis sur de nombreux tutoriaux Flex, notamment dans la catégorie Flex Charting de ce blog. Cependant, avant de faire cette traduction, je me suis renseigné auprès d’Adobe pour savoir s’il était légalement possible de faire la traduction de ce document. Il apparait que le contenu de la livedocs est sous licence Creative Commons BY-NC-SA, comme précisé dans les « Legal Notices ». Vu que je n’en ai pas une utilisation commerciale, j’ai simplement du préciser mes sources (dans le footer de ce blog). Dans ce livre, il n’est nulle part (j’ai bien cherché) précisé qu’une partie de l’ouvrage est issu des Livedocs ce qui est très border-line pour un produit commercial. D’autant plus que j’ai quelques doutes sur la partie Styles et localization mais passons :P .

Au final, c’est un livre sur Flex en Français, ce qui est assez rare pour être souligné, mais qui reste bon si vous voulez attaquer Flex depuis 0. Je conseille aux personnes ayant déjà quelques mois de pratique de Flex (ou ceux qui ont lu tous les articles de ce blog :P ) de passer leur chemin sur ce livre, qui ne vous apprendra que peu de choses au final. Les débutants apprécieront sûrement cet ouvrage qui permet de voir les bases de Flex.

Si vous voulez vraiment savoir comment créer des applications Flex professionnelles, je vous conseille Advanced Flex 3, qui va en profondeur dans la conception d’applications Pro.

Flex Chart – Séparer une part d’un PieChart au clic (perWedgeExplodeRadius)

Dans les exemples Flex précédents sur le composant PieChart, on vu comment exploser toutes les parts d’un PieChart et comment exploser seulement une part d’un PieChart. Ces deux exemples étaient très statiques car ils ne réagissaient pas aux actions de l’utilisateur, le graphique en camembert était toujours le même (avec apparition des tooltips bien sûr).

Cette fois, on va voir comment répondre au clic de l’utilisateur. Lors du clic sur une part du PieChart, on va faire un explode (séparation) de cette part pour la mettre en valeur. Pour cela, on va aussi utiliser la propriété perWedgeExplodeRadius, comme dans l’exemple où l’on séparait seulement une part mais on va l’utiliser de manière dynamique. Lors du clic de l’utilisateur, on va récupérer l’index de la part cliquée, et mettre la valeur « 0.2″ dans le tableau perWedgeExplodeRadius, à cet index. Cela aura pour effet d’écarter la part en question.

Voici un exemple de PieChart avec réaction au clic de l’utilisateur sur une wedge (explode):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import mx.charts.events.ChartItemEvent;
            private function pieChart_itemClick(evt:ChartItemEvent):void {
            	// on remet le tableau à zéro
                var arr:Array = [];
                // on assigne une valeur dans ce tableau au bon index
                arr[evt.hitData.chartItem.index] = 0.2;
                // on donne ce nouveau tableau comme perWedgeExplodeRadius
                // pour le PieChart
                pieSeries.perWedgeExplodeRadius = arr;
            }
        ]]>
    </mx:Script>
    <mx:XML id="dp">
        <products>
            <product label="Product 1" data="3" />
            <product label="Product 2" data="1" />
            <product label="Product 3" data="4" />
            <product label="Product 4" data="1" />
            <product label="Product 5" data="5" />
            <product label="Product 6" data="9" />
        </products>
    </mx:XML>
    <mx:Panel title="Cliquez sur une part pour la séparer du PieChart">
	    <mx:PieChart id="pieChart"
	            dataProvider="{dp.product}"
	            selectionMode="single"
	            showDataTips="true"
	            itemClick="pieChart_itemClick(event);"
	            height="250"
	            width="100%">
	        <mx:series>
	            <mx:PieSeries id="pieSeries" field="@data"/>
	        </mx:series>
	    </mx:PieChart>
    </mx:Panel>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l’application

This movie requires Flash Player 11

Flex Chart – Séparer toutes les parts d’un PieChart (explode avec explodeRadius)

Les PieSeries Flex permettent de créer une séparation des parts d’un Pie Chart  Flex. Soit de manière uniforme, soit tranche par tranche.

Voici les différentes propriétés que vous pouvez utiliser sur une PieSeries pour réaliser ces effets:

  • explodeRadius: Prend une valeur entre 0 et 1, représentant le pourcentage du rayon du PieChart à utiliser pour séparer la tranche
  • perWedgeExploreRadius: Prend un tableau de valeurs entre 0 et 1. La Nième valeur du tableau est ajoutée à la valeur d’explodeRadius pour déterminer la valeur qui va séparer la part du reste du PieChart. Si une valeur n’est pas définie, la part va se séparer suivant la valeur de explodeRadius
  • reserveExplodeRadius: Une valeur entre 0 et 1 représentant le pourcentage du rayon du PieChart total à réserver pour l’animation de l’explosion du PieChart.

Pour séparer (explode) toutes les parts d’un PieChart de la même manière, vous pouvez utiliser la propriété explodeRadius sur un PieSeries comme dans l’exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script><![CDATA[
	import mx.collections.ArrayCollection;

	[Bindable]
	public var expenses:ArrayCollection = new ArrayCollection([
		{Expense:"Taxes", Amount:2000},
		{Expense:"Rent", Amount:1000},
		{Expense:"Bills", Amount:100},
		{Expense:"Car", Amount:450},
		{Expense:"Gas", Amount:100},
		{Expense:"Food", Amount:200}
	]);
	]]></mx:Script>

	<mx:Panel title="Exploding Pie Chart">
		<mx:PieChart id="pie"
		dataProvider="{expenses}"
		showDataTips="true"
		>
			<mx:series>
			<!--explodeRadius is a number between 0 and 1.-->
				<mx:PieSeries
				field="Amount"
				nameField="Expense"
				explodeRadius=".12"
				/>
			</mx:series>
		</mx:PieChart>
		<mx:Legend dataProvider="{pie}"/>
	</mx:Panel>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l’application

This movie requires Flash Player 11

Flex Chart – Séparer certaines parts d’un PieChart (explode avec perWedgeExplodeRadius)