Envoi de données vers un serveur

L'objet LoadVars propose les méthodes send et sendAndLoad qui permettent d'envoyer des données vers une application serveur et de recevoir la réponse de cette application. Il permet ainsi de concevoir des animations qui exploitent des bases de données. La palette des composants de Flash offre tous les outils nécessaires pour créer des formulaires : zones de texte, listes déroulantes, boutons, ... et dans sa version professionnelle, MX 2004 propose des composants très puissants tels que le composant DataGrid, qui affiche un jeu d'enregistrements dans une grille et permet d'y naviguer.

Dans ce labo, nous nous contenterons d'envoyer les données d'un formulaire à une URL chargée de les enregistrer dans une base de données.

Essayer le formulaire

Construction du bloc de saisie

Le bloc de saisie est un symbole clip formé de trois calques contenant respectivement le fond, les textes statiques et les objets de saisie. La saisie utilise un composant ComboBox, 3 zones de texte et un groupe de deux boutons radio.

Le formulaire

La ComboBox

La ComboBox contient 3 textes (Choisissez, Madame, Monsieur) auquels correspondent les valeurs 0,1,2.

Les zones de texte

Les zones de texte sont des occurrences du symbole mc:zoneDeTexte, formé de deux calques. Un des calques contient un simple filet horizontal qui servira de base au texte entré dans une zone de texte de saisie placée sur un autre calque. La zone de texte est nommée donnée_txt

Les trois zones de texte sont nommées nom_mc, prenom_mc et email_mc.

Le groupe de boutons radio

Le groupe de boutons radio contient 2 boutons nommés oui_rb et non_rb. Les boutons renvoient respectivement O et N (Oui et Non) et doivent appartenir au même groupe (propriété Group Name).

.

Animation du formulaire

Nous allons maintenant ajouter un peu d'animation au formulaire en faisant se déplacer deux petits curseurs le long des bords haut et gauche du bloc de saisie, formulaire_mc, en fonction du déplacement de la souris. Certains diront que ce n'est pas nécessaire ou même que cela est déconseillé. Mais nous ne pouvons pas résister à la curiosité.

Création des curseurs

Dans notre exemple, le curseur est un simple trait de 16 pixels de long. Il est bien sûr permis d'exercer son imagination graphique et de créer des formes plus esthétiques.

Les deux curseurs seront importés dynamiquement depuis la bibliothèque. Il faut donc créer un symbole clip et le préparer à l'exportation (clic droit sur le symbole dans la bibliothèque -> Liaison -> Cocher Exporter pour ActionScript et Exporter dans la première image.

Importation des curseurs

Il faut maintenant créer deux occurrences dynamiques du curseur. Puisque le déplacement des curseurs est limité aux dimensions du bloc de saisie, il est normal que ce soit l'occurrence de clip qui soit chargée de l'importation. Nous devons donc placer du code dans le panneau action de l'occurrence de clip formulaire_mc. Nous n'oublions pas que le code d'une occurrence de clip doit être placé dans un gestionnaire d'événement on() ou onClipVent(). Comme l'opération de chargement ne doit se produire qu'une seule fois, nous choisissons l'événement load

Gestionnaire onClipEvent

La méthode attachMovie() crée une occurrence dynamique d'un symbole clip. Il faut simplement se souvenir de donner à chaque occurrence un nom et un niveau d'empilement différents.

Contrôle du déplacement des curseurs

Toutes les occurrences de clip "écoutent" l'événement mouseMove. Pour commander le déplacement d'un curseur il suffit donc de créer un gestionnaire d'événement adéquat. Seulement voilà, il n'est pas possible d'utiliser onClipEvent(onMouseMove) puisqu'il s'agit d'occurrences dynamiques qui n'ont pas de panneau Actions. Il faut donc utiliser la technique de la fonction de rappel affectée à l'événement de MovieClip onMouseMove. Notez que nous aurions pu utiliser l'événement onEnterFrame

Le code ci-dessous est assez clair si l'on comprend que this dans les fonctions de rappel fait référence à l'occurrence du curseur, alors que this aux la lignes 10 et 11 fait référence à formulaire_mc.

Le bouton Envoyer et la fonction de rappel

Le bouton Envoyer est un composant placé en dehors du formulaire et on utilise une fonction de rappel comme gestionnaire d'événement. Cette fonction est placée dans la première image clé de l'animation. Si le bouton fait partie du formulaire, la fonction de rappel doit être placée dans une image-clé du scénario du formulaire.

La fonction commence par créer un nouvel objet LoadVars nommé infos (l. 3). Elle récupère ensuite les valeurs des différents éléments dans le bloc de saisie et les affecte à des variables créées dans l'objet LoadVars. Dans le cas présent, l'objet LoadVars s'appelle infos (cf. ligne 3) et l'on crée les variables titre, nom, prenom, email, fumeur aux lignes 4-8

.

Le fonctionnement de la méthode send (cf. ligne 10) est simple : elle envoie à une URL toutes les variables contenues dans l'objet LoadVars. Les données peuvent être transmises selon deux méthodes : GET et POST. Pour rappel, la méthode GET concatène les données à l'URL, ce qui les rend visibles dans la barre d'adresse du navigateur. La méthode POST enferme les données dans l'en-tête de la requête où elles restent invisibles.