Snabb Introduktion Flash ComboBox och DataGrid Components

I den här snabba tipsen på Flash Professional-komponenterna tar vi en titt på ComboBox och DataGrid.

Kort överblick

I demo SWF ser du en ComboBox och en DataGrid. Om du väljer ett tillstånd från ComboBox kommer en etikett att visa den statens befolkning och ladda statens flagga. Att välja en rad i DataGrid kommer att navigera till den valda webbplatsen.

Steg 1: Ställa in dokumentet

Öppna ett nytt Flash-dokument och ställ in följande egenskaper.

Dokumentstorlek: 550x400px
Bakgrundsfärg: #FFFFFF (vit)

Steg 2: Lägg till komponenter till scenen

Öppna komponentfönstret genom att gå till Fönster> Komponenter eller tryck CTRL + F7.

Dra en ComboBox, en DataGrid och två etiketter till scenen.

På panelen Egenskaper ger ComboBox förekomstnamnet "statesCombo".

Om Egenskaper panelen inte visas gå till Fönster> Komponenter eller tryck CTRL + F3

Ställ in ComboBox X till 20.00 och dess Y till 39.00

På Egenskaper-panelen ge DataGrid förekomstnamnet "sitesDG".

Ställ in DataGrids X till 20.00 och dess Y till 236.00.

På Egenskaper-panelen ge den första etiketten förekomstnamnet "statesLabel".

Ange etiketten X till 200.00 och dess Y till 39.00.

På Egenskaper-panelen ge den andra etiketten förekomstnamnet "SitesLabel".

Ange etiketten X till 20.00 och dess Y till 209.00.

Steg 3: Importera klasserna

Skapa en ny ActionScript-fil och ge den namnet Main.as

Vi kommer att förklara våra komponenter i Main.as så vi måste stänga av auto deklarera scenen instanser; Fördelen med att göra detta är att du får koden som antyds för förekomsten.

Gå till Arkiv> Publiceringsinställningar

Klicka på "Inställningar" bredvid "Script [ActionScript 3.0]".

Avmarkera "Automatisk deklarera sceninstanser".

I Main.as öppnar paketdeklarationen och importerar de klasser vi ska använda

Lägg till följande på Main.as.

 paket import flash.display.MovieClip; // behövs för att visa bilder importera flash.display.Loader; // våra onstage-komponenter importera fl.data.DataProvider; importera fl.controls.ComboBox; importera fl.controls.Label; importera fl.controls.DataGrid; importera flash.events.Event; // behövs för att autosize textfält importera flash.text.TextFieldAutoSize; importera flash.net.URLRequest; importera flash.net.navigateToURL;

Steg 4: Ställ in huvudklassen

Lägg till klassdeklarationen själv, förläng MovieClip och ställ in vår konstruktorfunktion. Mer information om dokumentklasser finns här.

Lägg till följande på Main.as.

 public class Main utökar MovieClip public var statesCombo: ComboBox; offentliga var statesLabel: Etikett; public var sitesDG: DataGrid; public var sitesLabel: Etikett; var comboDP: DataProvider; var DataGridDP: DataProvider; var flagLader: Loader; allmän funktion Main () setupComboDP (); setupDataGridDP (); setupStatesCombo (); setupLabels (); setupSitesDataGrid ();

Steg 5: Funktioner i huvudkonstruktionen

Här definierar vi inställningarna setupComboDP, setupDataGridDP, setupStatesCombo, setupLabels och setupSitesDataGrid.

DataProviders ger ett enkelt sätt att konfigurera data som ska tillhandahållas till komponenter.

I setupStatesCombo lägger vi också till en lastare till scenen för att ladda bilder av flaggorna; vi kunde ha definierat en separat funktion för att ställa in lastaren, men här gör vi det bara inuti denna funktion.

Lägg till följande på Main.as.

 privat funktion setupComboDP (): void comboDP = new DataProvider (); comboDP.addItem (Etikett: "Alabama", population: "4661900"); comboDP.addItem (Etikett: "Alaska", population: "686293"); comboDP.addItem (Etikett: "Arizona", population: "6500180"); comboDP.addItem (Etikett: "Arkansas", population: "2855390"); comboDP.addItem (Etikett: "California", population: "36756666"); comboDP.addItem (Etikett: "Colorado", population: "4939456"); comboDP.addItem (Etikett: "Conneticut", population: "3501252"); comboDP.addItem (Etikett: "Delaware", population: "873092"); comboDP.addItem (Etikett: "Florida", population: "18328340"); comboDP.addItem (Etikett: "Georgia", population: "9685744"); comboDP.addItem (Etikett: "Hawaii", population: "1288198"); comboDP.addItem (Etikett: "Idaho", population: "1523816"); comboDP.addItem (Etikett: "Illinois", population: "12901563"); comboDP.addItem (Etikett: "Indiana", befolkning: "6376792"); comboDP.addItem (Etikett: "Iowa", population: "3002555");  privat funktion setupDataGridDP (): void DataGridDP = new DataProvider (); // lägger till objekt i motsvarande kolumner i DataGrid DataGridDP.addItem (site: "Activetuts", beskrivning: "Flash Tutorials", adress: "http://active.tutsplus.com"); DataGridDP.addItem (site: "Nettuts", beskrivning: "Various Web Design Tutorials", adress: "http://net.tutsplus.com"); DataGridDP.addItem (site: "Mobiletuts", beskrivning: "Tutorials för mobilenhet", adress: "http://mobile.tutsplus.com"); DataGridDP.addItem (site: "Psdtuts", beskrivning: "Photoshop Tutorials", adress: "http://psd.tutsplus.com"); DataGridDP.addItem (site: "Vectortuts", beskrivning: "Vector Program Tutorials", adress: "http://vector.tutsplus.com"); DataGridDP.addItem (site: "Aetuts", beskrivning: "After Effects Tutorials", adress: "http://ae.tutsplus.com"); DataGridDP.addItem (site: "Phototuts", beskrivning: "Photography Tutorials", adress: "http://photo.tutsplus.com");  privat funktion setupStatesCombo (): void statesCombo.width = 150; statesCombo.prompt = "Välj en stat"; statesCombo.dataProvider = comboDP; flagLoader = ny 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 = "Klicka på rad för att besöka webbplatsen"; sitesLabel.autoSize = sitesLabel.autoSize = TextFieldAutoSize.LEFT;  public function setupSitesDataGrid (): void // Kolumner läggs i en array här har vi 3 kolumner webbplatserDG.columns = ["site", "description", "address"]; sitesDG.dataProvider = DataGridDP; platserDG.width = 500; sitesDG.addEventListener (Event.CHANGE, gotoSite);

Steg 6: Händelselysare

Här kodar vi våra händelselyttare.

Vi får det valda objektets etikett och visar befolkningen för motsvarande tillstånd.

Vi laddar motsvarande bild genom att konvertera selectedItem (state) till små bokstäver och lägger till ".jpg" till den.

Lägg till följande på Main.as.

 public function loadData (e: Event): void // Hämta selectedItems Label t.ex. "Alabama" // Ladda en relevant .jpg t.ex. "alabama.jpg" vi konverterar det valda objektet (state) till små bokstäverLabel.text = e.target.selectedItem.Label + "s befolkning är" + e.target.selectedItem.population; flagLoader.load (ny URLRequest ("flagsLarge /" + e.target.selectedItem.Label.toLowerCase () + ".jpg"));  allmän funktion gotoSite (e: Event): void navigateToURL (ny URLRequest (e.target.selectedItem.address));  // Stäng ut klassen // Stäng ut paketet

Slutsats

Att använda ComboBox och DataGrid-komponenterna är ett bra sätt att visa en lista med data att välja mellan.

Du kommer att märka i komponentparameterns paneler av komponenterna som du kan kolla och välja vissa egenskaper.

Ovanstående bild är för ComboBox-komponenten.

Egenskaperna är följande för ComboBox-komponenten.

dataprovider: datamodellen i listan över objekt som ska visas
redigerbar: ett booleskt värde som anger om ComboBox-komponenten är redigerbar eller skrivskyddad
aktiverad: ett booleskt värde som anger om komponenten kan acceptera användarinmatning
prompt: Prompten för ComboBox-komponenten.
begränsa: de tecken som en användare kan skriva in i textfältet.
rowCount: det maximala antalet rader som kan visas i en rullgardinslista som inte har en rullningsfält.
synlig: ett booleskt värde som anger om komponentinstansen är synlig

Egenskaperna för DataGrid är som följer.

allowMultipleSelection: ett booleskt värde som anger om mer än ett listobjekt kan väljas åt gången
redigerbar: ett booleskt värde som anger om DataGrid-komponenten är redigerbar eller skrivskyddad
headerHeight: Höjden på DataGrid-rubriken, i pixlar.
horizon: "ett värde som beskriver hur mycket innehåll som ska rullas horisontellt när en rullpilen klickas.
horizontalPageScrollSize: anger antalet pixlar som ska flytta rullningstummen på den horisontella rullningsfältet när rullningsfältet trycks ned.
horizontalScrollPolicy: ett booleskt värde som anger om den horisontella rullningsfältet alltid är på.
resizableColumns: Anger om användaren kan ändra storleken på kolumnerna.
Radhöjd: höjden på varje rad i DataGrid-komponenten, i pixlar.
showHeaders: ett booleskt värde som anger om DataGrid-komponenten visar kolumnrubriker.
sortableColums: Anger om användaren kan sortera objekten i datortillhandahållaren genom att klicka på en kolumnrubrikcell.
vertical: ett värde som beskriver hur många pixlar som ska rullas vertikalt när en rullpilen klickas.
vertical: pixelantalet för att flytta rullningstummen på den vertikala rullningsfältet när rullningslistspåret trycks ned.
vertical: ett värde som anger tillståndet för den vertikala rullningsfältet

Hjälpfilerna är ett bra ställe att lära dig mer om dessa egenskaper.

Om du vill lära dig mer om egenskaperna för Etiketter ska du kolla in Snabbtipset på knapparna och etikettkomponenterna.

För att lära dig hur du laddar DataGrid från en XML-fil, kolla in min handledning på Datgrid med XML.

Tack igen till http://www.state-flags-usa.com för att låta mig använda sina flaggbilder. Och tack för dig för att läsa - se upp för mer Component Introductions!.

Koda