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.

http://www.thehistorytrail.co.uk/

Built using the PHP framework Codeigniter for the back end, the CSS was coded using SASS and Compass. And theres a few little bits of Jquery in there.

It’s not 100% yet, theres a few style things that need sorting, we’re working on the content at the moment and what we really want to do with it. But it’s been an interesting little project that we hope will grow over the coming months.

I first came across this bass back in November 2000 I opened Guitarist Magazine and there it was, I immediately fell in love with this weird looking bass it had a style like nothing else on the market but I’d just finished uni and was skint; so even if I could have found one I wouldn’t have been able to afford it

At that time when I walked into music shops there seemed to be two kinds of basses, traditional Jazz/Precision style basses (so many clones!) or sleek modern styled basses like the one owned at the time; a lovely looking green Yamaha RBX 760. There didn’t seem to be any risk takers building basses during the late 90′s or if there were no one was stocking them. Although there are quite a few out there now I’d quite like, if only I could justify it to my girlfriend!

I love the design, it’s a contradiction of styles that just works for me. Although you could say it’s based on a traditional Jazz bass the design differs in many ways. It’s fun without looking cheesy, it has a design heritage dating back to the 60′s but it still looks fresh.

The body is a weird reverse cutout that’s been elongated, it looks sleek; slightly like a reverse Rickenbacker 4003 but with a little less class. The balance isn’t great but you can forgive that because it looks amazing.

The angled ergonomic headstock shape dates back to the 1960′s and the original SG line of guitars it gained the range the name “Samurai”; I love the simplicity of the design.

Nothing on this bass is complicated, the electronics are passive, the pickups are nice and punchy, within seconds you can dial in the tone you’re looking for.

Eventually the model was discontinued but I managed to pick one up on ebay, its blue and it became my favorite bass to play.

Body: Solid alder
Neck: Maple, with rosewood fingerboard
Scale: 34″
Nut Width: 1.57″
Frets: 20
Electronics: 2 special-design Yamaha single-coils, Individual volume controls, Master tone

A few years later I managed to get hold of a SBV550 in red which has a Precision style pickup while retaining the Jazz pickup at the bridge, the tone is noticeably different to the standard SBV500 you can get that nice Precision bass thump with the bonus of getting back some of the Jazz bass tone if you want it.

This bass was never to my knowledge available in the UK.

The only time I’ve ever seen one of these on stage Fumi from Polysics was playing a 550.

I’ve found a little bit of the history in the Yamaha Guitar Database.

SB-1C

Release November 1968 until around 1971

SB-2

Release April 1966 until around 1967

SB-2A

Release November 1967 until around 1971

SB-5A

Release November 1967 until around 1971 sales

SB-7A

Release November 1967 until around 1971

I love the design of these things and the sound is just what I’m looking for.

http://www.harmony-central.com/Reviews/Yamaha_SBV/

http://www.thiscausticlife.co.uk/

OK, so it’s not perfect, I’m no designer but it’s amazing how quickly you can get something working using these technologies. One of the real beautys of Sass is that the source files are so readable, so although created quickly it doesn’t feel hacked together, this means it’s easy to revisit the code and add to it later.

One of the most confusing aspects of these technologies is that they all call themselves frameworks!?

Sass is in itself almost a new language, based on CSS and Haml, it takes care of all the annoying aspects of CSS, readability, nesting rules, and most important of all variables.

You can now have variables in your CSS code, no more defining things throughout your style sheets and the headaches that result when these change. You simply define some constants at the top of the page for any reusable values. But thats not all, you can define functions as well! In Sass they are called ‘Mixins’, calling a Mixin returns a predefined chuck of code.

You create a Sass file and then compile it to CSS using ruby via the command prompt.

Well if you want to do things the hard way you do, this is where Compass comes in. Compass is another framework, that makes writing CSS even simpler, it comes with a lot of extra functionality onto of that already provided by Sass. As well as a lot of predefined CSS code to include in projects (such as a Sass version of the Blueprint CSS framework) it has ruby commands to make the process of working with Sass simpler.

I’ve been using Blueprint for some time, the ruby scripts that come with Blueprint are great but nothing compared to using Sass and Compass.

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