Archive for the ‘Programming’ Category

2 invaluable Drupal development tips: list all available variables and backtrace a page

Saturday, March 14th, 2009

The Drupal Devel module includes some invaluable functions that make working with Drupal much much easier. A short list of these functions can be found at this post. One of these is the dpm() command (which I would guess stands for “Drupal Print Message,” or at least that’s how I remember it). Given an array or object, this function will output a div structure at the top of your page that you can use to visually walk through the contents of either of these sets of data. Combine this with existing PHP debugging and instrospection commands and you have a very useful and powerful development tool at your disposal. For example, place this at the top of your Drupal theme’s page.tpl.php template:

<?php
	 dpm( get_defined_vars() );
?>

Now when you navigate to your page you will have a clickable bar at the top that will list all variables available to the page when it loads, which you can access via the code in your theme page template if you want.

dpm_get_defined_vars

Or maybe you would like to know what path your page took through Drupal’s architecture to its final incarnation, use dpm() with PHP’s debug_backtrace() function. This will output an array of each function your page contents went through before they were output to the browser, plus it shows the location of these functions. Try this in place of the code snippet above:

<?php
	 dpm( debug_backtrace() );
?>

dpm_debug_backtrace

Cairngorm versus PureMVC, the most basic example application!

Friday, December 5th, 2008

Awhile back when I was learning to use the Cairngorm framework, Nicolas Lierman had a very basic example of a Cairngorm application. At the time I was trying to slog through the Cairngorm Store example, racking my brains trying to figure out what was going on. I didn’t need such a complex example to start from, just something extremely simple that would compile, and I could build from there. Looking at Nicolas’ example application was an ‘ah ha’ moment when it all came together in my mind. Now I have been learning the PureMVC framework and would like to resurrect a slightly modified version of that Cairngorm example (Nicolas’ used WebService, this uses HTTPService) side-by-side with the same example written in PureMVC. If you are trying to learn either of these frameworks, reference the Cairngorm Explorer and/or the PureMVC Conceptual Diagram and build on these examples. I hope they will help you as much as they helped me to learn the framework’s architecture.

Below is the example application written using the Cairngorm framework. Since the PureMVC example looks and functions exactly the same I will omit it. As you can see it is very simple. Type in your name and it sends it to the server and returns a message.

This movie requires Flash Player 9

The php backend is extremely simple:

<?php
	echo "Hello " . $_REQUEST['name'] . "!";
?>

Download Source Here (You will also need to download Cairngorm and PureMVC).

Coraldata merged into BirdEye

Wednesday, October 8th, 2008


Thanks to the interest of Jason Bellone at the United Nations, Centre for Advanced Visual Analytics, I am happy to announce that my data structure library, coraldata, has a new home in the BirdEye Information Visualization and Visual Analytics Library. It may take a little time to get all the classes up there, but it resides in the General Utilities package, called GuVis.

Recursively convert XML into multidimensional array (AS2)

Thursday, September 4th, 2008

This is a code snippet I wrote awhile back that recursively works through an XML file and converts it from XML into a multidimensional array. This was from the days before E4X was a part of ActionScript, and as such this is an ActionScript 2.0 example, so it may not be as useful as it once was. But nonetheless, maybe someone will find it of use. Here it is (usage example is at the end):

//recursive function to convert an XML file to an array
function XMLtoArray(node:XMLNode, arr:Array):Array{
	var nodelen:Number = node.childNodes.length;//number of children nodes within a particular node
	var resultValue:Array = [];//result of a recursive call to this function
	var count:Number = 0;//index number of the current node relative to its siblings
 
	node = node.firstChild;
 
	//loop through node children
	for (var i=0; i < nodelen; i++) {
		//if the first child of that node does not have children
		//create an associative array with the node name equal to the node value
		if (node.firstChild.hasChildNodes() == false){
			arr[node.nodeName] = node.firstChild;
		}
		else{
			//else node has more nodes inside, make a recursive call to walk down the XML tree
			arr[count] = [];
			resultValue = XMLtoArray(node, arr[count]);
			if (resultValue != undefined){
				arr.push(resultValue);//push result into array
			}
		}
		//when loop is on its last iteration return the compiled array
		if (i == (nodelen-1)){
			return arr;
		}
		count++;
		node = node.nextSibling;
	}
 
	return undefined;
}
 
var imgXML:String = "<cat><img><filename>1.jpg</filename><caption>cap1</caption></img><img><filename>2.jpg</filename><caption>cap2</caption></img></cat>";
var xmlArray:Array = XMLtoArray(new XML(imgXML), new Array());
 
trace(xmlArray[0][0]["caption"]);
//xmlArray[0] goes into first node <cat>
//xmlArray[0][0] goes into second node <img>
//xmlArray[0][0]["caption"] retrieves contents of <caption>cap1</caption>
 
trace(xmlArray[0][1]["filename"]);
//outputs the filename of the second image

Scaling a DisplayObject to fit to a container’s dimensions

Monday, June 30th, 2008

I’ve often run into the problem of proportionally scaling an image (or other DisplayObject) to the dimensions of its parent container. I always end up having to scavenge around in my code bank for the line of code to do this—which really is a simple bit of code—but I prefer to copy-and-paste it than rewrite it. SO I am posting it here so I never have to search for it again:

var scale:Number = ((container.height/container.width) > (image.height/image.width)) ? (container.width/image.width) : (container.height/image.height);
image.scaleX = scale;
image.scaleY = scale;

Download an example here

Spring <br /> 2008 Presentation

Wednesday, June 4th, 2008

Speaker - Spring Break 2008 ConferenceThis past Tuesday I spoke about Data Structures at the 2008 Spring <br /> Conference in Baker Center, at Ohio University in Athens, Ohio. Since I was involved in organizing the conference this year, it was a pleasure to have the big day finally arrive. I enjoyed some technical wizardry by Samuel Agesilas Pastel, a dreamy walk down the Internet’s memory lane in Eric Meyer’s lunchtime presentation, open source wonders in Orson Bradford’s (yes we’re related) Introduction to Drupal and Eric Kramer’s Using the Firebug & WebDeveloper Extensions in Firefox.

The slides from my presentation, Data Structures in AS3, are available online.

Setting private property values of a cloned ActionScript 3 object

Saturday, May 24th, 2008

Sometimes when cloning an object it is desirable to set a private or read-only property on the clone. Since these properties aren’t writable from outside the class itself, how can their values be changed?

Drawing from the ideas of Grant Skinner’s post on Singletons the same internal class technique can be used to set properties on an object through its constructor, but only if it is instantiated within the class itself, such as through a clone() method.

The following is an example of a simple class that has a clone() method and the clone has a read-only property that is set when it is instantiated:

package
{
	public class Cloner
	{
		/*----------------------------------------------------------------------
		* properties
		*---------------------------------------------------------------------*/
		private var _isClone_:Boolean = false;
 
		/*----------------------------------------------------------------------
		* constructor
		*---------------------------------------------------------------------*/
		public function Cloner( allow:AllowConstructorArguments = null , prop:Boolean = false ) 
		{
		  	if ( allow is AllowConstructorArguments ) 
		  	{
		  		_isClone_ = prop;
		  	}
		}
 
		/*----------------------------------------------------------------------
		* public methods
		*---------------------------------------------------------------------*/
		/**
		* Whether this object was created from the clone method.
		*/
		public function get isClone() : Boolean{ return _isClone_; }
 
		/**
		* Create a clone of this object
		*/
		public function clone() : Cloner
		{
			return new Cloner(new AllowConstructorArguments() , true);
		}
	}
}
 
 
/**
* Internal class for allowing arguments in the constructor if this class is 
* instantiated from within this class.
*/
internal class AllowConstructorArguments{}

Alternatively, if you would not like the constructor to have a long list of parameters. The … (rest) parameter could be used in the constructor, like so:

...
		public function Cloner( ... args:Array ) 
		{
		  	if ( args[0] is AllowConstructorArguments ) 
		  	_secretSwitch = Boolean(args[1]);
		}
...

The class can be tested with the following:

			var c:Cloner = new Cloner();
			var d:Cloner = c.clone();
 
			// outputs: false true
			trace( c.isClone , d.isClone );

Encapsulating interactive behavior in Flex applications for better code readability

Wednesday, May 7th, 2008

Consider for a moment dragging an element within an application. The steps required for this operation are as follows:

Behavior Description Event to listen for
START DRAGGING… When the mouse button is pressed down over the element. MouseEvent.MOUSE_DOWN
DRAG… While the mouse is moving and the mouse button is pressed down over the element. MouseEvent.MOUSE_MOVE
STOP DRAGGING… When the mouse button is released over the element. MouseEvent.MOUSE_UP
When the mouse is moved outside the stage (e.g. outside the application window). This is necessary because we cannot determine whether the mouse button has been released while the mouse is outside the application window. Event.MOUSE_LEAVE

Adobe Flex’s event model makes it easy to listen for interactive mouse events within an application. A simple operation like a mouse click only requires listening for a MouseEvent.CLICK event being dispatched from the element in question, like so:

element.addEventListener( MouseEvent.CLICK , _element_clickHandler );
...
protected function _element_clickHandler( event:MouseEvent ) : void
{
// handle click on element
}

While handling a mouse click is simple enough to do, more complex interactive behavior such as dragging requires listening to multiple events from both the element in question as well as the stage. Implementing this behavior can clutter your code and not be as clear as it could be, since there is not a dragging event to listen for natively in Flex (Drag and Drop aside).

An alternative is to encapsulate the dragging behavior in a separate class that acts as a proxy for the element and issues its own events that the main application listens for. For example:

var behavior:DraggableBehavior = new DraggableBehavior(element);
element.addEventListener( DraggableBehaviorEvent.DRAGGING , _element_draggingHandler );
...
protected function _element_draggingHandler( event:DraggableBehaviorEvent ) : void
{
// handle dragging of element
}

This moves all the event handling methods and listeners to a separate class file, organizing your code better. It also creates an event that more accurately reflects what operation is going on.

 

This movie requires Flash Player 9

Download Source Here

Efficient storage and retrieval of boolean values using bitwise operations

Thursday, May 1st, 2008

Since each digit in a binary number is only composed of one of two possible values, 0 or 1, a binary number can be thought of as a series of switches.

Each of these switches can be thought of as a TRUE or FALSE value if it is 1 or 0. So a binary number can then be used to represent a list of boolean values. If we assigned a property to each bit in this binary number we would be able to store the value of a set of boolean properties (five properties in this case) within a single number.

For example, suppose you wanted to limit access to your computer for certain users, and you wanted to store what privileges each user had within a database. You could create a table for the users and create fields for CAN_READ, CAN_WRITE, CAN_EXECUTE. This would work fine, but using a binary number as the storage mechanism for the privileges can make this process much more elegant and efficient.

Take a three bit binary number, for instance, 111 (read that as one-one-one). Each bit could be assigned a boolean value. So the rightmost bit could represent the boolean value for CAN_READ, the middle bit could represent CAN_WRITE, and the leftmost bit could represent CAN_EXECUTE. Therefore switching any of these three values to 0 within the binary number would specify that that privilege was not granted for a particular user. For example, the binary number 011 (otherwise written as 3 in decimal) would specify that a user could read and write files on the computer but could not execute applications.

To create this kind of arrangement create a table to hold the privileges (a.k.a. permissions). Insert entries into this table for each bit in the whole binary number. Next create a users table that has a field for holding a number that represents what privileges a user has. In the permissions table each entry will only have one bit turned on, while the entries in the users table could have multiple bits turned on because a user could have more than one privilege on the computer.

So here is the SQL to create those two tables and fill them with data:

CREATE TABLE PERMISSION
(
	bit			BIGINT NOT NULL UNIQUE,
	name			VARCHAR( 32 ) NOT NULL UNIQUE,
	description		VARCHAR( 2048 ) NOT NULL,
	PRIMARY KEY ( bit )
);
 
CREATE TABLE USER
(
	id			SERIAL,
	name			VARCHAR( 32 ) NOT NULL UNIQUE,
	bitpattern		BIGINT NOT NULL,
	PRIMARY KEY ( id )
);
 
INSERT INTO PERMISSION ( bit, name, description )
	 VALUES ( 1, 'CAN_READ', 'User can read files');
INSERT INTO PERMISSION ( bit, name, description )
	 VALUES ( 2, 'CAN_WRITE', 'User can write files');
INSERT INTO PERMISSION ( bit, name, description )
	 VALUES ( 4, 'CAN_EXECUTE', 'User can execute applications');
 
INSERT INTO USER ( id, name, bitpattern )
	 VALUES ( 1, 'admin', 7);
INSERT INTO USER ( id, name, bitpattern )
	 VALUES ( 2, 'manager', 3);
INSERT INTO USER ( id, name, bitpattern )
	 VALUES ( 3, 'enduser', 1);

Here’s what they look like in a more visual way: 

…and filled with data:

Now to pull the permissions for a particular user out of the database we will use the bitwise AND operator (&). This operator compares two numbers binary bit by binary bit. If the bit at a particular position in both numbers is 1, then the bit at that position in the resulting number is 1, otherwise it is 0. So for example if we took the numbers 011 (3 in decimal) and 100 (4 in decimal) and performed a bitwise AND operation on them it would look like this:

011
100
—-
000

The result is 000, because none of the 1 bits overlapped. If the first number was the permissions a user had and the second number was the permission to execute applications, then performing a bit AND operation on these two numbers would determine that that particular user could not execute applications. If it had resulted in any other number besides 0 it means that they could execute applications. Therefore to query the database to find the permissions of a particular user we would perform the following:

SELECT * FROM USER, PERMISSION 
	  WHERE (bitpattern & bit != 0) 
	  AND (name = 'manager');

Which would search through the PERMISSION table and only return those entries where a bitwise AND operation between the ‘manager’ user’s permissions number and the bit of the privilege did not return 0. In this case it would return the entries for CAN_READ and CAN_WRITE.

Formatting decimal as binary

Thursday, May 1st, 2008

While most of the time you will see numbers in the decimal number system (using the digits 0 through 9), internally within your computer these numbers will be represented in binary. In the binary numeral system each number can only be composed of a sequence of two values: 0 or 1, ON or OFF, TRUE or FALSE, and so on.

Binary numbers are sequences of 1’s and 0’s, moving from right to left, each occurrence of a 1 is equivalent to twice the decimal value of the previous digit’s decimal value. Take for example the binary number 11111111. The first digit has the decimal value of 1, the second has the decimal value of 2, the third has the decimal value of 4, and so on. Adding all these values together equals the final decimal value, which in this case is 255.

Each digit in a binary number is called a bit, in this case all bits are 1. If some of the bits were 0, they would not add to the resulting decimal number, but they would still represent a place within the sequence.

To play around with converting numbers from one base to another, try my Base Converter widget.

Treating decimal numbers as binary numbers is useful when dealing with bitwise programming, where individual bits within a binary number can be switched to their reverse value (either 1 or 0). This allows for extremely efficient division by 2 arithmetic and for a technique of representing binary numbers as an efficient storage mechanism for a bunch of boolean values.