Help with article from learning Flex

Question

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

Answer 1

I have tried just a small example , with a data grid and an
embeded XML doc and it works fine.
If I move the xml to an external file and use <mx:Model
... it doesn't show up, so it seems that is something wrong with
the model
Can please somebody verify it.
Thanks