The List Control is a fundamental control for use in Flex. It can be used in many different situations and can display all types of data. Anything from images to plain text and even basic HTML (supported by Flex) can be used. Keep reading for an introduction to this versatile control.
Whether you're developing large scale applications or just quick tools, you'll more than likely need to use a list when developing your applications. In this article, I cover the creation of a basic List Control with data population via XMLList. In my next article we move into customizing the list control by adding our own itemRenderer.
We start the creation of our List control with the following MXML:
Our ever-present <?xml> and <mx:Application> tags will wrap the entire application. The <mx:Panel> tag supplies our application with a nice container for our list. The 'title' attribute will become the title of the panel. Last but not least, we have the all-important <mx:List> tag. You should be able to copy and paste this code into Flex Builder and compile and run it. Here is our first stab at a list control:
Our List control is rather plain at this point. This is mainly because we don't have any data in this list. The way in which Flex will allow us to add data to this list is through something called the data provider. The data provider is used for all data aware controls (list, datagrids, trees, menu's, etc).
We have a few different options of what type of data provider we can use. A very common type is the XMLList or XML. In some applications, the server may be providing data that may be better typed with an array. Arrays are also valid data providers. For this discussion, we wont get into too much detail about the data provider. We will use an XML List.