Quick Innledning: Flash ComboBox og Datagrid Components
Del
Del
en
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne hurtig Tips på Flash Professional Components vi vil være å ta en titt på ComboBox og Datagrid.
Brief Oversikt
I demoen SWF vil du se en ComboBox og en Datagrid. Velge en tilstand fra ComboBox vil føre til en etikett for å vise at statens befolkning og laste statens flagg. Velge en rad i Datagrid vil navigere til det valgte området
Trinn 1:.. Sette opp Document
Åpne en ny Flash dokument og angi følgende egenskaper
Dokumentstørrelse: 550x400px
Bakgrunnsfarge: #FFFFFF (hvit)
Trinn 2: Legg Komponenter til Stage
Åpne komponentene vinduet ved å gå til Vindu > Komponenter Dra en ComboBox, en Datagrid, og to Etiketter til scenen. I panelet Egenskaper gi ComboBox forekomstnavnet "statesCombo". Hvis Properties panelet ikke vises gå til Vindu > Komponenter Sett ComboBox sin X til 20.00 og dens Y til 39.00 I panelet Egenskaper gi Datagrid forekomstnavnet "sitesDG". I Egenskaper-panelet gir den første Etikett forekomstnavnet "statesLabel". Sett Merkelappens X til 200,00 og dens Y til 39.00. I panelet Egenskaper gi andre Etikett forekomstnavnet "sitesLabel". Sett denne etikett sin X til 20.00 og dens Y til 209,00. Opprett en ny Actionscript-fil og gi den navnet Main.as Vi vil erklære våre komponenter i Main.as så vi trenger å slå av automatisk olle stadium tilfeller; Fordelen med å gjøre dette er at du får kode antydet for eksempel Gå til Fil >.; Publish Settings Klikk på "Settings" ved siden av "Script [Actionscript 3.0]". Fjern haken ved «erklærer automatisk scene forekomster". I Main.as åpne pakken erklæringen og importere klassene vi skal bruke Legg til følgende Main.as. Legg klassen erklæring selv, utvide MovieClip og sette opp vår konstruktør funksjon. Mer info om dokument klasser er tilgjengelig her Legg til følgende Main.as. Her kan vi definere setupComboDP, setupDataGridDP, setupStatesCombo, setupLabels og setupSitesDataGrid funksjoner DataProviders gir en enkel måte å sette opp. data som skal gis til komponenter I setupStatesCombo også vi legge til en loader til scenen for å laste inn bilder av flaggene.; vi kunne ha definert en egen funksjon for å sette opp lasteren, men her er vi bare gjøre det inni denne funksjonen Legg til følgende Main.as. Her vi kode vårt arrangement Lyttere Vi får det valgte elementet etikett og showet befolkningen i tilsvarende tilstand. Vi laster den tilsvarende bilde ved å konvertere selectedItem (staten) til små bokstaver og tilføye ".jpg" til det. Legg til følgende Main.as. Ved hjelp Kombinasjonsboks og Datagrid komponenter er en god måte å vise en liste over data å velge mellom. Du vil merke i komponenter parameterpanelet av komponentene som du kan sjekke og velger visse egenskaper. Bildet over er for ComboBox Component. Eiendommene er som følger for ComboBox komponent Egenskapene for Datagrid er som følger Hjelpefilene er et flott sted å lære mer om disse egenskapene. Hvis du vil vite mer om egenskapene for etiketter bør du sjekke ut Quick Tips på knappen og Merk komponenter Hvis du vil vite hvordan du legger Datagrid fra en xml fil sjekke ut min tutorial på Datgrid med XML Takk igjen til http:.. //www.state-flags -usa.com for å la meg bruke sine flagg bilder. Og takk til deg for å lese - se opp for flere Komponent Introduksjoner !. Anmeldelser
eller trykke CTRL + F7.
eller trykk CTRL + F3
< p> Sett DataGrids X til 20.00 og dens Y til 236,00.
Trinn 3: Importere klassene
pakke {import flash.display.MovieClip; //for å vise bilder importere flash.display.Loader; //våre scenen Components importere fl.data.DataProvider; import fl.controls.ComboBox; import fl.controls.Label; import fl.controls.DataGrid; import flash.events.Event; //trengte å autosize textfields importere flash.text.TextFieldAutoSize; import flash.net.URLRequest; import flash.net.navigateToURL;
Trinn 4: Sett opp hoved Class
public class Hoved strekker MovieClip {public Var statesCombo. ComboBox; offentlig Var statesLabel: Etikett; offentlig Var sitesDG: Datagrid; offentlig Var sitesLabel: Etikett; Var comboDP: dataprovider; Var DataGridDP: dataprovider; Var flagLoader: Loader; offentlig funksjon main () {setupComboDP (); setupDataGridDP (); setupStatesCombo (); setupLabels (); setupSitesDataGrid (); }
Trinn 5: Funksjoner i hoved Constructor
privat funksjon setupComboDP (). void {comboDP = nye dataprovider (); comboDP.addItem ({Label: "Alabama", befolkningen: "4661900"}); comboDP.addItem ({Label: "Alaska", befolkningen: "686293"}); comboDP.addItem ({Label: "Arizona", befolkningen: "6500180"}); comboDP.addItem ({Label: "Arkansas", befolkningen: "2855390"}); comboDP.addItem ({Label: "California", befolkningen: "36756666"}); comboDP.addItem ({Label: "Colorado", befolkningen: "4939456"}); comboDP.addItem ({Label: "Conneticut", befolkningen: "3501252"}); comboDP.addItem ({Label: "Delaware", befolkningen: "873092"}); comboDP.addItem ({Label: "Florida", befolkningen: "18328340"}); comboDP.addItem ({Label: "Georgia", befolkningen: "9685744"}); comboDP.addItem ({Label: "Hawaii", befolkningen: "1288198"}); comboDP.addItem ({Label: "Idaho", befolkningen: "1523816"}); comboDP.addItem ({Label: "Illinois", befolkningen: "12901563"}); comboDP.addItem ({Label: "Indiana", befolkningen: "6376792"}); comboDP.addItem ({Label: "Iowa", befolkningen: "3002555"});} private funksjon setupDataGridDP (): void {DataGridDP = ny dataprovider (); //Legger elementer til tilsvarende søyler i Datagrid DataGridDP.addItem ({site: "Activetuts", beskrivelse: "Flash Tutorials", adresse: "http://active.tutsplus.com"}); DataGridDP.addItem ({site: "Nettuts", beskrivelse: "Various Web Design Guider", adresse: "http://net.tutsplus.com"}); DataGridDP.addItem ({site: "Mobiletuts", beskrivelse: "Mobile Device Tutorials", adresse: "http://mobile.tutsplus.com"}); DataGridDP.addItem ({site: "PSDTUTS", beskrivelse: "Photoshop tutorials", adresse: "http://psd.tutsplus.com"}); DataGridDP.addItem ({site: "Vectortuts", beskrivelse: "Vector Program Tutorials", adresse: "http://vector.tutsplus.com"}); DataGridDP.addItem ({site: "Aetuts", beskrivelse: "After Effects Tutorials", adresse: "http://ae.tutsplus.com"}); DataGridDP.addItem ({site: "Phototuts", beskrivelse: "Fotografi Tutorials", adresse: "http://photo.tutsplus.com"});} private funksjon setupStatesCombo (): void {statesCombo.width = 150; statesCombo.prompt = "Velg en stat"; statesCombo.dataProvider = comboDP; flagLoader = new Loader (); flagLoader.x = 200,00; flagLoader.y = 60.00; addChild (flagLoader); statesCombo.addEventListener (Event.CHANGE, loadData);} offentlig funksjon setupLabels (): void {statesLabel.text = ""; statesLabel.autoSize = statesLabel.autoSize = TextFieldAutoSize.LEFT; sitesLabel.text = "Klikk på rad for å besøke nettstedet"; sitesLabel.autoSize = sitesLabel.autoSize = TextFieldAutoSize.LEFT;} offentlig funksjon setupSitesDataGrid (): void {//colums blir satt inn i en matrise her har vi 3 kolonner sitesDG.columns = ["site", "description", "adresse" ]; sitesDG.dataProvider = DataGridDP; sitesDG.width = 500; sitesDG.addEventListener (Event.CHANGE, gotoSite);}
Trinn 6:. tilstelninger Lyttere
offentlig funksjon loadData (e: Hendelses): void {//Få selectedItems Etikett eksempel "Alabama" //Legg en Relevent .jpg f.eks "alabama.jpg" vi konvertere den valgte elementet (staten) til små bokstaver statesLabel.text = e.target.selectedItem.Label + "'s befolkning er" + e.target.selectedItem.population; flagLoader.load (ny URLRequest ("flagsLarge /" + e.target.selectedItem.Label.toLowerCase () +) "jpg."); } Offentlig funksjon gotoSite (e: Hendelses): void {navigateToURL (ny URLRequest (e.target.selectedItem.address)); }} //Lukk ut klassen} //Lukk ut pakken
Konklusjon
dataprovider. datamodellen av listen over elementer som skal vises
redigerbare: en boolsk verdi som angir om ComboBox komponent kan redigeres eller lese bare
aktivert: en boolsk verdi som angir om komponenten kan godta brukerundersøkelser
teksten:. meldingen for ComboBox komponent
begrense: tegnene som en bruker kan skriver inn i tekstfeltet
ROWCOUNT. maksimalt antall rader som kan vises i en rullegardinliste som ikke har et rullefelt
synlig. en boolsk verdi som angir om komponenten eksempel er synlig
allowMultipleSelection. en boolsk verdi som angir om mer enn én liste elementet kan velges om tid
redigerbare: en boolsk verdi som angir om Datagrid komponenten er redigerbar eller skrivebeskyttet
headerHeight. høyden på Datagrid header, i piksler
horizontalLineScrollSize: "en verdi som beskriver hvor mye innhold som skal rulles, horisontalt, når en rullepil klikkes
horizontalPageScrollSize. setter telling av piksler ved å flytte rulle tommelen på den horisontale rullefeltet når rulle bar spor trykkes
horizontalScrollPolicy:.. en boolsk verdi som angir om det horisontale rullefeltet er alltid på
resizableColumns: Angir om brukeren kan endre størrelsen på kolonnene.
rowHeight. høyden på hver rad i Datagrid komponent, i piksler
showHeaders: en boolsk verdi som angir om Datagrid komponent viser kolonneoverskriftene.
sortableColums: Angir om brukeren kan sortere elementene i dataleverandøren ved å klikke på en kolonneoverskriften celle
verticalLineScrollSize. en verdi som beskriver hvor mange piksler å rulle vertikalt når en rullepil klikkes
verticalPageScrollSize:.. greven av piksler ved å flytte rulle tommelen på den loddrette rullefeltet når rullefeltet spor trykkes
verticalScrollPolicy: en verdi som angir statusen det vertikale rullefeltet