Archives pour la catégorie TextInput

AIR Mobile – Application Pokémon (6) – Filtrer la liste des pokémons avec un champ de recherche

Dans le tutorial précédent, on a vu comment récupérer la donnée (liste des pokémons) depuis une base SQLite et comment l’afficher dans un composant List:

AIR Mobile – Application Pokémon (5) – Liste des Pokémon depuis la BDD SQLite

Maintenant que l’on a les bases de notre application, on va ajouter une fonction de recherche. Vous l’avez remarqué, la liste des pokémons est longue, plus de 500 éléments. On a fait un « order » sur le nom dans notre requête pour qu’ils ne soient pas mélangés mais si vous cherchez « Salameche », vous allez scroller un moment.

Si vous vous souvenez de la maquette que l’on avait fait en début du projet, vous remarquerez que l’on a un champ texte en haut de la vue permettant de rechercher un Pokémon.

Ajout du composant TextInput

Un champ de saisie est un composant nommé « TextInput » en Flex. Celui-ci devra se trouver dans la partie du haut qui est nommée ActionBar. Une petite piqûre de rappel si vous n’avez pas suivi les tutoriaux précédents:

AIR Mobile – Comprendre les composants ViewNavigator et View

Regardez surtout à la fin, le schéma expliquant le découpage naturel de l’ActionBar en 3 parties:

ActionBarDiagram

Dans notre cas, on a pas affaire à des boutons de navigation ou d’action mais à un composant que l’on veut centrer. On va donc l’afficher dans la partie « titleContent« . Pour cela, ouvrez une balise XML (« < ») dans votre vue PokemonInfoHomeView.mxml et tapez « titlec » puis Entrée et fermez le tag XML pour que Flash Builder vous complète la balise fermante:

...
  </fx:Declarations>
  <s:titleContent>

  </s:titleContent>
  <s:List width="100%" height="100%" dataProvider="{_dp}" labelField="nom">
...

Insérez un tag TextInput dans cette balise. Au passage, donnez lui un id égal à « input » et une width de valeur « 100% ». Vous avez une nouvelle propriété sur les composants de saisie de texte en Flex 4.5 qui est la propriété « prompt ». Celle-ci sert à afficher une valeur lorsque le champ texte n’est pas sélectionné pour inviter l’utilisateur à taper. Donnez lui la valeur « Rechercher un Pokémon »:

  <s:titleContent>
    <s:TextInput id="input" width="100%" prompt="Rechercher un Pokémon" />
  </s:titleContent>

Lancez le programme et voilà le résultat:

tin

Ajout d’une méthode de filtrage « filterFunction »

Pour effectuer notre filtrage, nous avons plusieurs solutions. La plus évidente est de faire à chaque frappe, une nouvelle requête SQL avec une clause LIKE qui nous renvoie tous les pokémons dont le nom correspond. On ne va pas adopter cette solution car dans notre cas, on a déjà requête tous les éléments de la base, qui sont conservés dans une variable nommée « _dp » de type ArrayCollection. Notre filtrage étant plutôt simple, on va utiliser un mécanisme de filtrage présent sur la classe ArrayCollection.

ArrayCollection offre un mécanisme de filtrage paramétrable grâce à sa propriété « filterFunction« . Cette propriété va référencer comme son nom l’indique une « function » de votre code. Cette fonction a une signature bien particulière qui est la suivante (cf. docs):

function filterByName(item:Object):Boolean {

Elle prend un objet en entrée et renvoie un Boolean. En d’autre terme, on lui passe un élément de donnée et elle décide si cet élément doit être filtré ou non. Si la méthode renvoie « true » pour un élément, celui-ci fera partie de la liste, sinon celui-ci sera filtré.

On va tout d’abord récupérer la saisie de l’utilisateur. Celle-ci se trouve dans la propriété « text » de notre composant repéré par la propriété id= »input ». On va tout de suite faire un test d’échappement dans le cas où l’utilisateur n’a rien tapé:

  private function filterByName(item:Object):Boolean {
	var inputValue:String = input.text;
	if (!inputValue || inputValue == "") {
	  return true;
	}

  }

Si aucune saisie, on renvoie « true » pour laisser passer tous les éléments.

Lire la suite

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:

buttons

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).

Lire la suite

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.

Mirroring layouts in Flex

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″.

Télécharger la release Flex SDK 4.1.0.15132

Télécharger les dernières versions de Flex 4 SDK

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.

Lire la suite

Flex Focus et Keyboard – Contrôler l’ordre des tabulations

La gestion du Focus et cette du clavier sont deux sujets liés avec Flex. Un objet qui a le focus peut répondre aux évènements clavier. Par exemple, lorsqu’une champ texte (TextInput ou TextArea) a le focus, l’utilisateur peut entrer du texte dans le champ. Quand un composant a le focus, il est généralement indiqué avec une bordure colorée. Vous pouvez utiliser le clavier pour contrôler le focus dans les applications Flex.

Une convention classique dans les applications est que la touche Tab (tabulation) fait avancer le focus vers le prochain élément, et la combinaison Shift + Tab fait reculer le focus. Ceci est vrai pour la plupart des applications bureautiques. C’est aussi vrai pour la plupart des applications HTML, et ça l’est aussi pour les applications Flex.

La plupart des composants Flex sont capables de recevoir le focus. Par exemple, les TextInput, ComboBox, et autres boutons sont capables de recevoir le focus. Certains composants ne peuvent clairement pas recevoir le focus. Par exemple, un conteneur VBox, un Label ou un Spacer ne peuvent pas recevoir le focus car aucun de ces composants de répond aux entrées clavier.

Quand plusieurs composant pouvant avoir le focus existent dans une application en même teps, il existe un ordre par défaut dans lequel l’utilisateur peut se déplacer en utilisant la touche Tab. Cet ordre bouge toujours de la gauche vers la droite, de haut en bas.

Le code suivant crée un formulaire avec 3 champs texte et un bouton. Les deux premiers champs sont côte à côte sur la même ligne, vient ensuite le troisième TextInput sur la ligne suivant puis le bouton sur la dernière ligne. Dans cet exemple, si l’utilisateur place le focus sur le TextInput firstName et presse Tab, le focus se déplace vers le champ lastName. Encore une pression sur Tab et le focus passe sur le champ email. Enfin, encore un appui sur Tab et le focus passe sur le bouton:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Form>
		<mx:FormItem label="Nom">
			<mx:HBox>
				<mx:TextInput id="firstName"/>
				<mx:TextInput id="lastName"/>
			</mx:HBox>
		</mx:FormItem>
		<mx:FormItem label="Email">
			<mx:TextInput id="email"/>
		</mx:FormItem>
		<mx:FormItem label="">
			<mx:Button label="Envoyer"/>
		</mx:FormItem>
	</mx:Form>
</mx:Application>

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

This movie requires Flash Player 11

Lire la suite