package {
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import flash.text.*;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;

	public class Slideshow extends Sprite {
		// XML gallery data
		private var xmlString:String;
		private var xmlURL:String;
		private var xmlData:XML;
		private var urlLoader:URLLoader;

		// slideshow attributes
		private var slideshowWidth:Number;
		private var slideshowHeight:Number;
		private var slideshowSpeed:Number;
		
		// slideshow images
		private var images:XMLList;
		private var imagesNum:uint; 
			
		// container
		private var container:Box;

		// constructor
		public function Slideshow () {
			loadXML("slideshow.xml");
		}
		
		// load XML
		private function loadXML (xmlURL:String):void {
			var urlRequest:URLRequest = new URLRequest(xmlURL);
			urlLoader = new URLLoader();
			urlLoader.addEventListener(Event.COMPLETE, loadXMLListener);
			urlLoader.load(urlRequest);
		}
		
		// event listener
		private function loadXMLListener(e:Event):void {
			xmlData = new XML(urlLoader.data);

			// slideshow attributes
			slideshowWidth = Number(xmlData.@width);
			slideshowHeight = Number(xmlData.@height);
			slideshowSpeed = Number(xmlData.@speed);

			// slideshow images
			images = xmlData.child("image");
			imagesNum = images.length(); 

			createContainer();
			displayText();
		}

		private function displayText():void {
			// list images as a string
			var imagesText:String = "Images:";
			for (var i:uint = 0; i < imagesNum; i++) {
				var imageNum:uint = i;
				var imageURL:String = images[i].@url;
				var imageLabel:String = "Image " + imageNum;
				imagesText += "\n" + imageLabel + ": " + imageURL + stage.width;
				
			}
			
			// display XML in a text box on the stage
			addTextBox(slideshowWidth + ", " + slideshowHeight + ", " + slideshowSpeed 
					   + "\n" + imagesText
					   + "\nNumber of images: " + imagesNum);
		}

		// create container
		private function createContainer ():void {
			container = new Box (slideshowWidth, slideshowHeight, 0xFFFFFF);
			container.x = (stage.stageWidth - container.width) / 2;
			container.y = (stage.stageHeight - container.height) / 2;
			addChild(container);
			transition();
		}
		
		private function transition ():void {
			new Tween(container, "alpha", None.easeInOut, 0, 100, slideshowSpeed * 100, true);
		}

		// create text box to display XML on stage
		public function addTextBox(string:String):void {
			var string:String;
			var textBox:TextField = new TextField();
			var format:TextFormat = new TextFormat();
			format.font = "Arial";
			format.size = 15;
			format.color = 0x000000;

			textBox.text = string;
			textBox.setTextFormat(format);
			textBox.autoSize = TextFieldAutoSize.LEFT;

			addChild(textBox);
		}
		
	}
}

I have been doing interface design for the Project Manager module of the system, and we have it to the point that our entire team has been using it to track time for Projects and Tickets. I like to be able to understand how the system works so I can add functionality in a way that works. To be able to help with the development of the application, I want to learn a little Perl to help me understand our templating system better. Also, I have some ideas about how we might be able to make things better by using XSLT as a templating engine for the system. I'm a big fan of open source and web standards, plus my experience with a web publishing application called Symphony has sold me on the idea of using XSLT to develop a much more flexible system for managing content.

Requirements

To that end, I wanted to set up a development environment for working on RouteOne, our suite of proprietary web tools and modules. To accomplish this, I needed Apache, MySQL, Perl and an Eclipse-based IDE with CVS support. Here are the steps I took to set up my system.

I started with a fresh install of Mac OS X 10.5.3 on my Power Mac G5 booting off an external LaCie Firewire drive. This allows me to have a portable system, separate from the system I use for home use.

Hardware Overview

Model Name:            Power Mac G5
Model Identifier:      PowerMac7,3
Processor Name:        PowerPC G5 (3.0)
Processor Speed:       2 GHz
Number Of CPUs:        2
L2 Cache (per CPU):    512 KB
Memory:                2 GB
Bus Speed:             1 GHz
Boot ROM Version:      5.2.4f1

System Software Overview

System Version:        Mac OS X 10.5.3 (9D34)
Kernel Version:        Darwin 9.3.0

Mac OS X Software

To start with, I don't need a whole lot as far as software goes. I can generally find free software for everything that I might want to do. I recommend the following if you want to go the free/open source route:

Free/Open Source Tools

• Firefox - web browser
• Firebug - an indispensable Firefox web developer plugin
• TextWrangler - text editor
• AptanaStudio - a nice open source IDE (integrated development environment)
• Cyberduck - FTP/SFTP client
• MAMP - Apache, MySQL and PHP for Mac OS X
• Symphony - a web publishing system based on PHP, XML and XSLT

Commercial Tools

Panic produces two of what have become my favourite tools for web development. Also, Adobe Creative Suite 3 rounds out requirements as a graphic designer/web developer.

• Transmit - FTP/SFTP client
• Coda - text editor, FTP client, terminal, css editor, browser
• Adobe Creative Suite - Illustrator, Photoshop - graphics and image editing

Installation Procedure

The system I needed to set up required several Perl modules to be installed, in addition to Apache and MySQL. I decided, based on previous experience, that I was going to avoid using CPAN to install Perl modules as much as possible. I found that using MacPorts was much faster by far, and less prone to additional user input and errors resulting from missing dependencies.

Install MacPorts

According to the MacPorts website:

The MacPorts Project is an open-source community initiative to design an easy-to-use system for compiling, installing, and upgrading either command-line, X11 or Aqua based open-source software on the Mac OS X operating system. To that end we provide the command-line driven MacPorts software package under a BSD License, and through it easy access to thousands of ports that greatly simplify the task of compiling and installing open-source software on your Mac.

Before installing MacPorts, it is required to install Apple's XCode Developer Tools and X11. This software is included on the install disks for the Mac. However, the latest version of XCode is available for download from the Apple Developer Connection.

	sudo port -v selfupdate

Install MySQL

Review instructions for upgrading/installing MySQL

Marc Liyanage provides a good set of instructions for installing and upgrading MySQL. Download latest version of the Mac OS X package installer for MySQL 5.0. Install MySQL by running the installer:

	mysql-5.0.51b-osx10.4-powerpc.pkg

Install MySQL Startup Item by running the installer:

	MySQLStartupItem.pkg

Install MySQL.prefPane:

	/Library/PreferencePanes/MySQLStartupItem.pkg

Add aliases to .profile. (By the way, I am using TextWrangler here with the command line tools installed so that when I type edit filename, this will automatically open the file filename in TextWrangler for editing. One of the things I like about TextWrangler is its integration with Terminal in Mac OS X. As an alternative, use nano to edit this file. It will not be visible in the Finder because any file that starts with a . is a hidden file in the Finder. Use Terminal or an application such as TextWrangler, Transmit or Coda which can be enabled to view hidden or invisible files.)

	cd ~
	edit .profile

Add the following to the .profile

	alias mysql=/usr/local/mysql/bin/mysql
	alias mysqladmin=/usr/local/mysql/bin/mysqladmin

Start up MySQL server:

	sudo /usr/local/mysql/bin/mysqld_safe

Login to MySQL monitor

	mysql -u root

Verify that MySQL server 5.0.51b is installed. Upon typing the above command in Terminal, you should receive a message similar to the welcome message below. You may want to follow the recommended instructions to change the root password and set up a new user.

	Welcome to the MySQL monitor.  Commands end with ; or \g.
	Your MySQL connection id is 1
	Server version: 5.0.51b MySQL Community Server (GPL)

	Type 'help;' or '\h' for help. Type '\c' to clear the buffer.

To view the databases available to the root MySQL user, type the following at the mysql> prompt

	mysql> show databases;
	+--------------------+
	| Database           |
	+--------------------+
	| information_schema | 
	| mysql              | 
	| test               | 
	+--------------------+
	3 rows in set (0.00 sec)

	mysql> exit
	Bye

Shutdown MySQL server:

	sudo /usr/local/mysql/bin/mysqladmin shutdown

Install Apache 2.0 with MacPorts

Because I wanted to maintain an Apache install independent of the default Mac OS X Apache WebServer, I chose to use MacPorts, which installs into /opt/local/apache2/. Find the latest version of Apache from MacPorts:

	port search apache

Find the latest port for Apache 2.8.8

	apache2	www/apache2	2.2.8	The extremely popular second version of the Apache http server

Get more information on the Apache 2 port

	port info apache2

List dependencies

	port deps apache2

Install Apache 2.2.8

	sudo port install apache2
	fetch failed

Apache 2.2.9 has been released, so the old version is no longer available

	http://trac.macports.org/ticket/15630

Install Apache 2.2.9

	sudo env MASTER_SITE_LOCAL=http://distfiles.macports.org/apache2 port -v fetch apache2
	sudo port install apache2

The install process provides feedback like this in Terminal:

		...
		--->  Verifying checksum(s) for apache2
		--->  Extracting apache2
		--->  Configuring apache2
		--->  Building apache2 with target all
		--->  Staging apache2 into destroot
		--->  Creating launchd control script
		###########################################################
		# A startup item has been generated that will aid in
		# starting apache2 with launchd. It is disabled
		# by default. Execute the following command to start it,
		# and to cause it to launch at startup:
		#
		# sudo launchctl load -w /Library/LaunchDaemons/org.macports.apache2.plist
		###########################################################
		Warning: apache2 requests to install files outside the common directory structure!
		--->  Installing apache2 2.2.9_1+darwin_9
		--->  Activating apache2 2.2.9_1+darwin_9
		--->  Cleaning apache2

Install Perl with MacPorts

Find the latest version of Perl from MacPorts:

	port search perl

Find the port for Perl 5.8.8

	perl5.8	lang/perl5.8	5.8.8	Perl 5.8.x - Practical Extraction and Report Language

Get more information on the Perl 5.8 port

	port info perl5.8

		perl5.8 5.8.8, Revision 2, lang/perl5.8 (Variants: darwin, threads, shared, darwin_8, darwin_9)
		http://www.perl.org/

		Perl is a general-purpose programming language originally developed for text manipulation and now used for a wide range of tasks including system administration, web development, network programming, GUI development, and more.
		
		Platforms: darwin freebsd linux
		Maintainers: nomaintainer@macports.org

Install Perl 5.8.8

	sudo port install perl5.8

		Skipping org.macports.activate (perl5.8 +darwin_8) since this port is already active
		--->  Cleaning perl5.8

I believe Perl had already been installed as one of the dependencies of Apache.

Install Mod Perl Apache Module with MacPorts

Find the latest version of Perl from MacPorts:

	port search perl

Find the port for mod_perl2

	mod_perl2	www/mod_perl2	2.0.3	Embeds a Perl interpreter in the Apache2 server

Install mod_perl

	sudo port install mod_perl2

Stop Mac OS X WebServer

Stop the native web server to avoid conflicts with MacPorts version

	sudo apachectl stop

A list of apachectl commands

	start      - start httpd
	stop       - stop httpd
	restart    - restart httpd if running by sending a SIGHUP or start if 
				 not running
	fullstatus - dump a full status screen; requires lynx and mod_status enabled
	status     - dump a short status screen; requires lynx and mod_status enabled
	graceful   - do a graceful restart by sending a SIGUSR1 or start if not running
	configtest - do a configuration syntax test
	help       - this screen

Modify the Apache Configuration file

Copy the sample configuration file

Enable mod_perl in the httpd.conf file by adding the following line to httpd.conf

	LoadModule perl_module modules/mod_perl.so

Start MacPorts Apache2

Start Apache with the following command

	sudo /opt/local/apache2/bin/apachectl start

Test Apache Server

Go to http://localhost/. If all went well, there should be a message in the browser window with the following message:

It works!

Check out CVS project with AptanaStudio

Assuming AptanaStudio is already installed, documentation for CVS support can be found on the Aptana Plugins page:

CVS Support. This adds the Eclipse CVS plugins not bundled with Aptana Studio standalone.

1. Go to the Update Manager in Aptana Studio via Help->Software Updates->Find and Install...
2. Add a new Remote Update site to the following url: http://update.aptana.com/install/cvs/
3. Install the Eclipse CVS feature from that update site

In Aptana, create a new project

	File > New > Project > CVS > Projects from CVS

Install Perl Packages

Several Perl modules are available from the CPAN. On the Mac, it seems to be far easier to use MacPorts for as many modules as are available. These are the modules that were required that could be found at MacPorts, listed according to the commands used to install the packages:

	sudo port install p5-archive-tar
	sudo port install p5-archive-zip
	sudo port install p5-authen-sasl
	sudo port install p5-bsd-resource
	sudo port install p5-bit-vector
	sudo port install p5-cache-cache
	sudo port install p5-class-singleton
	sudo port install p5-crypt-passwdmd5
	sudo port install p5-module-build
	sudo port install p5-datetime
	sudo port install p5-date-calc
	sudo port install p5-digest
	sudo port install p5-digest-hmac
	sudo port install p5-email-valid
	sudo port install p5-file-mmagic
	sudo port install p5-html-parser
	sudo port install p5-html-tree
	sudo port install p5-libwww-perl
	sudo port install p5-mailtools
	sudo port install p5-mime-lite
	sudo port install p5-module-install
	sudo port install p5-net-telnet
	sudo port install p5-soap-lite
	sudo port install p5-string-crc32
	sudo port install p5-text-csv
	sudo port install p5-timedate
	sudo port install p5-time-piece
	sudo port install p5-time-modules
	sudo port install p5-xml-simple
	sudo port install p5-cgi-simple
	sudo port install p5-mail-imapclient
	sudo port install p5-xml-rss
	sudo port install p5-perl-ldap
	sudo port install ImageMagick +perl	

I found a few more packages that might aid in developing an XSLT templating solution for our suite of tools

	sudo port install p5-xml-libxml
	sudo port install libxslt
	sudo port install p5-xml-libxslt

Those packages I could not find in MacPorts, I installed using CPAN, the Comprehensive Perl Archive Network. Mac OS X comes installed with Perl, along with a command line program, cpan, for installing Perl modules. Running the first cpan command begins an initialization process. I initialized it with all the default settings, by pressing the Return button when prompted to select an option, and ignoring any missing software.

	sudo cpan -i Crypt::Util
	sudo cpan -i Net::FTPServer::XferLog
	sudo cpan -i Chart::Graph::Gnuplot
	sudo cpan -i Math::FixedPrecision
	sudo cpan -i Net::LDAP
	sudo cpan -i SOAP::Amazon::S3
	sudo cpan -i MIME::WordDecoder
	sudo cpan -i DBI
	sudo cpan -i DBD::mysql

Configure Apache

To configure Apache to run Perl scripts in a specific directory, edit the configuration file.

	edit httpd.conf

Then add directives for each directory:

	### Perl directories: execute scripts in these directories
	<Directory "/opt/local/apache2/htdocs/perl/*">
		Options Indexes FollowSymLinks +ExecCGI
		AllowOverride All
		Order allow,deny
		Allow from all
	</Directory>
	
	<Directory "/opt/local/apache2/htdocs/symperl/*">
		Options Indexes FollowSymLinks +ExecCGI
		AllowOverride All
		Order allow,deny
		Allow from all
	</Directory>

Running Multiple Apache Web Servers

To be able to run the default Mac OS X Web Server, the MacPorts Apache 2 Web Server, and MAMP simultaneously, I can run each server on a different port. For the MacPorts server, I modified the Apache configuration file to run the server on port 3000.

	cd /opt/local/apache2/conf
	edit httpd.conf

Look for a line that directs the server to run on the default port, port 80:

	Listen 80

Then, to run the server on port 3000, change the line to this:

	Listen 3000

To have completely separate installs of Apache, including separate MySQL installs, I should also install MySQL using MacPorts. That way, I can have multiple instances of MySQL running on different ports. However, that seems a little overkill (if this whole setup doesn't already). So, that's my development environment.

I will be adding to this document as I go.

Getting Started

First, I need a compiler. For whatever reason, I cannot use Adobe Flash CS3 at home, even though I have a license that allows having Flash installed at home and at work. For whatever reason, the CS3 install I have at home just stopped working. Strange. I'll have to reinstall at some point. For now, I'm going to use the Flex 3 SDK to compile ActionScript from source. I have a previous version of Flex, the Flex 2 SDK, but I'm going to download the latest Software Developers Kit to see how compatible Colin's book will be with the latest version of Flex. ActionScript 3.0 has not changed, so I don't foresee a problem.

Adobe has provided some documentation on Getting Started with Flex 3 SDK in the Adobe Flex Developer Center. The Developer Documentation for Adobe Flex is also available at Adobe Open Source.

To start with, I have downloaded the Flex 3 SDK and installed it where I can easily access it on the command line:

~/flex_sdk_3

I'm using Mac OS X 10.5.3, so that means I have installed the Flex 3 SDK at the root of my user directory:

/Users/stephen/flex_sdk_3

I also followed the recommendation to uninstall the Flash Player before installing the player supplied with the SDK.

~/flex_sdk_3/runtimes/player/mac/Install Flash Player 9 UB.dmg

I have chosen to use Panic's Coda as my IDE for developing ActionScript. It is a text editor with some nice extras, including a built in Terminal and web browser based on Apples's WebKit project used to build Safari. There's no reason you couldn't use free tools: Terminal, Safari and TextWrangler, for instance. But I love working with Panic's well-designed tools, such as Coda and Transmit.

Chapter 1: Core Concepts

In the first chapter, Colin provides an overview of the tools for writing ActionScript code: text editor, Adobe Flex Builder, and Adobe Flash; describes the Flash Client Runtime Environment, Compilation. Then, he jumps right into a step-by-step process of creating a virtual zoo example program to teach the core concepts about:

• Packages
• Classes
• Access Control Modifiers
• Constructor Methods
• Objects
• Variables and Values
• Constructor Parameters and Arguments
• Expressions
• Instance Variables
• Instance Methods
• Method Return Values

~/flex_sdk_3

According to the Flex 3 SDK Release Notes, I should be able to review the explorer example by running the following script.

install_root/samples/explorer/build.sh

Well, I mistakenly thought I could navigate to that directory and run the script.

cd ~/flex_sdk_3/samples/explorer
build.sh

However, that didn't work. I needed to run the script using the full path.

/Users/stephen/flex_sdk_3/samples/explorer/build.sh

The code is still compiling several minutes later. I think I'm going to need a faster processor for testing large applications like this. I suppose it should be fine for short snippets of ActionScript code.

What a ridiculous idea.

Yeah. Pretty much. But if I'm going to spend some time learning how to program in PHP and Perl, what better way to pay homage to the best content management system I've ever had the pleasure to use. Problem is, it's always a work in progress. I've been spending time with Symphony 2 Beta Revision 5, building XSLT templates for a number of applications. These can be saved as what are called "Ensembles", a ZIP file containing all you need to install the application in seconds on the PHP, MySQL and XSL enabled server of your choice. Of course, they are all crippled, unfinished example applications of what can be developed with Symphony. As soon as I discovered that the Beta version will be incompatible with Release Candidate 1, I lost interest in continuing the development of these ensembles, at least for the moment.

Symphony Ensembles

• System Navigation
• Address Book
• Projects
• Finances
• Calendar
• Destinations / XML Importer

I'd like to get to a point that I can build my own Symphony Extensions, so I'd like to understand what's going on under the hood. If I can translate from one language to another, I think I'll have a pretty good grasp of how the application works.

So, where to start. I figured the configuration file would be a good place to start. I first need to know how to translate the variables the will be necessary to interact with the database and file system.

Probably not the simplest place to start, since it appears that the configuration settings are stored as a multidimensional array in the configuration file. Consulting with Larry Wall's book, Programming Perl, published by O'Reilly, I found a section on hashes of hashes. So, I came up with a couple ways I could generate code that could duplicate the Symphony configuration settings.

#!/opt/local/bin/perl
# Symperl Configuration File

# To simulate the multidimensional array used for Symphony's 
# configuration settings, use hashes of hashes to define values

# %settings = (
# 	admin => {
# 		max_upload_size => "5242880",
# 	},
# 	symphony => {
# 		pagination_maximum_rows => "17",
# 		allow_page_subscription => "1",
# 		lang => "en",
# 		build => "2000",
# 		cookie_prefix => "sym-",
# 	},
# 	log => {
# 		archive => "1",
# 		maxsize => "102400",
# 	},
# 	general => {
# 		sitename => "Symperl: Symphony in Perl",
# 		useragent => "Symperl/1000",
# 	},
# 	image => {
# 		cache => "1",
# 		quality => "90",
# 	},
# 	database => {
# 		driver => "mysql",
# 		character_set => "utf8",
# 		character_encoding => "utf8",
# 		runtime_character_set_alter => "0",
# 		disable_query_caching => "no",
# 		host => "localhost",
# 		port => "3306",
# 		user => "root",
# 		password => "",
# 		db => "sym2_beta",
# 		tbl_prefix => "sym_",
# 	},
# 	public => {
# 		maintenance_mode => "no",
# 	},
# 	region => {
# 		time_format => "g:i a",
# 		date_format => "j F Y",
# 		timezone => "America/Vancouver",
# 	},
# 	file => {
# 		write_mode => "0777",
# 	},
# 	directory => {
# 		write_mode => "0755",
# 	},
# );

# Hashes can also be created by defining values in this way
# $settings{admin}{username} = "stephen";

# To emulate Symphony's configuration settings
# declare $settings as above

$settings{admin}{max_upload_size} = '5242880';
$settings{symphony}{pagination_maximum_rows} = '17';
$settings{symphony}{allow_page_subscription} = '1';
$settings{symphony}{lang} = 'en';
$settings{symphony}{build} = '2000';
$settings{symphony}{cookie_prefix} = 'sym-';
$settings{log}{archive} = '1';
$settings{log}{maxsize} = '102400';
$settings{general}{sitename} = 'Spectrum: Symphony Theme';
$settings{general}{useragent} = 'Symphony/2000';
$settings{image}{cache} = '1';
$settings{image}{quality} = '90';
$settings{database}{driver} = 'mysql';
$settings{database}{character_set} = 'utf8';
$settings{database}{character_encoding} = 'utf8';
$settings{database}{runtime_character_set_alter} = '0';
$settings{database}{disable_query_caching} = 'no';
$settings{database}{host} = 'localhost';
$settings{database}{port} = '3306';
$settings{database}{user} = 'root';
$settings{database}{password} = '';
$settings{database}{db} = 'sym2_beta';
$settings{database}{tbl_prefix} = 'sym_';
$settings{public}{maintenance_mode} = 'no';
$settings{region}{time_format} = 'g:i a';
$settings{region}{date_format} = 'j F Y';
$settings{region}{timezone} = 'America/Vancouver';
$settings{file}{write_mode} = '0777';
$settings{directory}{write_mode} = '0755';


# Print configuration settings, Symphony style
# (Required a lot of character escaping for single quotes)
foreach $setting_type ( keys %settings ) {
	foreach $setting_value (keys %{ $settings{$setting_type} } ) {
		print '$settings[\'', "$setting_type", '\'][\'', "$setting_value", '\'] = \'', "$settings{$setting_type}{$setting_value}", '\';', "\n";
	}
}

# Awesome. It works!

Running this code on the command line produced output identical to the list of settings in the config.php file.

-----------------------------------------------
Symphony 2.0 File Structure (default install)
-----------------------------------------------

  .htaccess
+ extensions
    + export_ensemble
          extension.driver.php
        + lib
              class.mysqldump.php
              installer.tpl
          LICENCE
          README
    + maintenance_mode
          extension.driver.php
          LICENCE
          README
    + markdown
          extension.driver.php
        + lib
              markdown_extra.php
              markdown.php
              smartypants.php
          LICENCE.txt
        + text-formatters
              formatter.pb_markdown.php
              formatter.pb_markdownextra.php
              formatter.pb_markdownextrasmartypants.php
    + selectbox_link_field
          extension.driver.php
        + fields
              field.selectbox_link.php
          LICENCE
          README
  index.php
  install-log.txt
  install.php
  LICENCE.txt
+ manifest
    + cache
      congif.php
    + logs
          main
    + tmp
  README.txt
+ symphony
      .htaccess
    + assets
          admin.css
          admin.js
          basic.css
          code.css
          debug.css
          error.css
          forms.css
        + images
              bookmark.png
              configure-field.png
              configure.png
              create.png
              delete.png
              logo.png
              navigation.png
        + installer
              logo.png
              main.css
              main.js
          legacy.css
          login.css
          navigation.xml
          tables.css
    + content
          content.ajaxreorder.php
          content.blueprintscomponents.php
          content.blueprintsdatasources.php
          content.blueprintsevents.php
          content.blueprintspages.php
          content.blueprintssections.php
          content.blueprintsutilities.php
          content.login.php
          content.logout.php
          content.publish.php
          content.systemauthors.php
          content.systemextensions.php
          content.systemlog.php
          content.systempreferences.php
      image.php
      index.php
    + lib
        + boot
              bundle.php
              class.object.php
              defines.php
              func.utilities.php
        + core
              class.administration.php
              class.cacheable.php
              class.configuration.php
              class.cookie.php
              class.datetimeobj.php
              class.frontend.php
              class.log.php
              class.symphony.php
        + lang
              lang.en.php
        + toolkit
              class.administrationpage.php
              class.ajaxpage.php
              class.archivezip.php
              class.author.php
              class.authormanager.php
              class.bitterhtml.php
              class.datasource.php
              class.datasourcemanager.php
              class.debugpage.php
              class.entry.php
              class.entrymanager.php
              class.event.php
              class.eventmanager.php
              class.extension.php
              class.extensionmanager.php
              class.field.php
              class.fieldmanager.php
              class.frontendpage.php
              class.gateway.php
              class.general.php
              class.htmlpage.php
              class.image.php
              class.imagefilters.php
              class.lang.php
              class.manager.php
              class.mutex.php
              class.mysql.php
              class.page.php
              class.parsexml.php
              class.profilepage.php
              class.profiler.php
              class.section.php
              class.sectionmanager.php
              class.textformatter.php
              class.textformattermanager.php
              class.widget.php
              class.xmldoc.php
              class.xmlelement.php
              class.xsltpage.php
              class.xsltprocess.php
            + data-sources
                  datasource.author.php
                  datasource.dynamic_xml.php
                  datasource.navigation.php
                  datasource.section.php
            + events
                  event.section.php
            + fields
                  field.author.php
                  field.checkbox.php
                  field.date.php
                  field.input.php
                  field.select.php
                  field.taglist.php
                  field.textarea.php
                  field.upload.php
              include.install.php
              util.validators.php
    + template
          datasource.tpl
          event.tpl
          tpl.database-error.php
          tpl.error.php
          tpl.xslt-error.php
+ workspace
    + css
          maintenance.css
          styles.css
    + data-sources
          data.archive.php
          data.article_image.php
          data.articles.php
          data.comments.php
          data.drafts.php
          data.homepage_article.php
          data.navigation.php
          data.notes.php
          data.rss_articles.php
          data.website_owner.php
    + events
          event.login.php
          event.publish_article.php
          event.save_comment.php
          event.save_message.php
    + images
          background.gif
          border.gif
          button.gif
          comment-authorized.gif
          grid.gif
          grid-test.gif
          hr.gif
          paper.jpg
          ribbon.gif
          spectrum.gif
    + pages
          404-page-not-found.xsl
          about.xsl
          archive.xsl
          articles.xsl
          drafts.xsl
          home.xsl
          maintenance.xsl
          rss.xsl
    + utilities
          date-time.xsl
          get-archive.xsl
          get-article.xsl
          get-comments.xsl
          get-drafts.xsl
          get-images.xsl
          get-notes.xsl
          master.xsl
          navigation.xsl
          page-title.xsl    

For my purposes, that is, learning ActionScript 3.0, to develop my understanding of object oriented programming and to become more familiar with an ECMAScript-based language, which I can later extend to JavaScript for working with AJAX and DOM Scripting, all I need is a text editor and the open source Flex SDK.

I picked up a copy of Colin Moock's Essential ActionScript 3.0 and have completed a broad overview of object oriented programming in the context of the ActionScript 3.0 language. Now, I would like to go a little deeper into developing a basic interface for working with these concepts. The new view-based search engine, Viewzi, demonstrates creative uses for using Flash to aggregate data from various sources into engaging interfaces, allowing search to become much more than a wall of text with links to information of often dubious relevance. One of the most interesting interfaces for me is the Album View. I'd like to find out how to create a gallery of images, such as this, that uses a liquid layout which can reconfigure itself when the browser window is resized or when the image sizes are scaled.

Where to Start

I will need references beyond Colin Moock's introduction to the concepts needed to program in ActionScript. Adobe is the first logical source for more information.

• ActionScript 3.0 Overview
• Programming ActionScript 3.0
• ActionScript 3.0 Language Reference
• Tips for Learning ActionScript 3.0
• Learning ActionScript 3.0 excerpts: OOP overview, display list, and programmatic motion

For more specific information, I'll see if Google can help me out. I'll need some good resources on liquid layouts, easing in animation, and sliders.

• Creating liquid GUIs with Flash and ActionScript 3.0
• Flash Liquid Layout with BaseUI version 2
• ActionScript 3 Liquid Layout Manager
• Creating animation in ActionScript 3.0

Other Resources

• senocular.com
• actionscript.com
• actionscript.org

Good Examples of Liquid Layouts

I am particularly inspired by these examples of liquid, full screen layouts:

• Burnkit
• Firstborn
• From Scratch
• Trollback
• Yugop
• The original Yugop

Model View Controller (MVC) Design Patterns

• The Model-View-Controller Design Pattern — Colin Moock
• Minimalist MVC example using the PureMVC Framework
• ActionScript 3.0 Design Patterns
• ActionScript 101 and simple MVC

ActionScript Frameworks

• PureMVC
• Cairngorm
• ASAP Library for Flash ActionScript 3.0
• JumpShip MVC Framework

ActionScript Applications

• Papervision3D
• FotoViewr
• Viewzi

The Box Class

First, I started by creating a Box class that I could use to build frames for the images. It's pretty basic, providing parameters for width, height and color.

package {
	import flash.display.Shape;
	
	public class Box extends Shape {
		public function Box (w:Number,
                             h:Number,
                             fillColor:uint):void {
			graphics.beginFill(fillColor, 1);
			graphics.drawRect(0, 0, w, h);
		}
	}
}

The ImageFrame Class

Next, I created a class that creates an image frame with two instances of the Box class, one for the image placeholder, with parameters for width, height, color and margin, and one for the image frame, with parameters for color and padding.

package {
	import flash.display.*;
	
	public class ImageFrame extends Sprite {
		public function ImageFrame (imageWidth:uint, imageHeight:uint, imageColor:uint, frameColor:uint, padding:uint):void {
			var imageFrame:Sprite = new Sprite();

			// Create image placeholder
			var imageWidth:uint;
			var imageHeight:uint;
			var imageColor:uint;
			var image:Box = new Box(imageWidth, imageHeight, imageColor);

			// Create frame
			var padding:uint;
			var frameWidth:uint = imageWidth + (padding * 2);
			var frameHeight:uint = imageHeight + (padding * 2);
			var frameColor:uint = 0xFFFFFF;
			var frame:Box = new Box(frameWidth, frameHeight, frameColor);
			
			// Add frame and image to container
			imageFrame.addChild(frame);
			imageFrame.addChild(image);
			
			// Center image in frame
			image.x = padding;
			image.y = padding;
			
			// Add imageFrame
			addChild(imageFrame);
		}
	}
}

Floating Grid

These two classes then provided the basic building blocks to experiment with gallery configurations. The first attempt produced a grid of images that could be centered on the stage with a Tween effect added. To access the fl.transitions library, I copied the directory from the Flash CS3 ActionScript 3.0 classes built into the application. I found them here:

/Applications/Adobe Flash CS3/Configuration/ActionScript 3.0/Classes/fl/

I copied the classes into my development directory:

~/flex/data/interface/fl/

That way, I could access these classes using the Flex 3 SDK by importing the classes:

	import fl.transitions.*;
	import fl.transitions.easing.*;

To compile SWF files, I use this command in Terminal:

flex/bin/mxmlc flex/data/interface/FloatingGrid.as

I ran into some interesting problems created by attempting to add transitions to a scale effect on the mouse over state of each of the image frames. The Tween class appears to override the variables set to position the image frames in the container sprite. I may be able to solve the problem by setting a different registration point, something which doesn't appear to exist in pure ActionScript 3.0 code, but can be created dynamically with a class such as the Dynamic MovieClip Registration class adapted by Oscar Trelles. At any rate, here's what I came up with:

package {
	import flash.display.*;
	import flash.events.*;
	import flash.text.*;
	import fl.transitions.*;
	import fl.transitions.easing.*;
	
	public class FloatingGrid extends Sprite {
		// Instantiate stage variables
		public var sw:Number = stage.stageWidth;
		public var sh:Number = stage.stageHeight;
		public var bg:Shape = new Shape();

		// Instantiate container variables
		public var container:MovieClip = new MovieClip();
		public var containerX:Number;
		public var containerY:Number;
		public var containerWidth:Number;
		public var containerHeight:Number;

		// Instantiate image parameters
		public var imageNumber:uint = 36;
		public var imageWidth:uint = 40;
		public var imageHeight:uint = 40;
		public var margin:uint = 25;
		public var padding:uint = 4;
		public var imageColor:uint = 0x999999;
		public var frameColor:uint = 0xFFFFFF;
		
		// Set size on mouse over
		public var overScale:Number = 1.5;

		public function FloatingGrid () {
			// Turn scaling off and set alignment to top left
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			// Add a background color
			bg.graphics.beginFill(0x666666, 1);
			bg.graphics.drawRect(0,0,sw,sh);
			addChild(bg);
			
			// Add image frames to stage with the following parameters:
			// (number, width, height, margin, padding)
			imageFrames(imageNumber, imageWidth, imageHeight, imageColor, frameColor, margin, padding);

			// Register event listener for stage resizing
			stage.addEventListener(Event.RESIZE, resizeListener);

			// Register event listener for mouse over effects
			container.addEventListener(MouseEvent.MOUSE_OVER, over);
			container.addEventListener(MouseEvent.MOUSE_OUT, out);

			// apply tween
			var myTween:Tween = new Tween(container, "x", Elastic.easeOut, 0, containerX, 3, true);

		}

		private function resizeListener (e:Event):void {
			// Instantiate variables for current container position
			var initContainerX:Number = container.x;
			var initContainerY:Number = container.y;
			
			// Determine stage width and height
			sw = stage.stageWidth;
			sh = stage.stageHeight;
			
			// Set background to width and height of stage
			bg.width = sw;
			bg.height = sh;
			
			// Center the container on the Stage
			containerX = (sw / 2) - (containerWidth / 2);
			containerY = (sh / 2) - (containerHeight / 2);
			container.x = containerX;
			container.y = containerY;
			
			var containerTweenX:Tween = new Tween(container, "x", Elastic.easeOut, initContainerX, containerX, 3, true);
			var containerTweenY:Tween = new Tween(container, "y", Elastic.easeOut, initContainerY, containerY, 3, true);
		}

		private function over (e:MouseEvent):void {
			
			DisplayObject(e.target).scaleX = overScale;
			DisplayObject(e.target).scaleY = overScale;

			DisplayObject(e.target).x -= (imageWidth * (overScale - 1)) / 2;
			DisplayObject(e.target).y -= (imageHeight * (overScale - 1)) / 2;

			// var imageFreeTweenScaleX:Tween = new Tween(DisplayObject(e.target), "scaleX", Elastic.easeOut, 1, overScale, .5, true);
			// var imageFreeTweenScaleY:Tween = new Tween(DisplayObject(e.target), "scaleY", Elastic.easeOut, 1, overScale, .5, true);
			
			// var imageFreeTweenX:Tween = new Tween(DisplayObject(e.target), "x", Elastic.easeOut, 1, overScale, .5, true);
			// var imageFreeTweenY:Tween = new Tween(DisplayObject(e.target), "y", Elastic.easeOut, 1, overScale, .5, true);

		}

		private function out (e:MouseEvent):void {
			DisplayObject(e.target).scaleX = 1;
			DisplayObject(e.target).scaleY = 1;

			DisplayObject(e.target).x += (imageWidth * (overScale - 1)) / 2;
			DisplayObject(e.target).y += (imageHeight * (overScale - 1)) / 2;
		}

		private function imageFrames (
				imageNumber:uint,
				imageWidth:uint, 
				imageHeight:uint,
				imageColor:uint,
				frameColor:uint, 
				margin:uint, 
				padding:uint):void {
			// Instantiate image parameters
			var imageCount:uint = imageNumber;
			var imageX:int;
			var imageY:int;
			var imageOffset:Number = imageWidth + (padding * 2) + margin;
			var imageFrames:Array = new Array();

			// Calculate the columns and rows of images
			var columns:uint = Math.floor(sw / imageOffset);
			var rows:uint = Math.ceil(imageNumber / columns);

			// Number of images per row
			var imagesPerRow:uint = columns;
			
			// Calculate the width and height of the container
			containerWidth = columns * imageOffset - margin;
			containerHeight = rows * imageOffset - margin;
			
			// Create the container for the images
			addChild(container);
			
			// Center the container on the Stage
			containerX = (sw / 2) - (containerWidth / 2);
			containerY = (sh / 2) - (containerHeight / 2);
			container.x = containerX;
			container.y = containerY;
			
			// Add image frames to the container
			for (var row:int = 0; row < rows; row++) {
				imageX = 0;
				imageY = row * imageOffset;

				// Determine number of images for last row
				if (imageCount < imagesPerRow) {
					imagesPerRow = imageCount;
				}
				
				for (var i:int = 0; i < imagesPerRow; i++) {
					imageFrames[i] = new ImageFrame(imageWidth, imageHeight, imageColor, frameColor, padding);
					
					// Add images for the current row
					imageFrames[i].x = imageX + (i * imageOffset);
					imageFrames[i].y = imageY;
					container.addChild(imageFrames[i]);

					// Decrement images left to display
					imageCount--;
				}
			}
		}
	}
}

Gallery Slider

I never did find exactly what I was looking for in a gallery slider, although there are lots of examples out there. However, once I figured out that I shouldn't be using a MouseEvent listener, but rather an Event.ENTER_FRAME listener and using the DisplayObject.mouseX variable, it all fell into place. By using some simple math, I could change the rate of acceleration based on how close the mouse position was to the left or right edges of the stage.

package {
	import flash.display.*;
	import flash.events.*;
	import flash.text.*;
	import fl.transitions.*;
	import fl.transitions.easing.*;
	
	public class GallerySlider extends Sprite {
		// Instantiate stage variables
		public var sw:Number = stage.stageWidth;
		public var sh:Number = stage.stageHeight;
		public var bg:Shape = new Shape();

		// Instantiate container variables
		public var container:MovieClip = new MovieClip();
		public var containerX:Number;
		public var containerY:Number;
		public var containerWidth:Number;
		public var containerHeight:Number;

		// Instantiate image parameters
		public var imageNumber:uint = 40;
		public var imageWidth:uint = 100;
		public var imageHeight:uint = 60;
		public var margin:uint = 25;
		public var padding:uint = 4;
		public var imageColor:uint = 0x999999;
		public var frameColor:uint = 0xFFFFFF;
		
		// Set size on mouse over
		public var overScale:Number = 1.25;

		public function GallerySlider () {
			// Turn scaling off and set alignment to top left
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			// Add a background color
			bg.graphics.beginFill(0x666666, 1);
			bg.graphics.drawRect(0,0,sw,sh);
			addChild(bg);
			
			// Add image frames to stage with the following parameters:
			// (number, width, height, margin, padding)
			imageFrames(imageNumber, imageWidth, imageHeight, imageColor, frameColor, margin, padding);

			// Register event listener for stage resizing
			stage.addEventListener(Event.RESIZE, resizeListener);

			// Register event listener for mouse position
			stage.addEventListener(Event.ENTER_FRAME, mousePositionListener);

			// Register event listener for mouse over effects
			container.addEventListener(MouseEvent.MOUSE_OVER, over);
			container.addEventListener(MouseEvent.MOUSE_OUT, out);

			// apply tween
			var myTween:Tween = new Tween(container, "x", Elastic.easeOut, 0, containerX, 3, true);

		}

		private function resizeListener (e:Event):void {
			// Instantiate variables for current container position
			var initContainerX:Number = container.x;
			var initContainerY:Number = container.y;
			
			// Determine stage width and height
			sw = stage.stageWidth;
			sh = stage.stageHeight;
			
			// Set background to width and height of stage
			bg.width = sw;
			bg.height = sh;
			
			// Center the container on the Stage
			containerX = (sw / 2) - (containerWidth / 2);
			containerY = (sh / 2) - (containerHeight / 2);
			container.x = containerX;
			container.y = containerY;
			
			var containerTweenX:Tween = new Tween(container, "x", Elastic.easeOut, initContainerX, containerX, 3, true);
		}

		private function mousePositionListener (e:Event):void {
			var stageCenter:Number = sw / 2;
			var quietZone:uint = 50;
			var stageLeft:Number = stageCenter - quietZone;
			var stageRight:Number = stageCenter + quietZone;
			var maxOffsetX:Number = stageCenter - imageWidth;

			// Move gallery left or right depending on mouse position
			// Movement accelerates as mouse gets close to left or right edges of the stage
			// A maximum offset value prevents the gallery from moving off the stage
			if (stage.mouseX < stageLeft && container.x  stageRight && (containerWidth + container.x > sw - maxOffsetX)) {
				container.x -= (stage.mouseX - stageRight) / 10;
			}
		}

		private function over (e:MouseEvent):void {
			
			DisplayObject(e.target).scaleX = overScale;
			DisplayObject(e.target).scaleY = overScale;

			DisplayObject(e.target).x -= (imageWidth * (overScale - 1)) / 2;
			DisplayObject(e.target).y -= (imageHeight * (overScale - 1)) / 2;

			// var imageFreeTweenScaleX:Tween = new Tween(DisplayObject(e.target), "scaleX", Elastic.easeOut, 1, overScale, .5, true);
			// var imageFreeTweenScaleY:Tween = new Tween(DisplayObject(e.target), "scaleY", Elastic.easeOut, 1, overScale, .5, true);
			
			// var imageFreeTweenX:Tween = new Tween(DisplayObject(e.target), "x", Elastic.easeOut, 1, overScale, .5, true);
			// var imageFreeTweenY:Tween = new Tween(DisplayObject(e.target), "y", Elastic.easeOut, 1, overScale, .5, true);

		}

		private function out (e:MouseEvent):void {
			DisplayObject(e.target).scaleX = 1;
			DisplayObject(e.target).scaleY = 1;

			DisplayObject(e.target).x += (imageWidth * (overScale - 1)) / 2;
			DisplayObject(e.target).y += (imageHeight * (overScale - 1)) / 2;
		}

		private function imageFrames (imageNumber:uint,
		                              imageWidth:uint, 
		                              imageHeight:uint,
		                              imageColor:uint,
		                              frameColor:uint, 
		                              margin:uint, 
		                              padding:uint):void {
			// Instantiate image parameters
			var imageX:int;
			var imageY:int;
			var imageOffset:Number = imageWidth + (padding * 2) + margin;
			var imageFrames:Array = new Array();

			// Calculate the width and height of the container
			containerWidth = imageNumber * imageOffset - margin;
			containerHeight = imageHeight;

			// Create the container for the images
			addChild(container);
			
			// Center the container on the Stage
			containerX = (sw / 2) - (containerWidth / 2);
			containerY = (sh / 2) - (containerHeight / 2);
			container.x = containerX;
			container.y = containerY;
			
			// Add image frames to the container
			for (var i:int = 0; i < imageNumber; i++) {
				imageFrames[i] = new ImageFrame(imageWidth, imageHeight, imageColor, frameColor, padding);
				
				// Add images for the current row
				imageFrames[i].x = imageX + (i * imageOffset);
				imageFrames[i].y = imageY;
				container.addChild(imageFrames[i]);
			}
		}
	}
}

Note: I updated the code by adding a maximum offset value to prevent the gallery from moving off the stage.

ActionScript 3.0 Galleries

There are some code examples available that I've been able to find so far:

• ActionScript 3 Full Browser XML Slideshow
• Simple ActionScript 3 Slideshow Engine
• ActionScript 3 Drag, Pan, Zoom XML Content
• Array based perpetual scrolling navigation AS3

Flash Galleries

• GraphicTherapy
• ActionScript 3 Simple Gallery
• Simple ActionScript 3 SlideShow
• ActionScript 3 Sliding Images XML Gallery
• The Reformation
• ActionScript 3 Pan Zoom Drag Content
• Erik Almas Photography
• Continuous Scrolling Thumbnail Slideshow
• XMLGallery

Using Symphony as a platform for XML and XSLT based applications, I'd like to experiment with importing XML data with ActionScript to create galleries, to chart data and to develop other applications that can enhance the user experience beyond the confines of the W3C recommendations. I like organizations that help us push the boundaries of what is possible by developing open standards. A good dose of healthy competition in the area of standards may be what is necessary to overcome a lack of direction and movement in further developing existing standards. As a designer, I depend on Adobe PostScript, OpenType Collection and Creative Suite. I welcome Adobe's entrance into the arena of open source software development.

VEsession Flex Photography Studio Management

While still in its infancy, Joel Hooks's VEsession Photography Studio Management Application looks very promising. It is an open source project built with Flex using the PureMVC framework.

PureMVC Applications

• VEsession
• WS-Slideshow
• MiniTask
• Brainwave
• T-Mobile
• Flex Guestbook
• Mac-style Menu
• Renju - Logic Game
• Sliding Puzzle Game
• Panfu multiuser learning and gaming community for children
• Moonlighting Film Production Services

Rounded Corner Rectangle

So the easy part is creating the rounded corner rectangle.

package {
	import flash.display.*;
	
	public class RoundedRectangle extends Sprite {
		public function RoundedRectangle () {
			var rect:Sprite = new Sprite();

			var rectX:Number = 20;
			var rectY:Number = 20;
			var rectW:Number = 360;
			var rectH:Number = 240;
			var cornerDiameter:Number = 24;
			var rectEllipseW:Number = 120;
			var rectEllipseH:Number = 240;
			var fillColor:uint = 0xFFFFFF;
			var alpha:Number = 1;
			rect.graphics.beginFill(fillColor, alpha);  
			rect.graphics.drawRoundRect(rectX, rectY, rectW, rectH, cornerDiameter);
			rect.graphics.endFill();
			
			addChild(rect);
		}
	}
}

I used variables to clarify the required parameters. To simplify this code, remove the variables and use literal values for the class method parameters.

package {
	import flash.display.*;
	
	public class RoundedRectangle extends Sprite {
		public function RoundedRectangle () {
			var rect:Sprite = new Sprite();

			rect.graphics.beginFill(0xFFFFFF, 1);  
			rect.graphics.drawRoundRect(20, 20, 360, 240, 24);
			rect.graphics.endFill();
			
			addChild(rect);
		}
	}
}

Gradient Fill

Gradient fills are little more complex because they require some knowledge of the transformation matrix. Luka Maras offers an in-depth tutorial on creating gradient fills. However, the method used in the Adobe Flex 3 Language Reference uses the matrix.createGradiantBox method, which has this signature:

public function createGradientBox(width:Number, height:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void

So the code for a rounded rectangle with a gradient fill from grey to white at 90 degrees goes something like this:

package {
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*
	
	public class RoundRectGradFill extends Sprite {
		public function RoundRectGradFill () {
			var viewImage:Sprite = new Sprite();

			var fillType:String = GradientType.LINEAR;
			var colors:Array = [0xFFFFFF, 0x999999];
			var alphas:Array = [1, 1];
			var ratios:Array = [0, 255];
			var matrix:Matrix = new Matrix();
			var gradWidth:Number = 360;
			var gradHeight:Number = 240;
			var gradRotation:Number = 90 / 180 * Math.PI; // rotation expressed in radians
			var gradOffsetX:Number = 0;
			var gradOffsetY:Number = 0;
			
			matrix.createGradientBox(gradWidth, gradHeight, gradRotation, gradOffsetX, gradOffsetY);
			var spreadMethod:String = SpreadMethod.PAD;
			viewImage.graphics.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);  
			viewImage.graphics.drawRoundRect(0, 0, 360, 240, 36);
			viewImage.graphics.endFill();
			
			addChild(viewImage);
		}
	}
}

I found some pure ActionScript code to embed TrueType fonts, but, according to the comments on Font Embedding in AS3 : Lessons Learned, it sounds as if this may not work for Macs or with OpenType. Embedding system fonts may be the best way to avoid problems.

There are also some issues that can be avoided by using type embedded via SWF instead of OpenType, according to Katy Richard's Flex and Fonts post on Things that Work.

Well, at least the search came up with a handy little ActionScript 3 RIA Reference Guide from Mike Chambers, and a nice example of a music sharing site: Grooveshark.

SecurityError: Error #2148: SWF file
file:///Users/stephen/flex/data/interface/LoadImage.swf cannot access local resource file:///Users/stephen/flex/data/interface/assets.jpg.
Only local-with-filesystem and trusted local SWF files may access local resources.
	at flash.display::Loader/get content()
	at LoadImage/initListener()

~/flex/frameworks/flex-config.xml

   <!-- Enables SWFs to access the network. -->
   <use-network>false</use-network>

package {
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;

	public class LoadImage extends Sprite {
		private var loader:Loader;

		public function LoadImage() {
			loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.INIT, initListener);
			loader.load(new URLRequest("asset.jpg"));
		}

		private function initListener (e:Event):void {
			addChild(loader.content);
		}
	}
}

Try Ant 1.6.5 If I run the ant script using Ant 1.7.0, I get the error described here. If I run with Ant 1.6.5, there's no error. Given the error message, my guess is that the different versions of Ant bring in different versions of Xerces. Either Xerces broke some backward compatability, or the mxmlc .jar files are using bits of Xerces that aren't part of the published API.

But if that is the case, then my problem must be something else. Running this on the command line gave me the following result:

ant -version
Apache Ant version 1.6.5 compiled on July 2 2006

But I appear to be having similar problems when compiling on an Intel iMac at work.

flex/bin/mxmlc
Loading configuration file /Users/stephen/flex/frameworks/flex-config.xml
Error: class org.apache.xerces.util.XMLAttributesMMImpl$AttributeMMImpl cannot access its superclass org.apache.xerces.util.XMLAttributesImpl$Attribute

java.lang.IllegalAccessError: class org.apache.xerces.util.XMLAttributesMMImpl$AttributeMMImpl cannot access its superclass org.apache.xerces.util.XMLAttributesImpl$Attribute
        at java.lang.ClassLoader.defineClass1(Native Method)
        at java.lang.ClassLoader.defineClass(ClassLoader.java:620)
        at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:124)
        at java.net.URLClassLoader.defineClass(URLClassLoader.java:260)
        at java.net.URLClassLoader.access$100(URLClassLoader.java:56)
        at java.net.URLClassLoader$1.run(URLClassLoader.java:195)
        at java.security.AccessController.doPrivileged(Native Method)
        at java.net.URLClassLoader.findClass(URLClassLoader.java:188)
        at java.lang.ClassLoader.loadClass(ClassLoader.java:306)
        at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:268)
        at java.lang.ClassLoader.loadClass(ClassLoader.java:251)
        at java.lang.ClassLoader.loadClassInternal(ClassLoader.java:319)
        at org.apache.xerces.impl.XMLDocumentFragmentScannerMMImpl.<init>(XMLDocumentFragmentScannerMMImpl.java:105)
        at org.apache.xerces.impl.XMLDocumentScannerMMImpl.<init>(XMLDocumentScannerMMImpl.java:258)
        at org.apache.xerces.impl.XMLNSDocumentScannerMMImpl.<init>(XMLNSDocumentScannerMMImpl.java:120)
        at org.apache.xerces.parsers.IntegratedParserConfigurationMMImpl.createDocumentScanner(IntegratedParserConfigurationMMImpl.java:282)
        at org.apache.xerces.parsers.DTDConfiguration.<init>(Unknown Source)
        at org.apache.xerces.parsers.StandardParserConfiguration.<init>(Unknown Source)
        at org.apache.xerces.parsers.IntegratedParserConfigurationMMImpl.<init>(IntegratedParserConfigurationMMImpl.java:193)
        at org.apache.xerces.parsers.XML11ConfigurationMMImpl.<init>(XML11ConfigurationMMImpl.java:182)
        at org.apache.xerces.parsers.XML11ConfigurationMMImpl.<init>(XML11ConfigurationMMImpl.java:139)
        at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
        at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:39)
        at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:27)
        at java.lang.reflect.Constructor.newInstance(Constructor.java:494)
        at java.lang.Class.newInstance0(Class.java:350)
        at java.lang.Class.newInstance(Class.java:303)
        at org.apache.xerces.parsers.ObjectFactory.newInstance(Unknown Source)
        at org.apache.xerces.parsers.ObjectFactory.findJarServiceProvider(Unknown Source)
        at org.apache.xerces.parsers.ObjectFactory.createObject(Unknown Source)
        at org.apache.xerces.parsers.ObjectFactory.createObject(Unknown Source)
        at org.apache.xerces.parsers.SAXParser.<init>(Unknown Source)
        at org.apache.xerces.parsers.SAXParser.<init>(Unknown Source)
        at org.apache.xerces.jaxp.SAXParserImpl$JAXPSAXParser.<init>(Unknown Source)
        at org.apache.xerces.jaxp.SAXParserImpl.<init>(Unknown Source)
        at org.apache.xerces.jaxp.SAXParserFactoryImpl.newSAXParser(Unknown Source)
        at flex2.compiler.config.FileConfigurator.load(FileConfigurator.java:113)
        at flex2.tools.Compiler.processConfiguration(Compiler.java:512)
        at flex2.tools.Compiler.processConfiguration(Compiler.java:428)
        at flex2.tools.Compiler.mxmlc(Compiler.java:82)
        at flex2.tools.Compiler.main(Compiler.java:53)

The solution was to disable the file that was causing the error by renaming it as a backup file. By running this on the command line, I can now compile using mxmlc.

mv ~/flex/lib/xercesPatch.jar ~/flex/lib/xercesPatch.jar.bak

package {
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	
	public class LoadImage extends Sprite {
		public var imageURL:String;
		private var loader:Loader;
		
		public function LoadImage(imageURL:String) {
			loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.INIT, initListener);
			loader.load(new URLRequest(imageURL));
		}
		
		private function initListener (e:Event):void {
			addChild(loader.content);
		}
	}
}

An ImageTitle class creates a text field with a title parameter:

package {
	import flash.display.*;
	import flash.text.*;
	
	public class ImageTitle extends Sprite {
		public function ImageTitle (title:String) {
			var title:String;
			var titleText:TextField = new TextField();
			var format:TextFormat = new TextFormat();
			format.font = "Arial";
			format.size = 20;
			format.color = 0xFFFFFF;

			titleText.text = title;
			titleText.setTextFormat(format);
			titleText.autoSize = TextFieldAutoSize.LEFT;
			
			addChild(titleText);
		}
	}
}

The ImageView class creates a rounded corner rectangle, ImageBorder, that forms the border around a masked image. The image is loaded. Then, another rounded corner rectangle, ImageMask, is created on top of the image and the slightly larger border rectangle. This smaller rectangle is used as a mask for the image, creating the effect of an image with rounded corners. A title bar is created with a shadow, titleBarShadow, which is simply a black rectangle with an alpha transparency setting of 50%. The title bar, titleBar, is added on top of the shadow with dimensions slightly smaller than the shadow and a gradient fill oriented at 90 degrees. Finally, the title, ImageTitle, is added.

package {
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*
	
	public class ImageView extends Sprite {
		public function ImageView () {
			var imageURL:String = "assets/image.jpg";

			// Set variables for image masks
			var fillType:String = GradientType.LINEAR;
			var colors:Array = [0xFFFFFF, 0xCCCCCC];
			var alphas:Array = [1, 1];
			var ratios:Array = [0, 255];
			var matrix:Matrix = new Matrix();
			matrix.createGradientBox(320, 240, 90, 0, 0);
			var spreadMethod:String = SpreadMethod.PAD;

			// Create imageBorder
			var imageBorder:Sprite = new Sprite();
			imageBorder.graphics.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);  
			imageBorder.graphics.drawRoundRect(2, 0, 324, 244, 40);
			imageBorder.graphics.endFill();
			addChild(imageBorder);
			
			// Load the image and instantiate it as "image1"
			var image:LoadImage = new LoadImage(imageURL);
			addChild(image);
			image.x = -26;
			image.y = -100;

			// Create imageMask
			var imageMask:Sprite = new Sprite();
			imageMask.graphics.beginFill(0xFFFFFF, 1);  
			imageMask.graphics.drawRoundRect(4, 2, 320, 240, 36);
			imageMask.graphics.endFill();
			addChild(imageMask);
			
			// Apply imageMask to image
			image.mask = imageMask;
			
			// Create title bar shadow
			var titleBarShadow:Sprite = new Sprite();
			titleBarShadow.graphics.beginFill(0x000000,.5);
			titleBarShadow.graphics.drawRect(0, 150, 328, 60);
			titleBarShadow.graphics.endFill();
			titleBarShadow.alpha = .5;
			addChild(titleBarShadow);
			
			// Create the title bar
			var titleBar:Sprite = new Sprite();
			var titleBarGradMatrix:Matrix = new Matrix();
			titleBarGradMatrix.createGradientBox(324, 56, (90 / 180 * Math.PI), 2, 152);
			titleBar.graphics.beginGradientFill(fillType, [0x99CCFF, 0x336699], alphas, ratios, titleBarGradMatrix, spreadMethod);
			titleBar.graphics.drawRect(2, 152, 324, 56);
			titleBar.graphics.endFill();
			titleBar.alpha = .9;
			addChild(titleBar);
			
			// Create title text
			var title:ImageTitle = new ImageTitle("Image Title");
			addChild(title);
			title.x = 12;
			title.y = 156;
			
		}
	}
}

Considering the Options

So, how should I go about fixing the problem?

• Learn PHP, figure out how Symphony works, and fix the problem
• Use a manual hack every time I save a data source
• Rebuild from scratch

Considering the options, I think I could probably rebuild the site faster than I could learn how to fix the bug. The hack doesn't seem like a good long term solution. If the source of the problem is a migration from an earlier version gone wrong, I might as well take this opportunity to rebuild the site and optimize the code, based on what I've learned since I first built the site. There are some things that I would do differently now.

Download Symphony

Symphony is a web publishing system developed by Twentyone Degrees in Brisbane, Australia. The system is powered by XML and XSLT, standards recommended by the W3C. Symphony 1.7 is free, but not open source. Symphony 2 Beta Revision 5 is the first open source release available from Twentyone Degrees. To download either version will require registering at Symphony Accounts. Once you have logged in, click on the Download Symphony link to download Symphony 1.7.01.

Install Symphony

I will be developing the site on my local development server. I am using the Apache web server that comes installed on Mac OS X. I have added support for PHP 5 and MySQL 5. PHP is configured to process XSLT. Apache is configured to allow .htaccess files to override the default configuration settings and use mod_rewrite rules.

Create Virtual Hosts

I have created a couple virtual hosts by modifying my /etc/hosts file by adding the following:

127.0.0.1       sitename.dev
127.0.0.1       sitename.local

Then I modify the virtual hosts configuration file for Apache. For Mac OS X versions previous to 10.5 Leopard, I would add the code to the end of the Apache configuration file found here: /etc/httpd/httpd.conf. Now that Leopard is using Apache 2, the location for the virtual hosts configuration file is here: /etc/apache2/extra/httpd-vhosts.conf. I have my virtual hosts organized in my user Sites directory. I'll set the location of these virtual hosts with something like this:

<VirtualHost 127.0.0.1>
    ServerName sitename.dev
    DocumentRoot /Users/Stephen/Sites/domains/sitename/dev/www
</VirtualHost>

<VirtualHost 127.0.0.1>
    ServerName sitename.local
    DocumentRoot /Users/Stephen/Sites/domains/sitename/local/www
</VirtualHost>

Then, gracefully restart Apache, so the web server configuration can be updated:

sudo apachectl graceful

So, now I have two locations available for comparing the existing site and the development site. I have the existing site, in its backup state before things started to go awry, installed in the sitename.local location. The development site is in the sitename.dev location.

I'm going to start without a workspace. This allows you to start with nothing but an empty database and an empty workspace. Otherwise, the default theme will be installed with example entries. I like to start clean.

Clean Install

For a clean install of Symphony, all you need are the following files/directories:

• index.php
• install.php
• symphony

I have copied these files into the development directory, so the directory structure looks like this:

/Users/Stephen/Sites/domains/sitename/dev/www/index.php
/Users/Stephen/Sites/domains/sitename/dev/www/install.php
/Users/Stephen/Sites/domains/sitename/dev/www/symphony

File Permissions

Before installing, the directory and file permissions need to be set to ensure that installation is trouble free. This can be accomplished by running the following commands in Terminal. First, change directories:

cd ~/Sites/domains/sitename/dev

Then, change the permissions to allow the installer to write files to these directories.

chmod -R 755 www
chmod 777 www
chmod 777 www/symphony

Create a MySQL Database

Symphony requires a connection to a MySQL database, so I'll create this first before proceeding with the install. I use phpMyAdmin to create the database.

create database sitename_dev

Installation

Navigate to the install file and follow the instructions to provide the database and user details:

http://sitename.dev/install.php

Environment Settings

• Root Path: /Users/Stephen/Sites/domains/sitename/dev/www

Database Connection

• Database: sitename_dev
• Username: root
• Password: ****
• Host: localhost
• Port: 3306
• Table Prefix: sym_

Permission Settings

• Files: 0777
• Directories: 0755

User Information

• Username
• Password

Personal Information

• First Name
• Last Name
• Email Address

The install takes a single click, and I am now looking at the Symphony login window, as all has gone well. This is where I will be logging into the Symphony administration interface.

http://sitename.dev/symphony

I like to be able modify XSL templates and configuration files directly from the file system, using TextWrangler or Coda as my editors of choice. If I list the files in Terminal to determine the permissions, I see that the files have been created as the default Apache user, _www.

cd ~/Sites/domains/sitename/dev/www
ls -la

drwxr-xr-x  12 Stephen  Stephen    408 Jul 19 14:45 .
drwxr-xr-x   4 Stephen  Stephen    136 Jul 19 07:20 ..
-rwxr-xr-x@  1 Stephen  Stephen   6148 Jul 19 14:22 .DS_Store
-rwxrwxrwx   1 _www     Stephen   1883 Jul 19 12:50 .htaccess
-rwxr-xr-x@  1 Stephen  Stephen   1050 Apr  1  2007 README
drwxr-xr-x   2 _www     Stephen     68 Jul 19 12:50 campfire
-rwxr-xr-x@  1 Stephen  Stephen   6460 Mar 16  2007 index.php
-rw-r--r--   1 _www     Stephen   2053 Jul 19 12:50 install-log.txt
-rw-r--r--@  1 Stephen  Stephen  88956 Mar 27  2007 install.php
drwxr-xr-x   6 _www     Stephen    204 Jul 19 12:50 manifest
drwxr-xr-x@ 12 Stephen  Stephen    408 Mar 22  2007 symphony
drwxr-xr-x   9 _www     Stephen    306 Jul 19 12:50 workspace

This list clearly shows the files and directories that Symphony has created during the install process. To make sure I can still access these files from the file system without much fuss, I'm going to change the permissions on these files, recursively changing the owner and group to my username:

cd ~/Sites/domains/sitename/dev
sudo chown -R Stephen:Stephen www

The first thing I would want to do at this point is to delete the install.php file for security reasons, especially if I was working on a production server.

Hello World

Symphony is installed, so I'll start going through the process of building the home page. For anyone unfamiliar with Symphony, I have created an introduction to Building a Symphony Theme. Unfortunately, I haven't had a chance to finish the tutorial. I hope I can remedy this by completing the documentation for developing this site, assuming that everyone knows the basics as detailed in these articles:

• Building a Symphony Theme: Part 1
• Building a Symphony Theme: Part 2
• Building a Symphony Theme: Part 3
• Building a Symphony Theme: Part 4
• Building a Symphony Theme: Part 5

Install Campfire Services

This is an important step, since the preference set for each Author determines the text formatter to be used for all entries created by that Author. Text formatters are generally added to Symphony as Campfire Services. I will be using the Textile text formatter. Check out the available Campfire Services on the Overture Forum.

Plan the Site Structure

The site requires several types of content: static content pages, news and archives, images, projects organized by country and project partner, a repository of resources, a means of registering members who are provided with access to resources by logging into a members area. Future requirements include photo and video galleries. With that in mind, the site will be built with the following sections:

Sections

• Content
• News
• Resources
• Categories
• Campaigns
• Projects
• Countries
• Partners
• Members

With a site structure in mind, I can develop a custom administration interface by populating each section with custom fields to manage all the types of data that will be used by each section. I have a choice of several different field types: Text Input, Text Area, Select Box, Check Box, File Attachment and Section Link (one of my contributions to the development of Symphony).

Custom Fields

• Content
  • Title (Text Input)
  • Page (Select Box)
  • Body (Text Area)
  • Photo (File Attachment)
  • Photo Title (Text Input)
  • Publish (Check Box)
• News
  • Title (Text Input)
  • Category (Section Link: Categories)
  • Description (Text Area)
  • Body (Text Area)
  • Photo (File Attachment)
  • Photo Title (Text Input)
  • Publish (Check Box)
• Resources
  • Resource (Text Input)
  • File (File Attachment)
  • Category (Section Link: Categories)
  • Description (Text Area)
• Categories
  • Title (Text Input)
  • Description (Text Area)
• Campaigns
  • Campaign Year (Text Input)
  • Description (Text Area)
  • Partners (Section Link: Multiple)
  • Countries (Section Link: Multiple)
• Projects
  • Project (Text Input)
  • Project Year (Select Box)
  • Project Country (Section Link: Countries)
  • Project Partner (Section Link: Partners)
  • Description (Text Area)
  • Details (Text Area)
  • Photo (File Attachment)
  • Photo Title [Portrait Orientation] (Checkbox)
  • Sort (Text Input)
• Countries
  • Country (Text Input)
  • Continent (Select Box)
  • Country Code (Text Input)
  • Description (Text Area)
  • Government (Text Input)
• Partners
  • Partner (Text Input)
  • Full Name (Text Input)
  • Type (Select Box)
  • Description (Text Area)
  • Website Title (Text Input)
  • Website URL (Text Input)
  • Logo (File Attachment)
• Members
  • Username (Text Input)
  • First Name (Text Input)
  • Last Name (Text Input)
  • Email (Text Input)
  • Phone (Text Input)
  • Address 1 (Text Input)
  • Address 2 (Text Input)
  • City (Text Input)
  • Province / State (Text Input)
  • Country (Text Input)
  • Postal / Zip Code (Text Input)
  • Role (Select Box)
  • Role Other (Text Input)
  • Communication Method (Select Box)
  • Organizing Class (Text Input)
  • Organization Name (Text Input)
  • Organization Type (Select Box)
  • Organization Type Other (Text Input)
  • Organization Address 1 (Text Input)
  • Organization Address 2 (Text Input)
  • Organization City (Text Input)
  • Organization Province / State (Text Input)
  • Organization Country (Text Input)
  • Organization Postal / Zip Code (Text Input)
  • Organization Email (Text Input)
  • Organization Phone (Text Input)
  • Organization Facsimile (Text Input)

Create the Master Template

Create a new master template [Blueprints : Components : Create New] called "default".

Then create a page [Blueprints : Pages : Create New] called "Home", configuring the page type as "index", that uses the default.xsl master template.

The default template will look something like this:

  <?xml version="1.0" encoding="UTF-8" ?>
  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  
  <xsl:output method="xml"
    doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    encoding="UTF-8"
    indent="yes" />
  
  <xsl:param name="campaign-year" select="2008"/>
  <xsl:param name="logged-in" select="/data/events/user/@logged-in"/>
  
  <xsl:template match="/">
    <html>
      <head>
        <title><xsl:value-of select="$website-name"/> - <xsl:value-of select="$page-title"/></title>
        <link rel="stylesheet" type="text/css" media="screen" href="{$root}/workspace/assets/css/hri.css"/>
        <link rel="alternate" type="application/rss+xml" href="/rss/" />
      </head>
      <body id="section-{$current-page}">
        <div id="wrapper">
          <ul id="global-nav">
            <xsl:call-template name="global-nav"/>
          </ul>
          <div id="header">
            <h1><a href="{$root}" id="hri-link"><span><xsl:value-of select="$website-name"/></span></a></h1>
            <div id="main-nav">
              <ul>
              <xsl:call-template name="navigation"/>
              </ul>
            </div>
          </div>
          <div id="body-container">
            <xsl:apply-templates />
            <div class="clear"></div>
          </div>
          <div id="footer">
            <div id="copyright">
              <p>Copyright 2008 Hunger Response International. All rights reserved. <a href="{$root}/privacy/" title="Hunger Response International / Rice Raiser Privacy Policy">Privacy Policy</a>
              | Site Design by <a href="http://www.bauhouse.ca/" title="Bauhouse Visual Communications">Bauhouse</a></p>
            </div>
          </div>
        </div>
      </body>
    </html>   
  </xsl:template>
  
  </xsl:stylesheet>

Create the Navigation Utility

This template makes reference to a couple templates that do not yet exist. I can add these named templates after the match template. Or if I want this template to be accessible to all master templates, I can create a utility without attaching it to a specific data source.

  <xsl:template name="global-nav">
    <xsl:for-each select="/data/navigation/page[@type = 'global' or @type = 'index']">
      <xsl:choose>
        <xsl:when test="@type = 'index'">
          <li>
            <xsl:if test="@handle = $current-page">
              <xsl:attribute name="class">current</xsl:attribute>
            </xsl:if>
            <a href="{$root}/"><xsl:value-of select="title"/></a>
          </li>
        </xsl:when>
        <xsl:otherwise>
          <li>
            <xsl:if test="@handle = $current-page">
              <xsl:attribute name="class">current</xsl:attribute>
            </xsl:if>
            <a href="{$root}/{@handle}/"><xsl:value-of select="title"/></a>
          </li>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:for-each>
  </xsl:template>
  
  <xsl:template name="main-nav">
    <xsl:choose> 
      <xsl:when test="$logged-in='true'">
        <xsl:for-each select="/data/navigation/page[@type='members']">
          <li>
            <xsl:if test="@handle = $current-page">
              <xsl:attribute name="class">current</xsl:attribute>
            </xsl:if>
            <a href="{$root}/{@handle}/"><xsl:value-of select="title"/></a>
          </li>
        </xsl:for-each>
        <li><a>Logged in as <xsl:value-of select="/data/events/user/username"/></a></li>
        <li><a href="{$root}/symphony/?page=/logout/">Logout</a></li>
      </xsl:when>
      <xsl:otherwise>
        <xsl:for-each select="/data/navigation/page[@type='default' or @type='login']">
          <li>
            <xsl:if test="@handle = $current-page">
              <xsl:attribute name="class">current</xsl:attribute>
            </xsl:if>
            <a href="{$root}/{@handle}/"><xsl:value-of select="title"/></a>
          </li>
        </xsl:for-each>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>

Create the Page Structure

With the navigation in place, now we can start building the page structure. The pages have been created with the following parameters: Title (Master, URL Schema, Page Type)

• Home (default.xsl, entry, index)
• Partners (index.xsl, entry, global)
• Projects (index.xsl, year/entry, global)
• News (default.xsl, year/month/day/entry, global)
• Donate (default.xsl, entry, global)
• About (default.xsl, entry, global)
  • Board of Directors (default.xsl, entry, about)
  • Advisory Council (default.xsl, entry, about)
• Contact (default.xsl, entry, global)
• Resources (default.xsl, category/entry, members)
• Register (default.xsl, n/a, Default)
• Login (default.xsl, entry, login)
• Privacy (default.xsl, entry, legal)
• Maintenance (default.xsl, n/a, Maintenance)
• Page Not Found (default.xsl, n/a, Page Not Found)

Creating Templates for Common Elements

I'm going to make sure that modifying the templates will be necessary only in a single place. I'll create a template for common elements such as the head element, navigation and footer. The default master template now looks like this:

  <?xml version="1.0" encoding="UTF-8" ?>
  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  
    <xsl:output method="xml"
      doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
      doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
      encoding="UTF-8"
      indent="yes" />
    
    <xsl:param name="campaign-year" select="2008"/>
    <xsl:param name="logged-in" select="/data/events/user/@logged-in"/>
    
    <xsl:template match="/">
      <html>
        <xsl:call-template name="head"/>
        <body id="section-{$current-page}">
          <div id="wrapper">
            <xsl:call-template name="navigation"/>
            <div id="body-container">
              <xsl:apply-templates />
              <div class="clear"></div>
            </div>
            <xsl:call-template name="footer"/>
          </div>
        </body>
      </html>  
    </xsl:template>
  </xsl:stylesheet>

The common elements are being called from a utility called "Common" that contains three named templates:

  <xsl:template name="head">
    <head>
      <title><xsl:value-of select="$website-name"/> - <xsl:value-of select="$page-title"/></title>
      <link rel="stylesheet" type="text/css" media="screen" href="{$root}/workspace/assets/css/hri.css"/>
      <link rel="alternate" type="application/rss+xml" href="/rss/" />
    </head>
  </xsl:template>
  
  <xsl:template name="navigation">
    <ul id="global-nav">
      <xsl:call-template name="global-nav"/>
    </ul>
    <div id="header">
      <h1><a href="{$root}" id="hri-link"><span><xsl:value-of select="$website-name"/></span></a></h1>
      <div id="main-nav">
        <ul>
        <xsl:call-template name="main-nav"/>
        </ul>
      </div>
    </div>
  </xsl:template>
  
  <xsl:template name="footer">
    <div id="footer">
      <div id="copyright">
        <p>Copyright 2008 Hunger Response International. All rights reserved. <a href="{$root}/privacy/" title="Hunger Response International / Rice Raiser Privacy Policy">Privacy Policy</a>
        | Site Design by <a href="http://www.bauhouse.ca/" title="Bauhouse Visual Communications">Bauhouse</a></p>
      </div>
    </div>
  </xsl:template>

Content and Navigation Utilities

I've created some templates to help automate the process of building content and section menus for pages. For page content, I have created a "Page Content" utility.

Page Content

  <xsl:template name="page-body">
    <xsl:param name="page-datasource" select="content/entry"/>
    <div id="section">
      <div class="section-head">
        <h2>
          <a href="{$root}/{$current-page}/">
            <xsl:value-of select="$page-title"/>
          </a>
        </h2>
      </div>
      <div class="section-menu">
        <ul>
          <xsl:call-template name="section-menu">
            <xsl:with-param name="page-datasource" select="$page-datasource"/>
          </xsl:call-template>
        </ul>
      </div>
    </div>
    <div id="main-content">
      <xsl:call-template name="page-content">
        <xsl:with-param name="page-datasource" select="$page-datasource" />
      </xsl:call-template>
    </div>
  </xsl:template>
  
  <xsl:template name="page-content">
    <xsl:param name="page-datasource" select="content/entry"/>
    <xsl:choose>
      <xsl:when test="($entry)">
        <xsl:for-each select="$page-datasource[@handle=$entry]">
          <div class="content-head">
            <h2><a href="{$root}/{$current-page}/{@handle}/" title="Permanent link to this article"><xsl:value-of select="fields/title"/></a></h2>
          </div>
          <div class="content-body">
            <xsl:if test="(fields/photo/item)">
              <p class="photo"><img src="{$root}/{fields/photo/item/path}" title="{fields/photo-title}"/></p>
            </xsl:if>
            <xsl:apply-templates select="fields/body/*" mode="root-url"/>
          </div>
        </xsl:for-each>
      </xsl:when>
      <xsl:otherwise>
        <xsl:for-each select="$page-datasource[fields/page/@handle=$current-page][1]">
          <div class="content-head">
            <h2><a href="{$root}/{$current-page}/{@handle}/" title="Permanent link to this article"><xsl:value-of select="fields/title"/></a></h2>
          </div>
          <div class="content-body">
            <xsl:apply-templates select="fields/body/*" mode="root-url"/>
          </div>
        </xsl:for-each>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>

Page Navigation

The "Page Content" utility calls templates from the "Page Navigation" utility:

  <xsl:template name="section-menu">
    <xsl:param name="page-datasource" select="/data/content-titles/entry"/>
    <xsl:param name="for-section" select="$current-page"/>
    <xsl:for-each select="$page-datasource[fields/page/@handle=$for-section]">
      <li>
        <xsl:if test="(not($entry) and position() = 1 and $current-page = $for-section) or @handle = $entry">
          <xsl:attribute name="class">current</xsl:attribute>
        </xsl:if>
        <a href="{$root}/{$for-section}/{@handle}/"><xsl:value-of select="fields/title"/></a>
      </li>
    </xsl:for-each>
  </xsl:template>
  
  <xsl:template name="projects-menu">
    <xsl:param name="page-datasource" select="/data/projects/entry"/>
    <xsl:param name="for-year" select="2007"/>
    <xsl:for-each select="$page-datasource[fields/project-year=$for-year]">
      <xsl:sort select="fields/project-number"/>
      <li>
        <xsl:if test="($year and not($entry) and position() = 1) or @handle = $entry">
          <xsl:attribute name="class">current</xsl:attribute>
        </xsl:if>
        <a href="{$root}/projects/{$for-year}/{@handle}/"><xsl:value-of select="fields/project"/></a>
      </li>
    </xsl:for-each>
  </xsl:template>
  
  <xsl:template name="partners-menu">
    <xsl:param name="global" select="'no'"/>
    <xsl:for-each select="partners/entry[fields/global=$global]">
      <li>
        <xsl:if test="@handle = $entry">
          <xsl:attribute name="class">current</xsl:attribute>
        </xsl:if>
        <a href="{$root}/partners/{@handle}/"><xsl:value-of select="fields/full-name"/></a>
      </li>
    </xsl:for-each>
  </xsl:template>

Root URL Utility

The xsl:apply-templates instruction used by the page-content template is referring a set of templates that I use to define a mode called root-url. This allows me to publish the Symphony site within a subdirectory while automatically modifying absolute href attributes that have been created as entry content to point to the href relative to the current location using Symphony's $root parameter.

  <xsl:template match="*" mode="root-url">
    <xsl:element name="{name(.)}">
      <xsl:apply-templates select="@*" mode="root-url"/>
      <xsl:apply-templates mode="root-url"/>
    </xsl:element>
  </xsl:template>
  
  <xsl:template match="@*" mode="root-url">
    <xsl:attribute name="{name(.)}"><xsl:value-of select="."/></xsl:attribute>
  </xsl:template>
  
  <xsl:template match="text()" mode="root-url">
    <xsl:value-of select="."/>
  </xsl:template>
  
  <xsl:template match="img[substring(@src,1,1)='/']" mode="root-url">
    <img>
      <xsl:apply-templates select="@*" mode="root-url"/>
      <xsl:attribute name="src"><xsl:value-of select="$root"/><xsl:value-of select="@src"/></xsl:attribute>
    </img>
  </xsl:template>
  
  <xsl:template match="a[substring(@href,1,1)='/']" mode="root-url">
    <a>
      <xsl:apply-templates select="@*" mode="root-url"/>
      <xsl:attribute name="href"><xsl:value-of select="$root"/><xsl:value-of select="@href"/></xsl:attribute>
      <xsl:value-of select="."/>
      <xsl:apply-templates select="./*" mode="root-url"/>
    </a>
  </xsl:template>

Utilities

So far, I have the following list of utilities that are used by all pages, since they have not been attached to a specific data source:

• Common (common.xsl)
• Navigation (navigation.xsl)
• Page Content (page-content.xsl)
• Page Navigation (page-navigation.xsl)
• Root URL (root-url.xsl)

It took a bit of trial and error, since I didn't understand what the path was meant to define. I thought at first it was the full path to the class(es) that I wanted to use. Then it dawned on me that it was the path to the directory in which the classes are stored. None of the documentation I came across really spelled this out clearly. I decided to place all my classes here:

~/flex/classes

I discovered that the class path needs to be either relative to the directory in which the Flash document is stored, or absolute. The UNIX convention of using the tilde character to denote the user directory does not work when defining the classpath. I ended up setting the global classpath in Flash by going to Flash : Preferences : Category : ActionScript : ActionScript 3.0 Settings : Classpath.

Stephen232GB:Users:stephen:flex:classes

Then, I can import classes relative to this path for any FLA files I create. So, the classes I wanted to import are stored here:

~/flex/classes/com/xfactorstudio/xml/xpath

Now it makes total sense when I import classes using the following code in ActionScript:

import com.xfactorstudio.xml.xpath.XPath;

At any rate, that is all a side note to what I wanted to accomplish, which was to be able to load an external XML file and parse the contents. It took a bit of fiddling around with the code examples I had on hand to figure out how to use the XML once I had loaded it into an object. I wanted to find out whether I could load the file and output the contents to a text box. Here's how I did it:

package {
	import flash.display.*;
	import flash.events.*; 
	import flash.net.*;
	import flash.text.*;

	public class XMLData extends Sprite {
		public var xmlString:String;
		public var xmlURL:String = "Products.xml";
		public var xmlData:XML;
		private var urlLoader:URLLoader;
		
		// constructor
		public function XMLData () {
			var urlRequest:URLRequest = new URLRequest(xmlURL);
			urlLoader = new URLLoader();
			urlLoader.addEventListener(Event.COMPLETE, completeListener);
			urlLoader.load(urlRequest);
		}

		// event listener
		private function completeListener(e:Event):void {
			xmlData = new XML(urlLoader.data);
			xmlString = xmlData.toXMLString();
			// display XML in a text box on the stage
			addTextBox(xmlString);
		}
		
		// create text box to display XML on stage
		public function addTextBox(string:String):void {
			var string:String;
			var textBox:TextField = new TextField();
			var format:TextFormat = new TextFormat();
			format.font = "Arial";
			format.size = 15;
			format.color = 0x000000;

			textBox.text = string;
			textBox.setTextFormat(format);
			textBox.autoSize = TextFieldAutoSize.LEFT;
			
			addChild(textBox);
		}
	}
}

/Library/Application Support/macromedia/mm.cfg

C:\Documents and Settings\user_name\mm.cfg

ErrorReportingEnable=1
TraceOutputFileEnable=1

/Users/user_name/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt

cd ~/Library/Preferences/Macromedia/Flash\ Player/Logs
tail -f flashlog.txt

C:\Documents and Settings\user_name\Application Data\Macromedia\Flash Player\Logs\flashlog.txt

cd ~/Application\ Data/Macromedia/Flash\ Player/Logs
tail -f flashlog.txt

• Chapter 2: Factory method pattern (PDF)
• Chapter 12: Model-View-Controller pattern (PDF)

• Cairngorm microarchitecture for Flex and AIR
• flashMVC
• JumpShip Framework for ActionScript, Flex, and Flash
• Mate
• Prana Framework
• PureMVC ActionScript 3 Implementation
• Soma (AS3 MVC ActionScript Framework)
• Swiz

• Chapter 18, Essential ActionScript 2.0 (PDF)

• FrameworkQuest 2008: Introduction
• FrameworkQuest 2008 Part 2: Get Control with Cairngorm
• FrameworkQuest 2008 Part 3: Framework Agnostic Views with PureMVC
• FrameworkQuest 2008 Part 4: IoC With Swiz
• FrameworkQuest 2008 Part 5: Mate, the Pure MXML Framework
• FrameworkQuest 2008 Part 6: The Exciting Conclusion

• Minimalist MVC example using the PureMVC Framework

• width
• height
• frameRate
• backgroundColor

package {
    [SWF(width="800", height="600", frameRate="60", backgroundColor="#FFFFFF")]
    public class Main extends Sprite {

    }
}

~/flex

~/flex/classes
~/flex/data

Error: A file found in a source-path 'AS3DModTutorial' must have the same name as the class definition inside the file 'AS3DmodTutorial'.

~/flex/frameworks/flex-config.xml

<flex-config>
   <compiler>
      ...
      <!-- List of path elements that form the roots of ActionScript class hierarchies. -->
      <!-- not set -->
      <!--
      <source-path>
         <path-element>string</path-element>
      </source-path>
      -->
      ...
   </compiler>
</flex-config>

      <source-path>
         <path-element>/Users/stephen/flex/classes</path-element>
      </source-path>

• Papervision3D
• Away3d
• Sandy3d
• Alternativa3d
• FIVe3D

package {

	import flash.display.*;
	import flash.events.*;
	import flash.utils.Timer;
	
	public class DragRotatePedal extends Sprite {
		
		// Main document class
		
		public var angle:Number;
		public var timer:Timer;

		public function DragRotatePedal() {
			// add event listeners
			crank.pedal.addEventListener(MouseEvent.MOUSE_DOWN, rotatePedal);
			
			// trace mouse position every second
			// debug();
		}
			
		function rotatePedal(e:MouseEvent):void {
			// trace("Mouse DOWN on pedal");
			
			stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
			stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
			
			function onMouseMove(e:MouseEvent):void {
				
				// get an angle to the mouse using atan2 (gets radians)
				angle = Math.atan2(mouseY - crank.y, mouseX - crank.x);
				
				// apply rotation to crank shaft by converting angle into degrees
				crank.rotation = angle * 180 / Math.PI;
				
				// rotate the pedal opposite to the crank shaft so it won't rotate along with it
				crank.pedal.rotation = -crank.rotation;
			}

			function onMouseUp(e:MouseEvent):void {
				//	trace("Mouse UP on pedal");
				stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
			}
		}

		function debug():void {
			timer = new Timer(1000);
			timer.addEventListener(TimerEvent.TIMER, traceOutput);
			timer.start();
		}
		
		function traceOutput(e:TimerEvent):void {
			trace("mouseX: " + mouseX);
			trace("mouseY: " + mouseY);
		}
	}
}

package {

	import flash.display.*;
	import flash.events.*;
	import flash.text.*;
	import flash.utils.Timer;

	[SWF(width="800", height="600", backgroundColor="#ffffff", frameRate="30")]

	public class DebugData extends Sprite {

		// Instantiate stage variables
		public var sw:Number = stage.stageWidth;
		public var sh:Number = stage.stageHeight;

		// Instantiate text field variables
		public var txtFld_mouseX:TextField = new TextField();
		public var txtFld_mouseY:TextField = new TextField();
		public var txtFld_stageW:TextField = new TextField();
		public var txtFld_stageH:TextField = new TextField();

		// Instantiate text string variables
		public var txtStr_mouseX:String;
		public var txtStr_mouseY:String;
		public var txtStr_stageW:String;
		public var txtStr_stageH:String;

		public function DebugData() {
			// Turn scaling off and set alignment to top left
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			// Create text fields
			createTextField(txtFld_mouseX, "Mouse X: ");
			createTextField(txtFld_mouseY, "Mouse Y: ", 20, 50);
			createTextField(txtFld_stageW, "Stage Width: ", 20, 80);
			createTextField(txtFld_stageH, "Stage Height: ", 20, 110);

			// Add text fields to display list
			addChild(txtFld_mouseX);
			addChild(txtFld_mouseY);
			addChild(txtFld_stageW);
			addChild(txtFld_stageH);
			
			// Add an event listener to update debug text
			debug();
		}

		private function createTextField(txtFld:TextField, txtStr:String, txtFldX:int = 20, txtFldY:int = 20):void {
			var txtFmt:TextFormat = new TextFormat();

			// Format text
			txtFmt.font = "Helvetica";
			txtFmt.color = 0x333333;
			txtFmt.size = 14;
			txtFmt.leading = 6;
			txtFmt.leftMargin = txtFmt.rightMargin = 4;

			// Text field properties
			txtFld.x = txtFldX
			txtFld.y = txtFldY;
			txtFld.width = 200;
			txtFld.height = 20;
			txtFld.border = txtFld.background = true;
			txtFld.borderColor = 0xCCCCCC;
			txtFld.background = true;
			txtFld.backgroundColor = 0xEEEEEE;
			txtFld.defaultTextFormat = txtFmt;
			txtFld.text = txtStr;
		}

		private function debug():void {
			var timer:Timer = new Timer(1000/30);
			timer.addEventListener(TimerEvent.TIMER, traceOutput);
			timer.start();
		}

		private function traceOutput(e:TimerEvent):void {
			// Debug text
			txtStr_mouseX = "Mouse X: " + mouseX;
			txtStr_mouseY = "Mouse Y: " + mouseY;
			txtStr_stageW = "Stage Width: " + stage.stageWidth;
			txtStr_stageH = "Stage Height: " + stage.stageHeight;

			// Update text fields with debug text
			txtFld_mouseX.text = txtStr_mouseX;
			txtFld_mouseY.text = txtStr_mouseY;
			txtFld_stageW.text = txtStr_stageW;
			txtFld_stageH.text = txtStr_stageH;
		}
	}
}

package {

	import flash.display.Sprite;
	import flash.text.TextField;

	public class TextAlpha extends Sprite {

		private var textFld:TextField = new TextField();

		public function TextAlpha() {
			textFld.text = "This is a text field";
			textFld.alpha = .2;
			addChild(textFld);
		}
	}
}

• Flash Quick Start: Embedding Fonts

• The Unbearable Strangeness of Embedding Fonts
• Fading and masking with device fonts
• Making Alpha Work on AS3 Dynamic Text Fields
• Loading Fonts Dynamically in Actionscript 2 and 3
• Embedding Fonts in Flash CS3 the Good Way
• Sharing Fonts in ActionScript 3.0 - Part 1: Creating a Font SWF
• Flash AS3 Loading Fonts
• Runtime font loading with AS3 / Flash CS3 (not Flex!)

package {

	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.text.Font;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;

	public class EnumerateFonts extends Sprite {

		private var t:TextField = new TextField();
		private var f:TextFormat = new TextFormat();
		private var font:Font;
		private var fontFile:String = "Helvetica.swf";

		public function EnumerateFonts() {

			// trace loaded fonts
			var fonts:Array = Font.enumerateFonts();

			// to list all available fonts, use the following instead:
			// var fonts:Array = Font.enumerateFonts(true);

			if (fonts.length == 0) {
				t.text="No fonts are loaded";
			} else {
				for (var x:uint=0; x<fonts.length; x++) {

					font = fonts[x];
					trace("fontName : " + font.fontName);
					trace("fontStyle : " + font.fontStyle);
					trace("fontType : " + font.fontType);
				}
			}

			//load font
			var loader:Loader = new Loader();

			loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoaded);

			loader.load(new URLRequest(fontFile));
		}

 	 	private function ioErrorHandler(event:IOErrorEvent):void {
 	 	 	trace("No fonts loaded: " + event);
			fontNotLoaded();
 	 	 }

		private function onLoaded(event:Event):void {

			// trace loaded swf and fonts
			trace("SWF loaded: " + fontFile);
			var fonts:Array = Font.enumerateFonts();
			for (var x:uint = 0; x < fonts.length; x++) {

				font = fonts[x];
				trace("fontName : " + font.fontName);
				trace("fontStyle : " + font.fontStyle);
				trace("fontType : " + font.fontType);

			}
			fontLoaded();
		}

		private function addTextField() {
			// default text field properties
			t.defaultTextFormat = f;
			t.x = 40;
			t.y = 40;
			t.background = true;
			t.autoSize = TextFieldAutoSize.LEFT;
			addChild(t);
		}
		
		private function fontLoaded() {
			// Text format
			f.font = font.fontName; // "HelveticaNeueLT Std Lt"
			f.size = 48;
			
			// Text field
			addTextField();
			t.text = "The font is loaded:\n";
			t.text += font.fontName;
			t.embedFonts = true;
			t.alpha = .5;
			t.rotation = 10;
		}

		private function fontNotLoaded() {
			// Text format
			f.font = "Arial";
			f.size = 24;

			// Text field
			addTextField();
 	 	 	t.text = "No fonts loaded" + "\n";
			t.text += "Default font: Arial";
		}
	}
}

package {

	/*
	Based on ActionScript 3 Tutorials by Doug Ensley and Barbara Kaskosz.
	www.flashandmath.com
	
	Adapted as an ActionScript class by Stephen Bau.
	www.domain7.com 
	*/

	import flash.display.DisplayObjectContainer;
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.display.Graphics;
	import flash.display.Shape;
	import flash.geom.Point;
	import flash.events.MouseEvent;
	import flash.events.TimerEvent;
	import flash.filters.DropShadowFilter;
	import flash.text.TextField;
	import flash.utils.Timer;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
	
	[SWF(width="600", height="400", backgroundColor="0xFFFFFF", frameRate="30")]
	
	public class DragDropGrid extends Sprite {

		// Grid variables

		private var canvas:Sprite = new Sprite();
		private var canvasWidth:Number = 560;
		private var canvasHeight:Number = 360;
		private var grid:Number = 40;	 // Size of the grid and number of lattice points in each direction
		private var cols:Number = Math.ceil(canvasWidth/grid) - 1;
		private var rows:Number = Math.ceil(canvasHeight/grid) - 1;
		private var offset:Number = 20;
		
		
		// Object variables
		
		private var objects:Array = new Array();
		private var thisObject:Object;
		private var pointB:Point = new Point();

		public function DragDropGrid() {

			// Constructor

			setupGrid();
			addObjects();
			addListenersToObjects();
			traceObjects();
		}


		// Set up grid

		private function setupGrid() {

			canvas.graphics.beginFill(0xCCCCCC);
			canvas.graphics.drawRect(0,0,canvasWidth,canvasHeight);
			canvas.graphics.endFill();
			canvas.name = "canvas";
			this.addChild(canvas);
			 
			// Add a bunch of circles to represent lattice points

			canvas.graphics.beginFill(0x000000);
			for (var i:uint=1; i<=rows; i++) {
				for (var j:uint=1; j<=cols; j++) {
					canvas.graphics.drawCircle(j*grid,i*grid,0.5);
				}
			}
			canvas.graphics.endFill();
			canvas.x = 20;
			canvas.y = 20;
		}
		

		// Add objects to grid
		
		private function addObjects() {
			for (var row:uint = 1; row <= rows; row++) {
				for (var col:uint = 1; col <= cols; col++) {
					var index:uint = ((row - 1) * cols) + col;
					objects[index] = new Sprite();
					createObject(objects[index], index);
					objects[index].x = col*grid + offset;
					objects[index].y = row*grid + offset;
				}
			}
		}

		
		// Add event listeners to all variables in the objects array

		private function addListenersToObjects():void {
			stage.addEventListener(MouseEvent.MOUSE_UP, stopAll);
			for (var x:uint = 1; x < objects.length; x++) {
				objects[x].addEventListener(MouseEvent.MOUSE_DOWN, startMoveObject);
			}
		}
		 
		 
		private function startMoveObject(e:MouseEvent):void {
			stage.addEventListener(MouseEvent.MOUSE_MOVE, moveObject);
			thisObject = e.target;
			e.target.parent.setChildIndex(e.target, e.target.parent.numChildren - 1);
		}
		 
		private function moveObject(e:MouseEvent):void {
			pointB.x = gridX(canvas.mouseX) + offset;
			pointB.y = gridY(canvas.mouseY) + offset;

			var objectMoveX:Tween;
			var objectMoveY:Tween;

			objectMoveX = new Tween(thisObject, "x", Strong.easeOut, thisObject.x, pointB.x, 0.5, true);
			objectMoveY = new Tween(thisObject, "y", Strong.easeOut, thisObject.y, pointB.y, 0.5, true);
		}

		private function stopAll(e:MouseEvent):void {
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveObject);
		}

		// Create rectangle
		
		private function createObject(
				obj:Sprite,
				objIndex:uint,
				objWidth:Number = 28,
				objHeight:Number = 28,
				frameBorder:Number = 3
				):void {
			obj.graphics.beginFill(0x999999);
			obj.graphics.drawRect(-objWidth/2, -objHeight/2, objWidth, objHeight);
			obj.graphics.endFill();
			obj.name += " object-" + objIndex;
			addChild(obj);

			var frame:Sprite = new Sprite();
			var frameWidth:Number = objWidth + (2 * frameBorder);
			var frameHeight:Number = objHeight + (2 * frameBorder);
			
			frame.graphics.beginFill(0xFFFFFF);
			frame.graphics.drawRect(-frameWidth/2, -frameHeight/2, frameWidth, frameHeight);
			frame.graphics.drawRect(-objWidth/2, -objHeight/2, objWidth, objHeight);
			frame.graphics.endFill();
			frame.name += " frame-" + objIndex;
			obj.addChild(frame);

			
			var txtFld:TextField = new TextField();
			txtFld.text = String(objIndex);
			txtFld.name += " textfield-" + objIndex;
			// obj.addChild(txtFld);
		}
		
		// Trace Display List
		
		private function traceObjects():void {
			trace("Stage: Number of Children: " + stage.numChildren);
			trace("Object Description: " + stage.getChildAt(0).toString()); // DragDropShift
			traceDisplayList(stage);
		}
		
		private function traceDisplayList(container:DisplayObjectContainer, indentString:String = ""):void 
		{ 
			var child:DisplayObject;
			for (var i:uint=0; i < container.numChildren; i++) 
			{ 
				child = container.getChildAt(i); 
				trace(indentString, child, child.name, "(depth: " + child.parent.getChildIndex(child) + ")");  
				if (container.getChildAt(i) is DisplayObjectContainer) 
				{ 
					traceDisplayList(DisplayObjectContainer(child), indentString + "    ") 
				} 
			} 
		}

		// Helper functions to stay within boundary AND snap to grid
		 
		private function gridX(inX:Number):Number {
			if (inX > grid*cols) {
				return grid*cols;
			}
			 
			if (inX < grid) {
				return grid;
			}
			 
			return grid*Math.round(inX/grid);
		}
			 
		private function gridY(inY:Number):Number {
			if (inY > grid*rows) {
				return grid*rows;
			}
			 
			if (inY < grid) {
				return grid;
			}
			 
			return grid*Math.round(inY/grid);
		}
	}		
}

package {

	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;

	public class AS3DynamicPositioning extends Sprite {

		private static const MARGIN:Number = 10;
		private static const BOX_SIZE:Number = 100;

		public function AS3DynamicPositioning() {

			// Setup the Stage properties
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;

			// Create some dummy boxes
			// This is only for the demonstration

			var boxes:Array = [
			["top", "0x9933cc"],
			["right", "0x00ff00"],
			["bottom", "0xff0000"],
			["left", "0x0099ff"],
			["center", "0xff3399"]];

			for (var i:uint = 0; i < boxes.length; i++) {
				var newBox:Sprite;
				var boxColor:Number = boxes[i][1];

				var nameBadge:TextField = new TextField();
				var txtFmt:TextFormat = new TextFormat();
				var boxName:String = boxes[i][0];
				
				// newBox.createTextField ("test_txt", 1, 0, (boxSize / 2) - 10, boxSize, 10);

				txtFmt.align = TextFormatAlign.LEFT;
				txtFmt.color = 0xffffff;
				txtFmt.size = 16;
				txtFmt.font = "Arial";
				
				nameBadge.autoSize = TextFieldAutoSize.CENTER;
				nameBadge.width = BOX_SIZE;
				nameBadge.height = 24;
				nameBadge.x = BOX_SIZE / 2;
				nameBadge.y = BOX_SIZE / 2 - 12;
				nameBadge.defaultTextFormat = txtFmt;
				nameBadge.text = boxName;
				
				newBox = drawBox(BOX_SIZE, BOX_SIZE, boxColor);
				newBox.name = boxName;

				addChild(newBox);
				newBox.addChild(nameBadge);
				
			}
			
			setStage();
			traceObjects();

			function drawBox(width:Number, height:Number, color:Number):Sprite {
				// Call our function to set it all up right!
				var box:Sprite = new Sprite();
				box.graphics.beginFill(color);
				box.graphics.drawRect(0, 0, width, height);
				box.graphics.endFill();
				
				return box;
			}
			
			// Add an event listener
			stage.addEventListener(Event.RESIZE, stageListener);

			// When the Stage dimensions change...
			function stageListener(e:Event):void {
				// Call our function to reset stage positions
				setStage();
			}

			function setStage():void {
				var sw:Number = stage.stageWidth;
				var sh:Number = stage.stageHeight;
				
				var top:Sprite = Sprite(getChildByName("top"));
				var right:Sprite = Sprite(getChildByName("right"));
				var bottom:Sprite = Sprite(getChildByName("bottom"));
				var left:Sprite = Sprite(getChildByName("left"));
				var center:Sprite = Sprite(getChildByName("center"));

				// Rule for Top / Center alignment
				top.x = sw / 2 - top.width / 2;
				top.y = MARGIN;

				// Rule for Right / Middle alignment
				right.x = sw - (right.width + MARGIN);
				right.y = sh / 2 - right.height / 2;

				// Rule for Bottom / Center alignment
				bottom.x = sw / 2 - bottom.width / 2;
				bottom.y = sh - (bottom.height + MARGIN);

				// Rule for Left / Middle alignment
				left.x = MARGIN;
				left.y = sh / 2 - left.height / 2;

				// Rule for Center / Middle alignment
				center.x = sw / 2 - center.width / 2;
				center.y = sh / 2 - center.height / 2;
			}
		}

		private function traceObjects():void {
			trace("Stage: Number of Children: " + stage.numChildren);
			trace("Object Description: " + stage.getChildAt(0).toString());
			traceDisplayList(stage);
		}
		
		private function traceDisplayList(container:DisplayObjectContainer, indentString:String = ""):void 
		{ 
			var child:DisplayObject; 
			for (var i:uint=0; i < container.numChildren; i++) 
			{ 
				child = container.getChildAt(i); 
				trace(indentString, child, child.name, "(depth: " + child.parent.getChildIndex(child) + ")");  
				if (container.getChildAt(i) is DisplayObjectContainer) 
				{ 
					traceDisplayList(DisplayObjectContainer(child), indentString + "    ") 
				} 
			} 
		}
	}
}

Implicit coercion of a value with static type flash.display:DisplayObject to a possibly unrelated type flash.display:Sprite.