Any Which Array But Loose

Michael LabriolaDigital Primates

Who are you?

Michael LabriolaSenior Consultant at Digital Primates

Flex GeekComponent DeveloperFlex Team Mentor

Who were you?

Michael LabriolaSoftware Engineer

Embedded Systems DeveloperReverse Engineer

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

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

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

What is an Array?

Arrangement of objects in memory.

Generally used to hold values in a directly index-able form

An Array

Mostly contiguous block of memory

Holds values

Can grow or shrink in size at runtime

An Array Can BeHomogeneous Heterogeneous

An Array Can BeDense Sparse

Null versus SparseArray with Null Sparse

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

A Vector

Is Dense (no gaps)

Is Homogenous (always the same base class)

Can be fixed length

SyntaxArray

var a:Array = new Array();

a[0] = “value”;a[1] = 345;a.push( 123 );

trace( v.length );

Vector

var v:Vector.<uint> = new

Vector.<uint>(n);

v[0] = “value”; //errorv[1] = 345;v.push( 123 );

trace( v.length );

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

SyntaxByteArray

var byteArray:ByteArray = new ByteArray();

byteArray.writeBoolean(true);byteArray.writeDouble(Math.PI);

byteArray.position = 0;

trace( byteArray.readBoolean() ); //truetrace( byteArray.readDouble() ); //3.1415926535897

trace( byteArray[ 2 ] ); //9… why?

Breaking Apart Pete

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

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.

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

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

Array Before Insert

Array Move Elements

Array Insert Element

Array Before Delete

Array Remove Element

Array Collapse

Array SearchingSearching 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

Array CollectionsAt 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

Key LiesSince 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 sortand filterFunction

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

SyntaxArrayCollection Sort

var ac:ArrayCollection = new ArrayCollection(data);

var ac:ArrayCollection = new ArrayCollection();var sort:Sort = new Sort();var field:SortField = new SortField( "hireDate" );sort.fields = [ field ];ac.sort = sort;ac.refresh();

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

Searching a CollectionOnce 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.

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

SyntaxArrayCollection Filter

var ac:ArrayCollection = new ArrayCollection();ac.filterFunction = ifIFeelLikeIt;ac.refresh();

function ifIFeelLikeIt( item:Object ):Boolean {//do some logic and decidereturn ( item != Andy );

}

Andy Filtered Out

Another Key FeatureWhile 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

Collection Broadcaster

Collection InternalsgetProperty( 3 );trace( collection[ 3 ] );

getItemAt( 3 );

get localIndex[ 3 ];

setProperty( 3, 8 ); collection[ 3 ] = 8;

setItemAt( 8, 3 );

list.setItemAt;

Update Value

Dispatch Event

Final OneThrough 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.

Cursor

Cursor.moveNext()

DataGrid and List BaseIn 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

ICollectionViewICollectionView 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.

ICollectionViewThis 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.

Cursor/IteratorWith 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.

Linked ListA 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

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

Inserting ListThis 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.

Deleting ListDeleting is equally as

efficient.

In this case when we chose to remove Andy, we simply change the previous and next of Pete and Thomas

Andy is GCedEventually in the

future, the garbage collector ruthlessly slaughters Andy.

However, that is not the concern of this session.

Searching List

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

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.

Working with Cursors

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

Results

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

Q & A

Seriously? You must have some questions by now?

Resources

Blog Aggregator (All of the Digital Primates)http://blogs.digitalprimates.net/

My Blog Specificallyhttp://blogs.digitalprimates.net/codeSlinger/

Follow Me on Twittermlabriola