Test : Tester et déboguer le code
Configuration requise
Niveau de l'utilisateur
Toutes
- Télécharger l'exemple de code complet (ZIP, 121 KB)
Code
<?xml version="1.0" encoding="utf-8"?>
<s:Application ...>
<fx:Script>
<![CDATA[
(...)
protected function empDg_itemEditEndHandler(event:DataGridEvent):void
{
trace(employee.id);
trace(employee);
trace(empDg.dataProvider);
trace(event);
trace(event.dataField);
trace(employee[event.dataField]);
employee[event.dataField]=(empDg.itemEditorInstance as mx.controls.TextInput).text;
trace(employee[event.dataField]);
employeeService.updateEmployee(employee);
}
]]>
</fx:Script>
(...)
</s:Application>
Didacticiel
Dans ce didacticiel, vous allez utiliser le débogueur de Flash Builder pour déboguer le code Flex. Vous allez ajouter des points d'arrêt dans un gestionnaire d'événements pour interrompre l'exécution du code et examiner les valeurs de variables.
Étape 1 : Ajoutez un point d'arrêt.
Double-cliquez sur la barre de marqueurs (à gauche des numéros de ligne) en regard de la première ligne de code au sein du gestionnaire itemEditEnd du DataGrid, empDg_itemEditEndHandler (voir Figure 15). Déboguez l'application et modifiez une cellule.
Après avoir modifié une cellule dans le navigateur, vous revenez automatiquement dans Flash Builder (il se peut que le bouton du logiciel clignote dans la barre de lancement rapide ou la barre des tâches et que vous deviez y accéder manuellement), où la première ligne de code du gestionnaire est désormais précédée d'une flèche, ce qui indique que l'exécution du code s'est arrêtée à ce niveau (voir Figure 16).
Étape 2 : Examinez les variables dans la vue Variables.
Effectuez un zoom avant sur l'objet event et repérez la propriété dataField.
Elle doit contenir deux variables : this et event (voir Figure 17) —this fait référence à l'application elle-mêmeٔ ; event est la variable transmise à empDg_itemEditEndHandler(). Repérez la propriété event.dataField, c'est-à-dire la référence au champ modifié dans le DataGrid.
Étape 3 : Examinez les propriétés héritées de l'objet event.
Effectuez un zoom avant sur les propriétés héritées de l'objet event, puis sur la propriété currentTarget (voir Figure 18).
currentTarget fait référence au DataGrid empDg, c'est-à-dire à l'objet qui écoute l'événement diffusé. Effectuez un zoom avant sur les propriétés de l'objet currentTarget et repérez la propriété dataProvider. dataProvider est une classe ArrayCollection (tableau géré par Flex) d'objets Employee. Examinez les valeurs de l'un des objets Employee.
Remarque : Vous pouvez double-cliquer sur l'onglet Variables (ou sur n'importe quel onglet de Flash Builder) pour l'afficher en mode plein écran, ce qui est très utile pour afficher plusieurs variables à la fois. Pour rétablir la taille initiale de l'onglet, double-cliquez de nouveau dessus.
Repérez la propriété itemEditorInstance de l'objet currentTarget. Il s'agit d'une instance de la classe TextInput et cet objet possède une propriété text. Dans le code, vous avez mis à jour la propriété de l'objet employee avec la valeur contenue dans (empDg.itemEditorInstance as mx.controls.TextInput).text.
Étape 4 : Avancez d'un pas avec entrée dans le code.
Cliquez au moins dix fois sur le bouton Avancer d'un pas avec entrée (voir Figure 19) et contrôlez les variables pendant que le débogueur exécute le code pas-à-pas. Arrêtez l'exécution lorsque vous atteignez un autre fichier et cliquez sur le bouton Exécuter jusqu'à l'instruction de retour pour reprendre l'exécution du code au niveau du fichier MXML.
Plusieurs fichiers s'ouvrent et se ferment à mesure que le code d'autres classes s'exécute.
Vous pourriez continuer à exécuter le code pas-à-pas et à contrôler les valeurs des variables dans la vue Variables, mais si la valeur d'une variable particulière vous intéresse, vous pouvez la contrôler de manière explicite.
Étape 5 : Contrôlez la variable employee[event.dataField].
Sélectionnez employee[event.dataField] dans le gestionnaire empDg_itemEditEndHandler(), puis Créer une expression de contrôle.
L'expression doit s'afficher dans la vue Expressions (voir Figure 20).
Étape 6 : Exécutez le code pas-à-pas et contrôlez le changement de valeur de l'expression.
Cliquez sur les boutons Avancer d'un pas avec entrée, Avancer d'un pas sans entrée et Exécuter jusqu'à l'instruction de retour et observez la valeur de l'expression contrôlée : la valeur initiale de la cellule du DataGrid est remplacée par la valeur modifiée (voir Figure 21).
Arrêtez le débogueur.
Félicitations ! Dans ce module, vous avez appris à utiliser l'opération de test de Flash Builder pour tester le code côté serveur, le moniteur de réseau pour suivre le trafic réseau entre l'application Flex et le serveur, et le débogueur pour déboguer l'application Flex.
Pour compléter vos connaissances, consultez les autres didacticiels de test, qui abordent des sujets tels que le déploiement de votre application l'utilisation des composants de représentation graphique Flex et la personnalisation de l'aspect de l'application.
Pour en savoir plus
Pour en savoir plus sur cette rubrique, consultez les ressources suivantes :
Documentation
- Débogage des applications
- Ajout et suppression de points d’arrêt
- Définition de points d’arrêt conditionnels
- Gestion des points d’arrêt dans la vue Points d’arrêt
Pôle de développement Flex
Tutorials and samples |
Tutorials
- Flex mobile performance checklist
- Flex and Maven with Flexmojos – Part 3: Journeyman
- Migrating Flex 3 applications to Flex 4.5 – Part 4
Flex user forum |
More |
Flex Cookbook |
More |