Flex Tips – Afficher un texte par défaut dans une ComboBox sans l'ajouter au dataProvider
Quand vous remplissez une ComboBox Flex, le premier élément est affiché par défaut. Par exemple, admettons que vous ayez une liste d'états américains, l'Alabama (premier sur la liste il me semble) sera affiché et sélectionné par défaut. Un choix est donc imposé à l'utilisateur. Mais il est souvent plus commun, dans les formulaires surtout, d'afficher un message "User Friendly" comme "Choisissez votre état de résidence". Pour cela, il y a une méthode simple, ajouter un item ayant pour label "Choisissez votre état de résidence" dans le dataProvider de votre ComboBox en position 0. C'est donc la valeur qui sera affichée en premier.
Cette solution pose pas mal de problèmes ensuite. Tout d'abord, pour tester le choix de l'utilisateur, on doit regarder si le selectedIndex est > 0, ce qui est un peu génant car on a plutôt l'habitude de dire selectedItem != -1. La comparaision à -1 est utilisée pour les recherches dans les Array et ArrayCollection par exemple, notre code perd donc de sa cohérence. Ensuite, cela se complique encore si vous appliquez un Sort (tri) sur votre ArrayCollection, par exemple un tri alphabétique. La valeur "Choisissez votre état de résidence" va se faufiler dans les éléments de votre tableau et vous devrez la remettre en position 0.
Le composant Flex possède une propriété "prompt" permettant d'indiquer un message tant que l'utilisateur n'a pas fait de sélection. Cet élément ne fait pas partie du dataProvider de la <mx:ComboBox>, vous pourrez donc faire vos tests tranquillement.
Une fois que vous avez fait une sélection, vous ne pourrez donc plus sélectionner cet élément. Si vous voulez vraiment revenir sur cet élément de non-sélection, il faut fixer la propriété selectedIndex à -1 (logique).
Voici un exemple de son utilisation:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
<mx:Array id="arr">
<mx:Object abbrev="AL" name="Alabama" />
<mx:Object abbrev="AK" name="Alaska" />
<mx:Object abbrev="AZ" name="Arizona" />
<mx:Object abbrev="AR" name="Arkansas" />
<mx:Object abbrev="CA" name="California" />
<mx:Object abbrev="CO" name="Colorado" />
<mx:Object abbrev="CT" name="Connecticut" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Button id="button"
label="Reset ComboBox"
click="comboBox.selectedIndex = -1;" />
</mx:ApplicationControlBar>
<mx:ComboBox id="comboBox"
dataProvider="{arr}"
labelField="name"
prompt="Choisissez votre état de résidence.." />
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Composant Flex – Texte Défilant type Marquee (ScrollingText)
Vous avez sûrement déjà vu sur des sites ayant des design type sites des années 80, ces textes défilants "Bienvenue sur mon site!". Pour cela, soit un peu de JavaScript, soit du html avec la balise marquee: <marquee>Bienvenue sur mon site!</marquee>. C'était plutôt affreux (à mon goût) mais admettons que vous vouliez créer le même effet dans votre application Flex, pour lui donner un air vintage peut-être.
Et bien Peter Ent a crée un composant permettant de faire ce texte défilant sous Flex. Ce composant est baptisé ScrollingFlex, voici un exemple de son utilisation:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:controls="com.keaura.controls.*"
creationComplete="{scrollinText.start();scrollinText2.start();}">
<controls:ScrollingText id="scrollinText" text="De gauche à droite" direction="leftToRight" speed="2" width="100%" height="30"/>
<controls:ScrollingText id="scrollinText2" text="De haut en bas" direction="topToBottom" speed="3" width="100%" height="30"/>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Plusieurs paramètres sont à disposition:
- direction: les 4 directions sont possibles (gauche à droite, haut en bas ...)
- speed: vitesse de déplacement du texte
- text: le texte à faire défiler
Attention, n'oubliez pas de donner une height à votre composant, la hauteur de base est de 0 sinon et vous ne verrez rien. N'oubliez pas non plus de lancer le défilement avec la méthode start()
Flex Item Renderer – Un itemRenderer optimisé en héritant de UIComponent
Héritez de la classe UICompenent est de loin la manière la plus optimale d'écrire un itemRenderer. Vous aurez le contrôle complet de votre code et le renderer sera aussi rapide que possible.
On va prendre l'exemple utilisé dans l'article sur l'optimisation des itemRenderer Flex pour le réécrire en se basant sur UIComponent. Cet itemRenderer fait simplement un changement de styles.
On crée donc une classe PriceItemRenderer.as qui va hériter d'UIComponent:
package renderers{
import mx.controls.listClasses.IListItemRenderer;
import mx.core.UIComponent;
public class PriceItemRenderer extends UIComponent implements IListItemRenderer{
public function PriceItemRenderer(){
super();
}
}
}
Vous avez du remarquer qu'en plus d'hériter d'UIComponent, on la fait implémenter l'interface IListItemRenderer. Il est nécessaire de le faire car un composant List va attendre des renderers qu'il implémentent cette interface. Si vous ne le faîtes pas, vous aurez une RTE (RunTime Error) car la liste tente de caster votre renderer en cette interface.
Mes projets (Open Source)
Autres
