Taking care of your Playbook source code

Professionally, it is very common work on software development using some sort of source control system to keep our precious work safe, and to help us keep track of the changes we do.

Now, when we do software development at home, as a hobby or as a side project, we tend to neglect this basic procedure, sometimes just relying on backups, Dropbox, or even worse, our lucky to keep our work safe after burning the midnight oil.

The problem with source control at home is that, although it is very easy to set up them on your computer, and keep track of changes, it is not as easy as it seems to rely on that to keep it safer on another computer.

The Server

To help with that, I did a research (again, just some googling) and I found several hosting services with source control available. The first one which always comes to mind is Sourceforge, but to be able to use it and several good others, your project must follow some sort of open source license. I’m not against those options whatsoever, but our focus here is to find a place that can keep our intellectual propriety safe, so I have to find some service that allow any kind of project.

I could find dozens of hosting providers that offer SVN (or other system) for free. Also, there are other fellow bloggers that did part of the job for me, such as this excellent post, which lists some, paid and free doing some analysis for each.

Did you tell you before? Hm, I don’t think so. Two of the most important features that I was looking are price and reliability, where price meaning free, and reliability means 99.9% of uptime. Am I asking too much?

At the end, I’ve chosen Assembla, which offers several paid plans, and one simple free plan. The free plan offers SVN or Git, but nothing else. For a sole developer like me the SVN one was perfect: 200 MB is actually a lot for source code, considering I don’t have a lot of graphics, sounds, etc… Another advantage of this system is that if you need more power, team management, wiki and ticket management you can easily start a paid plan. Well, I don’t receive commission from them, so you’re free to try out and decide by yourself.

I’m not going through the SVN itself. I’ll assume you know enough about creating a repository, the basic commands, etc… If not, a quick google for “svn tutorial” will give you enough homework to get started.

(…scene fade out, reader learn everything about svn, configure his Assembla account, read its tutorials, scene fade in…)

Now that you know everything about SVN, we’re ready to add our FlashBuilder Playbook project to the system, and learn the basics to keep it safe and well maintained.

The Tool

As you probably know already, FB is built over Eclipse as  a plugin. As a plugin son (daughter?), Flash Builder also inherits all Eclipse plugins available. One of those plugins is the Subclipse, which adds a feature rich SVN extension, allowing you to manage your source code, check for differences, commit code, and so on. You can read more about it here.

Subclipse has one requirement that must be installed before the plugin itself: JavaHL. The same website has a wiki page explaining all about it. Since I’m using Mac OSX, I downloaded  the package provided on openCollabNet, which worked perfectly without any additional step. That wiki page explains the installation steps for Windows and Linux as well.

After having JavaHL properly installed, it is time to install the SVN plugin. For that, we can use the FB (aka Eclipse) Install New Software option (Help->Install New Software), adding a new URL source: http://subclipse.tigris.org/update_1.6.x:

Even on other platforms, you should be able to see the same window. The next steps are select the three options (Core SVNKit Library, etc…), then Next and after accepting the legal stuff, click Finish. At this point, Eclipse will start downloading and install the plugin. At the end, it will be asked to restart Eclipse/FB to get everything done.

After FB is running again, we can browse our svn repository (at Assembla here). The best way to start is to enable a new Perspective. To do so, go to Windows -> Open Perspective -> Other…. This will display a window presenting a list of different perspective types. Select the SVN Repository Explorer and click OK. After that, I’ll be able to open the SVN Perspective using the icon at the top right of the IDE, as shown below:

For this article, I’m assuming you don’t have anything in your remote repository, so it would show only the SVN repository URL on the left side of FB window, where normally you see your project structure. Something like https://svn.assembla.com/svn/your_user. To keep everything organized, I’ll also create a new directory on the svn server. To do so, select the URL, right-click on it and select New -> New Remote Folder. Let’s call it playbook-projects. You can insert a comment if you like.

Preparing to add your Project to SVN

As example for this post, I have a project called MyFreePlaybookTicket that is already in my FB project window. So now, still with the SVN perspective visible you will see playbook-projects under the URL. Under it, repeat the process of creating a remote folder for your actual project name. Let’s call it MyFreePlaybookTicket. After that, select the Flash Perspective again, to see your projects on the FB Package Explorer.

SVN Import feature assumes that you’ll provide a external directory containing all your files to be imported into the server. The fact that my project is already loaded in the FB IDE doesn’t really matter here, I’ll have to use its directory path to perform the import anyway.

With your project already loaded, you probably know that FB/Eclipse builds the project automatically by default, so you’ll have few other files around, like temporary files, binaries, etc… Those files, that are created during the Build process, don’t have to be sent to the SVN since they use a lot of spaces and are always recreated anyway. To cleanup your project, de-select the menu option Project -> Build Automatically, then open the option Project -> Clean, which will display the following dialog:

Remember to un-check the Start a build immediately, at the bottom of the window otherwise all the files will be recreated after the clean up process.

Importing your Project into SVN

Open the SVN Perspective again (again? yes, again…), and select your MyFreePlaybookTicket folder. Right-click it and select the option Import. Although the whole SVN is integrated into FB, when you import a project, you have to do so pointing to the actual directory where your project is. On Mac, this would be usually at /Users//Documents/Adobe Flash Builder Burrito Preview. On the Import Dialog, select the Browse button and select the MyFreePlaybookTicket there. Make sure the Recurse through subdirectories is selected, then click OK. During the import procedure you might be asked about your SVN server password.

Excellent! Your project is already on the SVN Server! Now, let’s work with it!

Working with the SVN Repository

Open the Flash Perspective again and… wait! What you see on the Package Explorer is not your SVN stuff yet, but your old project from the local directory. Since I think you’d like to keep using MyFreePlaybookTicket, you should first rename the current project to, let’s say, to MyFreePlaybookTicket-backup (Actually the project is safe on the server, but don’t delete your local copy yet!).

After that, we’re ready to import the SVN project. To do so, select File -> New -> Other… You’ll see a list of Wizards, and among them the SVN -> Checkout Projects from SVN. Select it and click Next, which will display the SVN server selector. Select your SVN server address (e.g. http://svn.assembla.com/svn/you_user) and click Next again. The last dialog is like the following:

After clicking on Finish, you will start checking out your project into FB. When it’s done, you’ll see the original MyFreePlaybookTicket-backup, and a new MyFreePlaybookTicket.

You’ll notice that the new copy has an additional information besides the project name, which is the repository path of your project. After expanding the Project tree, you’ll see something like this:

The integer number besides each file is its revision number, and also its date. Right-clicking over the file you can access SVN functions using Team or Compare menu options. From the Team one, you can commit your changes to the server, check revision history, create a patch, etc… The Compare allows you to compare the working copy to one on the server, so you can track the changes.

Last Considerations

I didn’t cover adding external assets to the SVN server, but nothing prevents you from doing that. Even if they are not seen on the Package Explorer, you still can manage them using the SVN Repository Perspective. It is really important understand SVN to fully use this neat plugin feature that FlashBuilder inherited from the Eclipse IDE.

Make sure you have all your project files saved before deleting anything. Don’t blame me if you mess it up!

In addition, if you think I made a mistake or have additional suggestions, please contact me!




























  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: