Posted By

chrisaiv on 03/06/09


Tagged

Flex mxml XMLListCollections


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

thastylos


Flex: Working with Data Collections


 / Published in: MXML
 

URL: http://www.theflexshow.com/blog/index.cfm/2008/10/29/The-Flex-Show--Fifteen-Minutes-With-Flex--Episode-9--Collection-Classes

  1. How to sort an ArrayCollection
  2. How to add an XML Item or an Data Item
  3. Changing from an ArrayCollection to an XMLListCollection
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="400">
  3. <!--
  4. A. Collection Classes
  5. You may have data from multiple sources, from multiple formats
  6. these classes are meant to provide a single API for using/manipulating data
  7. no matter that the data is
  8. 1. Collection Interfaces (Programming Interface)
  9. a. Brief Explination
  10. 1. An interface is like a Class but with no implementation
  11. 2. An interface is a layer of abstraction above a class
  12. b. ICollectionView Interface
  13. 1.Contains the definitions of sorting and filtering interfaces
  14. c. IList Interface
  15. 1. Provides methods for adding, removing, or searching for items in your data
  16. 2. Sorting a Collection (Cheat Sheet)
  17. a. Class Sort contains the methods on how our visual displa of item/data will be sorted/changed
  18. b. Within the Sort Class (Sort.fields) is an Array of SortFields
  19. 1. A SortField is one definition of how to sort your data
  20. SortField( name, caseSensitivity:Boolean=true, Descending:Boolean=true, numeric:Boolean=true )
  21. 2. Sort.fields = Array of SortFields
  22. 3. collection.sort = A Sort Object, which contains an array of Fields
  23. 4. collection.refresh() => Which will change the visual display of the collection
  24. 3. Adding Items
  25. i. addItem()
  26. ii. addItemAt()
  27. iii. setItemAt()
  28. iv. removeAll()
  29. v. removeItemAt()
  30. vi. getItemIndex()
  31. vii. getItemAt()
  32. 4. Swapping Collections
  33. a.
  34. -->
  35. <mx:Script>
  36. <![CDATA[
  37. import mx.collections.XMLListCollection;
  38. import mx.collections.IList;
  39. import mx.collections.SortField;
  40. import mx.collections.Sort;
  41. import mx.collections.ICollectionView;
  42. import mx.collections.ArrayCollection;
  43.  
  44. [Bindable]
  45. private var myAC:ArrayCollection = new ArrayCollection([
  46. { firstName: 'Patrick', lastName: 'Reynolds', ID:0 },
  47. { firstName: 'Captain', lastName: 'Schmo', ID:1 },
  48. { firstName: 'Willy', lastName: 'Wonka', ID:2 },
  49. { firstName: 'Ned', lastName: 'Flanders', ID:3 }
  50. ]);
  51.  
  52. [Bindable]
  53. public var xml:XML =
  54. <names>
  55. <object>
  56. <firstName>Patrick</firstName>
  57. <lastName>Reynolds</lastName>
  58. <id>0</id>
  59. </object>
  60. <object>
  61. <firstName>Captain</firstName>
  62. <lastName>Schmo</lastName>
  63. <id>1</id>
  64. </object>
  65. <object>
  66. <firstName>Willy</firstName>
  67. <lastName>Wonka</lastName>
  68. <id>2</id>
  69. </object>
  70. <object>
  71. <firstName>Ned</firstName>
  72. <lastName>Flanders</lastName>
  73. <id>3</id>
  74. </object>
  75. </names>;
  76.  
  77. [Bindable]
  78. private var xmlListCollection:XMLListCollection = new XMLListCollection( new XMLList( xml.object ) );
  79.  
  80. //ICollectionView is an interface implemented by our Collection Classes
  81. private function sort( collection:ICollectionView ):void
  82. {
  83. //Sort Class will display data visually
  84. var sort:Sort = new Sort();
  85. //Within Sort is an Array of SortFields
  86. sort.fields = new Array( new SortField('lastName', true) );;
  87. //Taking the collection we pass in and setting a sort value on it
  88. collection.sort = sort;
  89. //Refresh the View
  90. collection.refresh();
  91. }
  92.  
  93. private function add( collection:IList, item:Object ):void
  94. {
  95. collection.addItem( item );
  96. }
  97.  
  98. private function addAC():void
  99. {
  100. add( dataGrid.dataProvider as IList, { firstName: 'Matt', lastName: 'Chotin', ID:0 } );
  101. }
  102.  
  103. private function addXML():void
  104. {
  105. var xmlObject:XMLList = new XMLList(
  106. <object>
  107. <firstName>chris</firstName>
  108. <lastName>aiv</lastName>
  109. <id>6</id>
  110. </object> );
  111.  
  112. add( dataGrid.dataProvider as IList, xmlObject );
  113. }
  114. ]]>
  115. </mx:Script>
  116.  
  117. <mx:HBox>
  118. <mx:DataGrid id="dataGrid" dataProvider="{myAC}" width="400" height="400">
  119. <mx:columns>
  120. <mx:DataGridColumn dataField="firstName" />
  121. <mx:DataGridColumn dataField="lastName" />
  122. </mx:columns>
  123. </mx:DataGrid>
  124. <!--
  125. DataProvider is List-Based Classes is simply a Generic Object
  126. so you should Cast it as an ICollectionView
  127. -->
  128. <mx:VBox>
  129. <mx:Button click="sort(dataGrid.dataProvider as ICollectionView)" label="Sort Data Provider" />
  130. <mx:Button click="addAC()" label="Add Object" />
  131. <mx:Button click="addXML()" label="Add XML" />
  132. <mx:Button click="dataGrid.dataProvider = xmlListCollection" label="Set to XMLListCollection DB" />
  133. <mx:Button click="dataGrid.dataProvider = myAC" label="Set to ArrayCollection DB" />
  134. </mx:VBox>
  135. </mx:HBox>
  136. </mx:Application>

Report this snippet  

You need to login to post a comment.