Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

12juin/110

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.

6avr/090

Flex Builder 4 – Les nouvelles fonctionnalités du debugger de Flex Builder

Dans son blog, Mike Morearty de la Flex Builder Team expose les nouveautés de Flex Builder 4 (FB4). Au programme, de nombreuses améliorations pour le debugger qui vont être très utiles. Adobe Flex Builder 4 n'est pas encore disponibles sur les Adobe Labs mais le sera prochainement. Les personnes ayant assisté à MAX ont eux eu la possibilité de tester la bête.

Voici donc les prochaines fonctionnalités de Flex Builder 4:

Conditional Breakpoints

Lorsque vous êtes en mode debug, vous pouvez fixer des points d'arrêt (breakpoints) afin de voir les valeurs des variables à cet instant (Watch). Supposons que vous ayez un point d'arrêt par lequel votre programme passe des centaines de fois. Flex Builder va automatiquement s'arrêter et donner le focus au Builder. Si vous voulez donc intercepter un cas particulier, il faudrait donc être très patient. Dans Flex Builder 4, vous pourrez fixer des points d'arrêt conditionnel.

Par exemple, Flex Builder va s'arrêter uniquement si une variable "x" est null. Vous pourrez le faire simplement en faisant clic droit sur le point d'arrêt, en allant dans ses propriétés et en ajoutant la condition:

breakpoint FB
Vous pourrez aussi mettre un compteur. Par exemple si vous indiquer une valeur de compteur de 5, le breakpoint sera actif au bout du 5e passage.

17fév/093

Flex ActionScript – Vérifier la validité d'une URL avec une RegExp (Expression Régulière)

Admettons que vous laissiez l'utilisateur de votre application Flex entrer une URL de son choix (l'adresse de son site web perso pour un profil par exemple). Afin de pouvoir créer un lien qui redirige vers une page valide, vous voudrez valider que cette url pointe bien vers un adresse valide. Par exemple, vous pourrez prévenir l'utilisateur s'il a écrit htp au lieu de http, ce genre de choses.

Il est possible de vérifier des chaînes (String) et leur syntaxe grâce à des expressions régulières. Si vous voulez en apprendre plus sur les RegExp, consultez ces tutoriaux AS3:

Expressions Régulières (RegExp) en ActionScript 3-1

Expressions Régulières (RegExp) en ActionScript 3-2

Maintenant que vous voyez à quoi une expression régulière, vous pouvez comprendre que pour vérifier une URL, l'expression régulière devient complexe (gestion de http/https, sous-domaines, cohérence …). J'ai trouvé sur ce blog, la RegExp permettant de valider une URL en AS3:

var regex:RegExp = /^http(s)?:\/\/((\d+\.\d+\.\d+\.\d+)|(([\w-]+\.)+([a-z,A-Z][\w-]*)))(:[1-9][0-9]*)?(\/([\w-.\/:%+@&=]+[\w- .\/?:%+@&=]*)?)?(#(.*))?$/i;

Plutôt complexe non ? Pour valider une chaîne URL, il faut donc simplement utiliser cette RegExp sur une chaîne avec la méthode test():

var url:String = "http://www.google.com";
var regex:RegExp = /^http(s)?:\/\/((\d+\.\d+\.\d+\.\d+)|(([\w-]+\.)+([a-z,A-Z][\w-]*)))(:[1-9][0-9]*)?(\/([\w-.\/:%+@&=]+[\w- .\/?:%+@&=]*)?)?(#(.*))?$/i;
trace(regex.test(url)); // returns true si l'url est valide

Vous pouvez aussi utiliser cette expression régulière dans un Validator Flex de type RegExpValidator. Le composant pourra par exemple la validation tout seul sur une champ texte présent dans un formulaire

Flex Validator: Exemple de RegExpValidator en MXML et ActionScript

27avr/082

Expressions Régulières (RegExp) en ActionScript 3-2

Voir la première partie de l'article sur les Expressions Régulières en ActionScript3

Les méthodes pour utiliser les expressions régulières avec des chaînes (String)

La classe RegExp contient deux méthodes: exec() et test().

En plus de ces deux méthodes de la classe RegExp, la classe String contient les méthodes match(), replace(), search(), splice().

La méthode test()

La méthode test() de la classe RegExp vérifie simplement que la chaîne contient un résultat pour l'expression régulière, comme dans l'exemple suivant:

var pattern:RegExp = /Class-\w/;
var str = "Class-A";
trace(pattern.test(str)); // résultat: true

La méthode exec()

La méthode exec() de la classe RegExp vérifie la chaîne avec l'expression régulière fournie et retourne un tableau de résultats. Le tableau contient aussi une propriété index indiquant la position du début de la chaîne trouvée:

var pattern:RegExp = /\d{3}\-\d{3}-\d{4}/; //U.S phone number
var str:String = "phone: 415-555-1212";
var result:Array = pattern.exec(str);
trace (result.index, " - ", result);
// 7 - 415-555-1212

Utilisez la méthode exec() plusieurs fois pour reconnaître plusieurs sous-chaînes quand le flag g (global) est défini pour l'expression régulière:

var pattern:RegExp = /\w*sh\w*/gi;
var str:String = "She sells seashells by the seashore";
var result:Array = pattern.exec(str);

while (result != null) {
trace (result.index, "\t", pattern.lastIndex, "\t", result);
result = pattern.exec(str);
}
// résultat:
// 5 8 She
// 15 24 seashells
// 32 40 seashore
Remplis sous: ActionScript Lire la suite
27avr/083

Expressions Régulières (RegExp) en ActionScript 3-1

Une expression régulière permet de décrire un motif (pattern en anglais) de caractères. Elles représentent un bon moyen pour vérifier, rechercher et manipuler des chaînes de caractères.

Par exemple, l'expression régulière suivante définit un motif tel que les lettres A, B et C sont à la suite:

/ABC/

Notez qu'une expression régulière littérale est délimitée par le caractère slash ("/").

La plupart du temps, vous voudrez utiliser les expressions régulières pour vérifier des motifs plus complexes qu'une simple chaîne de caractères. Par exemple, l'expression régulière suivante définit un motif tel que les lettres A, B et C sont consécutives et que cette séquence soit suivie par un chiffre.

/ABC\d/

Le code "\d" représente "n'importe quel chiffre". Le caractère backslash ("\") est appelé caractère d'échappement, et combiné avec le caractère qui le suit (dans ce cas la lettre "d"), il a un sens spécial dans une expression régulière. Cet article décrit ces caractères d'échappement et d'autres syntaxes des expressions régulières.

L'expression régulière suivante définit un motif de lettres ABC suivies par n'importe quel nombre de chiffres (notez l'astérisque):

/ABC\d*/

Le caractère astérisque ("*") est un metacharacter. Un metacharacter est un caractère spécial dans une expression régulière. L'astérisque est un type spécial de metachatacter appelé quantifier, qui est utilisé pour quantifier le nombre de répétition d'un caractère ou d'un groupe de caractères.

En plus de ces motifs, une expression régulières peut contenir des flags, qui spécifient comment l'expression régulière doit être vérifiée. Par exemple, l'expression régulière suivant utilise le flag "i", qui spécifie que l'expression régulière ignore la casse (différence majuscule/minuscule) dans les chaînes correspondantes:

/ABC\d*/i

Pour rechercher des motifs dans des chaînes (String) et remplacer des caractères, vous pouvez utiliser les expressions régulières comme paramètre des méthodes de la classe String. Par exemple:

var pattern:RegExp = /\d+/; // motif comprenant un ou plusieurs chiffres à la suite
var str:String = "Test: 337, 4, or 57.33.";
trace(str.search(pattern));     // retourne 6 : index du premier motif identifié

trace(str.match(pattern));     // retourne 337 : premier motif identifié

var pattern:RegExp = /\d+/g; // Le flag "g" rend la recherche globale

trace(str.match(pattern)); // retourne 337,4, 57, 33: l'ensemble des résultats

Les méthodes suivantes de la classe String prennent des expressions régulières comme paramètres:

  • match ()
  • replace ()
  • search ()
  • split ()

Voir la deuxième partie de l'article sur les Expressions Régulières en ActionScript3

Remplis sous: ActionScript Lire la suite