To begin, you want to create a new Flex Project.  Open the main application MXML file for editing.  Once you're ready to edit, there are 2 steps needed

  • Add an "Array" component
  • Add a "List" component

With your main application file open, make sure you have the source editor selected (the only other choice is "design").  There are two ways to add an Array component.  You can add it via MXML or ActionScript.

<mx:Array id="myArray">
  <mx:Object label="item one" image="one.jpg" />
  <mx:Object label="item two" image="two.jpg" />
  <mx:Object label="item three" image="three.jpg" />

private var myArray:Array = new Array({label="item one",image="one.jpg"},
                                                  {label="item two",image="two.jpg"},
                                                   {label="item three",image="three.jpg"});

The AS code must be within the <mx:Script> tag as well.

Once you've added the Array, switch to design mode and drag a "List" component onto the 'stage'.  In the Flex Properties panel (default is on the left), set the dataProvider variable to "{myArray}" (less the ").  Then, change the view of the Flex Properties panel to "Category View" (default is Standard View).  Open the "Data" element of the tree and set the "labelField" value to "label" (less the ").  This tells the List component to display the "label" field to identify the item.
If you want to bypass the design mode all together, just add in the following MXML for a List component.
<mx:List dataProvider="{myArray}" labelField="label" top="10" left="10" />

Now, run your application.  You'll see three items in the list with the text of the label property from your Array component. 

This view is the default view of a List component.  However if you're like me, you want to spice things up a bit.  So, here is where I'll introduce the ItemRenderer!