Test Flex : Créer une application en une heure
<?xml version="1.0" encoding="utf-8"?>
<s:Application …>
<fx:Script>
<![CDATA[
(…)
import spark.events.GridSelectionEvent;
protected function deptBtn_clickHandler(event:MouseEvent):void
{
currentState="Departments";
}
protected function empBtn_clickHandler(event:MouseEvent):void
{
currentState="Employees";
}
protected function empDg_selectionChangeHandler(event:GridSelectionEvent):void
{
currentState="EmployeeDetails";
}
protected function searchBtn_clickHandler(event:MouseEvent):void
{
if(searchTxt.text!="")
{
getEmployeesResult.token = employeeService.getEmployeesByName(searchTxt.text);
}
else
{
getEmployeesResult.token = employeeService.getEmployees();
}
currentState="Employees";
}
protected function toggleBtn_clickHandler(event:MouseEvent):void
{
if(toggleBtn.selected){
deptDg.setStyle("fontSize",14);
toggleBtn.label="Smaller Text";
}
else{
deptDg.setStyle("fontSize",12);
toggleBtn.label="Bigger Text";
}
}
]]>
</fx:Script>
(…)
<s:Button id="empBtn" click.Departments="empBtn_clickHandler(event)" …/>
<s:Button id="deptBtn" click="deptBtn_clickHandler(event)" …/>
<s:DataGrid id="empDg" selectionChange="empDg_selectionChangeHandler(event)" …>
(…)
<s:Button id="searchBtn" click="searchBtn_clickHandler(event)" …/>
<s:TextInput id="searchTxt" enter="searchBtn_clickHandler(event)" .../>
<s:Button id="toggleBtn" includeIn="Departments" x="600" y="100" label="Bigger Text" width="100"
click="toggleBtn_clickHandler(event)"/>
</s:Application>
Didacticiel
Dans Flex, lorsqu'un utilisateur interagit avec un composant d'une application Flex, des événements (click, rollOver ou rollOut, par exemple) sont diffusés par le composant. Vous devez désigner une fonction de gestion d'événements à appeler pour répondre aux événements lorsqu'ils surviennent.
Dans ce didacticiel, vous allez écrire des gestionnaires d'événements pour basculer entre les différents états de l'application lorsque l'utilisateur clique sur certains boutons, renseigner le formulaire de détails lorsqu'il sélectionne une ligne d'un DataGrid, mais également rechercher les employés et agrandir le texte du DataGrid lorsqu'il clique sur un bouton spécifique.
Étape 1 : Générez un gestionnaire d'événements.
Cliquez avec le bouton droit de la souris sur le bouton Departments et sélectionnez Générer un gestionnaire de clics. Désignez le gestionnaire obtenu comme gestionnaire click de tous les états.
Flash Builder passe automatiquement en mode Source, ce qui vous permet de voir une nouvelle fonction :
protected function deptBtn_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
}
ainsi qu'un attribut d'événement click dans la balise du bouton Departments :
<s:Button id="deptBtn" x="140" y="100" label="Departments"
enabled.Departments="false"
click.EmployeeDetails="deptBtn_clickHandler(event)"/>
Lorsque l'utilisateur clique sur ce bouton dans l'état EmployeeDetails, cette fonction de gestion d'événements est appelée. Modifiez-la afin que le gestionnaire click s'applique à tous les états :
<s:Button id="deptBtn" x="140" y="100"
label="Departments"
enabled.Departments="false" click ="deptBtn_clickHandler(event)"/>
Étape 2 : Basculez vers l'état Departments lors d'un événement click sur un bouton.
À l'intérieur de la fonction, passez dans l'état Departments en attribuant la valeur Departments à la propriété currentState de l'application. Exécutez l’application.
Le gestionnaire d'événements click du bouton Departments doit se présenter comme suit :
protected function deptBtn_clickHandler(event:MouseEvent):void
{
currentState="Departments";
}
Lorsque vous exécutez l'application, vous devez à présent pouvoir cliquer sur le bouton Departments pour basculer vers l'état Departments (voir Figure 1). Le bouton Employees est désormais activé, contrairement au bouton Departments.
Étape 3 : Basculez vers l'état Employees lors d'un événement click sur un bouton.
L'état Departments étant sélectionné en mode Création, générez un gestionnaire d'événements click pour le bouton Employees et, à l'intérieur de la fonction, passez dans l'état Employees.
Le gestionnaire d'événements click du bouton Employees doit se présenter comme suit :
protected function empBtn_clickHandler(event:MouseEvent):void
{
currentState = "Employees";
}
Dans la balise du bouton Employees, vous pouvez conserver l'attribut click.Departments ou le remplacer par click. Ces deux valeurs sont acceptées car ce bouton n'est activé et cliquable que dans l'état Departments.
Lorsque vous exécutez l'application, vous devez à présent pouvoir basculer à volonté entre les états Departments et Employees. Sélectionnez une ligne du DataGrid des employés : rien ne se passe.
Étape 4 : Basculez vers l'état EmployeesDetails lors d'un événement selectionChange du DataGrid.
En mode Source, ajoutez un attribut selectionChange au composant DataGrid empDg et générez un gestionnaire selectionChange (voir Figure 2). À l'intérieur du gestionnaire, attribuez la valeur EmployeeDetails à la propriété currentState.
Le gestionnaire d'événements selectionChange du DataGrid doit se présenter comme suit :
protected function empDg_selectionChangeHandler(event:GridSelectionEvent):void
{
currentState="EmployeeDetails";
}
Lorsque vous exécutez l'application, vous devez à présent pouvoir sélectionner une ligne du DataGrid des employés et consulter les détails de l'employé correspondant (voir Figure 3).
Étape 5 : Chargez de nouvelles données lors d'un événement click.
À partir de la vue Données/Services, configurez l'opération getEmployeesByName() afin qu'elle renvoie un tableau d'objets Employee existants : Employee[]. Faites glissez l'opération getEmployeesByName() sur le bouton Search. À l'intérieur du gestionnaire d'événements généré, transmettez à l'opération la valeur saisie par l'utilisateur, contenue dans searchTxt.text. Remplacez la valeur de l'objet CallResponder par le répondeur getEmployeesResult existant et faites basculer l'application vers l'état Employees. Dans la vue Données/Services, définissez le type de données Employee[] comme type de retour pour la fonction getEmployeesByName.
Par défaut, un nouveau répondeur getEmployeesByNameResult est créé :
<s:CallResponder id="getEmployeesByNameResult"/>
et utilisé pour l'appel de service :
protected function searchBtn_clickHandler(event:MouseEvent):void
{
getEmployeesByNameResult.token =
employeeService.getEmployeesByName(searchTxt.text);
}
Cependant, vous souhaitez que les résultats soient affichés dans le DataGrid empDg existant. Vous allez donc remplacer l'objet CallResponder par le répondeur getEmployeesResult, dont la propriété lastResult est déjà liée au dataProvider du DataGrid via l'objet AsyncListView. Vous voulez également que l'application bascule de nouveau vers l'état Employees jusqu'à ce que l'utilisateur sélectionne un autre employé dans le DataGrid.
protected function searchBtn_clickHandler(event:MouseEvent):void
{
getEmployeesResult.token = employeeService.getEmployeesByName(searchTxt.text);
currentState="Employees";
}
Dans la mesure où vous n'utilisez pas le répondeur getEmployeesByNameResult généré, vous pouvez en supprimer la définition, qui se présente comme suit, dans le block Declarations :
<s:CallResponder id="getEmployeesByNameResult"/>
Exécutez l'application, saisissez un nom (Smith, par exemple) dans le champ de recherche et cliquez sur le bouton Search. Lorsque vous cliquez sur ce bouton, un nouvel appel de service est adressé au serveur et l'objet CallResponder est renseigné avec ces nouvelles données, ce qui entraîne la modification des données affichées dans le DataGrid. Sélectionnez un employé et assurez-vous que les détails correspondants sont affichés.
Remarque : si les détails de l'employé sélectionné ne sont pas visibles, vérifiez que vous avez bien utilisé la vue Données/Services pour définir le type de données Employee[] comme type de retour pour la fonction getEmployeesByName.
Dans cet exemple, vous appelez une méthode côté serveur pour filtrer les employés. Toutefois, puisque vous avez déjà renvoyé au client tous les enregistrements d'employé, vous auriez pu vous contenter de filtrer les enregistrements en local. Cette méthode aurait été plus efficace, car elle aurait permis d'éviter les appels inutiles au serveur.
Étape 6 : Utilisez une logique conditionnelle pour extraire tout ou partie des enregistrements.
Modifiez le gestionnaire searchBtn click afin qu'il appelle getEmployeesByName() si searchTxt.text comporte une valeur et si getEmployees() n'en possède pas.
Le gestionnaire d'événements doit se présenter comme suit :
protected function searchBtn_clickHandler(event:MouseEvent):void
{
if(searchTxt.text!=""){
getEmployeesResult.token = employeeService.getEmployeesByName(searchTxt.text);
}
else{
getEmployeesResult.token = employeeService.getEmployees();
}
currentState="Employees";
}
Exécutez l’application. Effectuez une recherche par nom et consultez les résultats. Ensuite, supprimez la chaîne recherchée et lancez une nouvelle recherche. Tous les employés doivent de nouveau être répertoriés.
Étape 7 : Recherchez des employés lors d’un événement enter.
Enregistrez le gestionnaire d’événement afin qu’il écoute l’événement enter de TextInput et définissez-le sur la fonction searchBtn_clickHandler() existante. Modifiez l’argument de l’événement event handlers de façon à remplacer le type MouseEvent par Event.
L’élément TextInput doit se présenter comme suit :
<s:TextInput id="searchTxt" includeIn="EmployeeDetails,Employees" x="494" y="100" prompt="Last Name" enter="searchBtn_clickHandler(event)"/>
L’événement enter diffuse un événement Flex et l’événement click, un objet MouseEvent. Pour que le même gestionnaire puisse gérer ces deux événements, vous devez remplacer son argument par le type de superclasse Event.
protected function searchBtn_clickHandler(event:Event):void
{
(...)
}
Étape 8 : Modifiez des styles d’objet lors d’un événement click.
Ajoutez à l’état Departments un contrôle ToggleButton, toggleBtn, avec le libellé (dans la police du code) Bigger Text (voir Figure 5). Générez pour ce contrôle un gestionnaire click qui utilise la méthode setStyle() pour augmenter le style fontSize du DataGrid.
Le gestionnaire click doit se présenter comme suit :
protected function toggleBtn_clickHandler(event:MouseEvent):void
{
deptDg.setStyle("fontSize",14);
}
La notation objet.propriété=valeur que vous utilisez pour définir des propriétés ne permet pas de changer les styles à l’exécution. Vous devez par conséquent utiliser la méthode setStyle(). Les propriétés ne sont affectées et applicables qu’à une seule instance d’objet, tandis que les styles peuvent être définis à plusieurs niveaux (intégrés, dans des feuilles de style CSS ou hérités). L’attribution d’un style à un objet peut donc avoir une incidence sur le style d’autres objets. Pour gérer la totalité des styles, vous devez utiliser une classe StyleManager.
Exécutez l’application, basculez vers l’état Departments et cliquez sur le bouton Bigger Text. Le texte du DataGrid doit apparaître en caractères plus grands.
Étape 9 : Diminuez la taille du texte lorsque le contrôle ToggleButton est désélectionné.
Dans toggleBtn_clickHandler(), ajoutez une logique conditionnelle afin de savoir si la propriété selected du contrôle toggleBtn est définie sur true. Si c’est le cas, augmentez la taille de la police et définissez son libellé label sur Smaller Text. Si ce n’est pas le cas, diminuez la taille de la police et définissez son libellé label sur Bigger Text.
Le gestionnaire d’événements doit se présenter comme suit :
protected function toggleBtn_clickHandler(event:MouseEvent):void
{
if(toggleBtn.selected){
deptDg.setStyle("fontSize",14);
toggleBtn.label="Smaller Text";
}
else{
deptDg.setStyle("fontSize",12);
toggleBtn.label="Bigger Text";
}
}
Définissez la largeur width du contrôle ToggleButton à 100 de façon à ce que celui-ci conserve la même taille en cas de changement de libellé.
<s:ToggleButton id="toggleBtn" includeIn="Departments" x="600" y="100" width="100" label="Bigger Text" click="toggleBtn_clickHandler(event)"/>
Exécutez l’application et basculez vers l’état Departments. Vérifiez que vous pouvez augmenter et diminuer la taille du texte.
Dans ce module, vous avez créé une application Flex avec plusieurs états capables de charger et d’afficher des données et d’exécuter des requêtes de base de données. Pour compléter vos connaissances, consultez les autres didacticiels de test, qui abordent des sujets tels que la mise à jour d’une base de données en fonction des données saisies par l’utilisateur et le débogage et le déploiement d’une application.
Pour en savoir plus
Pour en savoir plus sur cette rubrique, consultez les ressources suivantes :
Documentation : Utilisation de Flash Builder 4.5
Documentation : Utilisation de Flex 4.5
Guide de référence ActionScript 3
Pôle de développement Flex
+
Cette œuvre fait l’objet d’une licence Paternité - Pas d’utilisation commerciale - Partage des conditions Initiales à l’identique 3.0 Unported Creative Commons. Les autorisations qui n'entrent pas dans le cadre de cette licence, concernant les exemples de code inclus dans cette œuvre, sont disponibles auprès d'Adobe.
More Like This
- Test : Déployer une application sur un serveur web
- Test Flex : Créer une application en une heure
- Test Flex : Créer une application en une heure
- Test : Tester et déboguer le code
- Test : Déployer une application sur un serveur web
- Test : Déployer une application sur un serveur web
- Test : Déployer une application sur un serveur web
- Test Flex : Créer une application en une heure
- Test Drive: Deploy your application to a web server