Schnelle Einführung Flash ComboBox- und DataGrid-Komponenten

In diesem Quick Tip zu den Flash Professional-Komponenten werfen wir einen Blick auf die ComboBox und das DataGrid.

Kurzübersicht

In der Demo-SWF sehen Sie eine ComboBox und ein DataGrid. Wenn Sie einen Status aus der ComboBox auswählen, zeigt ein Label die Bevölkerung dieses Bundesstaates an und lädt die Flagge des Bundesstaates. Wenn Sie eine Zeile im DataGrid auswählen, navigieren Sie zu der ausgewählten Site.

Schritt 1: Einrichten des Dokuments

Öffnen Sie ein neues Flash-Dokument und legen Sie die folgenden Eigenschaften fest.

Dokumentgröße: 550x400px
Hintergrundfarbe: #FFFFFF (weiß)

Schritt 2: Fügen Sie der Bühne Komponenten hinzu

Öffnen Sie das Komponentenfenster, indem Sie auf gehen Fenster> Komponenten oder drücken Sie STRG + F7.

Ziehen Sie eine ComboBox, ein DataGrid und zwei Labels auf die Bühne.

Geben Sie im Eigenschaftenfenster der ComboBox den Instanznamen "statesCombo" an..

Wenn das Eigenschaftenfenster nicht angezeigt wird, gehen Sie zu Fenster> Komponenten oder drücken Sie STRG + F3

Setzen Sie das X der ComboBox auf 20.00 und das Y auf 39.00

Geben Sie im Eigenschaftenfenster dem DataGrid den Instanznamen "sitesDG" an..

Setzen Sie die DataGrids X auf 20.00 und Y auf 236.00.

Geben Sie im Eigenschaftenfenster dem ersten Label den Instanznamen "statesLabel" an..

Setzen Sie das X des Labels auf 200.00 und das Y auf 39.00.

Geben Sie im Eigenschaftenfenster dem zweiten Label den Instanznamen "sitesLabel" an..

Setzen Sie das X dieses Labels auf 20.00 und das Y auf 209.00.

Schritt 3: Importieren der Klassen

Erstellen Sie eine neue ActionScript-Datei, und geben Sie ihr den Namen Main.as

Wir werden unsere Komponenten in Main.as deklarieren, so dass wir das automatische Deklarieren von Stufeninstanzen deaktivieren müssen. Der Vorteil dabei ist, dass Sie Code-Hinweise für die Instanz erhalten.

Gehe zu Datei> Veröffentlichungseinstellungen

Klicken Sie neben "Skript [Actionscript 3.0]" auf "Einstellungen"..

Deaktivieren Sie "Bühneninstanzen automatisch deklarieren"..

Öffnen Sie in Main die Paketdeklaration und importieren Sie die Klassen, die wir verwenden werden

Fügen Sie Folgendes zu Main.as hinzu.

 package import flash.display.MovieClip; // zum Anzeigen von Bildern erforderlich import flash.display.Loader; // unsere Onstage-Komponenten import fl.data.DataProvider; import fl.controls.ComboBox; import fl.controls.Label; import fl.controls.DataGrid; import flash.events.Event; // für die automatische Größenänderung von Textfeldern erforderlich import flash.text.TextFieldAutoSize; import flash.net.URLRequest; import flash.net.navigateToURL;

Schritt 4: Richten Sie die Hauptklasse ein

Fügen Sie die Klassendeklaration selbst hinzu, erweitern Sie MovieClip und richten Sie unsere Konstruktorfunktion ein. Weitere Informationen zu Dokumentklassen finden Sie hier.

Fügen Sie Folgendes zu Main.as hinzu.

 public class Main erweitert MovieClip 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; öffentliche Funktion Main () setupComboDP (); setupDataGridDP (); setupStatesCombo (); setupLabels (); setupSitesDataGrid ();

Schritt 5: Funktionen im Hauptkonstruktor

Hier definieren wir die Funktionen setupComboDP, setupDataGridDP, setupStatesCombo, setupLabels und setupSitesDataGrid.

DataProvider bieten eine einfache Möglichkeit, Daten für Komponenten bereitzustellen.

In setupStatesCombo fügen wir der Bühne außerdem einen Loader hinzu, um Bilder der Flaggen zu laden. Wir hätten eine eigene Funktion definieren können, um den Loader einzurichten, aber hier tun wir es einfach innerhalb dieser Funktion.

Fügen Sie Folgendes zu Main.as hinzu.

 private Funktion setupComboDP (): void comboDP = new DataProvider (); comboDP.addItem (Label: "Alabama", Bevölkerung: "4661900"); comboDP.addItem (Label: "Alaska", Bevölkerung: "686293"); comboDP.addItem (Label: "Arizona", Bevölkerung: "6500180"); comboDP.addItem (Label: "Arkansas", Bevölkerung: "2855390"); comboDP.addItem (Label: "California", Bevölkerung: "36756666"); comboDP.addItem (Label: "Colorado", Bevölkerung: "4939456"); comboDP.addItem (Label: "Conneticut", Bevölkerung: "3501252"); comboDP.addItem (Label: "Delaware", Bevölkerung: "873092"); comboDP.addItem (Label: "Florida", Bevölkerung: "18328340"); comboDP.addItem (Label: "Georgia", Bevölkerung: "9685744"); comboDP.addItem (Label: "Hawaii", Bevölkerung: "1288198"); comboDP.addItem (Label: "Idaho", Bevölkerung: "1523816"); comboDP.addItem (Label: "Illinois", Bevölkerung: "12901563"); comboDP.addItem (Label: "Indiana", Bevölkerung: "6376792"); comboDP.addItem (Label: "Iowa", Bevölkerung: "3002555");  private Funktion setupDataGridDP (): void DataGridDP = new DataProvider (); // fügt den entsprechenden Spalten im DataGrid DataGridDP.addItem Elemente hinzu (site: "Activetuts", Beschreibung: "Flash-Tutorials", Adresse: "http://active.tutsplus.com"); DataGridDP.addItem (site: "Nettuts", Beschreibung: "Verschiedene Webdesign-Tutorials", Adresse: "http://net.tutsplus.com"); DataGridDP.addItem (site: "Mobiletuts", Beschreibung: "Mobile Device Tutorials", Adresse: "http://mobile.tutsplus.com"); DataGridDP.addItem (site: "Psdtuts", Beschreibung: "PhotoShop-Tutorials", Adresse: "http://psd.tutsplus.com"); DataGridDP.addItem (site: "Vectortuts", Beschreibung: "Vektorprogramm-Tutorials", Adresse: "http://vector.tutsplus.com"); DataGridDP.addItem (site: "Aetuts", Beschreibung: "After Effects-Tutorials", Adresse: "http://ae.tutsplus.com"); DataGridDP.addItem (site: "Phototuts", Beschreibung: "Fotografie-Tutorials", Adresse: "http://photo.tutsplus.com");  private Funktion setupStatesCombo (): void statesCombo.width = 150; statesCombo.prompt = "Wählen Sie einen Staat aus"; statesCombo.dataProvider = comboDP; flagLoader = neuer 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 = "Klicken Sie auf die Zeile, um die Site zu besuchen"; sitesLabel.autoSize = sitesLabel.autoSize = TextFieldAutoSize.LEFT;  public function setupSitesDataGrid (): void // Die Spalten werden in ein Array eingefügt. Wir haben 3 Spalten. sitesDG.columns = ["site", "description", "address"]; sitesDG.dataProvider = DataGridDP; sitesDG.width = 500; sitesDG.addEventListener (Event.CHANGE, gotoSite);

Schritt 6: Ereignis-Listener

Hier kodieren wir unsere Event Listener.

Wir erhalten das Label des ausgewählten Elements und zeigen die Grundgesamtheit für den entsprechenden Bundesstaat.

Wir laden das entsprechende Bild durch Konvertieren der Ausgewähltes Objekt (state) in Kleinbuchstaben einfügen und ".jpg" anhängen.

Fügen Sie Folgendes zu Main.as hinzu.

 public function loadData (e: Event): void // Ruft die selectedItems-Bezeichnung ab, z. "Alabama" // Laden Sie eine relevante .jpg-Datei, z. B. "alabama.jpg" konvertiert das ausgewählte Element (Zustand) in Kleinbuchstaben. StatesLabel.text = e.target.selectedItem.Label + "s Bevölkerung ist" + e.target.selectedItem.population; flagLoader.load (neue URLRequest ("flagsLarge /" + e.target.selectedItem.Label.toLowerCase () + ". jpg"));  public function gotoSite (e: Event): void navigateToURL (neue URLRequest (e.target.selectedItem.address));  // Die Klasse schließen // Das Paket schließen

Fazit

Verwenden der ComboBox- und DataGrid-Komponenten ist eine gute Möglichkeit, eine Liste von Daten zur Auswahl anzuzeigen.

Sie werden im Komponentenparameterfenster der Komponenten feststellen, dass Sie bestimmte Eigenschaften überprüfen und auswählen können.

Das obige Bild ist für die ComboBox-Komponente.

Die Eigenschaften für die ComboBox-Komponente lauten wie folgt.

Datenanbieter: das Datenmodell der Liste der Elemente, die angezeigt werden sollen
bearbeitbar: Ein boolescher Wert, der angibt, ob die ComboBox-Komponente bearbeitbar oder schreibgeschützt ist
aktiviert: Ein boolescher Wert, der angibt, ob die Komponente Benutzereingaben akzeptieren kann
Prompt: die Eingabeaufforderung für die ComboBox-Komponente.
beschränken: die Zeichen, die ein Benutzer in das Textfeld eingeben kann.
Reihenanzahl: Die maximale Anzahl von Zeilen, die in einer Dropdown-Liste ohne Bildlaufleiste angezeigt werden können.
sichtbar: Ein boolescher Wert, der angibt, ob die Komponenteninstanz sichtbar ist

Die Eigenschaften für das DataGrid lauten wie folgt.

allowMultipleSelection: Ein boolescher Wert, der angibt, ob mehr als ein Listenelement gleichzeitig ausgewählt werden kann
bearbeitbar: Ein boolescher Wert, der angibt, ob die DataGrid-Komponente bearbeitbar oder schreibgeschützt ist
headerHeight: Die Höhe des DataGrid-Headers in Pixel.
horizontalLineScrollSize: "Ein Wert, der die Menge des Inhalts beschreibt, der beim Klicken auf einen Bildlaufpfeil horizontal verschoben werden soll.
horizontalPageScrollSize: Legt die Anzahl der Pixel fest, um die der Bildlauffinger auf der horizontalen Bildlaufleiste verschoben werden soll, wenn die Bildlaufleisten-Spur gedrückt wird.
horizontalScrollPolicy: Ein boolescher Wert, der angibt, ob die horizontale Bildlaufleiste immer aktiviert ist.
resizableColumns: Gibt an, ob der Benutzer die Größe der Spalten ändern kann.
Zeilenhöhe: Die Höhe jeder Zeile in der DataGrid-Komponente in Pixel.
showHeaders: Ein boolescher Wert, der angibt, ob die DataGrid-Komponente Spaltenüberschriften anzeigt.
sortierbareColums: Gibt an, ob der Benutzer die Elemente im Datenprovider sortieren kann, indem Sie auf eine Spaltenkopfzeile klicken.
verticalLineScrollSize: Ein Wert, der beschreibt, um wie viele Pixel der Bildlauf vertikal erfolgen soll, wenn auf einen Bildlaufpfeil geklickt wird.
verticalPageScrollSize: Die Anzahl der Pixel, um die der Bildlauffinger in der vertikalen Bildlaufleiste verschoben werden soll, wenn die Bildlaufleisten-Spur gedrückt wird.
verticalScrollPolicy: ein Wert, der den Status der vertikalen Bildlaufleiste angibt

In den Hilfedateien können Sie mehr über diese Eigenschaften erfahren.

Um mehr über die Eigenschaften von Labels zu erfahren, lesen Sie den Quick Tip zu den Komponenten Button und Label.

Um zu erfahren, wie Sie das DataGrid aus einer XML-Datei laden können, lesen Sie mein Tutorial zu Datgrid mit XML.

Nochmals vielen Dank an http://www.state-flags-usa.com, dass ich ihre Flaggenbilder verwenden darf. Und danke fürs Lesen. Weitere Komponenten-Einführungen!.

Code