Accentsconagua

Hurtig introduksjon Flash ComboBox og DataGrid Components

Kode
Share

I denne Quick Tip på Flash Professional Components vil vi se på ComboBox og DataGrid.

Kort overblikk

I demo-SWF ser du en ComboBox og en DataGrid. Å velge en stat fra ComboBox vil føre til at en etikett viser den statens befolkning og laster statens flagg. Å velge en rad i DataGrid vil navigere til det valgte nettstedet.

Trinn 1: Sette opp dokumentet

Åpne et nytt Flash-dokument og sett inn følgende egenskaper.

  • Dokumentstørrelse: 550x400px
  • Bakgrunnsfarge: #FFFFFF (hvit)

Trinn 2: Legg komponenter til scenen

Åpne komponentvinduet ved å gå til Vindu> Komponenter eller trykk CTRL + F7.

Dra en ComboBox, en DataGrid og to etiketter til scenen.

I panelet Egenskaper gir ComboBox forekomstnavnet "statesCombo".

Hvis Egenskaper-panelet ikke vises, gå til Vindu> Komponenter eller trykk CTRL + F3

Sett ComboBoxens X til 20,00 og dens Y til 39,00

I Egenskaper-panelet gir DataGrid forekomstnavnet "sitesDG".

Sett DataGrids X til 20.00 og dens Y til 236.00.

I Egenskaper-panelet gir den første Etiketten forekomstnavnet "statesLabel".

Sett etiketten er X til 200,00 og dens Y til 39,00.

I Egenskaper-panelet gir den andre etiketten forekomstnavnet "SitesLabel".

Sett denne etiketten er X til 20.00 og dens Y til 209.00.

Trinn 3: Importere klassene

Opprett en ny ActionScript-fil og gi den navnet Main.as

Vi vil erklære komponentene våre i Main.as, så vi må slå av automatisk deklarere scenevaner; Fordelen med å gjøre dette er at du får koden hinting for forekomsten.

Gå til Fil> Publiser innstillinger

Klikk på "Innstillinger" ved siden av "Script [ActionScript 3.0]".

Fjern merket for "Oppgi automatisk forekomst av forekomster".

I Main.as åpner pakkeerklæringen og importerer klassene vi skal bruke

Legg til følgende til Main.as.

 pakke import flash.display.MovieClip; // nødvendig for å vise bilder importere flash.display.Loader; // våre onstage-komponenter importerer fl.data.DataProvider; importere fl.controls.ComboBox; importere fl.controls.Label; importer fl.controls.DataGrid; importere flash.events.Event; // trengs for å autosize tekstfelt importere flash.text.TextFieldAutoSize; importere flash.net.URLRequest; importer flash.net.navigateToURL;

Trinn 4: Konfigurer hovedklassen

Legg til klassedeklarasjonen selv, utvide MovieClip og sett opp vår konstruktørfunksjon. Mer informasjon om dokumentklasser er tilgjengelig her.

Legg til følgende til Main.as.

 offentlig klasse Main utvider MovieClip public var statesCombo: ComboBox; offentlige var statesLabel: Etikett; offentlige var nettstederDG: DataGrid; offentlig var sitesLabel: Etikett; var comboDP: DataProvider; var DataGridDP: DataProvider; var flagLader: Loader; offentlig funksjon Main () setupComboDP (); setupDataGridDP (); setupStatesCombo (); setupLabels (); setupSitesDataGrid ();

Trinn 5: Funksjoner i hovedkonstruksjonen

Her definerer vi setupComboDP, setupDataGridDP, setupStatesCombo, setupLabels og setupSitesDataGrid funksjoner.

DataProviders gir en enkel måte å sette opp data som skal leveres til komponenter.

I setupStatesCombo legger vi også en laster til scenen for å laste bilder av flaggene; Vi kunne ha definert en egen funksjon for å sette opp lasteren, men her gjør vi bare det inne i denne funksjonen.

Legg til følgende til Main.as.

 privat funksjon setupComboDP (): void comboDP = new DataProvider (); comboDP.addItem (Etikett: "Alabama", befolkning: "4661900"); comboDP.addItem (Etikett: "Alaska", befolkning: "686293"); comboDP.addItem (Etikett: "Arizona", befolkning: "6500180"); comboDP.addItem (Etikett: "Arkansas", befolkning: "2855390"); comboDP.addItem (Etikett: "California", befolkning: "36756666"); comboDP.addItem (Etikett: "Colorado", befolkning: "4939456"); comboDP.addItem (Etikett: "Conneticut", befolkning: "3501252"); comboDP.addItem (Etikett: "Delaware", befolkning: "873092"); comboDP.addItem (Etikett: "Florida", befolkning: "18328340"); comboDP.addItem (Etikett: "Georgia", populasjon: "9685744"); comboDP.addItem (Etikett: "Hawaii", befolkning: "1288198"); comboDP.addItem (Etikett: "Idaho", befolkning: "1523816"); comboDP.addItem (Etikett: "Illinois", populasjon: "12901563"); comboDP.addItem (Etikett: "Indiana", befolkning: "6376792"); comboDP.addItem (Etikett: "Iowa", befolkning: "3002555");  privat funksjon setupDataGridDP (): void DataGridDP = new DataProvider (); // legger elementer til tilsvarende kolumner i DataGrid DataGridDP.addItem (site: "Activetuts", beskrivelse: "Flash Tutorials", adresse: "http://active.tutsplus.com"); DataGridDP.addItem (site: "Nettuts", beskrivelse: "Various Web Design Tutorials", 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: "Photography Tutorials", adresse: "http://photo.tutsplus.com");  privat funksjon setupStatesCombo (): void statesCombo.width = 150; statesCombo.prompt = "Velg en stat"; statesCombo.dataProvider = comboDP; flagLoader = ny 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 // Columene er satt inn i en matrise her har vi 3 kolonner sitesDG.columns = ["site", "description", "address"]; sitesDG.dataProvider = DataGridDP; stederDG.width = 500; sitesDG.addEventListener (Event.CHANGE, gotoSite);

Trinn 6: Event Lyttere

Her kodes vi våre Event Lyttere.

Vi får det valgte elementets etikett og viser befolkningen for den aktuelle tilstanden.

Vi laster inn det tilsvarende bildet ved å konvertere selectedItem (stat) til små bokstaver og legg til ".jpg" til den.

Legg til følgende til Main.as.

 offentlig funksjon loadData (e: Event): void // Få valgtItems-etiketten, f.eks. "Alabama" // Last en relevant .jpg f.eks. "alabama.jpg" vi konverterer det valgte elementet (state) 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: Event): void navigateToURL (ny URLRequest (e.target.selectedItem.address));  // Lukk klassen // Lukk pakken

Konklusjon

Bruke ComboBox og DataGrid-komponentene er en god måte å vise en liste over data å velge mellom.

Du vil legge merke til i komponentparameterepanelet på komponentene som du kan sjekke og velge bestemte egenskaper.

Bildet ovenfor er for ComboBox-komponenten.

Egenskapene er som følger for ComboBox-komponenten.

  • dataprovider: Datamodellen på listen over elementer som skal vises
  • redigerbar: En boolsk verdi som indikerer om ComboBox-komponenten er redigerbar eller skrivebeskyttet
  • aktivert: en boolsk verdi som indikerer om komponenten kan godta brukerinngang
  • prompt: Prompten for ComboBox-komponenten.
  • begrense: tegnene som en bruker kan skrive inn i tekstfeltet.
  • ROWCOUNT: Maksimalt antall rader som kan vises i en rullegardinliste som ikke har en rullefelt.
  • synlig: en boolsk verdi som angir om komponenteksemplet er synlig

Egenskapene for DataGrid er som følger.

  • allowMultipleSelection: en boolsk verdi som angir om flere listemner kan velges samtidig
  • redigerbar: En boolsk verdi som indikerer om DataGrid-komponenten er redigerbar eller skrivebeskyttet
  • headerHeight: høyden på DataGrid-overskriften, i piksler.
  • horizontalLineScrollSize: "en verdi som beskriver mengden innhold som skal rulles horisontalt når en rullepilen klikkes.
  • horizontalPageScrollSize: Angir antall piksler for å flytte rulletrimmen på den horisontale rullefeltet når rullefeltet spores.
  • horizontalScrollPolicy: En boolsk verdi som angir om den horisontale rullefeltet alltid er på.
  • resizableColumns: Angir om brukeren kan endre størrelsen på kolonnene.
  • rowHeight: høyden på hver rad i DataGrid-komponenten, i piksler.
  • showHeaders: En boolsk verdi som indikerer om DataGrid-komponenten viser kolonneoverskrifter.
  • sortableColums: Angir om brukeren kan sortere elementene i dataleverandøren ved å klikke på en kolonneoverskriftscelle.
  • verticalLineScrollSize: en verdi som beskriver hvor mange piksler som skal rulles vertikalt når en rullepilen klikkes.
  • verticalPageScrollSize: Antall piksler for å flytte rulletrimmen på den vertikale rullefeltet når rullefeltet spores.
  • verticalScrollPolicy: en verdi som angir tilstanden til den vertikale rullefeltet

Hjelpefilene er et flott sted å lære mer om disse egenskapene.

Hvis du vil vite mer om egenskapene for etiketter, må du sjekke ut Hurtig Tips på knappene og etikettkomponentene.

For å lære hvordan du laster DataGrid fra en xml-fil, sjekk ut opplæringen min på Datgrid med XML.

Takk igjen til http://www.state-flags-usa.com for å la meg bruke sine flaggbilder. Og takk for deg for å lese - se etter flere komponentinnleggelser!.

Kode
×