Flex Tips – Empêcher la saisie d'un retour chariot dans un champ texte
Un petit "snippet" de code qui peut vous être bien utile lorsque vous voulez interdire la saisie d'un caractère retour chariot dans un champ texte (TextArea par exemple).
Mon cas d'utilisation était un écran d'une interface mobile. Celle-ci est réduite en largeur et j'affiche un champ texte sur plusieurs lignes, pour que l'utilisateur voit ce qu'il tape. Ce qu'il doit taper est une URL, et je veux que lorsqu'il appuie sur la touche entrée de son clavier, la saisie soit validée mais que le caractère "\n" lui-même ne soit pas entré.
La propriété "restrict" permettant de donner une expression régulière à valider prend en compte tous les caractère sauf le retour chariot, il vous faut donc une autre solution.
Pour cela, il suffit de s'abonner à l'évènement "textInput" qui peut être stoppé grâce à la méthode preventDefault:
private function textArea_textInput(event:TextEvent):void {
if (event.text == "\n") {
event.preventDefault();
}
}
Avec ce bout de code, vous allez empêcher la saisie mais si l'utilisateur effectue un copier-coller d'un contenu ayant un retour chariot, celui-ci sera accepté. Pour éviter cela, il suffit de s'abonner sur l'évènement "change" et de remplacer les retours chariot éventuels:
private function textArea_change(event:Event):void {
textArea.text = textArea.text.replace(/\\n|\\r/ig, "");
}
AIR Mobile – Les composants et le thème Mobile Flex 4.5
L'avantage de pouvoir utiliser les composants Flex par rapport à une application pure AS3 est de simplifier le développement en vous donnant toute une bibliothèque de composants prêts à l'emploi. Certains composants sont de nouveaux composants, d'autres ont simplement une autre "Skin" optimisée pour le rendu mobile (plus gros, système de cache, etc.). Bien sûr, vous pouvez toujours faire vos propres composants mais on va voir ceux qui sortent directement du four. Dans ce billet, on va découvrir ces composants et leurs looks pour vous donner une idée.
Notez que les itemRenderer seront couverts dans un autre billet sur flex-tutorial.
Bouton
Ce n'est pas un nouveau composant, seulement le composant s:Button avec un look différent lorsque vous l'utilisez dans un projet de type Mobile:
Notez que le composant Spark Button a retrouvé sa propriété "icon" vous permettant d'ajouter un icône directement avec la Skin de base (il fallait faire sa propre Skin auparavant).
Flex 4 – Composant TextArea qui adapte sa taille automatiquement par rapport au texte (heightInLines)
Un tout petit post pour se mettre en jambe après 10 jours de vacances pour présenter une fonctionnalité du composant Spark (Flex 4) TextArea. Celui-ci peut maintenant s'adapter automatiquement à la taille du texte qu'il contient.
Il y a plus d'un an, je présentais sur ce blog, le code pour créer ce comportement sur un composant dérivant de TextArea:
Composant Flex – TextArea qui s'adapte automatiquement à la taille du texte
Pas très pratique d'utiliser de remplacer dans son application, ses composants TextArea par des composants dérivant TextArea... Heureusement, le "Gumbonent" Flex 4 TextArea se dote d'une nouvelle propriété appelée "heightInLines". On peut donc lui indiquer "5", si on veut que la taille du champ texte soir de 5 lignes mais on peut aussi s'arranger pour faire de l'auto-resize.
Pour cela, il suffit de fixer cette propriété à "NaN", valeur par défaut (Not A Number). C'est écrit dans les docs, par exemple dans celle de RichEditableText:
Documentation RichEditableText Flex 4
Voici le code qu'il suffit pour faire un composant TextArea resizable automatiquement en Flex 4:
<?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" viewSourceURL="srcview/index.html">
<s:TextArea
id="resizeableTextArea"
heightInLines="{NaN}"
minHeight="50"/>
</s:Application>
Notez qu'il semblait y avoir un bon bug dans une des premières version de Flex 4 qui est corrigé:
Un petit exemple pour la route:
Flex Source Code Download: Télécharger le code source complet de l'application
Flex 4 – Layout Mirroring pour texte right-to-left (Hébreu, Arabe, …)
Avant de partir en vacances une petite dizaine de jours (pas de blog donc ^^), voici une petite news de la part de la team Adobe Flex SDK.
La nouvelle Product Manager sur Flex, Deepa Subramaniam vient d'annoncer sur son blog une des nouveautés qui va arriver avec les prochaines release de Flex 4 (et oui, ils continuent à travailler dessus 
). Cette nouvelle fonctionnalité est nommée "Layout Mirroring".
Elle sert à faire un effet "miroir" (pas un effet réflexion web 2.0) vertical pour les applications utilisant une mise en page qui doit être adaptée au texte qui s'écrivent de droite à gauche comme l'Hébreu ou l'Arabe.
Dans la pratique, cet effet miroir se traduit par une nouvelle propriété de style "layoutDirection" sur UIComponent. Celle-ci est par défaut à "ltr" (left-to-right, le standard Français / Anglais) mais vous pouvez la passer à "rtl". Notez que comme les autres propriétés de style, celle-ci se "cascade" dans votre application. C'est-à-dire qu'il suffit de mettre votre Application en layout "rtl" pour que cela se propage à tous les composants UIComponent de votre Application.
Toute cette manipulation se fait grâce au nouveau moteur de texte "Flash Text Engine" introduit dans Flex 4. Pour que toute votre application puisse avoir cet disposition miroir, il faut donc que tous vos composants utilisent ce FTE. Pour cela, il suffit de préciser dans les propriétés de compilation de votre projet Flex 4 "Use Flash Text Engine in Flex Components".
Spécifications sur le Layout Mirroring
Si vous voulez tester, il vous faut un des derniers build de Flex 4.1 disponible sur le site d'Adobe. En effet, vous aurez accès à cette fonctionnalité à partir de la release "4.1.0.15132".
Squiggly, correcteur d'orthographe Made in Adobe
Encore une nouvelle librairie venue des Adobe Labs avec cette fois un nom difficilement prononçable pour nous francophones, Squiggly. Squiggly est une librairie permettant d'ajouter facilement un correcteur d'orthographe à des applications Flex et Air. Il peut être ajouté sur n'importe quel composant Flex 3 de texte (TextInput, TextArea, RichTextEditor).
Allez Sur la page officielle de Squiggly
Voir l'application d'exemple de Squiggly
Utilisation de Squiggly
L'utilisation est très simple, il suffit d'appeler une méthode static de la class SpellUI en lui passant le composant sur lequel Squiggly doit agir, et le dictionnaire à charger:
SpellUI.enableSpelling(sta, "usa.zwl");
Pour le choix du fichier dictionnaire, vous avez le choix. Vous pouvez utiliser le dictionnaire English qui est livré avec Squiggly, ou utiliser l'utilitaire DictionaryGenerator.air pour compiler votre propre liste de mots.
Mes projets (Open Source)
Autres
