<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/about-you/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        creationComplete="init();" viewSourceURL="srcview/index.html">

    <mx:Style>
        Application {
            verticalAlign: middle;
            backgroundColor: white;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            /* Import stuff. */
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.collections.XMLListCollection;
            import mx.collections.SortField;
            import mx.collections.Sort;
            import flash.system.Capabilities;

            private var xlc:XMLListCollection;

            /**
             * The "brains" of the operation. This gets called by the 
             * Application container's creationComplete event handler.
             * This method does the E4X to grab all accessors from the
             * flash.system.Capabilities class and limit the results 
             * to just the Capabilities class. Finally it populates the
             * Label control, sorts the XMLListCollection and populates
             * the DataGrid control's dataProvider property.
             */
            private function init():void {
                /* Hooray for E4X! */
                const className:String = "flash.system::Capabilities";
                var capXML:XML = describeType(Capabilities);
                xlc = new XMLListCollection(capXML.accessor.(@declaredBy == className));

                /* Display the Flash Player version and whether or not you're using a debugger version of Flash Player. */
                var ver:String = Capabilities.version;
                var dbg:String = (Capabilities.isDebugger) ? ' (debug)' : '';
                lbl.text = ver + dbg;

                /* Set up the sort field. This will do a case insensitive sort on the @name column. */
                var nameSort:Sort = new Sort();
                nameSort.fields = [new SortField('@name', true)];

                /* Sort and refresh the XMLListCollection. */ 
                xlc.sort = nameSort;
                xlc.refresh();
                dataGrid.dataProvider = xlc;
            }

            /**
             * Return the value from the Capabilites class.
             */
            private function valueLabelFunc(item:Object, column:DataGridColumn):String {
                return Capabilities[item.@name];
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <!-- This label will hold the Flash Player version and whether
             the user is using a debugger version of Flash Player. We 
             also set this control to 100% wide and set textAlign to 
             center so it displays nicely in the ApplicationControlBar. --> 
        <mx:Label id="lbl"
                fontFamily="Arial"
                fontSize="48"
                fontWeight="bold"
                selectable="true"
                width="100%"
                textAlign="center" />
    </mx:ApplicationControlBar>

    <!-- Pretty straight forward DataGrid. We set it to variableRowHeight
         because of that blasted "serverString" property. -->
    <mx:DataGrid id="dataGrid"
            width="100%"
            height="100%" 
            variableRowHeight="true"
            editable="true"
            themeColor="haloSilver">
        <mx:columns>
            <!-- First, the @name column from the XMLListCollection.
                 Set this column to non-editable. --> 
            <mx:DataGridColumn dataField="@name"
                    headerText="Name:"
                    editable="false" />
            <!-- Second, a faux column which gets populated using our
                 custom label function (valueLabelFunc). Set this column
                 to editable so we can use our custom itemEditor. -->
            <mx:DataGridColumn labelFunction="valueLabelFunc"
                    headerText="Value:"
                    wordWrap="true">
                <mx:itemEditor>
                    <mx:Component>
                        <!-- Ha, a non-editable TextArea item editor 
                             renderer! Users can select/copy text but 
                             not edit the values. --> 
                        <mx:TextArea editable="false" />
                    </mx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

</mx:Application>