Quick Introduction: Flash ComboBox and DataGrid Components

In this Quick Tip on the Flash Professional Components we will be taking a look at the ComboBox and the DataGrid.

Brief Overview

In the demo SWF you'll see a ComboBox and a DataGrid. Choosing a state from the ComboBox will cause a Label to display that state's population and load the state's flag. Choosing a row in the DataGrid will navigate to the chosen site.

Step 1: Setting Up The Document

Open a new Flash Document and set the following properties.

Document Size: 550x400px
Background Color: #FFFFFF (white)

Step 2: Add Components to the Stage

Open the components window by going to Window > Components or pressing CTRL+F7.

Drag a ComboBox, a DataGrid, and two Labels to the stage.

In the Properties panel give the ComboBox the instance name "statesCombo".

If the Properties panel is not showing go to Window > Components or press CTRL+F3

Set the ComboBox's X to 20.00 and its Y to 39.00

In the Properties panel give the DataGrid the instance name "sitesDG".

Set the DataGrids X to 20.00 and its Y to 236.00.

In the Properties panel give the first Label the instance name "statesLabel".

Set the Label's X to 200.00 and its Y to 39.00.

In the Properties panel give the second Label the instance name "sitesLabel".

Set this Label's X to 20.00 and its Y to 209.00.

Step 3: Importing the Classes

Create a new ActionScript file and give it the name Main.as

We will be declaring our components in Main.as so we need to turn off auto declare stage instances; the benefit of doing this is that you'll get code hinting for the instance.

Go to File > Publish Settings

Click on "Settings" next to "Script [Actionscript 3.0]".

Uncheck "Automatically declare stage instances".

In Main.as open the package declaration and import the classes we will be using

Add the following to Main.as.


package  {
	
    import flash.display.MovieClip;
    //needed to display images
    import flash.display.Loader;
    //our onstage Components
    import fl.data.DataProvider;
    import fl.controls.ComboBox;
    import fl.controls.Label;
    import fl.controls.DataGrid;
    import flash.events.Event;
    //needed to autosize textfields
    import flash.text.TextFieldAutoSize;
    import flash.net.URLRequest;
    import flash.net.navigateToURL;

Step 4: Set up the Main Class

Add the class declaration itself, extend MovieClip and set up our constructor function. More info on document classes is available here.

Add the following to Main.as.


public class Main extends 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;
    
    public function Main() {
        setupComboDP();
        setupDataGridDP();
        setupStatesCombo();
        setupLabels();
        setupSitesDataGrid();
            
    }

Step 5: Functions in the Main Constructor

Here we define the setupComboDP, setupDataGridDP, setupStatesCombo, setupLabels, and setupSitesDataGrid functions.

DataProviders provide an easy way to setup data to be provided to components.

In the setupStatesCombo we also add a loader to the stage to load pictures of the flags; we could have defined a separate function to set up the loader, but here we just do it inside this function.

Add the following to Main.as.


private function setupComboDP():void{
    comboDP = new DataProvider();
    comboDP.addItem({ Label:"Alabama",population:"4661900" });
    comboDP.addItem({ Label:"Alaska" ,population:"686293" });
    comboDP.addItem({ Label:"Arizona",population:"6500180" });
    comboDP.addItem({ Label:"Arkansas",population:"2855390" });
    comboDP.addItem({ Label:"California",population:"36756666" });
    comboDP.addItem({ Label:"Colorado",population:"4939456" });
    comboDP.addItem({ Label:"Conneticut",population:"3501252" });
    comboDP.addItem({ Label:"Delaware",population:"873092" });
    comboDP.addItem({ Label:"Florida",population:"18328340" });
    comboDP.addItem({ Label:"Georgia",population:"9685744" });
    comboDP.addItem({ Label:"Hawaii",population:"1288198" });
    comboDP.addItem({ Label:"Idaho",population:"1523816" });
    comboDP.addItem({ Label:"Illinois",population:"12901563" });
    comboDP.addItem({ Label:"Indiana",population:"6376792" });
    comboDP.addItem({ Label:"Iowa",population:"3002555" });
}
		
private function setupDataGridDP():void{
    DataGridDP = new DataProvider();
    //adds Items to corresponding colums in the DataGrid
    DataGridDP.addItem({site:"Activetuts", description:"Flash Tutorials", address:"https://code.tutsplus.com/categories/flash"});
    DataGridDP.addItem({site:"Nettuts", description:"Various Web Design Tutorials", address:"https://code.tutsplus.com"});
    DataGridDP.addItem({site:"Mobiletuts", description:"Mobile Device Tutorials", address:"https://code.tutsplus.com"});
    DataGridDP.addItem({site:"Psdtuts", description:"PhotoShop Tutorials", address:"https://design.tutsplus.com"});
    DataGridDP.addItem({site:"Vectortuts", description:"Vector Program Tutorials", address:"https://design.tutsplus.com"});
    DataGridDP.addItem({site:"Aetuts", description:"After Effects Tutorials", address:"https://cgi.tutsplus.com"});
    DataGridDP.addItem({site:"Phototuts", description:"Photography Tutorials", address:"https://photography.tutsplus.com"});
}
private function setupStatesCombo():void{
    statesCombo.width = 150;
    statesCombo.prompt = "Choose a State";
    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="Click on row to visit site";
    sitesLabel.autoSize = sitesLabel.autoSize = TextFieldAutoSize.LEFT;


}

public function setupSitesDataGrid():void{
    //Colums are put into an array here we have 3 columns
    sitesDG.columns =["site","description","address"];
    sitesDG.dataProvider = DataGridDP;
    sitesDG.width = 500;
    sitesDG.addEventListener(Event.CHANGE,gotoSite);
}

Step 6: Event Listeners

Here we code our Event Listeners.

We get the selected item's Label and show the population for the corresponding state.

We load the corresponding image by converting the selectedItem (state) to lowercase and appending ".jpg" to it.

Add the following to Main.as.


		public function loadData(e:Event):void {
			//Get the selectedItems Label e.g. "Alabama"
			//Load a relevent .jpg e.g. "alabama.jpg" we convert the selected item (state) to lowercase
			statesLabel.text = e.target.selectedItem.Label + "'s population is " + e.target.selectedItem.population;
			flagLoader.load(new URLRequest("flagsLarge/"+e.target.selectedItem.Label.toLowerCase()+".jpg"));
		}
					
		public function gotoSite(e:Event):void{
			navigateToURL(new URLRequest(e.target.selectedItem.address));

		}
	}//Close out the class
	
}//Close out the package

Conclusion

Using The ComboBox and DataGrid components are a good way to display a list of data to choose from.

You'll notice in the components parameters panel of the components that you can check and select certain properties.

The above image is for the ComboBox Component.

The properties are as follows for the ComboBox component.

dataProvider: the data model of the list of items to be viewed
editable: a Boolean value that indicates whether the ComboBox component is editable or read-only
enabled: a Boolean value that indicates whether the component can accept user input
prompt: the prompt for the ComboBox component.
restrict: the characters that a user can enter in the text field.
rowCount: the maximum number of rows that can appear in a drop-down list that does not have a scroll bar.
visible: a Boolean value that indicates whether the component instance is visible

The properties for the DataGrid are as follows.

allowMultipleSelection: a Boolean value that indicates whether more than one list item can be selected at a time
editable: a Boolean value that indicates whether the DataGrid component is editable or read-only
headerHeight: the height of the DataGrid header, in pixels.
horizontalLineScrollSize: "a value that describes the amount of content to be scrolled, horizontally, when a scroll arrow is clicked.
horizontalPageScrollSize: sets the count of pixels by which to move the scroll thumb on the horizontal scroll bar when the scroll bar track is pressed.
horizontalScrollPolicy: a Boolean value that indicates whether the horizontal scroll bar is always on.
resizableColumns: Indicates whether the user can change the size of the columns.
rowHeight: the height of each row in the DataGrid component, in pixels.
showHeaders: a Boolean value that indicates whether the DataGrid component shows column headers.
sortableColums: Indicates whether the user can sort the items in the data provider by clicking on a column header cell.
verticalLineScrollSize: a value that describes how many pixels to scroll vertically when a scroll arrow is clicked.
verticalPageScrollSize: the count of pixels by which to move the scroll thumb on the vertical scroll bar when the scroll bar track is pressed.
verticalScrollPolicy: a value that indicates the state of the vertical scroll bar

The help files are a great place to learn more about these properties.

To learn more about the properties for Labels be sure to check out the Quick Tip on the Button and Label components.

To learn how to load the DataGrid from an xml file check out my tutorial on Datgrid with XML.

Thanks again to http://www.state-flags-usa.com for letting me use their flag images. And thanks to you for reading - look out for more Component Introductions!.