<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" paddingTop="0" paddingLeft="0" paddingRight="0"
    applicationComplete="setup()" backgroundGradientAlphas="[0.87, 0.72]" backgroundGradientColors="[#C3F885, #F3F9EB]">
  <mx:XML id="definition"  />
  <mx:XML id="sportsDefinition" source="sports_models.xml" />
  <mx:XML id="typoDefinition" source="typo_models.xml" />
  <mx:Script>
      <![CDATA[
      
      private function setup():void {
        changeModel();         
      }
        
      public function activeRecordDefinition(name:String) : XMLList {
          return definition[name];
      }
      
      private function changeModel():void {
          mainView.removeAllChildren();
          definition = model.selectedIndex == 0 ? sportsDefinition : typoDefinition; 
          generateView();
      }
      
    private function generateView():void {
          for each (var activeRecord:XML in definition.children()) {
               var arView:ActiveRecordsView = new ActiveRecordsView();
               arView.definition = activeRecord;
               mainView.addChild(arView);
          }        
    }            
      ]]>
  </mx:Script>
  <mx:Style>
      .title {
          fontSize:28;
          text-align: left;
      }
      .header {
          fontSize:20;
      }
  </mx:Style>
  <mx:HBox width="100%">
      <mx:ComboBox id="model" change="changeModel()">
           <mx:ArrayCollection>
         <mx:String>Sports Team</mx:String>
         <mx:String>Typo</mx:String>
      </mx:ArrayCollection>
      </mx:ComboBox>
      <mx:Label styleName="title" text="FlexScaffolding"  width="100%" fontFamily="Courier New"/>
            
  </mx:HBox>
  <mx:TabNavigator id="mainView" width="100%" height="100%">
      
  </mx:TabNavigator>
  
</mx:Application>