Introduction rapide Composants Flash ComboBox et DataGrid

Dans cette astuce sur les composants Flash Professional, nous allons examiner ComboBox et le DataGrid..

Bref aperçu

Dans le fichier SWF de démonstration, vous verrez un ComboBox et un DataGrid. Si vous choisissez un état dans la zone de liste déroulante, une étiquette affichera la population de cet état et chargera son indicateur. En choisissant une ligne dans le DataGrid, vous accédez au site choisi..

Étape 1: Configuration du document

Ouvrir un nouveau document Flash et définir les propriétés suivantes.

Taille du document: 550x400px
Couleur de fond: #FFFFFF (white)

Étape 2: Ajouter des composants sur la scène

Ouvrez la fenêtre des composants en allant à Fenêtre> Composants ou en appuyant sur CTRL + F7.

Faites glisser un ComboBox, un DataGrid et deux étiquettes sur la scène.

Dans le panneau Propriétés, attribuez à la ComboBox le nom d’instance "statesCombo"..

Si le panneau Propriétés ne s'affiche pas, allez à Fenêtre> Composants ou appuyez sur CTRL + F3

Réglez le X de la ComboBox sur 20,00 et son Y sur 39,00

Dans le panneau Propriétés, attribuez à DataGrid le nom d'instance "sitesDG"..

Définissez le DataGrids X sur 20,00 et son Y sur 236,00.

Dans le panneau Propriétés, donnez à la première étiquette le nom d'instance "statesLabel".

Réglez le X de l'étiquette sur 200,00 et son Y sur 39,00.

Dans le panneau Propriétés, attribuez à la deuxième étiquette le nom d'instance "sitesLabel"..

Définissez le X de cette étiquette sur 20,00 et son Y sur 209,00.

Étape 3: Importer les classes

Créez un nouveau fichier ActionScript et nommez-le Main.as

Nous allons déclarer nos composants dans Main.as, nous devons donc désactiver les instances d'étape de déclaration automatique; l'avantage de le faire est que vous obtiendrez un indice de code pour l'instance.

Aller à Fichier> Paramètres de publication

Cliquez sur "Paramètres" à côté de "Script [Actionscript 3.0]".

Décocher "Déclarer automatiquement les instances d'étape".

Dans Main.as, ouvrez la déclaration du paquet et importez les classes que nous utiliserons.

Ajouter ce qui suit à Main.as.

 package import flash.display.MovieClip; // nécessaire pour afficher les images import flash.display.Loader; // nos composants sur scène import fl.data.DataProvider; import fl.controls.ComboBox; import fl.controls.Label; import fl.controls.DataGrid; import flash.events.Event; // nécessaire pour redimensionner automatiquement les champs de texte import flash.text.TextFieldAutoSize; import flash.net.URLRequest; import flash.net.navigateToURL;

Étape 4: Configurer la classe principale

Ajoutez la déclaration de classe elle-même, étendez MovieClip et configurez notre fonction constructeur. Plus d'informations sur les classes de documents sont disponibles ici.

Ajouter ce qui suit à Main.as.

 classe publique Main étend MovieClip public var statesCombo: ComboBox; public var statesLabel: Label; public var sitesDG: DataGrid; public var sitesLabel: Label; var comboDP: DataProvider; var DataGridDP: DataProvider; var flagLoader: Loader; fonction publique Main () setupComboDP (); setupDataGridDP (); setupStatesCombo (); setupLabels (); setupSitesDataGrid ();

Étape 5: Fonctions dans le constructeur principal

Ici, nous définissons les fonctions setupComboDP, setupDataGridDP, setupStatesCombo, setupLabels et setupSitesDataGrid.

Les fournisseurs de données constituent un moyen simple de configurer les données à fournir aux composants..

Dans le setupStatesCombo, nous ajoutons également un chargeur à la scène pour charger des images des drapeaux; nous aurions pu définir une fonction distincte pour configurer le chargeur, mais ici nous le faisons simplement dans cette fonction.

Ajouter ce qui suit à Main.as.

 fonction privée setupComboDP (): void comboDP = new DataProvider (); comboDP.addItem (Label: "Alabama", population: "4661900"); comboDP.addItem (Label: "Alaska", population: "686293"); comboDP.addItem (Label: "Arizona", population: "6500180"); comboDP.addItem (Label: "Arkansas", population: "2855390"); comboDP.addItem (Label: "Californie", population: "36756666"); comboDP.addItem (Label: "Colorado", population: "4939456"); comboDP.addItem (Label: "Conneticut", population: "3501252"); comboDP.addItem (Label: "Delaware", population: "873092"); comboDP.addItem (Label: "Florida", population: "18328340"); comboDP.addItem (Label: "Géorgie", population: "9685744"); comboDP.addItem (Label: "Hawaii", population: "1288198"); comboDP.addItem (Label: "Idaho", population: "1523816"); comboDP.addItem (Label: "Illinois", population: "12901563"); comboDP.addItem (Label: "Indiana", population: "6376792"); comboDP.addItem (Label: "Iowa", population: "3002555");  fonction privée setupDataGridDP (): void DataGridDP = new DataProvider (); // ajoute des éléments aux colonnes correspondantes dans DataGrid DataGridDP.addItem (site: "Activetuts", description: "Tutoriels Flash", adresse: "http://active.tutsplus.com"; DataGridDP.addItem (site: "Nettuts", description: "Divers didacticiels de conception de sites Web", adresse: "http://net.tutsplus.com"); DataGridDP.addItem (site: "Mobiletuts", description: "Tutoriels pour appareils mobiles", adresse: "http://mobile.tutsplus.com"); DataGridDP.addItem (site: "Psdtuts", description: "Tutoriels sur Photoshop", adresse: "http://psd.tutsplus.com"); DataGridDP.addItem (site: "Vectortuts", description: "Tutoriels du programme Vector", adresse: "http://vector.tutsplus.com"); DataGridDP.addItem (site: "Aetuts", description: "Didacticiels After Effects", adresse: "http://ae.tutsplus.com"); DataGridDP.addItem (site: "Phototuts", description: "Tutoriels de photographie", adresse: "http://photo.tutsplus.com");  fonction privée setupStatesCombo (): void statesCombo.width = 150; statesCombo.prompt = "Choisissez un état"; statesCombo.dataProvider = comboDP; flagLoader = new Loader (); flagLoader.x = 200,00; flagLoader.y = 60.00; addChild (flagLoader); statesCombo.addEventListener (Event.CHANGE, loadData);  fonction publique setupLabels (): void statesLabel.text = ""; statesLabel.autoSize = statesLabel.autoSize = TextFieldAutoSize.LEFT; sitesLabel.text = "Cliquez sur la ligne pour visiter le site"; sitesLabel.autoSize = sitesLabel.autoSize = TextFieldAutoSize.LEFT;  fonction publique setupSitesDataGrid (): void // Les colonnes sont placées dans un tableau. Nous avons ici 3 colonnes. sitesDG.columns = ["site", "description", "adresse"]; sitesDG.dataProvider = DataGridDP; sitesDG.width = 500; sitesDG.addEventListener (Event.CHANGE, gotoSite);

Étape 6: Auditeurs de l'événement

Ici, nous codons nos auditeurs d'événements.

Nous obtenons le label de l'article sélectionné et montrons la population pour l'état correspondant.

Nous chargeons l'image correspondante en convertissant le Élément sélectionné (indiquer) en minuscule et y ajouter ".jpg".

Ajouter ce qui suit à Main.as.

 Fonction publique loadData (e: Event): void // Récupère le libellé selectedItems, par exemple. "Alabama" // Charge un fichier .jpg pertinent, par exemple. "alabama.jpg" nous convertissons l'élément sélectionné (état) en minuscule étatsLabel.text = e.target.selectedItem.Label + "la population de" est "+ e.target.selectedItem.population; flagLoader.load (new URLRequest ("flagsLarge /" + e.target.selectedItem.Label.toLowerCase () + ". jpg"));  fonction publique gotoSite (e: Event): void browseToURL (new URLRequest (e.target.selectedItem.address));  // Fermer la classe // Fermer le package

Conclusion

L'utilisation des composants ComboBox et DataGrid constitue un bon moyen d'afficher une liste de données parmi lesquelles choisir..

Vous remarquerez dans le panneau des paramètres des composants que vous pouvez vérifier et sélectionner certaines propriétés..

L'image ci-dessus concerne le composant ComboBox..

Les propriétés sont les suivantes pour le composant ComboBox.

fournisseur de données: le modèle de données de la liste des éléments à visualiser
éditable: une valeur booléenne qui indique si le composant ComboBox est modifiable ou en lecture seule
activée: une valeur booléenne qui indique si le composant peut accepter la saisie de l'utilisateur
rapide: l'invite pour le composant ComboBox.
restreindre: les caractères qu'un utilisateur peut entrer dans le champ de texte.
rowCount: le nombre maximum de lignes pouvant apparaître dans une liste déroulante sans barre de défilement.
visible: une valeur booléenne qui indique si l'instance du composant est visible

Les propriétés du DataGrid sont les suivantes.

permettreMultipleSélection: une valeur booléenne qui indique si plusieurs éléments de la liste peuvent être sélectionnés à la fois
éditable: une valeur booléenne qui indique si le composant DataGrid est modifiable ou en lecture seule
headerHeight: la hauteur de l'en-tête DataGrid, en pixels.
horizontalLineScrollSize: "une valeur qui décrit la quantité de contenu à faire défiler, horizontalement, quand une flèche de défilement est cliquée.
horizontalPageScrollSize: définit le nombre de pixels par lequel déplacer le curseur de défilement sur la barre de défilement horizontale lorsque la piste de la barre de défilement est enfoncée.
horizontalScrollPolicy: une valeur booléenne qui indique si la barre de défilement horizontale est toujours activée.
colonnes redimensionnables: Indique si l'utilisateur peut changer la taille des colonnes.
rowHeight: la hauteur de chaque ligne du composant DataGrid, en pixels.
showHeaders: une valeur booléenne qui indique si le composant DataGrid affiche les en-têtes de colonne.
sortableColums: Indique si l'utilisateur peut trier les éléments du fournisseur de données en cliquant sur une cellule d'en-tête de colonne.
verticalLineScrollSize: une valeur qui décrit le nombre de pixels à faire défiler verticalement lorsque l'on clique sur une flèche de défilement.
verticalPageScrollSize: le nombre de pixels par lequel déplacer le curseur de défilement sur la barre de défilement verticale lorsque la piste de la barre de défilement est enfoncée.
verticalScrollPolicy: une valeur qui indique l'état de la barre de défilement verticale

Les fichiers d’aide sont un bon endroit pour en savoir plus sur ces propriétés..

Pour en savoir plus sur les propriétés des étiquettes, veillez à consulter le conseil rapide relatif aux composants Button et Label..

Pour apprendre à charger le DataGrid à partir d'un fichier XML, consultez mon tutoriel sur Datgrid with XML..

Merci encore à http://www.state-flags-usa.com pour me permettre d'utiliser leurs images de drapeau. Et merci à vous pour la lecture - cherchez plus d'introductions de composants!.

Code