L'objectif de ce didacticiel est de créer une liste de contacts qui se charge de manière dynamique à partir d'un fichier XML externe. Lorsque l'utilisateur sélectionne un autre contact, les données seront automatiquement mises à jour pour s'afficher correctement. Nous appliquerons également quelques modifications de base de la feuille de style aux résultats et donnerons au projet une touche plus personnalisée..
Aperçu du résultat final
Jetons un coup d'œil à une capture d'écran du résultat final sur lequel nous allons travailler:
Remarque: Comme vous le constaterez rapidement, je n’utilise pas le SDK pour créer des fichiers Flex 3. Bien que ce didacticiel soit enseigné du point de vue de Flex 3 Builder, le code sous-jacent est le même. Utilisateurs du SDK, vous devrez simplement remplacer les étapes au besoin. Je n'utiliserai pas la vue de conception dans ce tutoriel, vous avez donc de la chance.
Étape 1 - Gratuit pour l'éducation
Flex est une excellente plateforme de développement. C'est mieux lorsque vous avez l'intégralité de Flex 3 Builder. Heureusement pour les étudiants et les professeurs éligibles, Adobe vous offre gratuitement une licence complète Education Flex 3 Builder.
Considérez ceci comme un rappel amical. Si quelqu'un ayant des liens avec l'éducation n'a pas encore profité de l'accord «Free Flex 3 for Education», allez-y et faites-le maintenant. Ça va vous aider énormément.
Maintenant que nous en avons terminé avec l'évangélisation du "produit Adobe gratuit", construisons une application Flex!
Étape 2 - Configurer les fichiers de projet
Commencez par créer un nouveau projet Flex pour le Web. Nommez-le comme vous le souhaitez, cette étape n'aura pas d'impact sur les résultats.
Dans le projet, démarrez une nouvelle application MXML (Fichier> Nouveau> Application MXML). Nommez le fichier "contactManager".
Pour des raisons de mise en page, je recommande de changer la mise en page par défaut en "verticale". Cela centrera tous les composants enfants immédiats sur la page, ce qui fonctionnera beaucoup mieux avec notre objectif final.
Étape 3 - Télécharger des images
Chaque contact affichera une image de profil une fois sélectionné. Pour cet exemple, nous utiliserons Bill Gates et Barack Obama comme contacts. La photo de presse de Steve Jobs était trop terrible
J'ai recadré leurs photos de presse (récupérées ici et ici) à des dimensions plus réduites pour ce tutoriel. Prenez les versions éditées ici, et nous allons passer au fichier XML.
Étape 4 - Présentation du fichier XML
Toutes les informations affichées seront extraites d'un fichier XML externe. La structure de base est la suivante:
Comme vous pouvez le constater, il existe quatre champs principaux pour chaque entrée. Le nom du contact, sa position, son email et son URL vers une image de profil.
Téléchargez le fichier et nous serons prêts à organiser tous les fichiers que vous avez téléchargés dans des dossiers d'actifs pour Flex..
Étape 5 - Organiser la structure du fichier de projet
Assurez-vous que vos fichiers de projet sont disposés comme dans l'image ci-dessous. Vous devrez créer le dossier "assets" pour user-data.xml et un dossier "images" pour les photos de profil (Fichier> Nouveau> Dossier avec le dossier "src" sélectionné)..
Importez les fichiers téléchargés aux étapes 4 et 5 dans les dossiers correspondants. Le dossier cible étant sélectionné, sélectionnez Fichier> Importer> Autre et utilisez l'invite pour sélectionner un fichier. Rincez et répétez l'opération jusqu'à ce que les trois soient en place..
Étape 6 - Demande de fichier XML
Dans Flex MXML, les fichiers externes sont le plus souvent chargés avec la balise HTTPService. Pensez-y comme si vous prépariez une enveloppe à poster. Il contient une destination cible et inclut des instructions pour savoir quoi faire avec le contenu..
Créez une balise HTTPService pour demander notre fichier XML en entrant la balise suivante immédiatement sous la balise d'ouverture.
Ce service HTTPS a un identifiant "userData" et charge notre fichier XML de données utilisateur. Les données résultantes sont au format E4X et transmises à la fonction contentHandler que nous allons créer prochainement pour le traitement..
Prenez note cependant, parce que faire simplement une balise HTTPService n'envoie pas la requête. Tout comme une enveloppe a besoin d’une boîte aux lettres pour voyager, la demande HTTPService doit être effectivement envoyée..
Étape 7 - Envoyer une demande lors de la créationComplete
Pour que cette demande soit envoyée, nous devons l'activer une fois le projet chargé. Nous faisons cela en utilisant l'événement creationComplete dans la balise d'application.
Bien que nous puissions simplement insérer directement la méthode userData.send () ici, nous allons utiliser une fonction plus extensible, init (), pour envoyer la demande à la place. Cette fonction sera responsable des actions déclenchées une fois le projet Flex chargé et ouvre la possibilité à plusieurs événements de chargement. Nous allons compléter le contenu de cette fonction lors d'une étape ultérieure.
Étape 8 - Configuration pour Actionscript
Le script actions de ce projet sera responsable de la gestion du fichier XML chargé, du stockage des filtres et de la mise à jour des composants selon les besoins. Ceci sera accompli avec trois fonctions distinctes.
Rappelez-vous que Flex est un framework pour actionscript, un peu comme jQuery est à JavaScript. Cela signifie que même si les balises Flex sont conçues pour rationaliser les utilisations courantes des scripts actionscript, elles peuvent également gérer les scripts directs. Pour cela, nous aurons besoin de désigner un espace pour le script.
Et c'est là que la balise Script entre en jeu. Insérez la balise directement sous la balise Application d'ouverture. C'est ici que tous les actionscript seront écrits; gardé séparé du MXML ci-dessous. Si vous êtes dans le générateur, la balise ajoutera automatiquement le balisage CDATA:
Nous allons commencer par importer le package ResultEvent requis pour la balise HTTPService. (N'oubliez pas que tout le code de cette section se situe entre les balises de script mentionnées ci-dessus)
importer mx.rpc.events.ResultEvent;
Étape 9 - Déclarer des variables
Afin de construire des filtres XML, nous devrons définir des variables. Les deux doivent être définis comme pouvant être liés, ce qui nous permet de lier directement le contenu à un composant Flex (par exemple, une étiquette)..
// Contient le contenu complet d'un fichier XML brut [Bindable] private var userList: XMLList; // Modification des données XML du contact sélectionné [Bindable] private var selectedData: XML;
La liste XML userList contiendra les résultats au format E4X du fichier XML chargé. Nous allons l'utiliser pour remplir le composant de grille de données dans une étape ultérieure.
La variable XML selectedData contiendra le résultat actuellement sélectionné dans le composant de grille de données. Il sera chargé de renseigner les champs d’information et l’image de profil..
Étape 10 - Construire la fonction init
La fonction init () que nous avons référencée à la dernière étape fera deux choses.
Envoyer la demande pour le fichier XML de données utilisateur.
Définir le libellé du nom (à créer) sur un texte par défaut "Aucun contact sélectionné"
Le code ci-dessous accomplira les deux. Ignorez les avertissements concernant les composants inexistants pour le moment, nous allons créer l'étiquette référencée à l'étape suivante..
La fonction suivante est le contentHandler appelé par l'événement result de la balise HTTPService. Cette fonction prend l'événement passé, puis attribue à la variable de liste XML userList les données XML résultantes filtrées au niveau "utilisateur"..
fonction privée contentHandler (evt: ResultEvent): void userList = evt.result.user;
Étape 12 - Construire la fonction showProfile
La dernière fonction (showProfile) est activée lorsqu'un nom est sélectionné dans la liste de contacts. Il affecte simplement le contenu de l'entrée XML actuellement sélectionnée à la variable selectedData. C'est la variable qui sera liée aux étiquettes et aux conteneurs d'images pour les mises à jour en direct..
fonction privée showProfile (evt: Event): void // Affectation de données à l'élément actuellement sélectionné selectedData = contactList.selectedItem au format XML;
Maintenant que le script ActionScript est en place, nous sommes prêts à élaborer le design.
Étape 13 - Bloquer la mise en page
La liste de contacts sera composée d’une série de conteneurs HBox et VBox (horizontaux et verticaux respectivement). Le bloc ci-dessous illustre la structure de la conception finale.
Étape 14 - Créer des composants de mise en page
Tout le contenu que nous avons chargé aura besoin d'une maison. C'est là que les composants de la présentation entrent en jeu. Collez la structure suivante sous la balise HTTPService..
MXML a le grand avantage d’être relativement simple à lire. La grille de données est le seul composant susceptible de faire fuir quelqu'un pour la première fois avec Flex. La grille de données est essentiellement une table. La balise columns entre la balise DataGrid spécifie le texte de l'en-tête et les champs des colonnes.
Ce sont les composants qui seront utilisés pour charger les données du fichier XML. Dans l'étape suivante, nous allons renseigner chacun avec les données pertinentes.
Étape 15 - Remplir les composants
Corriger les données des entrées XML est étonnamment simple. Copiez les modifications de code suivantes, puis rendez-vous ci-dessous pour un résumé.
Voici un aperçu de ce qui se passe:
La grille de données est remplie en liant la liste XML userList à la liste. La colonne charge le champ de données "nom" de chaque entrée.
Lorsque l'élément sélectionné dans la grille de données change, il appelle la fonction showProfile pour mettre à jour le fichier XML selectedData..
Les étiquettes sont chacune configurées pour afficher un champ de l'entrée sélectionnée.
Dans la colonne de droite, la source des conteneurs d’images est chargée à partir de l’URL du fichier XML..
Étape 16 - Changer les couleurs de fond
Si vous travaillez avec Flex pendant un certain temps, il est facile de tomber malade du jeu de couleurs par défaut. Faisons quelques solutions rapides pour pimenter les choses.
Nous allons commencer par changer l’arrière-plan en un dégradé de noirs. Mettez à jour votre balise d'application d'ouverture pour inclure les propriétés de dégradé ci-dessous:
L'inconvénient d'un fond noir est qu'aucun texte par défaut ne sera visible. Nous allons résoudre ce problème en utilisant le CSS de Flex pour changer les couleurs de police.
Étape 17 - Style des résultats
Saviez-vous que Flash et Flex prennent en charge leur propre marque de CSS? Nous allons utiliser un formatage de base pour améliorer la lisibilité de cette application. Commencez par insérer une balise de style directement sous la balise Application d'ouverture..
/ * CSS va ici * /
Le CSS proposé dans Flex est limité, mais nous pouvons toujours apporter des modifications visuelles efficaces. Dans le CSS ci-dessous, j'ai changé toutes les étiquettes en une police blanche pour plus de lisibilité. La HBox contenant tout a été dotée d’un fond noir et d’un rembourrage de 20 pixels de chaque côté pour l’espacement..
* Notez que vous devez mettre les noms de composant en majuscule dans le CSS pour qu'il soit correctement référencé..
Étape 18 - Code source du projet
Si vous n'êtes pas encore tombé amoureux de Flex, cette nouvelle fonctionnalité peut vous pousser au-delà de vos limites. Flex rend le partage du code source d'un projet non seulement facile, mais aussi vraiment beau. Regardez les résultats dans un design étonnamment convivial..
Étape 19 - Conclusion et autres applications
Vous devriez maintenant avoir une liste de contacts pilotée par XML dans Flex. Faites un essai et assurez-vous que tout est en ordre de marche.
Flex, comme son nom l'indique, est incroyablement flexible. Cela signifie que vous pouvez prendre le cadre du tutoriel ci-dessus et continuer à l'ajouter. Le composant de la grille de données se développera si nécessaire.
Flex a une grande variété d'effets de transition, tels que le flou et le redimensionnement, qui peuvent être appliqués à chaque changement. Les résultats de ce didacticiel peuvent être un excellent endroit pour commencer à expérimenter avec plus d’options visuelles telles que celles-ci..
Allez-y et expérimentez! Si vous proposez des ajouts intéressants, assurez-vous de les partager avec nous dans les commentaires..
Share
Accentsconagua
