ToasterLib – Gestion du resize en v1.0.2
Et oui, déjà des corrections apportées à la ToasterLib. Si vous aviez seulement regardé l'exemple qui se trouve dans les articles de flex-tutorial, vous aviez peu de chance de rencontrer le bug corrigé en question puisqu'il s'agissait d'un bug de resize du Toaster (sur les articles, le SWF a une taille fixe).
Quand on redimensionnait l'application (ou tout du point, le conteneur parent du Toaster, la notification ne bougeait pas et pouvait donc soit être partiellement cachée, soit se retrouver au milieu de la page. Le code était déjà prévu mais pas la logique (j'ai voulu faire une release rapide).
Après quelques switch et une dixaine de lignes de code, ce bug est désormais corrigé.
Les exemples en ligne ont été mis à jour (pensez à vider votre cache).
Vous pouvez donc télécharger le nouveau SWC de la ToasterLib (v1.0.2):
Télécharger le SWC de la ToasterLib
Ou alors, vous pouvez faire un checkout des sources par SVN et la compilez vous-même:
Récupérer la ToasterLib par SVN
Si vous utilisez la ToasterLib (ou que vous comptez l'utiliser) et que vous trouvez des bugs, merci d'utiliser l'onglet "Issue" du projet pour rentrer vos bugs:
Composant Flex – AdvancedDataGrid Auto Resizable (ajustement des colonnes)
Avec le composant AdvancedDataGrid de base, vous pouvez redimensionner les colonnes par un drag and drop des séparateurs de colonnes. Mais dans de nombreuses applications, comme par exemple l'Explorateur Windows ou le File Explorer d'Ubuntu, vous pouvez faire un double-clic sur un de ces séparateurs qui va agrandir la colonne pour qu'elle puisse afficher le plus grand élément. Ce comportement n'est pas disponible dans une AdvancedDataGrid par défaut.
La solution est comme souvent de créer un composant qui va hériter d'AdvancedDataGrid et de redéfinir certaines de ses méthodes.
Sameer Bhatt de la Adobe Flex Team a fait ces modifications et a crée pour cela un composant baptisé AutoResizableADG.
Voir la page officielle de l'auteur
Télécharger le composant AutoResizableADG.as
Exemple d'application
Flex Source Code Download: Télécharger le code source complet de l'application
Composant Flex – TextArea qui s'adapte automatiquement à la taille du texte
Le composant TextArea Flex permet d'entrer du texte sur plusieurs lignes, pour un formulaire par exemple. L'inconvénient étant qu'il faut lui donner une taille, même si aucun texte n'est entré. On peut donc définir sa hauteur pour accepter un maximum de texte mais cela sera de la place perdue dans votre application. A l'inverse, si vous créez votre composant avec une petite hauteur, dès que l'utilisateur va mettre trop de texte, une scrollbar va apparaître, ce qui fait toujours un peu tâche.
Il existe donc une méthode qui permet en prenant le nombre de lignes en interne, et en multipliant par la hauteur d'une ligne (this.mx_internal::getTextField().getLineMetrics(i).height;), d'adapter la taille d'une TextArea. Processus un peu laborieux, surtout qu'il faut gérer le rafraichissement du composant etc.
Andrei Ionescu a crée un composant qui s'occupe de faire cette gymnastique interne tout seul. Voici le code du composant en question:
Flex Transition: Programmer des Transitions en ActionScript (Move, Resize…), avec exemple AS3
Les transitions fonctionnent de la même manière en MXML qu'un ActionScript (AS3) car vous devez fixer les mêmes propriétés et ces propriétés auront le même effet que vous utilisiez du MXML ou de l'ActionScript.
Vous pouvez construire une nouvelle instance de mx.states.Transition en utilisant le constructeur:
var transition:Transition = new Transition();
Vous pouvez ensuite fixer les propriétés fromState et toState:
transition.toState = "*"; transition.fromState = "*";
Vous pouvez maintenant assigner un effet en utilisant la propriété effect:
var move:Move = new Move(); move.targets = [textInput1, textInput2]; transition.effect = move;
Enfin, il vous suffira d'ajouter simplement cette transition à la propriété transitions de l'application ou du composant:
transitions = [transition];
Il n'y a pas de vrais avantage à utiliser une transition en AS3 plutôt qu'en MXML. Le choix que vous devrez faire sera basé sur le type de document sur lequel vous voulez définir les états. Si vous ajoutez des transitions à un document MXML, vous devriez utiliser le MXML pour définir ces transitions et inversement.
L'exemple suivant montre comment reproduire l'exemple de création de transitions en MXML mais cette fois, les transitions sont écrites en Action Script.
Flex Transition: Créer des Transitions en MXML (Move, Resize…), avec exemple
Toutes les applications et les composants ont une propriété states que vous pouvez utiliser pour définir les états à utiliser. De même, toutes les applications et les composants ont une propriété transitions qui est un tableau de toutes les transitions que vous voulez utiliser. Dans le MXML, vous pouvez définir la propriété transitions en utilisant directement dans le premier tag (root tag) d'une appli ou d'un composant:
<mx:transitions> <!-- les transitions entre états apparaitront ici--> </mx:transitions>
Tous les éléments du tableau de transitions, doivent être des object Transition. En MXML, vous créez des instances de Transition en utilisant le tag <mx:Transition>. Tous les objets Transition doivent définir une propriété fromState et toState, et ces propriétés doivent correspondre aux états entre lesquels la transition doit être appliquée.
Par exemple ce code va créer une transition depuis un état appelé A à un état appelé B:
<mx:Transition fromState="A" toState="B"/>
Si vous voulez utiliser une transition depuis ou vers un état en particulier, vous pouvez utiliser l'astérisque comme joker (wild card), ce qui veut dire "tous les états".
L'exemple suivant crée une transition entre tous les états et un état nommé B:
<mx:Transition fromState="*" toState="B"/>
Les objets Transitions doivent avoir une propriété effet qui détermine quel effet sera appliqué pendant le changement d'état. La propriété effet est la propriété par défaut lorsque vous créez un objet Transition en utilisant le MXML.
Mes projets (Open Source)
Autres
