1 Reply Latest reply on Jun 3, 2006 4:07 PM by mikiM

    Help with article from learning Flex

    mikiM
      Hi,

      I was trying the examples on the Learning Flex site:
      http://www.adobe.com/devnet/flex/articles/datamodel_print.html

      I did manage to fix all the compile issues (Flex 1.5 to 2.0) but I stll cannot get it to work.
      For starters it doesn't load the info from the xml files.
      Second if I use the following :
      <mx:DataGrid id="empGrid" dragEnabled="true" dataProvider="{empModel.employee}"> it gives an error when trying to add a new employee
      if I use:
      <mx:DataGrid id="empGrid" dragEnabled="true" dataProvider="{empModel}"> it adds it properly (minus the Location which doesn't get loaded). Also when used this way it adds scroll bars around the panel.

      Can somebody explains why it doesn't load and what is the difference between:
      dataProvider="{empModel.employee}" and dataProvider="{empModel}"


      I have attached the modified files:
      emplProk.mxml
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute">
      <mx:Script>
      <![CDATA[
      import DataController;
      ]]>
      </mx:Script>
      <mx:Model id="newEmpModel">
      <fName>{fNameInput.text}</fName>
      <lName>{lNameInput.text}</lName>
      <location>{locCombo.selectedItem}</location>
      </mx:Model>
      <mx:Model id="empModel" source="employees.xml"/>
      <mx:Model id="locModel" source="locations.xml"/>
      <DataController id="dataController"/>
      <mx:HBox>
      <mx:Panel id="empPanel" title="Employee Data" height="{engPanel.height+supPanel.height}">
      <mx:DataGrid id="empGrid" dragEnabled="true" dataProvider="{empModel.employee}">
      <mx:columns>
      <mx:Array>
      <mx:DataGridColumn dataField="fName" headerText="First Name" />
      <mx:DataGridColumn dataField="lName" headerText="Last Name" />
      <mx:DataGridColumn dataField="location" headerText="Location" />
      </mx:Array>
      </mx:columns>
      </mx:DataGrid>
      <mx:Form>
      <mx:FormHeading label="Add New"/>
      <mx:FormItem label="First Name">
      <mx:TextInput id="fNameInput"/>
      </mx:FormItem>
      <mx:FormItem label="Last Name">
      <mx:TextInput id="lNameInput"/>
      </mx:FormItem>
      <mx:FormItem label="Location">
      <mx:ComboBox id="locCombo" dataProvider="{locModel}"/>
      </mx:FormItem>
      </mx:Form>
      <mx:ControlBar>
      <mx:Button label="Add Employee" click="dataController.addNewEmp(newEmpModel,empGrid.dataProvider)"/>
      </mx:ControlBar>
      </mx:Panel>
      <mx:VBox>
      <mx:Panel id="engPanel" title="Engineering Group" width="{empPanel.width}">
      <mx:DataGrid dragEnter="dataController.doDragEnter(event)" dragDrop="dataController.doDragDrop(event)">
      <mx:columns>
      <mx:Array>
      <mx:DataGridColumn dataField="fName" headerText="First Name" />
      <mx:DataGridColumn dataField="lName" headerText="Last Name" />
      <mx:DataGridColumn dataField="location" headerText="Location" />
      </mx:Array>
      </mx:columns>
      </mx:DataGrid>
      </mx:Panel>
      <mx:Panel id="supPanel" title="Support Group" width="{empPanel.width}">
      <mx:DataGrid dragEnter="dataController.doDragEnter(event)" dragDrop="dataController.doDragDrop(event)">
      <mx:columns>
      <mx:Array>
      <mx:DataGridColumn dataField="fName" headerText="First Name" />
      <mx:DataGridColumn dataField="lName" headerText="Last Name" />
      <mx:DataGridColumn dataField="location" headerText="Location" />
      </mx:Array>
      </mx:columns>
      </mx:DataGrid>
      </mx:Panel>
      </mx:VBox>
      </mx:HBox>
      </mx:Application>



      Employee.as

      package
      {
      public class Employee
      {
      // properties
      public var fName:String;
      public var lName:String;
      public var location:String;
      // constructor
      public function Employee()
      {}
      // methods
      public function addEmpData(fName:String,lName:String,location:String):void
      {
      this.fName=fName;
      this.lName=lName;
      this.location=location;
      }
      }
      }

      DataController.as

      package
      {
      import flash.events.MouseEvent;
      import mx.events.DragEvent;

      public class DataController
      {
      import mx.managers.DragManager;
      import Employee;

      // constructor
      public function DataController()
      {}
      // methods
      public function addNewEmp(src:Object,dest:Object):void
      {
      // create an Employee object
      var tmpObj:Employee=new Employee();
      // add the new data to the object properties
      tmpObj.addEmpData(src.fName,src.lName,src.location);
      // add the employee object to the destination dataProvider
      dest.addItem(tmpObj);
      }
      public function doDragEnter(event:DragEvent):void
      {
      // allow drop
      //event.handled=true;
      // set action to copy
      event.action = DragManager.COPY;
      }
      public function doDragDrop(event:DragEvent):void
      {
      /*
      event.dragSource.dataForFormat("items") returns
      an array of dragged data items
      */
      var items:Object = event.dragSource.dataForFormat("items");
      // for convenience, set var for drop target
      var dest:Object = event.target;
      // copy the item target's dataProvider
      addNewEmp(items[0],dest);
      }

      }
      }

      employees.xml
      <?xml version="1.0"?>
      <employees>
      <employee>
      <fName>
      Clare
      </fName>
      <lName>
      DuPre
      </lName>
      <location>
      Paris
      </location>
      </employee>
      <employee>
      <fName>
      David
      </fName>
      <lName>
      Green
      </lName>
      <location>
      San Francisco
      </location>
      </employee>
      </employees>

      locations.xml

      <?xml version="1.0"?>
      <locations>
      <location>
      Paris
      </location>
      <location>
      Tokyo
      </location>
      <location>
      Cairo
      </location>
      <location>
      San Franscisco
      </location>
      </locations> Text Text empModel.employee ="{empModel