Flex / AIR projects and source control

Sooner or later every Flex developer will have to either work on the same project with others or send their project to someone (for example as an email attachment or via an FTP server). This task can look deceptively simple, but in fact there are some challenges. For example, let’s say we have a Flex PHP project and when we created the project we entered this information:

New Flex Project - PHP type - Page 2 of the wizard

And suppose we wanted to be able to edit the server side scripts in the same project, so we have added a linked resource (this means we have a folder outside of the project root folder that is linked to the project so it appears to be under the project root folder and we are able to edit its files easily):

Adding a linked resource

If we have a look at these two screens we can see that the web root (c:\htdocs), root URL (http://localhost/) and the location of the PHP server files (c:\htdocs\some_php_files) are machine dependent. I mean these values make a lot of sense on my machine. But on your machine there is little chance they are the correct ones (for example, maybe you have a Mac and there is no way to use c:\htdocs as the path to web server root or maybe you have a port for localhost other then 80). Furthermore, these values are saved inside the project definition files. So if you want to commit the whole project to a SVN/CVS repository, the first user who doesn’t have exactly the same values on his machine will not be able to import the project and run it without changes. And if he changes the paths and submits the values then you will have the same problem. I think the same goes when exporting the project and sending it to someone.

So, is there any easy way to collaborate on Flex/AIR projects? I think there is, whether you are working on the same project with a team or packing and sharing a project (via email or some other means).

Eclipse variables and Flex Builder

Eclipse has a built-in mechanism for defining a variable that is the placeholder of the actual path; you can use this variable in the project description files instead of the real path. When you move the project to another computer you need to define the values for these Eclipse variables and then the project will work like a charm. The entry point for defining a new Eclipse variable or to edit an existing one is Window > Preferences … > General > Workspace > Linked resources:

Preferences entry for Eclipse variables Define a new variable

Some people call these variables Eclipse variables, others call them path variables. There are some limitations, you cannot define a variable for the last part of a path. For example, if you have this path “c:\mydir\webserver\” you cannot define a variable for the “\webserver\” part of the path; but you can for “c:\mydir\”.

So Eclipse has a mechanism that looks like it might help us, but what about Flex Builder? Flex Builder 3 has support for Eclipse variables. For example, instead of entering the path for your web server root when creating a Flex project you can use an Eclipse variable. Flex Builder 3 has an interesting wizard Import/Export Flex Project that can help a lot by identifying and defining for us the Eclipse variables needed for each type of Flex project.

Import/Export Flex Project wizard

I think the easiest way to transform your Flex project in order to use Eclipse variables where it matters is to use the Import/Export Flex Project wizard:

  1. Create your Flex project (for this article I will use a Flex PHP project)
  2. Export the project: Export…> Flex Builder > Flex Project Archive;
    Export Flex Project Archive Flex Project Export Wizard
  3. Delete the project from Flex Builder (with sources)
  4. Import the exported project: Import…> Flex Builder > Flex Project
    Import Flex Project Import Flex Project Wizard - first page

So why all these steps? Well, Flex Builder automatically replaces some paths with Eclipse variables when exporting a project using Flex Builder Export wizard; and automatically creates the Eclipse variables when importing a Flex Project archive with Import Flex Project wizard. Here you can see the second page of the Import Flex Project wizard, which detects the Eclipse variables defined in the project by the export wizard and lets you set the correct value:

Import Flex Project wizard - page 2

If you go to Window > Preferences > General > Workspace > Linked Resources you will see that PHP_FLEX_SERVER_ROOT is defined here. Also if you right click on the project name and choose “Properties” and then you look for Flex Build Path and Flex Server you will see that the variable is used:

Flex Build Path properties page Flex Server properties page

Furthermore, you can use this variable directly when you create the Flex Project:

Flex Project Wizard second page

Now we have a project that can be easily imported (though if you are using a SVN/CVS it is probably a good idea to create a readme.txt file that explains what Eclipse variables you need to define in the Eclipse environment in order for it to work for those who never imported the same type of project with Flex Import Wizard).

Sending a project

But what if you want to send to someone the project by email? Remember you can have a project that has some linked resources (folders that appear under the project root in Eclipse but in fact are outside of the project). Again you should use the Export Flex Project wizard as this wizard will copy each linked resources inside of the archive. You need to add an instruction file that helps the one who imports the project to take care of the copied linked resources. In my example I have added the c:\htdocs\some_php_files folder as a linked resource; this needs to be in the web server root, so I have to add this info so the person who imports the project knows where to put the folder.

I think with these tricks you can take care of most of the glitches you may find when sharing/working on the same project, if not all.

6 thoughts on “Flex / AIR projects and source control

  1. Pingback: A » Blog Archive » Flex / AIR projects and source control

  2. Pingback: SQLAssembler: create a Flex and Java application with LCDS (LiveCycle Data Services) without server side code : Mihai CORLAN

  3. OK, I am really frustrated with trying to import a flex project into Zend Studio 6.1. Don’t know rather to curse Zend or Eclipse though.

    Trying to import project and I can’t use a location for the workspace of my choice. Have to leave default checked. When I get to the next step I cant proceed because I can’t satisfy what it wants for the two variables it wants me to provide – since the import hasn’t happened the folder doesn’t exist. Are you supposed to create a target folder before starting the import process?

    Very annoyed. Will try again later from home. If I have any success I’ll follow up.

    Otherwise I am downgrading to standalone Zend Studio 5 (which actually works well) and forgoing any Flex development.

  4. @Tom Godar

    Did you use Flex Builder Import Wizard and got those issues?

    Anyway sorry to hear that. It worked for me every single time…

  5. Messing with it last night I got a little bit further. Your screen shots were helpful but don’t line up exactly with my 3.4 version of the Zendified eclipse.

    Got it imported but with errors. Was having some path problems with some resources looking for stuff on ‘C:\Documents and Settings\mcorian’.

    Going to spend more time on it over the weekend. Maybe I will write up something outlining what worked for me on OS X with the versions I am using.

    The simplest things like changing the default workspace have been way too complicated.

    Thanks for having written this post and following up!

Leave a Reply