Introducere rapidă componentele Flash ComboBox și DataGrid

În acest sfat rapid cu privire la componentele profesionale Flash vom analiza ComboBox și DataGrid.

Prezentare scurta

În SWF demo veți vedea un ComboBox și un DataGrid. Alegerea unei stări de la ComboBox va determina o etichetă să afișeze populația statului și să încarce steagul statului. Alegerea unui rând în DataGrid va naviga la site-ul ales.

Pasul 1: Configurarea documentului

Deschideți un nou document Flash și setați următoarele proprietăți.

Dimensiune document: 550x400px
Culoare fundal: #FFFFFF (alb)

Pasul 2: Adăugați componente la scenă

Deschideți fereastra componentelor accesând Fereastră> Componente sau apăsând CTRL + F7.

Glisați un ComboBox, un DataGrid și două etichete pe scenă.

În panoul Proprietăți dă ComboBox numele de instanță "statesCombo".

Dacă nu apare panoul Proprietăți Fereastră> Componente sau apăsați CTRL + F3

Setați ComboBox-ul la 20.00 și Y la 39.00

În panoul Properties, dați DataGrid numele instanței "sitesDG".

Setați DataGrids X la 20.00 și Y la 236.00.

În panoul Proprietăți dați primei etichete numele de instanță "stateLabel".

Setați eticheta X la 200.00 și Y la 39.00.

În panoul Proprietăți, dați celei de-a doua etichete numele de instanță "sitesLabel".

Setați această etichetă X la 20.00 și Y la 209.00.

Pasul 3: Importați clasele

Creați un nou fișier ActionScript și dați-i numele Main.as

Vom declara componentele noastre în Main.as, astfel încât trebuie să dezactivați instanțele instanței de declarare automată; avantajul de a face acest lucru este că veți primi cod de hinting pentru instanță.

Mergi la Fișier> Publicați setările

Faceți clic pe "Setări" de lângă "Script [Actionscript 3.0]".

Debifați "Declare automat instanțe de scenă".

În Main.as deschideți declarația pachetului și importați clasele pe care le vom folosi

Adăugați următoarele la Main.as.

 pachet import flash.display.MovieClip; // necesar pentru afișarea imaginilor import flash.display.Loader; // componentele noastre de import pe platforma fl.data.DataProvider; import fl.controls.ComboBox; import fl.controls.Label; import fl.controls.DataGrid; importul flash.events.Event; // necesar pentru a autosize textfields import flash.text.TextFieldAutoSize; import flash.net.URLRequest; import flash.net.navigateToURL;

Pasul 4: Configurați clasa principală

Adăugați declarația de clasă însăși, extindeți MovieClip și configurați funcția constructorului nostru. Mai multe informații despre clasele de documente sunt disponibile aici.

Adăugați următoarele la Main.as.

 clasa publică Main extinde MovieClip public state statesCombo: ComboBox; public var statesLabel: Etichetă; public var site-uriDG: DataGrid; public var sitesLabel: etichetă; var comboDP: DataProvider; var DataGridDP: DataProvider; var flagLoader: încărcător; funcția publică principală () setupComboDP (); setupDataGridDP (); setupStatesCombo (); setupLabels (); setupSitesDataGrid ();

Pasul 5: Funcții în constructorul principal

Aici definim funcțiile setupComboDP, setupDataGridDP, setupStatesCombo, setupLabels și setSitesDataGrid.

Furnizorii de date furnizează o modalitate ușoară de configurare a datelor care trebuie furnizate componentelor.

În setupStatesCombo adăugăm, de asemenea, un încărcător în stadiu pentru a încărca imagini ale steagurilor; am fi putut defini o funcție separată pentru a configura încărcătorul, dar aici o facem doar în interiorul acestei funcții.

Adăugați următoarele la Main.as.

 setarea funcției privateComboDP (): void comboDP = new DataProvider (); comboDP.addItem (Etichetă: "Alabama", populație: "4661900"); comboDP.addItem (Etichetă: "Alaska", populație: "686293"); comboDP.addItem (Label: "Arizona", populație: "6500180"); comboDP.addItem (Label: "Arkansas", populație: "2855390"); comboDP.addItem (Label: "California", populație: "36756666"); comboDP.addItem (Etichetă: "Colorado", populație: "4939456"); comboDP.addItem (Label: "Conneticut", populație: "3501252"); comboDP.addItem (Etichetă: "Delaware", populație: "873092"); comboDP.addItem (Etichetă: "Florida", populație: "18328340"); comboDP.addItem (Etichetă: "Georgia", populație: "9685744"); comboDP.addItem (Etichetă: "Hawaii", populație: "1288198"); comboDP.addItem (Etichetă: "Idaho", populație: "1523816"); comboDP.addItem (Label: "Illinois", populație: "12901563"); comboDP.addItem (Etichetă: "Indiana", populație: "6376792"); comboDP.addItem (Etichetă: "Iowa", populație: "3002555");  funcția privată setupDataGridDP (): void DataGridDP = new DataProvider (); // adaugă elemente la coloanele corespunzătoare din DataGrid DataGridDP.addItem (site: "Activetuts", descriere: "Flash Tutorials", adresa: "http://active.tutsplus.com"); DataGridDP.addItem (site: "Nettuts", descriere: "Diverse Tutoriale Web Design", adresa: "http://net.tutsplus.com"); DataGridDP.addItem (site: "Mobiletuts", descriere: "Tutoriale dispozitiv mobil", adresa: "http://mobile.tutsplus.com"); DataGridDP.addItem (site: "Psdtuts", descriere: "Tutorialele PhotoShop", adresa: "http://psd.tutsplus.com"); DataGridDP.addItem (site: "Vectortuts", descriere: "Tutoriale de programe vectoriale", adresa: "http://vector.tutsplus.com"); DataGridDP.addItem (site: "Aetuts", descriere: "After Effects Tutorials", adresa: "http://ae.tutsplus.com"); DataGridDP.addItem (site: "Phototuts", descriere: "Tutoriale de fotografie", adresa: "http://photo.tutsplus.com");  funcția privată setupStatesCombo (): void statesCombo.width = 150; statesCombo.prompt = "Alegeți un stat"; statesCombo.dataProvider = comboDP; flagLoader = încărcător nou (); flagLoader.x = 200,00; flagLoader.y = 60.00; addChild (flagLoader); statesCombo.addEventListener (Event.CHANGE, loadData);  funcția publică funcțiaLabels (): void statesLabel.text = ""; statesLabel.autoSize = statesLabel.autoSize = TextFieldAutoSize.LEFT; sitesLabel.text = "Faceți clic pe rând pentru a vizita site-ul"; sitesLabel.autoSize = sitesLabel.autoSize = TextFieldAutoSize.LEFT;  funcția publică setSitesDataGrid (): void // Columurile sunt plasate într-o matrice aici avem 3 coloane sitesDG.columns = ["site", "description", "address"]; siteDG.dataProvider = DataGridDP; site width = 500; sitesDG.addEventListener (Event.CHANGE, gotoSite);

Pasul 6: ascultători de evenimente

Aici codificăm Ascultătorii evenimentului.

Obținerea etichetei elementului selectat și afișarea populației pentru starea corespunzătoare.

Se încarcă imaginea corespunzătoare prin conversia selectedItem (stat) la litere mici și adăugând ".jpg" la acesta.

Adăugați următoarele la Main.as.

 funcția publică funcțiaData (e: Eveniment): void // Obțineți eticheta selectatăItems ex. "Alabama" / / Încărcați un .jpg de exemplu. "alabama.jpg" convertim elementul selectat (stat) în stări miciLabel.text = e.target.selectedItem.Label + "populația este" + e.target.selectedItem.population; flagLoader.load (noua adresă URLRequest ("flagsLarge /" + e.target.selectedItem.Label.toLowerCase () + ". jpg"));  funcția publică gotoSite (e: Event): void navigateToURL (nou URLRequest (e.target.selectedItem.address));  // Închideți clasa // Închideți pachetul

Concluzie

Utilizarea componentelor ComboBox și DataGrid reprezintă o modalitate bună de a afișa o listă de date de selectat.

Veți observa în panoul parametrilor componentei componentelor pe care le puteți verifica și selecta anumite proprietăți.

Imaginea de mai sus este pentru componenta ComboBox.

Proprietățile sunt după cum urmează pentru componenta ComboBox.

dataProvider: modelul de date al listei de elemente care trebuie vizualizate
editabil: o valoare booleană care indică dacă componenta ComboBox este editabilă sau numai pentru citire
activat: o valoare booleană care indică dacă componenta poate accepta intrarea utilizatorului
prompt: solicitarea componentei ComboBox.
restrânge: caracterele pe care un utilizator le poate introduce în câmpul de text.
ROWCOUNT: numărul maxim de rânduri care poate apărea într-o listă derulantă care nu are o bară de defilare.
vizibil: o valoare booleană care indică dacă instanța componentei este vizibilă

Proprietățile pentru DataGrid sunt următoarele.

allowMultipleSelection: o valoare booleană care indică dacă pot fi selectate simultan mai multe elemente dintr-o listă
editabil: o valoare booleană care indică dacă componenta DataGrid este editabilă sau numai pentru citire
headerHeight: înălțimea antetului DataGrid, în pixeli.
horizontalLineScrollSize: "o valoare care descrie cantitatea de conținut care urmează să fie derulată, orizontal, când se face clic pe o săgeată de defilare.
horizontalPageScrollSize: stabilește numărarea pixelilor prin care se deplasează degetul mare în bara de navigare orizontală atunci când este apăsată pista de derulare.
horizontalScrollPolicy: o valoare booleană care indică dacă bara orizontală de defilare este întotdeauna activă.
resizableColumns: Indică dacă utilizatorul poate modifica dimensiunea coloanelor.
înălțimea rândului: înălțimea fiecărui rând din componenta DataGrid, în pixeli.
showHeaders: o valoare booleană care indică dacă componenta DataGrid prezintă anteturile coloanelor.
sortableColums: Indică dacă utilizatorul poate sorta elementele din furnizorul de date făcând clic pe celula antetului coloanei.
verticalLineScrollSize: o valoare care descrie câți pixeli vor fi derulați vertical când se face clic pe o săgeată de defilare.
verticalPageScrollSize: numãrul de pixeli prin care se deplaseazã degetul mare de parcurgere pe bara verticalã de defilare când este apãsatã pista de bare de derulare.
verticalScrollPolicy: o valoare care indică starea barei de derulare verticale

Fișierele de ajutor sunt un loc minunat pentru a afla mai multe despre aceste proprietăți.

Pentru a afla mai multe despre proprietățile pentru etichete, asigurați-vă că consultați Sfat rapid de pe componentele Buton și etichetă.

Pentru a afla cum să încărcați DataGrid dintr-un fișier XML verificați tutorialul meu pe Datgrid cu XML.

Vă mulțumim din nou pentru http://www.state-flags-usa.com pentru că mi-ați permis să folosesc imaginile lor de pavilion. Și vă mulțumesc pentru lectură - căutați mai multe introduceri ale componentelor!.

Cod