Firstly within your MODx installation find the core>lexicon>en folder and open it in TextMate (or your favorite editor that allows for global search and replace). Select Edit>Find>Find in Project and type the following into the Find field:

“_update’] = ‘Update ”

Now type the following in the Replace Field:

“_update’] = ‘Edit ”

Hit ‘Find’ and then ‘Replace All’ and you will now find your Edit dropdown menus are much more readable!

For areas of common standard functionality, where the project maintenance is likely to change hands, I usually recommend using a well built and well documented framework when building Rich Applications but know how important it is to understand the underlying architecture and design patterns a framework uses so as to have a better understanding of any given system. There are a few ORM (Object Relational Mapping) solutions for AIR emerging on the market now such as FlexORM that have caught my eye, many of them using annotations to map classes to database records but what sort of complexity are those ORM solutions managing?

I have recently been reading Martin Fowler’s excellent book Patterns of Enterprise Application Architecture and saw several things I could bring to my own application development toolkit. So in order to better understand the patterns suggested by Fowler, I decided to test the waters and build a basic custom ORM system that I could use on small bespoke projects such as my own projects, where I would be in control of maintenance. Fowler mentions several patterns including Active Record, Data Mapper, Unit of Work, Lazy Load plus many others devoted to the specifics of relational mapping.

Upon researching the subject, it appears that fundamental to the architecture or your Data Access Layer is the decision of whether to follow Active Record or Data Mapper. Now generally, I am not a huge fan of Active Record for a couple of reasons; firstly, from my experiences with Silverlight and Cake it tends to lead to an oversimplification of the data structure, which often means the data of your application does not represent the problem domain accurately. Since the key to developing a quality app is getting the data structure correct, this will likely affect the optimizability and maintainability of your application in the long run. Secondly Active Record breaks the Principle of Single Responsibility within Object Oriented Programming which brings class bloat as model classes cope with both the Domain based business rules as well as the responsibilities of mapping to the database. So since using Active Record does not feel to me like a best practice, we are left with using Data Mapper to structure the data access layer.

So with a Data Mapper approach chosen, from then on in what are the patterns that are the most important to success on a basic level? How should you structure simple projects where you want an organised data layer but don’t know where to start? Let’s break it down into components:

Controlling what needs to be done: Unit Of Work

The Unit of Work Pattern takes a domain object and flags that domain object for an action by the appropriate Data Mapper without actually doing the action until it’s commit() method is called. This way database calls may be managed using bulk transactions limiting individual transactions. UnitOfWork’s main two functional modes are that of flagging objects that are out out of sync with the DB and committing the queued changes to the database. This has the effect of making fewer database transactions as transactions can be postponed till all the relevant fields are changed and the commit function is run. When you can imagine that the alternative would be to run a transaction every single time a field is changed you can see quickly how this pattern can help speed things up. The Unit of Work has methods for managing new,dirty and deleted objects as you can see here:

Fig. 1.1 Unit if Work UML

Fig. 1.2 Unit of Work Actionscript Class

package com.rudiyardley.dbapp.db
{
	import com.rudiyardley.dbapp.model.DomainObject;
	import com.rudiyardley.dbapp.model.Student;
 
	public class UnitOfWork
	{
 
		private var newObjects:Array;
		private var dirtyObjects:Array;
		private var deletedObjects:Array;
 
		public var identityMap:IIdentityMap;
 
		public function UnitOfWork(s:ForceSingle)
		{
			newObjects = new Array();
			dirtyObjects = new Array();
			deletedObjects = new Array();
		}
 
		public function registerDirty(object:DomainObject):void
		{
			dirtyObjects.push(object);
		}
 
		public function registerClean(object:DomainObject):void
		{
			dirtyObjects.splice(dirtyObjects.indexOf(object),1);
		}
 
		public function registerDeleted(object:DomainObject):void
		{
			deletedObjects.push(object);
		}
 
		//	Object will be placed in the DB with an insert statement
		public function registerNew(object:DomainObject):void
		{
			newObjects.push(object);
			registerClean(object);
		}
 
		public function commit():void
		{
			var mapper:IDataMapper;
			var object:DomainObject;
 
			while(newObjects.length>0)
			{
				object = newObjects.shift();
				mapper = DataSession.current.getMapper(object);
				mapper.create(object);
			}
 
			while(dirtyObjects.length>0)
			{
				object = dirtyObjects.shift();
				mapper = DataSession.current.getMapper(object);
				mapper.update(object);
			}
 
 
			while(deletedObjects.length>0)
			{
				object = deletedObjects.shift();
				mapper = DataSession.current.getMapper(object);
				mapper.deleteItem(object);				
			}
 
		}
	}
}

Reading to and From the Database: DataMapper

How do you interface with the DB so that your persistence logic is separate from your application yet not acting as a transactional mess? A data mapper is responsible for translating between domain objects and the database. Usually you will have one class per domain object. You put in an object in the appropriate accessor method and the DataMapper creates,reads,updates or deletes it. Note the data mapper is usually object specific and every persistent DomainObject should have a corresponding DataMapper. DataMappers should live within the DataSession and can also maintain identity maps there for caching whenever reading from the database.

Fig. 1.3 A typical abstract DataMapper:

The DataMapper above represents the main things you will tend to need from a data mapper. A specific mapper may contain more methods depending on what type of searches it requires. A Domain Object’s corresponding mapper should contain the logic for building all the SQL responsible for it’s persistence in the database. An easy way to prepare and select appropriate mappers is to have some kind of Factory Method on the DataSession object that accepts a Class reference and spits out a mapper. ie.

DataSession.current.getMapper(GalleryImage);	// Would return a GalleryImage mapper.

Fig. 1.4 Source of a typical DataMapper

package com.rudiyardley.dbapp.db
{
	import com.rudiyardley.dbapp.model.DomainObject;
	import com.rudiyardley.dbapp.model.Student;
 
	import flash.data.SQLConnection;
	import flash.data.SQLResult;
	import flash.data.SQLStatement;
 
	import mx.collections.ArrayCollection;
 
	public class StudentMapper implements IDataMapper
	{
		private var stmtInit:SQLStatement;
		private var stmtCreate:SQLStatement;
		private var stmtUpdate:SQLStatement;
		private var stmtDeleteItem:SQLStatement;
		private var stmtReadAll:SQLStatement;
		private var stmtReadById:SQLStatement;
 
		private var map:IIdentityMap;
 
		public function StudentMapper(conn:SQLConnection,map:IIdentityMap)
		{
			this.map = map;
 
			//	Initialize the other queries
			stmtInit = new SQLStatement();
			stmtCreate = new SQLStatement();
			stmtUpdate = new SQLStatement();
			stmtDeleteItem = new SQLStatement();
			stmtReadAll = new SQLStatement();
			stmtReadById = new SQLStatement();
 
			//	apply the connection
			stmtInit.sqlConnection = conn;
			stmtCreate.sqlConnection = conn;
			stmtUpdate.sqlConnection = conn;
			stmtDeleteItem.sqlConnection = conn;
			stmtReadAll.sqlConnection = conn;
			stmtReadById.sqlConnection = conn;
 
			initDB();
 
		}
 
		//	CREATE TABLE
		private function initDB():void
		{
			stmtInit.text = "CREATE TABLE IF NOT EXISTS students ( id TEXT PRIMARY KEY, name TEXT ); ";
			stmtInit.execute();
		}
 
		//	READ ALL
		public function readAll():ArrayCollection
		{
			var result:SQLResult;
			var items:ArrayCollection;
			var i:int;
			var dataObject:Object;
			var currentStudent:Student;
 
			//	Prepare statement
			stmtReadAll.text = "SELECT * FROM students;";
			stmtReadAll.execute();
 
			//	Get results and iterate over result
			result = stmtReadAll.getResult();
			items = new ArrayCollection();
			if(result.data != null)
			{
				for(i=0;i<result.data.length;i++)
				{
					dataObject = result.data[i];
					currentStudent = createCleanDomainObjectFromDataObject(dataObject) as Student;
					DataSession.current.registerObject(currentStudent);
					items.addItem(currentStudent);
				}
			}
			return items;
		}
 
		//	READ BY ID
		public function readById(id:String):DomainObject
		{
			var result:SQLResult;
			var studentToReturn:Student;
			var dataObject:Object;
 
			studentToReturn = map.getObjectByTypeId(Student,id) as Student;
 
			if(studentToReturn != null)
			{
				return studentToReturn;
			}
 
			stmtReadById.text = "SELECT * FROM students WHERE id=:id;";
			stmtReadById.parameters[":id"] = id;
			stmtReadById.execute(1);
 
 
			result = stmtReadById.getResult();
			if(result.data == null)
			{
				return null;
			}
			stmtReadById.cancel();
			dataObject = result.data[0];
			studentToReturn = createCleanDomainObjectFromDataObject(result.data[0]) as Student;
			DataSession.current.registerObject(studentToReturn);
			return studentToReturn;
		}
 
		//	CREATE
		public function create(object:DomainObject):void
		{
			if(readById(object.id)==null)
			{
				stmtCreate.text = "INSERT INTO students (id,name) VALUES (:id,:name);";
				stmtCreate.parameters[":id"] = Student(object).id;
				stmtCreate.parameters[":name"] = Student(object).name;
				stmtCreate.execute();
			}
		}
 
		//	UPDATE
		public function update(object:DomainObject):void
		{
			stmtUpdate.text = "UPDATE students SET name=:name WHERE id=:id; ";
			stmtUpdate.parameters[":id"] = Student(object).id;
			stmtUpdate.parameters[":name"] = Student(object).name;
			stmtUpdate.execute();
		};
 
		//	DELETE
		public function deleteItem(object:DomainObject):void
		{
 
			stmtDeleteItem.text = "DELETE FROM students WHERE id = :id ; ";
			stmtDeleteItem.parameters[":id"] = Student(object).id;
			stmtDeleteItem.execute();
		};
 
		//	Utility function creates a clean domain object
		private function createCleanDomainObjectFromDataObject(dataObject:Object):DomainObject
		{
			var student:Student = new Student(dataObject.id,dataObject.name);
			student.markClean();
			return student;
		}
	}
}
 

Handling ID’s using GUIDS

One of the issues I found in working with the fowler patterns was that when doing basic bulk writes or reads Actionscript APIs don’t allow access to the most recent row ID of a record until the entire transaction has been completed. A strategy I found to solve this problem was to create ID’s external to the database. One way to do this was to incrementally update a purpose created field the database every time a record was added to keep track of the currently written id. A simpler method was to use a GUID generator to accomplish the same ends.

var s:Student = new Student(IdGenerator.instance.getId(),name);

Keeping track of identities: IdentityMap

When you have objects that represent objects within the database it is important to keep track of all the objects out there in memory. To this end we can use a registry associated with the data session.

Downloadable Example

I have put together an example of a data access layer within the context of a simple and rather hastily constructed application that can act as an example of the patterns at work here. The application manages a many to many relationship between Teachers and Students. To use the application you can create Teachers or Students and the application adds them to the lists. Then select both a teacher and student together and you can create a relationship.

You can download the source code here

Your code is not testable

When code is written with test driven development, that code tends to exhibit the following properties:

• Looser coupling
• Higher cohesion
• Classes tend to follow the single responsablity principle
• Unit tests already exist

Testability refers to the ease at which your code can be tested and specifically how easy it is to use mock objects to test code out of contexts and breakdown functionality into simple pass fail assertions. Things that can help here are dependency injection where polymorphic objects or interface compliant objects are injected into the test objects

If your code is not testable and thus has no test suite, over time and with copmlexity it becomes very difficult to refactor without introducing bugs into the codebase. Without unit tests it is difficult, especially in a complex system that exhibits a fair amount of coupling to know that the change you just did does not affect any other part of the system. If a test suite exists that tests that each class works the way it should you can feel more confident that once you have committed to the main branch that the system should not break.

There are long and complex inheritance chains

Favoring inheritance over composition causes problems with code reusability. Long elaborate inheritence chains can cause functionality to be hidden and spread over multiple classes increasing the amount of effort required to understand functionality and reducing maintainability. Inheritance can cause issues with reusing a subclass as if any aspect of the superclass is not going to be used in the subclass the superclass will have to be rewritten to break up the change or be replaced by another class that is more suitably abstract. These sorts of overheads limit the flexability and reusability of the code.

The book entitled “Design Patterns – Elements of reusable object-oriented software” is often cited as the classic first text book for learning design patterns makes no small effort to point out the fallacies of inheritence over composition within application architecture.

Tight coupling between classes

At the heart of application design is the principle that objects must be coupled with as few entites as possible. The reasons for this are elementary. If one class is altered and its interface changed then all the other classes that have knowledge of that class will need to be changed. When a change is made, the fewer classes that need to be touched the better especially in a multi-developer environment.
Classes do more than one thing

Robert C. Martin’s Single Responsibility Principle states that each class should have a single ‘responsibility’ or a single ‘reason to change’. Thus if you have an object that both formats a report and prints stuff, if either the formatting for the report changes or the printing mechanism needs to be updated you will need to change that module. This means that changing the formatting of the report may break the printing mechanism.

God class syndrome

A well written complex application will clearly separate transactions and data and then separate transactions by function and data model by logical set. The benefits of doing so are immeasurable when you add added complexity of event handling and sequencing in tow. Should you not allow for this sort of separation as your application grows in complexity it is tempting to intertwine function calls and data storage in a single class that has more than one responsibility. Within the poor application I have recently serviced I found the controller dangerously delegated each method call to a method on what was called the model. This meant that the business rules were mixed up with the data model as well as the event handing and transactional code for the application and thus all were effectively dependent on each other! The class was not much shy of 2000 lines.

Data structure is mixed up with transactional logic.

The first step to understanding a system is to understand its data structure but you can’t have a clear data structure if you mix it with transactional business logic. Transactional logic is the responsibility of the controller component of MVC and for all intensive purposes one should leave the model as data and data only whenever possible.

Incorrect implementation of standard design patterns

When design patterns are misunderstood it results in excessive complexity without the useful advantages that design patterns bring. It is vital then to use design patterns in the manner for which they have been designed and actually solve the problems they attempt to solve.

Reinventing the wheel

Do you really need to create your own set of component widgets when there exists component widgets out there that solve exactly the same problems? Do you really need to write a PDF parser when there already exists an off the shelf open source parser that has more options and configuration possibilities and is more robust and tested than anything you are likely to comeup with? Do you really need to write that new custom CMS with exactly the same features as 50 off the shelf ones but no documentation and no development community? The answer is no. The main reason is not that you can’t do it and do it well, the main reason is that it is highly unlikely you will document your solution properly and if you are not around in the future it will be impossible to find someone to service it for you since the community around your code will not exist.

To install or update plugins you must quit flash builder or run with administrator privileges.

The problem is I am actually using an Admin account. Running Flash Builder from the terminal using sudo does not seem to work neither does enabling root user on my mac and trying to run flash builder as root.

There was a post about it on the adobe forum although that didn’t seem to offer any Mac based solution.

What did eventually work was setting the sharing & permissions on the /Applications/Adobe Flash Builder 4/ folder to allow everyone to Read & Write.

Following that, I followed the instructions found here taking note on which packages to install within Flex Builder:

http://blogs.adobe.com/jasonsj/2010/03/installing_subclipse_in_flash_builder_4.html

Now Subclipse works yay!

Finding the intersection of two circles appears complicated although in actual fact it is just a matter of unraveling Pythagoras’ Theorem a few times. Pythagoras’ Theorem states that the sum of square of the both straight sides of any right angled triangle is equal to the square of the diagonal.

ie. a²=b²+c²

Here is how you use it to find the intersection points of a circle with Actionscript:

1) Start by creating a couple of draggable circles and some hidden dots that will be used to indicate where the intersections are:

package
{
	import flash.display.Sprite;
	import flash.geom.Point;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class FindIntersection extends Sprite
	{
		public var circle1Radius:Number = 40;
		public var circle2Radius:Number = 70;
		public var circle1:Sprite = drawCircle(circle1Radius);
		public var circle2:Sprite = drawCircle(circle2Radius);
		public var dot1:Sprite = drawDot();
		public var dot2:Sprite = drawDot();

		function FindIntersection()
		{
			var origin:Point = new Point(stage.stageWidth/2, stage.stageHeight/2);
			circle1Radius = 40;
			circle2Radius = 70;
			circle1 = drawCircle(circle1Radius);
			circle2 = drawCircle(circle2Radius);
			dot1 = drawDot();
			dot2 = drawDot();
			circle1.x = origin.x - 10;
			circle1.y = origin.y;
			circle2.x = origin.x + 10;
			circle2.y = origin.y;
			addChild(circle1);
			addChild(circle2);
			addChild(dot1);
			addChild(dot2);
		}

		function drawCircle(rad:Number):Sprite
		{
			var c:Sprite = new Sprite();
			c.graphics.lineStyle(1,0x000000);
			c.graphics.beginFill(0xBBBBBB,.1);
			c.graphics.drawCircle(0,0,rad);
			c.graphics.endFill();
			c.graphics.moveTo(-5,0);
			c.graphics.lineTo(5,0);
			c.graphics.moveTo(0,-5);
			c.graphics.lineTo(0,5);
			c.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
			c.addEventListener(MouseEvent.MOUSE_UP, onUp);
			return c;
		}

		function drawDot()
		{
			var d:Sprite = new Sprite();
			d.graphics.beginFill(0xFF0000);
			d.graphics.drawCircle(0,0,2);
			d.graphics.endFill();
			d.visible = false;
			return d;
		}

		function onDown(e:Event):void
		{
			var circle:Sprite = e.target  as  Sprite;
			circle.startDrag();
		}

		function onUp(e:Event):void
		{
			var circle:Sprite = e.target  as  Sprite;
			circle.stopDrag();
		}

	}
}

function enterFrameHandler(e:Event):void
{
	// Set up variables
	var r0:Number = circle1Radius;
	var r1:Number = circle2Radius;
 
	// Point x and y coords
	var p0x:Number = circle1.x;
	var p0y:Number = circle1.y;
	var p1x:Number = circle2.x;
	var p1y:Number = circle2.y;
 
	//First calculate the distance d between the center of the circles. d = ||P1 - P0||.
	var dx:Number = p0x - p1x;
	var dy:Number = p0y - p1y;
	var d:Number = Math.sqrt(dx*dx + dy*dy);
 
	//If d > r0 + r1 then there are no solutions, the circles are separate.
	//If d < |r0 - r1| then there are no solutions because one circle is contained within the other. 	if ((d > r0 + r1) ||
	(d < Math.abs(r0 - r1)))
	{
		dot1.visible = false;
		dot2.visible = false;
		return;
	}
}

The way we calculate distance is by using Pythagoras’ formula by determining distance as a hypotenuse of a right angled triangle calculated as the square root of the square of the x-difference plus the square of the y-difference. ie.

d=√( dx²+dy² )

3) Now comes something slightly trickier. Consider the following diagram:

Again using Pythagoras we can say that:

a²+ h²= r₀² is true for the red triangle and b²+ h²= r₁² is true for the green triangle.

Now knowing that d = a + b we can then use a bit of algebra to solve for a in terms of r₀, r₁ and d (I can show the working here if you want just leave a comment or send me a message):

a = (r₀² – r₁² + d² ) / (2 d)

Which we can write in actionscript as:

var a:Number = ( r0*r0 - r1*r1 + d*d ) / (2*d);

Now since P₂ is along the line distance d and the x and y coordinates are relative to a/d therefore:

var p2x:Number = p0x + a * ( p1x - p0x ) / d;
var p2y:Number = p0y + a * ( p1y - p0y ) / d;

var h:Number = Math.sqrt(r0*r0 - a*a);

	var d1x:Number = p2x + h * ( p1y - p0y ) / d;
	var d1y:Number = p2y - h * ( p1x - p0x ) / d;
	var d2x:Number = p2x - h * ( p1y - p0y ) / d;
	var d2y:Number = p2y + h * ( p1x - p0x ) / d;

Here is the source code.

Soon I plan to write about how to make an actual arm move based on this code but that is for another article.

The other day I was preparing a spec and getting a colleague to double check my correspondence. They brought up that the client likely did not know what Flex was and that I should be prepared to explain it to the client in the meeting we were tabled to have. My first reaction was fine until it dawned upon me that finding the words to describe flex for someone who only really understands flash as a scripting and animation technology may actually be a little difficult so thought I would share with you what I came up with as well as ask for opinions on the matter.

Here are a few possible answers:

1. Flex is a collection of compilers that output SWF bitecode
2. Flex is a framework that is based on MXML as a meta-language for forming SWF bytecode
3. The Flex framework uses both MXML and a bunch of custom Actionscript classes to define the various visual and non-visual elements of Rich Applications
4. Flex makes building Rich applications with Flash faster by leveraging the use of standard user interface components and layout method

Any other thoughts?

Use a Development Process and have Deliverables

Using a development process is a biggie as many design shops switch from print to multimedia may not necessarily understand the nature of developing software so as a web developer it is your job to educate them.

Are you working in an agile fashion? That means customers must have the resources to directly engages with the team through constant testing every project iteration and customers pay for each iteration as it comes.

Are you working with a more traditional Waterfall model? That means the steps are going to be roughly:

• Requirements Gathering
• Analysis & Design
• Implementation
• Testing
• Deployment

and there should always be client deliverables at the end of each process that will need to be signed off or paid for. This could be given as the following:

• Requirements Gathering- Requirements Specification
• Anaysis & Design – Technical Specification & Functional Specification
• Implementation – Software Delivery
• Testing – A complete set of Observation Reports
• Deployment – Final Acceptance Document

Which ever process model you are using, clients must know what the process is and the ramifications for changing designs after sign off. There also needs to be documentation and deliverables milestones that accurately reflect the process you are using.

Use A File Server

This may seem obvious but it is a basic necessity when working with a team. Your server should have a file system that reflects your organisation’s process. ie. a ‘Work in Progress’ folder (WIP) and an ‘Archive’ folder to hold current and past projects. In any digital business your data is your livelihood so it is vital to have a reliable backup script rotationally backing up your data to a separate medium (preferably off site) daily. You also should test that your backup script is functioning correctly.

Version Control

Every development house where more than one person deals with code at all really must use version control. Even should you have a data backup script on the file system maintaining a version control repository allows you to document your code versions so you know exactly when and what is checked in to the repository at any point allowing you to roll back, branch and merge code streams. Even if there is only one person who touches the code having version control VC effectively means there are always at least two copies of code at any given point in time and is like having an extra backup as you never know when a hard disk fails or when you need a deployment of old code yesterday. It is easy to set up SVN or GIT on a server somewhere and manage your repository. Examples of version control include SVN, GIT and CVS.

Use a Wiki

Use a wiki to document things you want to share with the team as you create them. This makes those little things that only john the web dev knows public and openly accessible when john isnt around.

Use a Dev Web Server

Working with web projects? You probably wouldn’t be reading this if you weren’t. Maintain a dev server that is running a web server such as Apache and you can use it to host your organisation’s intranet, wiki, dev database and internal sites for development.

Use a Live Web Server

Ideally a VPS (Virtual Private Server) but not necessarily as you then require the server admin expertise to manage it and security is incredibly important. This server should mirror the environment found on the dev server as much as possible. From my perspective as I often find myself dealing with LAMP stack technology both my dev and live environments would be Linux boxes with the same version of Linux PHP Apache and MySQL.

If using a VPS it is very important your dev server mirrors your live server technologywise as you can rehearse updates to your dev server before running them on your live server.

Automate deployment

Agency work requires the development of many small jobs in rapid succession and often requires a lot of server admin which includes setting up domain names and assigning them to newly deployed sites. Create a script that will ssh into your live site and setup your web management automatically based on your naming conventions you have determined.

Knowledge Management System

No database to keep track of client information? Worst case scenario start a wiki but much better would be to build one yourself using RoR. Why get expensive data management software when you can develop a knowledge management app in 30 minutes using free technology. Use Ruby on Rails to create a simple app that can maintain client information and host it on your dev server. You could then later extend it to create db’s and site points on the fly through a web interface on your dev and live servers as you grow.

Have Products & Templates

At your agency you may have interactive jobs you have completed successfully where the technical and functional design elements can be reused. Keep a repository of these elements and tailor them for reuse. It should be possible to develop an automated system for them to be pumped out from design format at the touch of a button thus cutting costs.

Define the product not only in terms of the technical components but create documentation for designers, sales staff and project managers to be able to sell the system.

Example products may include

• Email Newsletters
• Flash Microsites
• CMS Deployments
• Shopping Cart Software
• Blog Themes
• Email list management suites

Use a Bug Tracking System

A system for both internal staff and clients to create observation reports to developers. Examples include:

• Mantis
• Bugzilla
• Jira

Use Convention over Configuration

Maintain a convention for all your internal site urls as well as your external site urls. It doesnt matter what the convention is, just that it is consistent across your sites and that everyone knows it. eg.

Lets say your client was accenture, your job was to build the www.accenture.com.au website and your agency was rudestar.net

This can extend to the way you develop your web applications and data structures.

Running your own systems on your own servers with streamlined naming conventions means you can setup quicker deployment and requires less unnecessary communication with customers through project managers. Having said this, once you have automated systems in place and use your own naming conventions I don’t see why it is not fair to charge a fee for dealing with external systems outside your support model.

Conclusion

Whilst this is not an exhaustive list there things are in my opinion the bare minimum that a digital agency need to set up in order to effectively deliver on interactive projects.

The concepts required here may look daunting but all that needs to be required are the following:

• Velocity
• Wall Collision Detection
• Friction
• Gravity

Defining the world

Lets start off by defining our bounds and our world as a class like so:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Rectangle;
 
	[SWF(width="530", height="397", frameRate="30", backgroundColor="#EEEEEE")]
	public class BallWorld extends Sprite
	{
		public function BallWorld()
		{
			var world:World = new World(530,397);
			addChild(world);
		}
	}
}
 
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Rectangle;
import flash.events.MouseEvent;
 
class World extends Sprite
{
 
	public function World(w:Number, h:Number)
	{
		var backing:Sprite;
		backing = new Sprite();
		backing.graphics.lineStyle(1,0xAAAAAA);
		backing.graphics.beginFill(0xFFFFFF);
		backing.graphics.drawRect(0,0,400,300);
		backing.x = w/2 - backing.width/2;
		backing.y = h/2 - backing.height/2;
		addChild(backing);
 
		var ball:Ball;
		ball = new Ball(20);
		ball.x = w/2;
		ball.y = h/2;
		addChild(ball);
 
	}
}
 
class Ball extends Sprite
{
	public var radius:Number = 20;	//	circle radius
 
	public function Ball(rad:Number)
	{
		//	Apply params
		radius = rad;
 
		//	Draw Ball
		graphics.lineStyle(1,0xAAAAAA);
		graphics.beginFill(0xA9C065);
		graphics.drawCircle(0,0,radius);
		graphics.endFill();
 
	}
}

Here we start with a World class that contains a backing sprite and a Ball Sprite which we have placed in the middle of the bounds. This tute is all about creating some realistic movement based on basic physics so lets get the ball to move.

Velocity

Within the physical world moving objects have a velocity which represents a distance moved over time. In Actionscript, we have a frame ticker which represents time so once every frame we can add the velocity to the coordinate position of our sprite to give the appearance of movement. Velocity in physics is given as a vector but in Actionscript we can provide it as two separate values for each coordinate. Lets add velocity to our ball:

class Ball extends Sprite
{
	public var vx:Number = 0;		//	velocity x
	public var vy:Number = 0;		//	velocity y
	public var radius:Number = 20;	//	circle radius
 
	public function Ball(rad:Number)
	{
		//	Apply params
		radius = rad;
 
		//	Draw Ball
		graphics.lineStyle(1,0xAAAAAA);
		graphics.beginFill(0xA9C065);
		graphics.drawCircle(0,0,radius);
		graphics.endFill();
 
		//	Add Listeners
		addEventListener(Event.ENTER_FRAME, onFrame);
	}
 
	private function onFrame(e:Event):void
	{
		//	Apply Velocity to Position
		x += vx;
		y += vy;
 
	}
}

...
var ball:Ball;
ball = new Ball(20);
ball.x = w/2;
ball.y = h/2;
 
//	Initial Velocity
ball.vx = 5;
ball.vy = 5;
...

Bingo! the ball is moving but it is hardly realistic. Firstly the ball leaves the bounds almost immediately so we need to provide some collision detection and to constrain it to the given bounds.

Wall Collision Detection

Let’s add the following handler and variable to our Ball class:

private var bounds:Rectangle;
...
public function Ball(rad:Number)
{
...
	//	Add Listeners
	addEventListener(Event.ENTER_FRAME, onFrame);
	addEventListener(Event.ADDED, onAdded);
}
...
private function onAdded(e:Event):void
{
	world = parent as World;
	bounds = world.bounds;
}

now add the following to our frame routine:

private function onFrame(e:Event):void
{
	//	Use a temp var for x and y to increase performance
	var tx:Number = x;
	var ty:Number = y;
 
	//	Collision Detection with right wall
	if(tx + vx > bounds.right - radius)
	{
		tx = bounds.right - radius;
		vx *= -1;
	}
 
	//	Collision Detection with left wall
	if(tx + vx < bounds.left + radius) 	{
 		tx = bounds.left + radius;
 		vx *= -1;
	}
 
  	//	Collision Detection with floor
	if(ty + vy > bounds.bottom - radius)
	{
		ty = bounds.bottom - radius;
		vy *= -1;
	}
 
	//	Collision Detection with ceiling
	if(ty + vy < bounds.top + radius)
	{
		ty = bounds.top + radius;
		vy *= -1;
	}
 
	//	Apply Velocity to tx and ty
	tx += vx;
	ty += vy;
 
	//	Render the change
	x = tx;
	y = ty;
 
}

class World extends Sprite
{
...
	private var backing:Sprite;
...
	public function get bounds():Rectangle
	{
		return backing.getBounds(this);
	}
}

Here we also use a temporary variable to make it so that x is only set at the end of the frame script and is only necessary for performance reasons but is a good habit to get into since it is good to keep data and render separate.

So now we have our ball flying away within our bounding box but the movement doesn’t look particularly real as we haven’t added any of the common physical forces to our object such as friction or gravity.

Adding Friction

To add air friction we simply need to multiply the velocity by a given amount between 0 and 1 every frame ie:

//	Air Dampening
vx *= .99;
vy *= .99;

Gravity

The last thing to do is add gravity to simulate the natural pull towards the ground by simply adding to the downward velocity every frame:

//	Air Dampening
vx *= .99;
vy *= .99;	
 
//	Gravity
vy += 1;	
 
//	Apply Velocity to tx and ty
tx += vx;
ty += vy;
 
//	Render the change
x = tx;
y = ty;

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Rectangle;
 
	[SWF(width="530", height="397", frameRate="30", backgroundColor="#EEEEEE")]
	public class BallWorld extends Sprite
	{
		public function BallWorld()
		{
			var world:World = new World(530,397);
			addChild(world);
		}
	}
}
 
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Rectangle;
import flash.events.MouseEvent;
 
class World extends Sprite
{
	private var backing:Sprite;
	public var friction:Number;
	public var gravity:Number;
 
	public function World(w:Number, h:Number)
	{
		friction = 0.95;
		gravity = 1;
 
		backing = new Sprite();
		backing.graphics.lineStyle(1,0xAAAAAA);
		backing.graphics.beginFill(0xFFFFFF);
		backing.graphics.drawRect(0,0,400,300);
		backing.x = w/2 - backing.width/2;
		backing.y = h/2 - backing.height/2;
		addChild(backing);
 
		var ball:Ball;
		ball = new Ball(20);
		ball.x = w/2;
		ball.y = h/2;
 
		//	Initial Velocity
		ball.vx = 5;
		ball.vy = 5;
 
		addChild(ball);
 
	}
 
	public function get bounds():Rectangle
	{
		return backing.getBounds(this);
	}
}
 
class Ball extends Sprite
{
	public var vx:Number = 0;		//	velocity x
	public var vy:Number = 0;		//	velocity y
	public var radius:Number = 20;	//	circle radius
	private var bounds:Rectangle;
	private var friction:Number;
	private var gravity:Number;
 
	public function Ball(rad:Number)
	{
		//	Apply params
		radius = rad;
 
		//	Draw Ball
		graphics.lineStyle(1,0xAAAAAA);
		graphics.beginFill(0xA9C065);
		graphics.drawCircle(0,0,radius);
		graphics.endFill();
 
		//	Add Listeners
		addEventListener(Event.ENTER_FRAME, onFrame);
		addEventListener(Event.ADDED, onAdded);
	}
 
	private function onAdded(e:Event):void
	{
		var world:World = parent as World;
		bounds = world.bounds;
		friction = world.friction;
		gravity = world.gravity;
	}
 
	private function onFrame(e:Event):void
	{
		//	Use a temp var for x and y to increase performance
		var tx:Number = x;
		var ty:Number = y;
 
		//	Collision Detection with right wall
		if(tx + vx > bounds.right - radius)
		{
			tx = bounds.right - radius;
			vx *= -1;
		}
 
		//	Collision Detection with left wall
		if(tx + vx < bounds.left + radius) 		{ 			tx = bounds.left + radius; 			vx *= -1; 		} 		 		//	Collision Detection with floor 		if(ty + vy > bounds.bottom - radius)
		{
			ty = bounds.bottom - radius;
			vy *= -1;
		}
 
		//	Collision Detection with ceiling
		if(ty + vy < bounds.top + radius)
		{
			ty = bounds.top + radius;
			vy *= -1;
		}
 
		//	Air Dampening
		vx *= friction;
		vy *= friction;	
 
		vy += gravity;
 
		//	Apply Velocity to tx and ty
		tx += vx;
		ty += vy;
 
		//	Render the change
		x = tx;
		y = ty;
 
	}
}

As you can see by adding gravity we substantially increase the reality factor of the motion.

Create your shell script

Open up your favorite editor and lets create the following script I called mine svncreate:

#!/bin/bash
set -e

Check your script input

# Check user input
SUBDOMAIN=$1
DOMAIN=$2
SUBDOMAINPATH=/var/www/vhosts/$DOMAIN/subdomains/$SUBDOMAIN
if [ -z $SUBDOMAIN ] || [ -z $DOMAIN ]; then
    echo invalid input
    exit
fi

Report to the user

# Report to the user
echo
echo -e "    subdomain:   $SUBDOMAIN"
echo -e "       domain:   $DOMAIN"
echo -e " repolocation:   http://$1.$2"
echo -e "disk location:   $SUBDOMAINPATH/svn/"
echo
echo -e "Are you sure? (y/n) \c "
read confirm
if [ "$confirm" != "y" ] && [ "$confirm" != "Y" ]; then
    exit
fi

Create a subdomain using the Plesk CLI

# Create subdomain in plesk
echo -e "Creating subdomain."
cd '/usr/local/psa/bin/'
./subdomain --create $SUBDOMAIN -domain $DOMAIN
echo -e "Finished Creating Subdomain."

Create the SVN Repo

# Create SVN Repo
echo -e "Creating SVN Repo."
svnadmin create $SUBDOMAINPATH/svn
chown -R apache:apache $SUBDOMAINPATH/svn

Link the Apache domain to the SVN Repo

# Create Apache config file
cd $SUBDOMAINPATH/conf
cat > vhost.conf << EOF
<Location />
    DAV svn
    SVNPath $SUBDOMAINPATH/svn
    AuthType Basic
    AuthName "Subversion Repository"
    AuthUserFile /etc/svn-auth-file
    Require valid-user
</Location>
EOF

The Location directive here is telling Apache to connect to the SVN repository located at $SUBDOMAINPATH/svn as well as the auth file I had set up before at /etc/svn-auth-file which simply contains the login credentials of my SVN user.

Reconfigure apache to accept the new settings

# Reconfigure the host to accept new settings
/usr/local/psa/admin/sbin/websrvmng --reconfigure-vhost --vhost-name=$DOMAIN
echo -e "Finished Creating SVN Repo."

Uploading the script

The whole script should look something like this:

#!/bin/bash
set -e
 
# Check user input
SUBDOMAIN=$1
DOMAIN=$2
SUBDOMAINPATH=/var/www/vhosts/$DOMAIN/subdomains/$SUBDOMAIN
if [ -z $SUBDOMAIN ] || [ -z $DOMAIN ]; then
    echo invalid input
    exit
fi
 
# Report to the user
echo
echo -e "    subdomain:   $SUBDOMAIN"
echo -e "       domain:   $DOMAIN"
echo -e " repolocation:   http://$1.$2"
echo -e "disk location:   $SUBDOMAINPATH/svn/"
echo
echo -e "Are you sure? (y/n) \c "
read confirm
if [ "$confirm" != "y" ] && [ "$confirm" != "Y" ]; then
    exit
fi
 
# Create subdomain in plesk
echo -e "Creating subdomain."
cd '/usr/local/psa/bin/'
./subdomain --create $SUBDOMAIN -domain $DOMAIN
echo -e "Finished Creating Subdomain."
 
# Create SVN Repo
echo -e "Creating SVN Repo."
svnadmin create $SUBDOMAINPATH/svn
chown -R apache:apache $SUBDOMAINPATH/svn
 
# Create Apache config file
cd $SUBDOMAINPATH/conf
cat > vhost.conf << EOF
<Location />
    DAV svn
    SVNPath $SUBDOMAINPATH/svn
    AuthType Basic
    AuthName "Subversion Repository"
    AuthUserFile /etc/svn-auth-file
    Require valid-user
</Location>
EOF
 
# Reconfigure the host to accept new settings
/usr/local/psa/admin/sbin/websrvmng --reconfigure-vhost --vhost-name=$DOMAIN
echo -e "Finished Creating SVN Repo."

chmod 755 /root/bin/svncreate

Running the script

Now we have the script created we can run it if all is set up correctly we should see the following when we run it:

[root@server ~]# svncreate svn1 mydomain.net
 
subdomain:   svn1
domain:   mydomain.net
repolocation:   http://svn1.mydomain.net
disk location:   /var/www/vhosts/mydomain.net/subdomains/svn1/svn/
 
Are you sure? (y/n) y
Creating subdomain.
SUCCESS: Creation of subdomain 'svn1' complete.
Finished Creating Subdomain.
Creating SVN Repo.
Finished Creating SVN Repo.
[root@server ~]#

Alter the Firefox.app/Contents/MacOS/searchplugins/google.xml simply so that all the URLs within the XML file point to www.google.co.uk!!

This has been driving me crazy and is so easy to fix!