Advertisement
Tools

Quick Introduction: Flash ComboBox and DataGrid Components

by

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:"http://active.tutsplus.com"});
    DataGridDP.addItem({site:"Nettuts", description:"Various Web Design Tutorials", address:"http://net.tutsplus.com"});
    DataGridDP.addItem({site:"Mobiletuts", description:"Mobile Device Tutorials", address:"http://mobile.tutsplus.com"});
    DataGridDP.addItem({site:"Psdtuts", description:"PhotoShop Tutorials", address:"http://psd.tutsplus.com"});
    DataGridDP.addItem({site:"Vectortuts", description:"Vector Program Tutorials", address:"http://vector.tutsplus.com"});
    DataGridDP.addItem({site:"Aetuts", description:"After Effects Tutorials", address:"http://ae.tutsplus.com"});
    DataGridDP.addItem({site:"Phototuts", description:"Photography Tutorials", address:"http://photo.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!.

Related Posts
  • Code
    Mobile Development
    Streaming Video in Android Apps54dpm preview image@2x
    The Android platform provides libraries you can use to stream media files, such as remote videos, presenting them for playback in your apps. In this tutorial, I will show you how to stream a video file using these libraries.Read More…
  • Code
    Android SDK
    Create a Music Player on Android: Song Playback0d63m preview image@2x
    In this series, we are creating a music player on Android using the MediaPlayer and MediaController classes. In the first part, we created the app and prepared the user interface for playback. We presented the list of songs on the user device and specified a method to execute when the user makes a selection. In this part of the series, we will implement a Service class to execute music playback continuously, even when the user is not directly interacting with the application.Read More…
  • Code
    Android SDK
    Using the Accelerometer on Android06lom preview image@2x
    In this tutorial, we are going to explore how to use the accelerometer, one of the many hardware sensors of modern smartphones, in an Android application. I'll explain what an accelerometer is and why it may be something you want to take advantage of in your Android applications.Read More…
  • Game Development
    Implementation
    Write Once, Publish Everywhere With HaxePunk: Making a GamePreviewretinaimage
    You've probably had this experience before: you hear about an awesome game, but then you find out that it's only coming out on the one platform that you don't own. It doesn't have to be this way. In this tutorial, you will learn how to use Haxe to make a game in one development platform that can target multiple gaming platforms, including Linux, Mac, Windows, iOS, Android, and Flash.Read More…
  • Code
    Android SDK
    Create a Hangman Game: User InterfaceAndroid hangman game preview retina
    In this series, we are creating a Hangman game for the Android platform. In the first tutorial, we set the application up to present two screens to the user and we also made a start with the user interface elements, the images and shape drawables to be precise. In the second tutorial, we will zoom in on the game's layout.Read More…
  • Code
    iOS SDK
    Working with NSURLSession: Part 3E548b preview image@2x
    In the previous tutorials, we explored the fundamentals of the NSURLSession API. There is one other feature of the NSURLSession API that we haven't look into yet, that is, out-of-process uploads and downloads. In the next two tutorials, I will show you how to create a very simple podcast client that enables background downloads.Read More…