Test Flex : Modifier la base de données
Configuration requise
Niveau de l'utilisateur
Toutes
<?xml version="1.0" encoding="utf-8"?>
<s:Application ...>
<fx:Script>
<![CDATA[
(...)
protected function deleteBtn_clickHandler(event:MouseEvent):void
{
deleteEmployeeResult.token = employeeService.deleteEmployee(employee.id);
}
protected function deleteEmployeeResult_resultHandler(event:ResultEvent):void
{
empDg.dataProvider.removeItemAt(empDg.selectedIndex);
currentState="Employees";
}
]]>
</fx:Script>
<fx:Declarations>
(...)
<s:CallResponder id="deleteEmployeeResult" result="deleteEmployeeResult_resultHandler(event)"/>
</fx:Declarations>
(...)
<s:Button id="deleteBtn" includeIn="EmployeeAdd,EmployeeDetails,EmployeeUpdate" x="537" y="293" label="Delete "
enabled.EmployeeAdd="false" enabled.EmployeeUpdate="true" click="deleteBtn_clickHandler(event)"/>
(...)
</s:Application>
Didacticiel
Dans ce didacticiel, vous allez supprimer des données de la base de données.
Étape 1 : Appelez l'opération de service deleteEmployee().
Dans la vue EmployeeDetails, faites glisser l'opération deleteEmployee() sur le bouton Delete (Supprimer). Dans le gestionnaire qui est alors généré, transmettez la propriété id de l'employé sélectionné.
Le gestionnaire doit se présenter comme suit :
protected function deleteBtn_clickHandler(event:MouseEvent):void
{
deleteEmployeeResult.token =
employeeService.deleteEmployee(employee.id);
}
Par ailleurs, la balise du bouton deleteBtn doit se présenter comme suit :
<s:Button includeIn="EmployeeAdd,EmployeeDetails,EmployeeUpdate"
x="537" y="293" label="Delete "
id="deleteBtn" enabled.EmployeeAdd="false"
enabled.EmployeeUpdate="true" click="deleteBtn_clickHandler(event)"/>
Étape 2 : Mettez les données locales à jour.
Ajoutez un attribut d'événement result à l'objet CallResponder deleteEmployeeResult et générez un gestionnaire d'événements. Dans le gestionnaire, attribuez la valeur Employees à la propriété currentState et utilisez la méthode removeItemAt() pour retirer l'employé du DataGrid dataProvider.
L'objet CallResponder deleteEmployeeResult doit se présenter comme suit :
<s:CallResponder id="deleteEmployeeResult" result="deleteEmployeeResult_resultHandler(event)"/>
Par ailleurs, le gestionnaire d'événements result doit se présenter comme suit :
protected function deleteEmployeeResult_resultHandler(event:ResultEvent):void
{
empDg.dataProvider.removeItemAt(empDg.selectedIndex);
currentState="Employees";
}
Lorsque vous appelez l'opération de service deleteEmployee , l'employé est supprimé de la base de données, mais pas de l'ensemble de données affiché dans le DataGrid. Vous devez le retirer des données affichées dans le DataGrid en le supprimant de l'objet dataProvider de ce composant.
La méthode removeItemAt fait partie de la classe Flex ArrayCollection. Lorsque les données relatives aux employés ont été extraites du serveur, elles ont été stockées sous forme de classe ArrayCollection d'objets Employee dans le DataGrid dataProvider.
Remarque : Le module 3 : Tester et déboguer le code explique comment déboguer l'application et examiner les valeurs et types de données des variables.
Exécutez l'application et supprimez un employé de préférence l'un des derniers ajoutés . Actualisez le navigateur et assurez-vous que l'employé que vous avez supprimé n'est plus visible dans le DataGrid.
Félicitations ! Dans ce module, vous avez effectué toutes les opérations CRUD possibles dans une application Flex : vous avez créé, lu, mis à jour et supprimé des données de la base de données.
Pour compléter vos connaissances, consultez les autres didacticiels de test, qui abordent des sujets tels que le débogage et le déploiement d'une 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
- Liaison d’opérations de service à des contrôles
- Flash Builder code generation for client applications
- Fournisseurs de données et collections
- Activation de la gestion des données
Référence linguistique
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 |