Utilisation des composants > Création de formulaires avec les composants > Gestion et contrôle des données

Gestion et contrôle des données

Les données entrées sur chaque page d'un formulaire qui en comprend plusieurs peuvent influer sur les éléments ou les pages affichés, ainsi que sur le mode d'affichage des pages. Pour afficher les données entrées par l'utilisateur sur les pages du formulaire, vous devez créer des fonctions pour chaque page afin de charger ces données et d'actualiser l'affichage des pages.

Exemple de code de FormExample.fla

Dans le fichier FormExample.fla, les données stockées dans les propriétés de l'objet loginData sont gérées par les fonctions getDataFromUI et updateUI définies pour chaque page du formulaire dans l'image 1 du calque Actions. Les fonctions getDataFromUI et updateUI pour chaque page du formulaire sont définies dans la première image du calque Actions, ainsi qu'avec l'objet loginData, afin de conserver toutes les actions du formulaire ensemble. Le fichier FormExample.fla répartit l'obtention et la définition des données en deux fonctions (getDataFromUI et updateUI) afin de mettre clairement en évidence le code requis. Toutefois, sur un véritable formulaire, ces deux fonctions peuvent être combinées afin de disposer d'une fonction pour chaque page.

La fonction updateUI pour chaque page du formulaire est appelée depuis la première image de la page de formulaire dans le calque Frame Actions, comme le montre le code suivant.

Dans le calque Frame Actions, sur la première image de la page 1 du formulaire :

stop();
updateUIFromDataPg1();

Dans le calque Frame Actions, sur la première image de la page 2 du formulaire :

stop();
updateUIFromDataPg2();

Dans le calque Frame Actions, sur la première image de la page 3 du formulaire :

stop();
updateUIFromDataPg3();

// récupérer les données des éléments d'interface de la page 1

function getDataFromUIPg1()
{
	loginData.nameField = name_txt.text;
	loginData.gender = genderGroup.getValue().getLabel();
	loginData.cityIndex = city_mc.getSelectedIndex();
}

// récupérer les données des éléments d'interface de la page 2

function getDataFromUIPg2()
{
	loginData.junkMail = junkCheck_mc.getValue();
	loginData.interestIndex = interest_mc.getSelectedIndex();
}

// récupérer les données des éléments d'interface de la page 3

function getDataFromUIPg3()
{
// la page 3 n'affiche que des données et il n'y a donc rien à récupérer
}

// définir l'état des éléments d'interface de la page 1 avec les valeurs de l'objet loginData

function updateUIFromDataPg1()
{
	name_txt.text = loginData.nameField;
	for (var i=0; i<cityTable.length; i++) {
	city_mc.addItem(cityTable[i]);
}
	city_mc.setSelectedIndex(loginData.stateIndex);
	genderGroup.setValue(loginData.gender + "_mc");
}

// définir l'état des éléments d'interface de la page 2 avec les valeurs de l'objet loginData

function updateUIFromDataPg2()
{
	for (var i=0; i<interestTable.length; i++) {
	interest_mc.addItem(interestTable[i]);
}
	interest_mc.setSelectedIndex(loginData.interestIndex);
	junkCheck_mc.setValue(loginData.junkMail);
	onChange();
}

// afficher les résultats de la page 3 avec les valeurs de l'objet loginData

function updateUIFromDataPg3()
{
	resultsName_txt.text = loginData.nameField;
	resultsGender_txt.text = loginData.gender;
	resultsState_txt.text = stateTable[loginData.stateIndex];
	resultsInterests_txt.text = interestTable[loginData.interestIndex];
}

Vous pouvez configurer la navigation sur le formulaire lorsque vous avez défini la façon de gérer vos données.