The Collapse Panels are a custom mxml component that allows you to change the size of your panel and add different components while keeping the functionality of the minimize, maximize, return to origin (home), and locking the panel's position.

For a more detailed description, see the code in the zip file provided below:

Collapse Panel Flash Builder 4 Zip File

This concludes this sample project.

1. Learn about SEO. SEOmoz is like any other reporting tool: you can't really use the reports if you don't know what they mean, or how to act on them. I highly recommend checking out the v7n forums and Cricket's SEO class. You can also read some of SEOmoz's articles and access some of their tools without paying for their service. Once you have a basic understanding of SEO techniques, use WooRank to check your site for free. You can work on their recommendations first, and then start paying SEOmoz once you've made some improvements. If you don't already have Google Analytics installed on your website, make sure you set that up now, so you'll have some data later.

2. Sign up for SEOmoz Pro. Sometimes they have free trials; otherwise, you're looking at $99 a month or $79 a year. That price allows you to monitor 5 websites. If you don't have that many, you can monitor a couple of your biggest SEO competitors. You may be interested in learning what their sites have that you don't.

3. Add websites. SEOmoz calls each website a "campaign," and they guide you through campaign setup step by step. After you've set up the campaigns, go back and add more keywords (setup only lets you type in 5 per website, but you can have a total of 250 if you want.) When you're deciding on which keywords to put in their tool, try to add about 50% keywords you want to rank for and 50% keywords you're already ranking for. Check your website analytics to see what keywords are doing really well and use those.

4. Link Google Analytics (GA) to each website in your SEOmoz account. It'll give you much more information to work with. You'll need to go to My PRO Dashboard, then click on one campaign at a time. From that campaign, click on the dark gray "Traffic Data" tab.

5. Play the waiting game. SEOmoz has a new Quick Crawl feature, so you should get your first mini crawl results in a couple of hours. Until then, make sure your Google Analytics account is set up properly so you can make the most of the data. The SEOmoz blog has a great article on learning Google Analytics.

6. Check out your first reports. Here's the fun part! SEOmoz will email you when your first website crawl is completed. Log in, click on My PRO Dashboard, then click View This Campaign on the first site you want to check. Here's where people get confused: they're not sure what they're looking at. So, here's where to start...

7. Look at the Crawl Diagnostics chart that just popped up. Errors are problems that you should focus on fixing first. They might not technically be "errors," but fixing these will be the most dramatic thing you can do to improve your SEO rankings. Warnings are less critical, but also helpful in boosting SEO rankings. The blue Notices may or may not be useful to you, but they're not things that need to be fixed, just information that might help you understand more about your website.

8. Click on the first link on the chart -- the most common error on your website. You can learn what pages have this error. This is the next place people get stuck in SEOmoz: they have no idea what to do about the errors. Try searching Google; the Errors are typically not very hard to fix, you just have to find out how to edit your code, and then which specific part of the code needs to be edited or added.

9. Keep fixing, but keep exploring. SEOmoz Pro has lots more features than that Crawl Diagnostics chart. Once you've fixed some of the major areas, check the "On-Page" tab. This is where you'll find out whether any of your pages are actually showing up on the search engines for the keywords you entered. Also explore "Link Analysis." SEO is all about code, content, and links, so work on a combination of all three to maximize your results.

Below is the Zip file for this project which includes explanations in the code:

Application To Module Communication Zip File

This concludes this sample project.

Below is the sample SWF file containing the examples:

Example 1 in the SWF above demonstrates the ability of the ButtonBar component to change other component's visibility. This would be a good way to hide something that a user may not need when using your application. It's a simple example, but can easily be modified to change the visibility of Panels, Containers, or even other buttons that may not be necessary for the user to complete their tasks.

Example 2 demonstrates using a custom skin for the ButtonBar and subsequently for each individual button associated with it. The cp1On and cp2On shown on the buttons are actually images I drew with the pencil in Photoshop as a quick example. The buttons correspond to the adjacent ColorPickers to enable cp1 while disabling cp2 and vice versa. This shows how you can enable certain functionality in an application while disabling other functionality or components without making it go away. 

Example 3 increases the amount of buttons while using the standard label property of the ButtonBar's inherent skin. The functionality of this ButtonBar is activated by choosing an object's name which corresponds to an image that is embedded in a ViewStack component. It also updates a RichText component with the associated text pertinent to the image.

Example 4 consist of a spark List component and a spark BorderContainer. The List contains elements associated by an ArrayCollection that renders the colors a user can change the BorderContainer's backgroundColor property to depending on their selection.

Below is the Flash Builder 4 project ZIP file for the SWF above which contains more in-depth explanations of the code:

Button Bar Disable Enable Example Zip File

This concludes this sample project.

Example with a module: Click Load Panel Module, then click Add Text button in the module to add text to the Container. Use the DropDownList to change font types and colors of the dynamically created text.

Example without a module: Click Add Text button in the Panel to add text to the Container. Use the DropDownList to change font types and colors of the dynamically created text.

One of the biggest contributing factors to initial load time is embedded fonts. Embedded fonts greatly bloat the size of a SWF file, and by doing so increase initial load time.

One way to reduce the initial load time is by embedding your fonts in a separate SWF file via a Module. Above is an example of a SWF file with a main application file size of 40 kbytes with an associated module (separate SWF file) with a file size of 5+ Mbytes due to the embedded fonts. As you can see, the initial load of the application should have been relatively fast as compared to the main application containing the embedded fonts in its code which has a file size of 5+ Mbytes. This may not be apparent if you have a download speed close to the speed of light, but consider your users and their capabilities.

A few advantages of using modules have been noted as:

1. Faster initial application download.
2. Separation of large embedded objects from the main application.
3. Modules can be used by more than one application.
4. They can be loaded and unloaded which can reduce the amount of visual space needed for an application.
5. You do not not have to re-compile the main application (if created in a separate project).
6. You can add resources to a module without adding overhead to your main application (for example more embedded fonts, images or components).
7. If the module is not needed, it does not have to be loaded and cached (for example, a product manual).
8. You can provide loading progress through a module interface.

Some disadvantages of modules have been noted as:

1. Cross Domain issues and associated coding requirements.
2. Loading time for the module may still be a problem for some users.
3. Requires additional coding to reference a module (as opposed to coding in the main application).
4. Unexpected errors can occur causing a module to not load at all.
5. Relocating a module to another folder requires main application to be re-compiled for new url.

As well as many other advantages/disadvantages that you may encounter. A lot of the decision in deciding to use a module comes from its use in your application. Consider the following:

1. How often will the features be needed by an end-user?
2. How much load time does this really save?
3. Is there another method such as RSLs (Runtime Shared Libraries) that may be just as effective?
4. Will this in some way help to better organize my application and associated files?
5. How many modules will I need to create, and how will they be dependent on each other?

These are all good things to consider when you choose the modularization option. If after reading this, you are still interested in modules, then download the following Zip project files which contain the coding and explanations in the files to compare projects with and without a module for yourself.

Module Example with Embedded Fonts in Module Zip File for Flash Builder 4

Module Example with Embedded Fonts in Application Zip File for Flash Builder 4

This concludes this sample project.

WordPress is famous for being SEO-friendly, but you need to set it up right in order to reap the maximum benefits. Here are 5 easy steps to making your WordPress site SEO optimized:

1. Set up SEO-friendly permalinks

By default, WordPress makes your URLs look like this:

http://codebabble.com/?p=112

This works on all server types, but it's not SEO-friendly. Making a simple change to "pretty permalinks" like this:

http://codebabble.com/201/wordpress-tips/best-wordpress-permalinks/

will make your site friendlier to both visitors and search engines. Learn about the Best WordPress Permalinks here and then come back for the rest of the SEO tips!

2. Choose a SEO-friendly WordPress theme

WordPress consists of two halves: content and packaging. You'll need to write great content to optimize your site, but it also has to be packaged neatly for viewers to enjoy your site -- and for search engines to understand all that great content. That's where your theme comes in.

The theme contains all the HTML and CSS code your site uses, so if the code in your theme is messy, every page and post of your site will suffer. Search engines like minimal, W3C-valid code.

Thesis and Genesis are great themes for SEO, but they're not free. If you're going low-budget or no-budget, try Elements of SEO.

There are plenty of other SEO-friendly themes out there -- too many to list. If you know anything about HTML and CSS, just check to make sure that whatever you are considering is W3C-valid and that the code isn't full of extra garbage, like 10 nested divs when 2 would suffice.

3. Use robots.txt

WordPress creates certain directories that really don't need to be indexed by search engines. Blocking them ensures that when search engine crawlers come to your site, they look at the content you want them to list in search results -- rather than wasting their time in directories you don't even want to show to the world.

Create a file called "robots.txt" in your main directory -- the same directory where your "wp-config.php" file is located. Paste this text into that file:

User-agent: *
Disallow: /wp-
Disallow: /search
Disallow: /feed
Disallow: /comments/feed
Disallow: /feed/$
Disallow: /*/feed/$
Disallow: /*/feed/rss/$
Disallow: /*/trackback/$
Disallow: /*/*/feed/$
Disallow: /*/*/feed/rss/$
Disallow: /*/*/trackback/$
Disallow: /*/*/*/feed/$
Disallow: /*/*/*/feed/rss/$
Disallow: /*/*/*/trackback/$
Disallow: /*/2/$
Disallow: /*/*/2/$
Disallow: /*/*/*/2/$
Disallow: /*/3/$
Disallow: /*/*/3/$
Disallow: /*/*/*/3/$
Disallow: /*/4/$
Disallow: /*/*/4/$
Disallow: /*/*/*/4/$

4. Install WordPress Plugins

As a general rule, try to use as few plugins as possible. Using plugins makes your site slower, and search engines reward faster websites. But that doesn't mean plugins are bad, or that you shouldn't use them -- a few well-chosen plugins will really help. Here are the best WordPress SEO plugins:

• WordPress SEO - this is THE plugin for WordPress SEO. This plugin adds a unique title and meta description to every page and post on your site, and you can set it up to add them automatically in case you forget to customize them.
• Google XML Sitemaps will automatically create a "sitemap.xml" file for your website. It gets updated every time you create a page or post, so you install it once and forget about it.
• Hyper Cache is a caching plugin. WordPress works with PHP and MySQL, which means every time someone visits your website, the server has to calculate code and look in the database for whatever content they are requesting. A caching plugin saves plain old HTML files on your server, so the information is sent to the visitor way faster. This is great both for visitors and for search engines, and this particular plugin is easier to set up than most of the other caching plugins for WordPress.
• Better SEO Slugs - if you tend to forget about your URL as you write posts, install this plugin. It automatically removes short words like "by" or "the" and keeps the URL trimmed to a certain length. This means your main keywords will stand out in the URL, and the length will be short enough for the search engines' preferences.

5. Create great content

Setting up WordPress is just the first step in SEO. Do yourself a favor and read Copyblogger's excellent Guide to creating compelling content that ranks well in search engines to learn... well, how to create compelling content (which means it's great for your visitors) that ranks well in search engines (which should be a secondary goal, since ranking well in the search engines means nothing if your visitors don't like the site enough to stick around and spend some money).

Below is the example SWF for this tutorial:

Below is the MXML code for this tutorial:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      width="400" height="300" viewSourceURL="srcview/index.html">
 <fx:Script>
  <![CDATA[
   private function BorderOnOff():void{
    if(brdrCheckBox.selected == true){
     brdrContainer.setStyle("borderVisible", true);
    }
    else{
     brdrContainer.setStyle("borderVisible", false);
    }
   }
  ]]>
 </fx:Script>
 <s:Panel title="Turning Spark BorderContainer's Border On and Off with CheckBox"
    width="400" height="300">
  <s:BorderContainer id="brdrContainer"
         borderVisible="false"
         borderWeight="{brdrWidth.value}"
         borderColor="{borderCP.selectedColor}"
         backgroundColor="#eeeeee"
         x="138" y="39" width="200" height="200"/>
  <s:CheckBox label="Border On/Off" id="brdrCheckBox"
     change="BorderOnOff()"
     x="21" y="39"/>
  <s:NumericStepper id="brdrWidth" x="21" y="75"
        minimum="0" maximum="10"
        stepSize="1"/>
  <mx:ColorPicker id="borderCP" x="21" y="115"/>
  </s:Panel> 
</s:Application>

Adding the ColorPicker component and updating the in-line borderColor property:

Reference the red shaded component and properties in the MXML code above for this tutorial.

1. First, add a ColorPicker component <mx:ColorPicker> inside the Panel tags. Provide the ColorPicker an id property to be referenced by in the MXML code. Locate the ColorPicker where you see fit with the x and y properties.
2. Next, in the BorderContainer's borderColor property, add {borderCP.selectedColor} to dynamically change the BorderContainer's Border color when the ColorPicker's color selection has changed.

That's pretty much it. Now, you have an Application that can change a BorderContainer's Border visibility, width, and color.

Below is this tutorial Flash Builder 4 project Zip file to download:

BorderContainer's Border Color Change Zip File Flash Builder 4

This concludes the tutorial.

Below is the example SWF for this tutorial:

Below is the MXML code for this tutorial:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      width="400" height="300" viewSourceURL="srcview/index.html">
 <fx:Script>
  <![CDATA[
   private function BorderOnOff():void{
    if(brdrCheckBox.selected == true){
     brdrContainer.setStyle("borderVisible", true);
    }
    else{
     brdrContainer.setStyle("borderVisible", false);
    }
   }
  ]]>
 </fx:Script>
 <s:Panel title="Turning Spark BorderContainer's Border On and Off with CheckBox"
    width="400" height="300">
  <s:BorderContainer id="brdrContainer"
         borderVisible="false"
         borderWeight="{brdrWidth.value}"
         borderColor="#ff0000"
         backgroundColor="#eeeeee"
         x="138" y="39" width="200" height="200"/>
  <s:CheckBox label="Border On/Off" id="brdrCheckBox"
     change="BorderOnOff()"
     x="21" y="39"/>
  <s:NumericStepper id="brdrWidth" x="21" y="75"
        minimum="0" maximum="10"
        stepSize="1"/>
  </s:Panel> 
</s:Application>

Note, the red highlighted areas in the MXML code are the only changes that are required to dynamically change the BorderContainer's border width with a Spark NumericStepper component <s:NumericStepper>.

Steps to add the NumericStepper and in-line borderWidth code:

1. Add the Spark NumericStepper component <s:NumericStepper> inside the Panel component tags.
2. Create an id property for the NumericStepper to be referenced by in-line in the BorderContainer's borderWidth property.
3. Set the minimum="0" and maximum="10" properties of the NumericStepper component; as well as, the stepSize="1" property. This sets the value range of the NumericStepper from "0" to "10" with a step increment of "1" pixel when the user clicks the up and down buttons on the NumericStepper.
4. Add the NumericStepper value inside the BorderContainer's borderWidth property borderWidth="{brdrWidth.value}". Now, when the border is visible, the BorderContainer's border width can be dynamically changed by pressing up and down on the NumericStepper arrows.

Below is this tutorial's Zip file to download for use in the next tutorial called Changing A Spark BorderContainer's Border Color with a ColorPicker FlashBuilder 4 .

BorderContainer's Border Width Change with NumericStepper Zip File

This concludes the tutorial.

Below is the example SWF for this tutorial:

Below is the MXML code for this tutorial:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      width="400" height="300" viewSourceURL="srcview/index.html">
 <fx:Script>
  <![CDATA[
   private function BorderOnOff():void{
    if(brdrCheckBox.selected == true){
     brdrContainer.setStyle("borderVisible", true);
    }
    else{
     brdrContainer.setStyle("borderVisible", false);
    }
   }
  ]]>
 </fx:Script>
 <s:Panel title="Turning Spark BorderContainer's Border On and Off with CheckBox"
    width="400" height="300">
  <s:BorderContainer id="brdrContainer"
         borderVisible="false"
         borderWeight="5"
         borderColor="#ff0000"
         backgroundColor="#eeeeee"
         x="138" y="39" width="200" height="200"/>
  <s:CheckBox label="Border On/Off" id="brdrCheckBox"
     change="BorderOnOff()"
     x="21" y="39"/>
  </s:Panel> 
</s:Application>

Add MXML components to the Application:

1. Start out by adding a Spark Panel component <s:Panel> inside the Applications tags. Provide your Panel with a title property displaying your thoughts, and then provide the height and width properties to size the Panel to your requirements.
2. Add a Spark BorderContainer component <s:BorderContainer> inside the Panel tags. Give the BorderContainer an id property so it can be referenced in the MXML Application when the border is toggled on and off using the Spark CheckBox component. Next, add the borderVisible="false", borderWeight="5", and borderColor="#ff0000" styles to your BorderContainer. This will make the border invisible when the Application first starts up, and it will provide a red 5 pixel wide border when the CheckBox is set to true (checked). All other properties can be set at your discretion.
3. Add a Spark CheckBox component <s:CheckBox> inside the Panel tags. Give the CheckBox an id property so it can be referenced in the MXML Application when the border is toggled on and off using the component. Next, add a label="Border On/Off" property to indicate the CheckBox purpose.

Create the ActionScript code in the Script Block:

1. Create your <fx:Script> block with its' associated CDATA tags inside the Application tags as shown above.
2. Create a function BorderOnOff() to execute the code when a change occurs with the selection of the CheckBox component and set its' return value to :void. Then, add the function's curly braces to encompass the code which will make the change.
3. Add an if statement that will verify if the CheckBox is set to true (checked) when the CheckBox registers a change (being checked or unchecked). The "==" indicates a conditional check which allows the code to verify if the situation is true or false. For example, if the CheckBox is unchecked by the user, the if statement does not return true, so it continues on in the code. If the CheckBox is checked, the if statement returns true and executes the code inside the if statement's curly braces. Follow this up with adding an else statement with just curly braces as the defualt code if the if statement returns false.
4. Next, add the brdrContainer.setStyle("borderVisible", true); inside the if statement curly braces, and also add the brdrContainer.setStyle("borderVisible", false); code inside the else statement curly braces. This will set the BorderContainer's borderVisible style to true (on) or false (off) every time a change is made to the selection of the CheckBox.

The last step in the process is to set the change property of the CheckBox to call the BorderOnOff() function when a change in the CheckBox selection is triggered by a user interaction. Set the change property to reflect the code above.

A link to the Flash Builder 4 project Zip file is located below:

BorderContainer's Border Toggle CheckBox Zip File

This concludes the tutorial. This tutorial is supplemented with the Changing a Spark BorderContainer's Border Width with a Spark NumericStepper Flash Builder 4.

Below is an example SWF for this tutorial:

This sample looks pretty simple, but it may take a little bit of patience to get through it. So grab a sandwich and a drink and let's get started.

First, start by Creating a New Flash Builder 4 Project. Once, you have the basic project started, we are going to add the MXML components inside the Application tags.

Inside the Application tags:

<s:Panel title="Populating a Datagrid with Item Numbers in Flash Builder 4" width="500" height="260">
<s:DropDownList id="productDD" selectedIndex="0" x="78" y="10" dataProvider="{productList}" labelField="name"/>
<s:Label text="{productDD.selectedItem.price.toString()}" x="253" y="15"/>
<s:Label x="19" y="15" text="Products:"/>
<s:Label id="priceLabel" x="211" y="15" text="Price: $"/>
<mx:DataGrid id="productDataGrid" sortableColumns="false" y="40" x="19" dataProvider="{productArray}" width="300" height="170">
<mx:columns>
<mx:DataGridColumn headerText="Item #" labelFunction="RowNumber"/>
<mx:DataGridColumn headerText="Product" dataField="productName"/>
<mx:DataGridColumn headerText="Price" dataField="productPrice"/>
</mx:columns>
</mx:DataGrid>
<s:Button x="390" y="10" label="Add To Grid" click="addItemToDataGrid()"/>
<s:Button x="355" y="112.95" label="Remove Selected" click="removeSelectedRow()"/>
</s:Panel>

As you can see from the above code, we have a Panel component <s:Panel> which contains a couple of Buttons <s:Button>, Labels <s:Label>, a DropDownList <s:DropDownList>, and a DataGrid component <mx:DataGrid>.

The Panel contains the objects for display and user interaction. Go ahead and create the Panel component and add a title property which will be the header at the top of the Panel, and then size the Panel to your perferred size with the width and height properties.

Inside the Panel tags, add the remaining components while excluding the grayed out properties which we will address when the functionality is created later.

Inside the Declaration tags:

<fx:Declarations>
<s:XMLListCollection id="productList" xmlns="">
<s:list>
<s:ArrayList>
<fx:Object name="Book" price="19.99"/>
<fx:Object name="Coffee" price="6.99"/>
<fx:Object name="Calculator" price="129.99"/>
<fx:Object name="Clock" price="12.99"/>
</s:ArrayList>
</s:list>
</s:XMLListCollection>
</fx:Declarations>

The next step is to add a dataProvider for our DropDownList component. This will provide the product name and price to the DropDownList ( id="productDD" ) and an associated label based on the DropDownList's selectedItem. Create a set of Declarations tags <fx:Declarations> inside the Application tags to hold the non-visual XMLListCollection object <s:XMLListCollection>. First, provide an id property to the XMLListCollection to allow it to be referenced by other components ( id="productList" in this example ). Inside the XMLListCollection tags, specify a list component <s:list> which contains an ArrayList component <s:ArrayList> that has 4 Objects <fx:Object> with attributes of name and price. We are using Object to allow attributes ( name and price ) to be added inside the open tag of the Object which associates the attributes with each other and to a specific Object. Please note, we could have added the dataProvider with just the ArrayList component inside the DropDownList tags, but I am trying to show you a different way to provide data using a non-visual component ( XMLListCollection ) in the Declarations tags.

Once you have created your dataProvider for your DropDownList and subsequently your Label, add the
dataProvider="{productList}" with the curly braces to bind the data to the XMLListCollection and
the labelField="name" property to indicate which data the DropDownList will display to the user. Then, add the
text property ( text="{productDD.selectedItem.price.toString()}" ) to the associated Label component to
bind the Label's text ( price ) to the DropDownList's selectedItem in a String format as shown above.

Next step is to create an ActionScript Class to provide a method ( called a constructor ) to associate the product name and product price with some variables that can be used to group the name and price together when added to an ArrayCollection.

Inside the ProductList ActionScript Class:

package list
{
public class ProductList
{
public function ProductList(productName:String, productPrice:String)
{
this.productName = productName;
this.productPrice = productPrice;
}
public var productName:String;
public var productPrice:String;
}
}

Steps to creating the ProductList Class:

1. In the Package Explorer tab (Window dropdown at the top -> Package Explorer if not shown) right click (Windows) the mouse on the src package of your project.
2. Select New ->  Package. Then, name the Package list. Click Finish.
3. Right click (Windows) the mouse on the list package. Select New -> ActionScript Class.
4. Provide the Name ProductList (which will also be your Class name). Ensure the Package is list and the public modifier is selected. Click Finish.
5. Add productName:String, productPrice:String inside the functions parentheses as shown above. We do this so we can indicate that the values we insert into the function when it is called are the productName as a String and productPrice as a String values which are related to the Class variables.
6. Add this.productName = productName and this.productPrice = productPrice inside the function's curly braces to indicate we will be referring to the Strings in the function's parentheses by productName and
productPrice.
7. Create to public variables, as shown above, inside the public class ProductList's curly braces to serve as holders for the String values every time we decide to add a set of productName and productPrice to the dataProvider of the DataGrid.

You should now have your ProductList class as shown above. Be sure you have the code inside the correct brackets in your class. Your'e now ready to provide the functionality to your components. So, let's create the ActionScript code to provide it.

ActionScript Code inside the Application tags:

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import list.ProductList;
import mx.controls.Alert;
[Bindable] public var productArray:ArrayCollection = new ArrayCollection();

public function addItemToDataGrid():void{
productArray.addItemAt(new ProductList(productDD.selectedItem.name.toString(),
productDD.selectedItem.price.toString()), productArray.length);
}

private function RowNumber(ProductList:Object,ColumnNumber:int):String{
var iIndex:int = productArray.getItemIndex(ProductList) + 1;
return String(iIndex);
}

public function removeSelectedRow():void{
if(productDataGrid.selectedIndex >= 0){
productArray.removeItemAt(productDataGrid.selectedIndex);
productArray.refresh();
}
else{
Alert.show("Please select a row to delete.", "OOPS!");
}
}
]]>
</fx:Script>

Steps to creating the ActionScript code inside the Application tags:

Adding the items to the DataGrid

1. Start by creating the Script block <fx:Script> and its' associated CDATA open and close tags.
2. Add the import statements for the ArrayCollection, your ProductList class (so it is accessible to the MXML), and an Alert control for the removeSelectedRow() function.
3. Create a new [Bindable] public variable called productArray of type ArrayCollection as a new ArrayCollection method. This will hold the productName and productPrice variables that were created in our ProductList class, and it will have a new set added (based on the DropDownList selectedItem) every time the Add to Grid button is clicked.
4. Next, create the public function called addItemToDataGrid() with a return :void. Inside the function's curly braces we are going to add a set of productName, productPrice (the variables in the class) to the ArrayCollection (productArray) at the length of the ArrayCollection (the end of the ArrayCollection). Since, nothing is in the ArrayCollection before the first set is added, the length property will be "0", then "1", and so on which corresponds to the index number (zero-based starting order of  values) in the ArrayCollection. So, basically we are adding it to the end of the ArrayCollection. We do this so every new set added to the ArrayCollection and subsequently the DataGrid are added as the last set.
5. Add the set (item) which is a new instance of the ProductList function inside the curly braces of the
addItemToDataGrid() as shown above. Set the productName, productPrice from the  ProductList class' variable value holders to the DropDownList's ( productDD ) selectedItem.name and selectedItem.price values as Strings ( .toString() ). Now, we have temporarily made the selectedItem.name and selectedItem.price values equal to the productName and productPrice variables which provided a way to add an item that contains multiple values  to the ArrayCollection using only one index number. That's why we went through the trouble of creating the ProductList class.
6. Next, add the dataProvider ( dataProvider="{productArray}" ) to the DataGrid in curly braces so it is bound to the ArrayCollection if changes are made.
7. Then, add the dataField properties to the prospective columns which are bound ( curly braces ) to the productName and productPrice variables that are determined by the selectedItem in the DropDownList.
8. Finally, add the click property ( click="addItemToDataGrid()" ) to the Add To Grid button so the button calls the function when the user clicks on it.

Creating the Row Numbers for the DataGrid

1. Add the RowNumber function with parameters of an Object which will be associated with a ProductList ( row item of productName and productPrice) and an int (integer) which will be the number of the row ( ColumnNumber ). I probably should have called that parameter RowNumber, but I already used it to name the function. Oh well, it corresponds to a specific column anyway. The function will return a String value which represents the parameters we set in the function's parentheses.
2. Add a variable equal to the ArrayCollections index of the ProductList we are creating when the Add to Grid button is clicked + 1 so it goes to the next number in the ArrayCollection. Since our ArrayCollection starts at index zero and our row numbers start at one, if you are using the ArrayCollection index number it will be one less than the item number. Hence the + 1.

var iIndex:int = productArray.getItemIndex(ProductList) + 1;

3. Call the function to return the String value ColumnNumber as the variable iIndex value.

return String(iIndex);

This function is now getting the ProductList's index value in the ArrayCollection, adding 1 to it, and setting the ColumnNumber value to the index + 1 value. This associates the return row number with the other information in the row, and it allows us to pass a value to a component that initiates the function.

4. Lastly, set the labelFunction (the caller of the RowNumber Function) to labelFunction="RowNumber" so the returned row number ( Item # in this case ) can be set to the text value of the Item # column.

Removing an Item from the DataGrid

1. Create the removeSelectedRow() function and return a void (nothing returned).
2. Create an if and else statement to verify a row is selected an it's index is greater than or equal to zero (zero is the lowest number referenced by the DataGrid's index count).

if(productDataGrid.selectedIndex >= 0){
productArray.removeItemAt(productDataGrid.selectedIndex);
productArray.refresh();
}
else{
Alert.show("Please select a row to delete.", "OOPS!");
}

3. If the DataGrid's index is greater than or equal to "0", then remove the item (row) at the index (row) that is currently selected. Then, .refresh() the ArrayCollection which is bound to the DataGrid's columns. So, by deleting a set from the ArrayCollection, you are removing a row in the DataGrid. Else, pop up the Alert message to indicate a row is not selected to be deleted.
4. Final Step, add the click property ( click="removeSelectedRow()" ) to the Remove Selected button so the removeSelectedRow() function is called when the button is clicked.

Below is the Flash Builder 4 Zip File for this project if you choose to reference it:

Populating a DataGrid with Item Numbers in Flash Builder 4 Zip File

Several people have asked how to create a remove button in the DataGrid that is associated with each line item...so I created a quick MXML component based on MXDataGridItemRenderer to accommodate the requests.

Below is the example:

Basically, all you have to do is create a new MXML component based on MXDataGridItemRenderer. Once you have done that, add a button into the component to render in the DataGrid.

In the main application, import your new component in the script block, add an additional DataGridColumn to your DataGrid an set the new component as the itemRenderer of the column. Be sure to set the click event of the button in the component to the removeSelectedRow function to remove the associated row.

Below is the Flash Builder 4 Zip File for the alternate remove button application:

Populate DataGrid with Column Remove Button

This concludes the tutorial with additional example.

If your'e new to coding, feel free to drop a non-spammy (no links) comment and I'll try to answer your question as soon as possible.