ActionScript 3.0 Design Patterns

Repeated operations are handled either by recursion or loops (iteration). One of the fundamental structures of programming is loops, and we programmers tend to think, If I need to repeat an operation, I use a loop. Loops are built-in structures of most languages, and ActionScript 3.0 has multiple options when it comes to loops. ActionScript 3.0 has the standard for (and variations), while, and do statements as well as looping methods for arrays and vectors. So if we need to repeat a set of operations, we have several iterative statements that will get the job done for us.

Why Bother With Recursion?

In most (but certainly not all) situations, iteration is faster than recursion, and so why should we even consider recursion? Recursion is nothing more than a method that can call itself that uses more memory than iteration and fills up the stack quickly. You’ll get a stack overflow with recursion both with big numbers and with infinite loops. Loops can handle big numbers better, and while they eventually blow a gasket with an infinite loop, they take longer to do so because iterations are not stored on the stack.

Despite what some programmers would see as the end of the conversation comparing iteration with recursion, I was able to find two good reasons to consider recursion over iteration.

1. The code can be clearer and simpler
2. Recursion offers more elegant solutions

With the caveat that the following is not a call to abandon loops, let’s take a look at the reasons you should consider recursion the next time you come across a task that requires repeating operations.

Clear and Simple

Sometimes we come to a problem where we want to lay out all of the options to better see what’s going on. With loops, especially with complex ones that involve nesting, we can quickly find ourselves spinning our wheels. On the other hand with recursion, we can lay out the steps in a series of statements that clearly show the options we have to consider.

For example in the previous post on this blog examining the construction and use of skip lists, the search algorithm uses recursion. In the stripped down version of the search method, we can clearly see the repeated steps taken in the search routine:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

public function searchList(searchKey:uint,layNum:int):int
		{
			this.searchKey=searchKey;
 
			if (initial)
			{
				layNum=4;
				searchNode=headNode;
				initial=false;
			}
 
			if (searchNode.contents==searchKey)
			{
				trace("success");
				return searchNode.contents;
			}
\
			if (layNum<0)
			{
				trace("Number not found");
				return -1;
			}
 
			if (searchNode["skip"+layNum].contents< =searchKey)
			{
				searchNode=searchNode["skip"+layNum];
			}
 
			else
			{
				layNum--;
			}
			return searchList(this.searchKey,layNum);
		}

The steps are clear to see how the search works its way through the skip list to find whether a given value were included:

1. If it’s the first time through, begin at the top level in the head node.
2. If the search key matches the node contents end the search and return the found contents.
3. If the layer is below 0; end the search and inform the user that the value was not found.
4. If the next node is greater than or equal to the search key, the search node becomes the next node
5. If the next node is less than the search key, move down a layer
6. Run function again if nothing is returned

Read more…

The Recursive Vice

After our post on the binary search algorithm, I found that no one had cooked up an example of a Recursive Binary Search. So, I did. In a recent post, we looked at linked lists and used a recursive algorithm to move through the list. The algorithm is simple, and I hope explains both binary search and how to use recursion with such a search. As with the other posts in this recent series, we’re working our way to skip lists, and I hope this will aid in understanding how skip lists work.

Divide and Conquer

The binary search algorithm uses a divide and conquer approach that works like a vice. With each division in half, the bottom range gets higher and the top range gets lower and the search object is either squeezed out or not found. This saves a lot of poking around an array (or other list) to find what you’re looking for.

When using recursion, the function containing the search algorithm keeps calling itself until a match occurs or it runs out of places to look. In order to provide a visual representation of what’s going on, I used trace statements with each call to a recursive function. As you will see, with each recursive call, the search function displays the call and the values. The first parameter is the search value (44 in this case) and the second two parameters represent the beginning and ending values of the search fields. When you run the program, you will see something like the following:

recursive call to: recursiveBinarySearch(44,0,49);
recursive call to: recursiveBinarySearch(44,25,49);
recursive call to: recursiveBinarySearch(44,38,49);
recursive call to: recursiveBinarySearch(44,38,42);
recursive call to: recursiveBinarySearch(44,41,42);
recursive call to: recursiveBinarySearch(44,42,42);
Your number is at position 42

The beginning search of 100 elements is 49 for the top and 0 for the bottom. It then moves up through the numeric elements of the array until it finally squeezes out the found item in array element 42. (The array is randomly populated from 1 to 100 and then sorted—binary searches require sorted lists.)

Normally in these posts I don’t use a lot of comments in the code because the text in the post is supposed to explain everything. (Also, comments often get in the way of the flow of the programming logic and good agile programming shouldn’t need comments.) However, for this algorithm, I found that it probably helps to see each step in detail so I put in quite a few comments.

I also put the algorithm in a class. Because,

…an algorithm without a class is like a child without a mother…

That reminds me, Happy Mothers Day to all of you mothers out there.

(I suppose a corollary would be,

…a class without a design pattern is like a child without a father…

but I’d never say that because people might get the wrong idea about the latter piece of wisdom.)

Okay, so let’s take a look at the class containing the algorithm:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

package
{
	import flash.display.Sprite;
 
	public class Binary extends Sprite
	{
		private var searchArray:Array=new Array();
		private var sizeNow:int;
		private var mid:int;
		private var poke:int;
		private var begin:int;
		private var end:int;
		private var flagUp:Boolean=true;
 
		public function Binary()
		{
			for (var stuff:int=0; stuff<100; stuff++)
			{
				searchArray.push(int(Math.random()*100));
			}
			searchArray.sort();
			sizeNow=searchArray.length;
		}
 
		public function recursiveBinarySearch(valueN:int,begin:int,end:int):int
		{
			/*Only on the first time through use the array
			length as the end value. The Algorithm keeps
			changing the end value so you don't want to use
			the array length more than once.    */
			if (flagUp)
			{
				end=sizeNow;
				flagUp=false;
			}
 
			/*If the end value is smaller than the begin value
			the search is over and item was not found.    */
			if (end<begin)
			{
				return -1;
			}
 
			/*Find the midway point between begin and end
			and use it as the numeric key for the current search
			value—guess (poke).     */
			mid=int((begin + end)/2);
			poke=searchArray[mid];
 
			/*If a match occurs return
			the value of the numeric key.  Search ends here.  */
			if (poke==valueN)
			{
				return mid;
			}
 
			/*If no match; guess larger than value; the end value
			becomes the midway value minus 1. Otherwise, the begin
			value becomes the midway value plus 1.     */
			else
			{
				if (poke>valueN)
				{
					end=mid-1;
				}
				else
				{
					if (poke<valueN)
					{
						begin=mid+1;
					}
				}
			}
 
			/* Keep making the recursive call until value is found
			or all possible values are searched */
			trace("recursive call to: recursiveBinarySearch("+valueN+","+begin+","+end+");");
			return recursiveBinarySearch(valueN,begin,end);
		}
	}
}

Like I said, there are a lot of comments there so that you can see the steps through the algorithm. Now, a second class acts like a client and calls the method in the Binary class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

package
{
	import flash.display.Sprite;
	public class Searcher extends Sprite
	{
		private var searching:Binary=new Binary();
		private var searchElement:Number;
		private var searchNow:Number;
 
		public function Searcher()
		{
			searchNow=searching.recursiveBinarySearch(44,0,0);
			if (searchNow>=0 && searchNow != 4294967295)
			{
				trace("Your number is at position " + searchNow );
			}
			else
			{
				trace("Not found");
			}
		}
	}
}

Keep in mind that all of the searches are searching the numeric element keys of the array—not the values. Therefore, you shouldn’t expect the found value to be the same as the numeric key value. Also, since the values are generated randomly, the value you place in the first parameter of the line:

searchNow=searching.recursiveBinarySearch(44,0,0);

may not be found at all. I put in 44 for the search value, but you can add any value you want between 1 and 100. Alternatively, you can fix it up so that you can dynamically enter different values or even change it to make it look for string values. However, the point is simply to demonstrate how to create and use a recursive binary search.

As always, your comments, corrections and wisdom are always welcomed.

Recursive Linked List

To understand Skip Lists we need to understand Linked Lists. Linked lists are nothing new to programming, dating back to the early days of digital computing in the 1950′s. I found an old Macromedia DevNet article by Branden Hall on creating linked lists in an earlier version of ActionScript. So while nothing new to programming, they are often overlooked.

Why Linked Lists?

Before we look closely at linked lists, we should briefly discuss their utility. After all, we’ve got Arrays (and Vectors) for storing data. Further, arrays are easy to sort, and ActionScript 3.0 structures are available to iterate through them.

One problem with arrays is that it’s difficult to insert elements between existing elements. Using linked lists, you can put the data in any order at all, including between existing nodes (elements). The linkage is not the order of the array because arrays have no linkage between elements.

In its most basic form, a linked list is a series of nodes with each node having a value and a reference to the next node. The value can be anything and the link must be to the next node using whatever sequence the programmer wants. Some linked lists have references to the previous and next node and some are even circular—the last node links to the first node. However, I’m going to stick with the singly-linked linear lists. First it is a recursive data structure, and second it is useful for what we’ll be doing with skip lists. Figure 1 shows this kind of list with its various parts:

Figure 1: Linked list and its components

In looking at the linked list, the most important aspect of such a list is the Next Field. The Next Field is a pointer to the linked node—the next node. Remember, a pointer is simply a reference to another object. With linked lists, that makes all the different in the world. Array elements are linked to nothing. (Numeric or string keys are not pointers so much as they are labels.)

Before going on to create an example of a linked list in ActionScript 3.0, we need to consider node insertion. As noted above, inserting an element in an array can be tricky. However, you may be wondering about how easy it is to insert a node between existing nodes. Wouldn’t the pointer from the node before the new node have to be changed? That is, if Node 5a is inserted between Nodes 5 and 6, wouldn’t we have to change the pointer in Node 5 to Node 5a? Yes. Node 5′s pointer would have to be changed from Node 6 to Node 5a. Node 5a would point to Node 6.

An ActionScript 3.0 Linked List

Without further ado, let’s whip up a linked list in ActionScirpt 3.0. The contents of the list (placed in the data field) can be anything, but I decided to use strings sequentially listing the first six letters of the Greek alphabet. (It rhymes with “Geek,” and I couldn’t resist.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

package
{
	import flash.display.Sprite;
 
	public class LinkedList extends Sprite
	{
		private var alphaNode:Object=new Object();
		private var betaNode:Object=new Object();
		private var gammaNode:Object=new Object();
		private var deltaNode:Object=new Object();
		private var epsilonNode:Object=new Object();
		private var zetaNode:Object=new Object();
		private var nullNode:Object=new Object();
		private var recursiveNode:Object=new Object();
 
		public function LinkedList()
		{
			alphaNode.contents="alpha";
			betaNode.contents="beta";
			gammaNode.contents="gamma";
			deltaNode.contents="delta";
			epsilonNode.contents="epsilon";
			zetaNode.contents="zeta";
 
			alphaNode.nextUp=betaNode;
			betaNode.nextUp=gammaNode;
			gammaNode.nextUp=deltaNode;
			deltaNode.nextUp=epsilonNode;
			epsilonNode.nextUp=zetaNode;
			zetaNode.nextUp=nullNode;
 
			recursiveNode=alphaNode;
 
			while (recursiveNode != nullNode)
			{
				trace(recursiveNode.contents);
				recursiveNode=recursiveNode.nextUp;
			}
		}
	}
}

Your output will be:
alpha
beta
gamma
delta
epsilon
zeta

At first glance, it looks like we just iterated through a loop, and indeed we did. However, instead of using an iterative sequence, we used the linked list pointers to go from one node to the next. Each of the nodes was recursively linked to the next node. The sequence began with the Head Node, with an object (recursiveNode) referencing itself through the entire list using the nextUp property to traverse the list. (The loop just served as an engine.) Further, you can see that our output is not ordered alphabetically—at least in non-Greek.

Reader Challenge: Ordering the Linked List

The first task is to figure out where the output is unordered as far as ActionScirpt 3.0 is concerned. The next task to to change the pointers so that the output is ordered. Use the Comment section to show your solution. If you can do that, you will be better prepared to understand how linked lists are used in skip lists in an upcoming post.

If you are interested in linked lists, check out this Stanford University lecture on the topic. It served as a useful guide in preparing this post and has everything you’ll ever want to know about linked lists.

A while back a comment by Timo Hannelin suggested that I use a skip list in one of the design patterns. (I looked but couldn’t find the comment, but I remember it was a good idea.) Anyway, I read the original article on skip lists by William Pugh. After reading the article and a few more articles on skip lists, I saw Timo’s point. However, since I’ve got my hands full with design patterns, and I dislike design pattern discussions degenerating into a chat about algorithms, I didn’t bring it up.

Algorithms in Participants

Having a little time right now, I thought I’d return to skip lists and see where they’d be valuable for participants in one of the design patterns. So, to warm up for working with skip lists I thought I’d whip up a Binary Search algorithm in ActionScript 3.0. Further, I wanted to entertain myself, and so I decided not to peek at any solutions on the Web.

After a few hours of trying to strong arm a solution I gave up and decided to peek. This is what I found:

Although the basic idea of binary search is comparatively straightforward, the details can be surprisingly tricky… — Professor Donald Knuth (Professor emeritus, Stanford University)

Further, I learned that only five out of twenty textbooks had accurate code for a binary search! Well, at least I didn’t feel like an idiot, but still, the concept is pretty simple, and it’s easy to do in your head. It’s just difficult (or tricky) to whip one up in code.

The Binary Search

The concept behind the binary search is to search by dividing an ordered list in consecutive halves. If the search guess is higher (in the ordered list) than the one being searched for, the bottom of a range is the search guess. If the search guess is lower; then the top of the range is the search guess. Each consecutive search is the halfway point between the top and bottom of the range. The solution is found by closing in like a vice taking chunks in halves rather than iterating through an entire list. It’s very fast and efficient for searches.

To get started, I created a function to generate a quick and dirty ordered array with 100 random numbers. (The variables were declared elsewhere in the class.)

1
2
3
4
5
6
7
8
9
10
11
12
13

private function generate():Array
{
	//Generates 100 numbers
	//Places them in a sorted array
	while (pack < 100)
	{
		ranInt=Math.random()*100;
		arrayPack.push(ranInt);
		pack++;
	}
	arrayPack.sort();
	return arrayPack;
}

Then I started writing the algorithm for the binary search. After locking up my computer with infinite loops a couple of times and rerouting the power grid of Bloomfield, Connecticut to Timbuktu, I gave up. Using numbers, I kept mixing up array numeric keys with the search values.

Your Turn to Have Some Fun

Anyway, since a lot of our readers like algorithms, I thought this might be a fun one for you to solve. You can find a lot of discussions of the binary search concept online as well as solutions (in the form of code and generic algorithms). However, see what you can come up with before you give up and peek (like I did). I can tell you this, though. One general solution uses recursive coding and the other uses iterative. Remember, though—only about a quarter of the computer science textbooks had it right. So, give it a go on your own knowing that if you come up with a solution, you’re smarter than 75% of the CS textbooks! We’ll use the Comments Section of this post for your solutions and look at skip lists in a future post.

A couple of readers suggested that a full-fledged example might be a good follow-up to my previous post introducing the iterator pattern. This is a good suggestion as there are few meaningful examples of the iterator pattern that demonstrate its intent and usefulness. This is probably due to the iterator pattern being a built-in construct in most programming languages. However, built-in iterators are designed to  traverse  native collections such as Arrays and Dictionaries. To traverse a custom data structure, we need to develop an iterator from the ground-up. In this example, we will develop a webpage scraper, like  Googlebot, that recursively harvests information from web pages.

Why is an iterator pattern a good candidate for use in developing a webpage scraper? As described in my previous post, the iterator pattern provides a uniform way to traverse and access elements in a collection. A web page is a collection of elements. To harvest the elements ( tags ) we need to traverse and access the elements in the collection (HTML). The iterator pattern light bulb should go off at this point.

Having a uniform interface to access different elements in the web page is very desirable. Why? because there are multiple ways to traverse and access different elements. We can develop several concrete iterators to access different tags. In this example, we will develop two concrete iterators: one to access hyperlinks and the other to access images.

The example will be developed in two parts. My initial novice attempt will be described first ( I’ll call this version 1 ). I initially treated a web page as an XML document, so that E4X could be used to traverse and identify elements. However, this introduced a major limitation in that only well-formed web pages could be scraped.  This didn’t mean that the web pages had to be declared as XHTML Strict per se, but each page had to be structured according to the rules defined in Section 2.1 of the XML 1.0 Recommendation. So, any malformed web pages with missing closing tags, or funky characters would fail the test. In my second attempt (version 2), I treated web pages as text documents and used regular expressions to identify elements. This introduced another more serious limitation in that my knowledge of regular expression pattern matching was minimal. So, version 2 was more of an adventure in slaying the regular expression dragon than anything else. However, the utility of the iterator was amply demonstrated as I could extend the scraper app to meet the new reqruiement without changing any existing code – the ultimate test in reusability. Here is the initial class diagram.

Webpage scraper – version 1

Class diagram of version 1

Read more…

Recursion is one of those things I’ve been thinking about lately because of the recursive classes in the Prototype pattern. However, recursion isn’t something that I think about much, but at the OOPSLA conference in Nashville that is just now wrapping up, it came up in as a favored method over loops. A professor from Cornell University was making a presentation at one of the sessions I attended, and he noted that they introduce students to recursion before introducing loops , getting enthusiastic approval from some in the audience. Because I’ve been beating my head against the Prototype pattern, this was more than a little interesting. What’s so special about recursions?

Another Loop?

In some respects, recursion is just another looping structure, but programmers tend to think about them differently, and I thought I’d see what I could find from some of the big brains at OOPSLA. I talked with Dr. Axel Schreiner about recursion and got all I could ever imagine anyone would want to about them. However, like many, he considered recursion to be a loop structure and didn’t seem to be particularly excited whether loops or recursive structures were employed. For Axel, recursion and looping were a matter of looking at repeated actions in different ways.

Defined, a recursion is a method (or function) that can call itself. That doesn’t sound like a loop, but it does have a repeating element in that a recursive function repeats a process by the simple fact of calling itself. The most common examples of recursion is a factorial, but Fibonacci sequences and Towers of Hanoi are other common examples used to illustrate recursion. Since Fibonacci sequences are one of those just plain cool math structures, I thought I’d start with a Fibonacci sequence.

A Fibonacci Example

A Fibonacci sequence is one where each number in a sequence is made up of the sum of the previous two in the sequence. The sequence begins with 0 and 1:

0 1 1 2 3 5 8 13 21

Rather than using a loop to generate the sequence, the recursive function in the following example takes a parameter (r) and returns the next value in the sequence after r. The following class calls the recursive function via a trace() statement. (I was using Flex, but Flash works fine for the same function.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/*Fibonacci  generated in a recursive function*/
package
{
	import flash.display.Sprite;
 
	public class FibRecursion extends Sprite
	{
		public function FibRecursion()
		{
			trace(fibo(8));
		}
 
		private function fibo(r:uint):uint
		{
			if(r==0)
			{
				return 0;
			}
			else if (r==1)
			{
				return 1;
			}
			else
			{
				return fibo(r-1) + fibo(r-2);
			}
		}
	}
}

The recursion occurs in the third return statement. That is, part of the fibo() function calls itself. As you will see, the output is,

21

The question is, what’s going on inside the cursive function?

Read more…