360|Flex Presentation on Arrays, Vectors, ByteArrays, Lists and Collections

1. Any Which Array
But Loose
Michael Labriola
Digital Primates

2. Who are you?
Michael Labriola
Senior Consultant at Digital Primates
Flex Geek
Component Developer
Flex Team Mentor

3. Who were you?
Michael Labriola
Software Engineer
Embedded Systems Developer
Reverse Engineer

4. What is this session about?
This session is part of my continuing quest to
teach Flash and Flex from the inside out.
Learn what the Flash Player and the Flex
framework are really doing and you are more
likely to use them successfully, respect their
boundaries and extend them in useful ways

5. One more reason
Let’s call it “Game Theory”.
If you know how something works really well, you
know which rules you can bend and just how far
you can bend them before they break.
Sometimes you can even find really creative ways
out of difficult situations

6. Standard Disclaimer
I am going to lie to you a lot… a whole lot
Even at this ridiculous level of detail, there is
much more
All of this is conditional. So, we are just going to
take one route and go with it

7. What is an Array?
Arrangement of objects in memory.
Generally used to hold values in a directly index-
able form

8. An Array
Mostly contiguous block
of memory
Holds values
Can grow or shrink in
size at runtime

9. An Array Can Be
Homogeneous Heterogeneous

10. An Array Can Be
Dense Sparse

11. Null versus Sparse
Array with Null Sparse

12. What is a Vector?
A Vector is a new type of Array introduced with
Flash Player 10.
It’s primary benefits are performance and type
safety

13. A Vector
Is Dense (no gaps)
Is Homogenous (always
the same base class)
Can be fixed length

14. Syntax
Array Vector
var a:Array = new Array(); var v:Vector.<uint> =
new Vector.<uint>(n);
a[0] = “value”; v[0] = “value”; //error
a[1] = 345; v[1] = 345;
a.push( 123 ); v.push( 123 );
trace( v.length ); trace( v.length );

15. A ByteArray
About the lowest level
memory access there is
in ActionScript
Let’s you access the raw
bytes and order of
data.
Up to you to manage
what exists inside of
the array

16. Syntax
ByteArray
var byteArray:ByteArray = new ByteArray();
byteArray.writeBoolean(true);
byteArray.writeDouble(Math.PI);
byteArray.position = 0;
trace( byteArray.readBoolean() ); //true
trace( byteArray.readDouble() ); //3.1415926535897
trace( byteArray[ 2 ] ); //9… why?

17. Breaking Apart Pete
When working with a
ByteArray, the indices
do not necessarily
indicate discrete
objects. They indicate
discrete bytes

18. Position
Byte Array also has a
position indicator. This
indicates the next
place you will read
from or write to.
This is the beginning of
a very important
concept.

19. Great Things about Array
Array’s can be extremely fast to access data at a
known index.
They also provide random access, meaning you
can ask for the value at position 3 without
caring that there is a position 2

20. Bad Things about Array
Array’s can be pretty slow when you need to
insert or delete information from the middle
Moving from element to element (moving from 2
to 3) takes a fixed amount of time, which is
good, but you also don’t get a speed advantage
because those two are right next to eachother

21. Array Before Insert

22. Array Move Elements

23. Array Insert Element

24. Array Before Delete

25. Array Remove Element

26. Array Collapse

27. Array Searching
Searching an Array
generally involves
iterating through each
element looking for the
value you would like.
If the array is sorted, you
can make the search a
smarter

28. Array Collections
At some point you may have been told to use the
ArrayCollection class.
So, what is it? ..It’s a wrapper around an array.
It provides the basic access to array by acting as a
proxy. This allows ArrayCollection to lie to you

29. Key Lies
Since ArrayCollection controls all information flow in
and out of its little regime, it can lie both about
how big the array is and about the order of the
elements.
It does this by creating a duplicate array that points
to the original, when and if it is convenient.
Fortunately, you control this by means of the sort
and filterFunction

30. Sorted Array Collection
One you have provided
the ArrayCollection a
Sort instance and
called its refresh()
method, it builds an
array which maps the
original elements to
the new sort

31. Syntax
ArrayCollection Sort
var ac:ArrayCollection = new ArrayCollection(data);
var ac:ArrayCollection = new ArrayCollection();
var sort:Sort = new Sort();
var field:SortField = new SortField( quot;hireDatequot; );
sort.fields = [ field ];
ac.sort = sort;
ac.refresh();

32. Collection Resorted
Sorting doesn’t actually need to shift the original data,
just the new internal array.

33. Searching a Collection
Once an ArrayCollection has been sorted,
searching it is a very efficient and easy process.
The reduction in time to sort a large
ArrayCollection is very significant over an array.

34. Filtered Array Collection
One you have provided
the ArrayCollection
with a filter function
and called its refresh()
method, it builds an
array which maps the
original elements to
the new array if they
pass the test in your
function

35. Syntax
ArrayCollection Filter
var ac:ArrayCollection = new ArrayCollection();
ac.filterFunction = ifIFeelLikeIt;
ac.refresh();
function ifIFeelLikeIt( item:Object ):Boolean {
//do some logic and decide
return ( item != Andy );
}

36. Andy Filtered Out

37. Another Key Feature
While not busy deceiving you, ArrayCollection has
a handful of really useful additional features.
The reason most people use ArrayCollection, even
if they aren’t sure why, is that it is an event
dispatcher.
When you use the ArrayCollection with
DataBinding, the ArrayCollection informs you of
changes

38. Collection Broadcaster

39. Collection Internals
trace( collection[ 3 ] ); getProperty( 3 );
getItemAt( 3 );
get localIndex[ 3 ];
setProperty( 3, 8 ); collection[ 3 ] = 8;
setItemAt( 8, 3 );
list.setItemAt;
Update Value
Dispatch Event

40. Final One
Through inheritance ArrayCollection also provides
one final important feature, it can work with a
cursor.
A bit like the position in a ByteArray, the cursor
points to a given object in the collection. You
can use the cursor to move forward to the next
item, move back to a previous item, seek to
well-known locations or search sorted data.

41. Cursor

42. Cursor.moveNext()

43. DataGrid and List Base
In fact, the List base controls in Flex use these
cursors pretty much exclusively inside of these
components.
One of the reasons they can accept many
different types of input is they simply wrap the
input in one of (n) classes that implement
ICollectionView

44. ICollectionView
ICollectionView mandates that an object can
dispatch events, understands how to sort, filter
and refresh along with a handful of other items,
and, most importantly, that the object can
create a cursor that will move through an child
objects.

45. ICollectionView
This is really important as it allows us to use
various types of Data Structures, other than
just ArrayCollection to fill this need.
For example, we can trivially make a
VectorCollection which uses vectors instead of
Arrays. We can create a ByteArrayCollection
should we feel so inclined.

46. Cursor/Iterator
With this new found knowledge, we could also
explore data structures that don’t exist in Flex
today, but could.
One data structure in particular is really fantastic
when you need to do frequent inserts/deletes
or simply move through the values sequentially,
a linked list.

47. Linked List
A linked list is a data structure that is just a
sequence of pieces of data, often called nodes.
Linked lists can be implemented in a single
fashion, where each node only knows about the
next, or, in a double fashion where each node
knows who came before it and who came after
it

48. Linked List
Each node in this linked
list knows about who
is sequentially before
it, and who is
sequentially after.
They don’t have any
information about
the other nodes

49. Inserting List
This makes the process
of inserting into a list
extremely efficient.
There is no need to
move any of the
existing nodes, you
simply change who
(in this case) Pete
and Andy believe are
next and previous.

50. Deleting List
Deleting is equally as
efficient.
In this case when we
chose to remove
Andy, we simply
change the previous
and next of Pete and
Thomas

51. Andy is GCed
Eventually in the
future, the garbage
collector ruthlessly
slaughters Andy.
However, that is not
the concern of this
session.

52. Searching List
Searching an unsorted list
takes about the same
effort as searching an
Array.

53. Searching By Index
Where linked lists are
much slower is when
you need to find an
item at a particular
index. For an array, that
is a very fast operation.
Here it requires a walk
through the list.

54. Working with Cursors
The paradigm used by
cursors, however,
works very well with
lists where we
generally are moving
between nodes

55. Results
For good measure, let’s take a look at some data

56. Q&A
Seriously? You must have some questions by now?

57. Resources
Blog Aggregator (All of the Digital Primates)
http://blogs.digitalprimates.net/
My Blog Specifically
http://blogs.digitalprimates.net/codeSlinger/
Follow Me on Twitter
mlabriola