When I first started using frameworks, PureMVC and Caingorm my working processes was to spend a chunk of time setting up the environment, creating the basic framework files, often these were copied from a previous project and renamed, I toyed with the idea of creating a startup project but this also involved copying and renaming files to get started, not an ideal situation.

Over time I found several projects that would create all the startup files you need to use one of these frameworks but they never seemed quite right for me.

This is where ANT comes in, not only is it a great tool for deploying projects but after installing it in Flash Builder (it comes pre installed if you’ve installed Flash Builder on top of Eclipse) you have pretty much all the tools you need to build your own tool to quickly start a project.

That’s the point of this post so here’s how I created mine, it’s tailored to my working practices and I can quickly amend it or explain it to the others on my team. I’ve recently created a tool to build robot legs projects, unfortunately as I did it for my current employer I’m not really allowed to share it so this won’t target a specific framework but should give you the basics to create your own.

If you’ve got ant installed you’re good to go, if not have a look here.

First things first create a new Flex project, in the root of that project create a folder called builderTool, this is where we’ll be working. While your at it create a folder in there called templates.

The “templates” folder will contain template files, which will be .as or .mxml files with placeholder tags.

Now we need to create two text files in your builderTool folder, one called build.properties this file will be where we will store properties specific to the tool the other called build.xml this will contain the commands used in the tool.

The Properties File

Open up the build.properties file, we need to define some basic properties for the tool:

• base folder location, this is the root of your flex project
• source folder location, the source folder in your flex project
• the template folder location, the template folder we created earlier

as well as this we need some project specific properties, these are the ones you’ll need to change each time you start up a new project. These are:

• project name
• project path
• project namespace
• your name
• your company
• your email
• the year

and lastly the folder names for the framework your using

• Default folders for model, view and controller files

these are just name value pairs in a text file, you can copy the ones below and edit them

#####################################################################
#
#  CORE Properties
#
#####################################################################

BASE_DIR						=../
SRC_DIR							=${BASE_DIR}src/
TEMPLATES_DIR				=templates

#####################################################################
#
#  PROJECT Properties
#
#####################################################################

# package such as: com.siteName.project
PROJECT_PACKAGE			= com.site.project
# project path such as: com/siteName/project
PROJECT_PATH				= ${SRC_DIR}com/siteName/project/

AUTHOR_NAME					=Your Name
AUTHOR_EMAIL				=your@email.com
COMPANY_NAME				=Your Company Name
PROJECT_NAME				=The Name of the project
YEAR								=2010

#####################################################################
#
#  FRAMEWORK DIRECTORIES
#
#####################################################################

CONTROL_DIR				= ${PROJECT_PATH}control/
CONTROL_PACKAGE		= ${PROJECT_PACKAGE}.control
MODEL_DIR					= ${PROJECT_PATH}model/
MODEL_PACKAGE			= ${PROJECT_PACKAGE}.model
VIEW_DIR					= ${PROJECT_PATH}view/
VIEW_PACKAGE			= ${PROJECT_PACKAGE}.view

you’ll notice that some of the properties in the file require previous properties before they can be defined, also that in order to reference a defined property you need to put it between ${}.

With that done we can get on with creating some commands for the tool.

The Build File

Open up the build.xml file, we need to create a project which will be the root node of the file and import the properties we created in the last step.

Now is as good a time as any to open the ant view.

Select Window, Other views…

In the views popup window, open the ant folder and select ant.

we’ll add some functions to the build file but first drag it from the package explorer to the ant view.

You should see something like this

<?xml version="1.0" ?>
<project name="Demo Ant Project">
	<property file="build.properties" />
</project>

First Function

A good first function to create would be to create all the default folders for your framework.

Before we do that a brief explanation of how ant works is in order. Ant uses a node called target to contain a series of tasks. These tasks are each defined by a node with various attributes and child nodes.
We’ll create a target called create folders which will create the framework folders defined in the properties file.

<target name="Create Folders">
	<echo>Start Making Folders</echo>
	<mkdir dir="${CONTROL_DIR}" />
	<mkdir dir="${MODEL_DIR}" />
	<mkdir dir="${VIEW_DIR}" />
	<echo>Done Making Folders</echo>
</target>

The name attribute is the title of the function which will show in the ant view
We’ve used two types of tags used in this function:

• echo, which displays some feedback in the console view
• mkdir which you’ll recognise if ever used a terminal interface or various other programming languages http://en.wikipedia.org/wiki/Mkdir, it creates the directory specified by it’s dir attribute.

After adding this to your build file and saving you should notice a function appear in your ant view, double click on that and ant will create those folders in your source folder, you may need to refresh that folder to see them.

More Complication

Thats a good start but now we need to create some files to go in the folders, I’m going to create a basic model file and populate it with the properties from the properties file we created.

To do this we will need to create a template as file, what you’ll learn here can also be used to create mxml files for views or pretty much any other type of text file you could want.

Create a new file in the templates folder and name it model.as. Open the file and add the following text

package @package@
{
	import your.framework.AbstractModel;

	/**
	 *
	 * <p>What does @class.name@ do?</p>
	 *
	 * Copyright (c) @year@ @company.name@, All Rights Reserved
	 * @author   @author.name@
	 * @contact  @author.email@
	 * @project  @project.name@
	 *
	 */
	public class @class.name@ extends AbstractModel
	{
		public function @class.name@()
			{
				super();
				trace("I am a new @class.name@");
			}
	}
}

This is a non specific model file, doesn’t do anything but you should be able to see how it could be filled with all sorts of fancy framework specific stuff.

Notice the tags between @ symbols, those will be replaced when we copy this file using a command, lets get on and write that command now.

<target name="Create a model">
	<description>This Creates a new Model</description>
	<input message="Enter model Name:" addproperty="gesture" />
	<copy file="${TEMPLATES_DIR}/Model.as" tofile="${MODEL_DIR}${gesture}Model.as">
		<filterchain>
			<replacetokens>
				<token key="author.name" value="${AUTHOR_NAME}" />
				<token key="author.email" value="${AUTHOR_EMAIL}" />
				<token key="company.name" value="${COMPANY_NAME}" />
				<token key="project.name" value="${PROJECT_NAME}" />
				<token key="package" value="${MODEL_PACKAGE}" />
				<token key="year" value="${YEAR}" />
				<token key="class.name" value="${gesture}Model" />
			</replacetokens>
		</filterchain>
	</copy>
	<echo>${MODEL_DIR}${gesture}Model.as created</echo>
</target>

This one’s a little more complicated, what we are doing is asking what would you like your model to be called, we do this by using a input tag, this defines a property called gesture which we use to name the file copied to the model folder.

The filterchain defines filters that will be used on the file we want to replace some text in side the file so we use replacetokens and define those tokens using a series of key/value pairs.

If you double click on that command in your ant view you should see get a popup window, type the name of your Model Class in there ant it will be created in you model folder.

I hope that all made sense, there’s more you can do with this but for now I’ll stick a copy of the project we’ve been working on here Ant demo files.

Demo

Been thinking about this for ages so will hopefully get some time to work on finishing this soonish.

Uses CodeIgniter and JSON for managing the server interaction.

Demo