Snelle inleiding Flash ComboBox en DataGrid-componenten

In deze snelle tip over de professionele Flash-componenten zullen we de ComboBox en de DataGrid bekijken.

Kort overzicht

In de demo-SWF ziet u een ComboBox en een DataGrid. Als u een status kiest in de ComboBox, wordt een label weergegeven om de populatie van die staat weer te geven en de vlag van de staat te laden. Door een rij in de DataGrid te kiezen, navigeert u naar de gekozen site.

Stap 1: Het document instellen

Open een nieuw Flash-document en stel de volgende eigenschappen in.

Documentgrootte: 550x400 px
Achtergrondkleur: #FFFFFF (wit)

Stap 2: voeg componenten toe aan het werkgebied

Open het componentenvenster door naar te gaan Venster> Componenten of druk op CTRL + F7.

Versleep een ComboBox, een DataGrid en twee labels naar het werkgebied.

In het paneel Properties geeft u de ComboBox de instantienaam "statesCombo".

Als Ga naar in het paneel Eigenschappen niet wordt weergegeven Venster> Componenten of druk op CTRL + F3

Zet de ComboBox's X op 20,00 en de Y op 39,00

Geef in het paneel Properties de DataGrid de instantienaam 'sitesDG'.

Stel de DataGrids X in op 20.00 en de Y in op 236.00.

Geef in het venster Eigenschappen het eerste label de naam van het exemplaar 'statesLabel'.

Stel de X van het label in op 200,00 en de Y op 39,00.

Geef in het paneel Properties het tweede label de instantienaam 'sitesLabel'.

Stel de X van dit label in op 20,00 en de Y op 209,00.

Stap 3: De klassen importeren

Maak een nieuw ActionScript-bestand en geef het de naam Main.as

We zullen onze componenten in Main.as declareren, dus we moeten automatische declaratie van fase-instanties uitschakelen; het voordeel hiervan is dat je code hint voor de instantie.

Ga naar Bestand> Publicatie-instellingen

Klik op "Instellingen" naast "Script [Actionscript 3.0]".

Verwijder het vinkje bij "Stadium-instanties automatisch declareren".

In Main.as open de pakketverklaring en importeer de klassen die we zullen gebruiken

Voeg het volgende toe aan Main.as.

 pakket import flash.display.MovieClip; // nodig om afbeeldingen weer te geven import flash.display.Loader; // onze onstage Componenten importeren fl.data.DataProvider; import fl.controls.ComboBox; import fl.controls.Label; import fl.controls.DataGrid; import flash.events.Event; // nodig om tekstvelden automatisch te importeren flash.text.TextFieldAutoSize; import flash.net.URLRequest; import flash.net.navigateToURL;

Stap 4: Stel de hoofdklasse in

Voeg de klassenverklaring zelf toe, breid MovieClip uit en stel onze constructorfunctie in. Meer informatie over documentklassen is hier beschikbaar.

Voeg het volgende toe aan Main.as.

 public class Main breidt MovieClip uit 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; public function Main () setupComboDP (); setupDataGridDP (); setupStatesCombo (); setupLabels (); setupSitesDataGrid ();

Stap 5: Functies in de hoofdconstructeur

Hier definiëren we de setupComboDP-, setupDataGridDP-, setupStatesCombo-, setupLabels- en setupSitesDataGrid-functies.

DataProviders bieden een eenvoudige manier om gegevens in te stellen die aan componenten moeten worden verstrekt.

In de setupStatesCombo voegen we ook een loader toe aan het podium om afbeeldingen van de vlaggen te laden; we hadden een aparte functie kunnen definiëren om de lader in te stellen, maar hier doen we het gewoon binnen deze functie.

Voeg het volgende toe aan Main.as.

 private function setupComboDP (): void comboDP = new DataProvider (); comboDP.addItem (Label: "Alabama", populatie: "4661900"); comboDP.addItem (Label: "Alaska", populatie: "686293"); comboDP.addItem (label: "Arizona", populatie: "6500180"); comboDP.addItem (Label: "Arkansas", populatie: "2855390"); comboDP.addItem (label: "California", populatie: "36756666"); comboDP.addItem (Label: "Colorado", populatie: "4939456"); comboDP.addItem (Label: "Conneticut", population: "3501252"); comboDP.addItem (Label: "Delaware", populatie: "873092"); comboDP.addItem (Label: "Florida", populatie: "18328340"); comboDP.addItem (Label: "Georgia", populatie: "9685744"); comboDP.addItem (Label: "Hawaii", populatie: "1288198"); comboDP.addItem (Label: "Idaho", population: "1523816"); comboDP.addItem (label: "Illinois", populatie: "12901563"); comboDP.addItem (Label: "Indiana", populatie: "6376792"); comboDP.addItem (Label: "Iowa", populatie: "3002555");  private function setupDataGridDP (): void DataGridDP = new DataProvider (); // voegt items toe aan overeenkomstige kolommen in het DataGrid DataGridDP.addItem (site: "Activetuts", beschrijving: "Flash Tutorials", adres: "http://active.tutsplus.com"); DataGridDP.addItem (site: "Nettuts", beschrijving: "Various Web Design Tutorials", address: "http://net.tutsplus.com"); DataGridDP.addItem (site: "Mobiletuts", beschrijving: "Tutorials voor mobiel apparaat", adres: "http://mobile.tutsplus.com"); DataGridDP.addItem (site: "Psdtuts", beschrijving: "PhotoShop Tutorials", adres: "http://psd.tutsplus.com"); DataGridDP.addItem (site: "Vectortuts", description: "Vector Program Tutorials", address: "http://vector.tutsplus.com"); DataGridDP.addItem (site: "Aetuts", beschrijving: "After Effects Tutorials", address: "http://ae.tutsplus.com"); DataGridDP.addItem (site: "Phototuts", beschrijving: "Photography Tutorials", address: "http://photo.tutsplus.com");  private function setupStatesCombo (): void statesCombo.width = 150; statesCombo.prompt = "Kies een staat"; 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 = "Klik op rij om de site te bezoeken"; sitesLabel.autoSize = sitesLabel.autoSize = TextFieldAutoSize.LEFT;  publieke functie setupSitesDataGrid (): void // Colums worden in een array geplaatst hier hebben we 3 kolommen sitesDG.columns = ["site", "description", "address"]; sitesDG.dataProvider = DataGridDP; sitesDG.width = 500; sitesDG.addEventListener (Event.CHANGE, gotoSite);

Stap 6: Event Luisteraars

Hier coderen we onze Event Luisteraars.

We krijgen het label van het geselecteerde item en tonen de populatie voor de corresponderende status.

We laden de overeenkomstige afbeelding door de geselecteerd item (staat) om ".jpg" in kleine letters te plaatsen en toe te voegen.

Voeg het volgende toe aan Main.as.

 publieke functie loadData (e: Event): void // Download het label selectedItems, bijvoorbeeld "Alabama" // Laad een relevante .jpg, bijvoorbeeld "alabama.jpg" we converteren het geselecteerde item (staat) naar kleine letters statesLabel.text = e.target.selectedItem.Label + "populatie is" + e.target.selectedItem.population; flagLoader.load (nieuwe URLRequest ("flagsLarge /" + e.target.selectedItem.Label.toLowerCase () + ". jpg"));  openbare functie gotoSite (e: Event): void navigateToURL (new URLRequest (e.target.selectedItem.address));  // De klas sluiten // Sluit het pakket

Conclusie

Het gebruik van de componenten ComboBox en DataGrid is een goede manier om een lijst met gegevens weer te geven waaruit u kunt kiezen.

U zult opmerken in het componentenparameterspaneel van de componenten die u kunt controleren en bepaalde eigenschappen kunt selecteren.

De bovenstaande afbeelding is voor de ComboBox-component.

De eigenschappen zijn als volgt voor de component ComboBox.

data provider: het gegevensmodel van de lijst met items die moeten worden bekeken
bewerkbare: een Booleaanse waarde die aangeeft of de component ComboBox bewerkbaar of alleen-lezen is
ingeschakeld: een Booleaanse waarde die aangeeft of de component gebruikersinvoer kan accepteren
prompt: de prompt voor de component ComboBox.
beperken: de tekens die een gebruiker in het tekstveld kan invoeren.
aantal rijen: het maximale aantal rijen dat kan worden weergegeven in een vervolgkeuzelijst die geen schuifbalk bevat.
zichtbaar: een Booleaanse waarde die aangeeft of de componentinstance zichtbaar is

De eigenschappen voor de DataGrid zijn als volgt.

allowMultipleSelection: een Booleaanse waarde die aangeeft of meerdere items tegelijk kunnen worden geselecteerd
bewerkbare: een Booleaanse waarde die aangeeft of de component DataGrid bewerkbaar of alleen-lezen is
headerHeight: de hoogte van de DataGrid-header, in pixels.
horizontalLineScrollSize: "een waarde die de hoeveelheid inhoud beschrijft die horizontaal moet worden geschoven wanneer er op een schuifpijl wordt geklikt.
horizontalPageScrollSize: stelt het aantal pixels in waarmee de schuifvinger op de horizontale schuifbalk moet worden verplaatst wanneer op de schuifbalk wordt gedrukt.
horizontalScrollPolicy: een Booleaanse waarde die aangeeft of de horizontale schuifbalk altijd is ingeschakeld.
resizableColumns: Geeft aan of de gebruiker de grootte van de kolommen kan wijzigen.
rijhoogte: de hoogte van elke rij in de component DataGrid, in pixels.
showHeaders: een Booleaanse waarde die aangeeft of de component DataGrid kolomkoppen weergeeft.
sortableColums: Geeft aan of de gebruiker de items in de gegevensprovider kan sorteren door op een kolomkopcel te klikken.
verticalLineScrollSize: een waarde die aangeeft hoeveel pixels er verticaal moeten worden geschoven wanneer op een schuifpijl wordt geklikt.
verticalPageScrollSize: het aantal pixels waarmee de schuifvinger op de verticale schuifbalk wordt verplaatst wanneer de schuifbalk wordt ingedrukt.
verticalScrollPolicy: een waarde die de status van de verticale schuifbalk aangeeft

De helpbestanden zijn een geweldige plek om meer over deze eigenschappen te leren.

Lees voor meer informatie over de eigenschappen van labels de Snelle tip over de componenten Knop en Label.

Voor meer informatie over het laden van de DataGrid uit een xml-bestand, bekijk mijn tutorial over Datgrid met XML.

Nogmaals bedankt aan http://www.state-flags-usa.com voor het laten gebruiken van hun vlagafbeeldingen. En dankzij u voor het lezen - let op meer Componentintroducties!.

Code