Introduzione rapida componenti ComboBox e DataGrid Flash

In questo suggerimento rapido sui componenti di Flash Professional daremo un'occhiata al ComboBox e al DataGrid.

Breve panoramica

Nel demo SWF vedrai un ComboBox e un DataGrid. La scelta di uno stato da ComboBox farà in modo che un'etichetta visualizzi la popolazione di tale stato e carichi il flag dello stato. Scegliendo una riga in DataGrid si navigherà sul sito prescelto.

Passaggio 1: impostazione del documento

Aprire un nuovo documento Flash e impostare le seguenti proprietà.

Dimensioni documento: 550 x 400 px
Colore di sfondo: #FFFFFF (bianco)

Passaggio 2: aggiungere componenti allo stage

Apri la finestra dei componenti andando a Finestra> Componenti o premendo CTRL + F7.

Trascina un ComboBox, un DataGrid e due etichette sullo stage.

Nel pannello Proprietà date al ComboBox il nome dell'istanza "statesCombo".

Se il pannello Proprietà non viene visualizzato vai a Finestra> Componenti o premere CTRL + F3

Imposta l'X del ComboBox a 20,00 e il suo Y a 39,00

Nel pannello Proprietà date a DataGrid il nome dell'istanza "sitesDG".

Impostare DataGrids X su 20.00 e su Y su 236.00.

Nel pannello Proprietà, assegna alla prima etichetta il nome dell'istanza "statesLabel".

Imposta la X dell'etichetta su 200.00 e la sua Y su 39.00.

Nel pannello Proprietà assegna alla seconda etichetta il nome dell'istanza "sitesLabel".

Imposta l'X di questa etichetta a 20,00 e la sua Y a 209,00.

Passaggio 3: importazione delle classi

Creare un nuovo file ActionScript e assegnargli il nome Main.as

Dichiareremo i nostri componenti in Main.as quindi abbiamo bisogno di disattivare le istanze degli stage dichiarativi; il vantaggio di farlo è che otterrai l'indicazione del codice per l'istanza.

Vai a File> Impostazioni pubblicazione

Fai clic su "Impostazioni" accanto a "Script [Actionscript 3.0]".

Deseleziona "Dichiara automaticamente le istanze di stage".

In Main.as apri la dichiarazione del pacchetto e importa le classi che useremo

Aggiungi quanto segue a Main.as.

 package import flash.display.MovieClip; // necessario per visualizzare le immagini import flash.display.Loader; // i nostri componenti sul palco importano fl.data.DataProvider; importare fl.controls.ComboBox; importare fl.controls.Label; importare fl.controls.DataGrid; import flash.events.Event; // necessario per autosize campi di testo import flash.text.TextFieldAutoSize; import flash.net.URLRequest; import flash.net.navigateToURL;

Passaggio 4: impostare la classe principale

Aggiungi la dichiarazione di classe stessa, estendi MovieClip e imposta la nostra funzione di costruzione. Maggiori informazioni sulle classi di documenti sono disponibili qui.

Aggiungi quanto segue a Main.as.

 public class Main estende 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; funzione pubblica Main () setupComboDP (); setupDataGridDP (); setupStatesCombo (); setupLabels (); setupSitesDataGrid ();

Passaggio 5: funzioni nel costruttore principale

Qui definiamo le funzioni setupComboDP, setupDataGridDP, setupStatesCombo, setupLabels e setupSitesDataGrid.

I DataProvider forniscono un modo semplice per impostare i dati da fornire ai componenti.

Nel setupStatesCombo aggiungiamo anche un caricatore sul palco per caricare le immagini delle bandiere; avremmo potuto definire una funzione separata per impostare il caricatore, ma qui lo facciamo semplicemente all'interno di questa funzione.

Aggiungi quanto segue a Main.as.

 setup di funzione privataComboDP (): void comboDP = new DataProvider (); comboDP.addItem (Etichetta: "Alabama", popolazione: "4661900"); comboDP.addItem (Etichetta: "Alaska", popolazione: "686293"); comboDP.addItem (Etichetta: "Arizona", popolazione: "6500180"); comboDP.addItem (Etichetta: "Arkansas", popolazione: "2855390"); comboDP.addItem (Etichetta: "California", popolazione: "36756666"); comboDP.addItem (Etichetta: "Colorado", popolazione: "4939456"); comboDP.addItem (Etichetta: "Conneticut", popolazione: "3501252"); comboDP.addItem (Etichetta: "Delaware", popolazione: "873092"); comboDP.addItem (Etichetta: "Florida", popolazione: "18328340"); comboDP.addItem (Etichetta: "Georgia", popolazione: "9685744"); comboDP.addItem (Etichetta: "Hawaii", popolazione: "1288198"); comboDP.addItem (Etichetta: "Idaho", popolazione: "1523816"); comboDP.addItem (Etichetta: "Illinois", popolazione: "12901563"); comboDP.addItem (Etichetta: "Indiana", popolazione: "6376792"); comboDP.addItem (Etichetta: "Iowa", popolazione: "3002555");  funzione privata setupDataGridDP (): void DataGridDP = new DataProvider (); // aggiunge elementi alle colonne corrispondenti in DataGrid DataGridDP.addItem (site: "Activetuts", descrizione: "Flash Tutorials", indirizzo: "http://active.tutsplus.com"); DataGridDP.addItem (site: "Netsuts", descrizione: "Vari tutorial Web Design", indirizzo: "http://net.tutsplus.com"); DataGridDP.addItem (site: "Mobiletuts", descrizione: "Tutorial per dispositivi mobili", indirizzo: "http://mobile.tutsplus.com"); DataGridDP.addItem (site: "Psdtuts", descrizione: "Tutorial PhotoShop", indirizzo: "http://psd.tutsplus.com"); DataGridDP.addItem (site: "Vectortuts", descrizione: "Tutorial del programma vettoriale", indirizzo: "http://vector.tutsplus.com"); DataGridDP.addItem (site: "Aetuts", descrizione: "After Effects Tutorials", indirizzo: "http://ae.tutsplus.com"); DataGridDP.addItem (site: "Phototuts", descrizione: "Tutorial fotografici", indirizzo: "http://photo.tutsplus.com");  funzione privata setupStatesCombo (): void statesCombo.width = 150; statesCombo.prompt = "Scegli uno stato"; statesCombo.dataProvider = comboDP; flagLoader = new Loader (); flagLoader.x = 200,00; flagLoader.y = 60,00; addChild (flagLoader); statesCombo.addEventListener (Event.CHANGE, loadData);  public function setupLabels (): void statesLabel.text = ""; statesLabel.autoSize = statesLabel.autoSize = TextFieldAutoSize.LEFT; sitesLabel.text = "Clicca sulla riga per visitare il sito"; sitesLabel.autoSize = sitesLabel.autoSize = TextFieldAutoSize.LEFT;  public function setupSitesDataGrid (): void // Le colonne sono messe in un array qui abbiamo 3 colonne sitesDG.columns = ["site", "description", "address"]; sitesDG.dataProvider = DataGridDP; sitesDG.width = 500; sitesDG.addEventListener (Event.CHANGE, gotoSite);

Passaggio 6: ascoltatori di eventi

Qui codifichiamo i nostri ascoltatori di eventi.

Otteniamo l'etichetta dell'elemento selezionato e mostriamo la popolazione per lo stato corrispondente.

Carichiamo l'immagine corrispondente convertendo il selectedItem (stato) in minuscolo e aggiungendo ".jpg" ad esso.

Aggiungi quanto segue a Main.as.

 funzione pubblica loadData (e: Event): void // Ottieni l'etichetta SelectedItems ad es. "Alabama" // Carica un jpg pertinente, ad es. "alabama.jpg" convertiamo l'elemento selezionato (stato) in stati minuscoliLabel.text = e.target.selectedItem.Label + "La popolazione è" + e.target.selectedItem.population; flagLoader.load (new URLRequest ("flagsLarge /" + e.target.selectedItem.Label.toLowerCase () + ". jpg"));  public function gotoSite (e: Event): void navigateToURL (new URLRequest (e.target.selectedItem.address));  // Chiudi la classe // Chiudi il pacchetto

Conclusione

Utilizzo dei componenti ComboBox e DataGrid sono un buon modo per visualizzare un elenco di dati tra cui scegliere.

Noterai nel pannello Parametri componenti dei componenti che puoi controllare e selezionare alcune proprietà.

L'immagine sopra è per il componente ComboBox.

Le proprietà sono le seguenti per il componente ComboBox.

dataProvider: il modello dati dell'elenco di elementi da visualizzare
modificabile: un valore booleano che indica se il componente ComboBox è modificabile o di sola lettura
abilitato: un valore booleano che indica se il componente può accettare l'input dell'utente
richiesta: il prompt per il componente ComboBox.
limitare: i caratteri che un utente può inserire nel campo di testo.
rowCount: il numero massimo di righe che possono essere visualizzate in un elenco a discesa che non dispone di una barra di scorrimento.
visibile: un valore booleano che indica se l'istanza del componente è visibile

Le proprietà per DataGrid sono le seguenti.

allowMultipleSelection: un valore booleano che indica se è possibile selezionare più di una voce di elenco alla volta
modificabile: un valore booleano che indica se il componente DataGrid è modificabile o di sola lettura
headerHeight: l'altezza dell'intestazione DataGrid, in pixel.
horizontalLineScrollSize: "un valore che descrive la quantità di contenuto da scorrere, orizzontalmente, quando si fa clic su una freccia di scorrimento.
horizontalPageScrollSize: imposta il conteggio dei pixel con cui spostare il pollice di scorrimento sulla barra di scorrimento orizzontale quando viene premuta la traccia della barra di scorrimento.
horizontalScrollPolicy: un valore booleano che indica se la barra di scorrimento orizzontale è sempre attiva.
resizableColumns: Indica se l'utente può modificare la dimensione delle colonne.
altezza della riga: l'altezza di ogni riga nel componente DataGrid, in pixel.
showHeaders: un valore booleano che indica se il componente DataGrid mostra intestazioni di colonna.
sortableColums: Indica se l'utente può ordinare gli elementi nel fornitore di dati facendo clic sulla cella di intestazione di una colonna.
verticalLineScrollSize: un valore che descrive il numero di pixel da scorrere verticalmente quando si fa clic su una freccia di scorrimento.
verticalPageScrollSize: il conteggio dei pixel con cui spostare il pollice di scorrimento sulla barra di scorrimento verticale quando si preme la traccia della barra di scorrimento.
verticalScrollPolicy: un valore che indica lo stato della barra di scorrimento verticale

I file di aiuto sono un ottimo posto per saperne di più su queste proprietà.

Per ulteriori informazioni sulle proprietà per le etichette, assicurati di controllare il suggerimento rapido sui componenti Button ed Label.

Per sapere come caricare il DataGrid da un file xml, consulta il mio tutorial su Datgrid con XML.

Grazie ancora a http://www.state-flags-usa.com per avermi permesso di usare le loro immagini della bandiera. E grazie a te per la lettura - cerca altre introduzioni di componenti!.

Codice