When you put a readme file into a folder that file is formatted and presented nicely through GitHub’s file browser. For example:

https://github.com/visionmedia/uikit

Scrolling down a little we can see a nicely formatted readme file.

GitHub strongly recommends adding a readme file to the root of your repository, but what I didn’t realise until recently was that it works for any folder in your repo. GitHub already has the best online file browser out there, but this specific feature can turn your source tree into your documentation.

For Robotlegs 2 I decided to try it out:

Async
MessageDispatcher
Extensions

Almost every package in the entire repo has a readme file. The best way to learn about Robotlegs 2 is to browse the source and readme files on GitHub.

If you want to try it out, you can download this zip-ball:

git-prompt.zip

Unpack that into your User folder, and add this to your bash .profile:

# Git Prompt - Modified from: http://volnitsky.com/project/git-prompt/
[[ $- == *i* ]] && . ~/git-prompt/git-prompt.sh

Tip: You can open your .profile from your terminal like so:

open ~/.profile

Note: You will need to start a new shell session after editing that file in order to see the changes.

I use Nano as my default bash text editor. If you want that, add this to your .profile:

# Use the nano text editor
export EDITOR="nano"

And for the Terminal.app style:

Power-User-Pro.terminal.zip

The shell commands (copy-paste):

mkdir Test
cd Test/
git init
touch somefile
git add somefile
git commit -m "commit message"
echo "hi" > somefile
git add somefile
git commit -m "second commit"
git checkout -b temp
echo "hello" > somefile
git add .
git commit -m "3rd commit"

• RobotLegs Image Gallery Demo
• RobotLegs and FlexUnit 4

I’ve also pushed out quite a couple of framework updates (currently at v0.6):

• Mediator onRegisterComplete hook -> onRegister (for those coming from PureMVC)
• Spring ActionScript adapters (as an alternative to SmartyPants-IOC)
• Namespace changed to org.robotlegs.*
• Logging now uses as3commons-logging

That last change means that RobotLegs is now dependent on the AS3 Commons logging library. It also means that RobotLegs logging is now standard, and can be easily configured or turned off. Try it out with the PowerFlasher SOS Max tool.

Module Demo

I’ve started putting together another Flex example, called the Acme Widget Factory, which can be found here:

RobotLegs Demos on GitHub

The demo is a little convoluted, but exists to illustrate a couple of things:

• Working with Flex Modules
• Communicating between Contexts via Interfaces and Events
• An alternative to Named Proxies

The demo only works with the Spring ActionScript adapters for now – due to what I believe to be a bug in SmartyPants (but I haven’t had time to build isolated tests to prove this).

The Module side of things needs a little more thought, but I think it is fairly clean and usable for the time being.

Review

As Joel mentions in one of his posts, RobotLegs hasn’t had much peer review. This is very true, and needs to be remedied (besides, I’m DYING for some technical feedback!). I have some theories as to why this is:

1. Some developers really dislike PureMVC (probably for many of the same reasons that I started RobotLegs in the first place) and so have disregarded RobotLegs because it can be viewed as a rebuild of PureMVC.
2. Many Flex developers who work on large enterprise applications seem to dislike the idea of using 3rd party Architectural Frameworks, preferring to hand-roll their own solutions on a per-project basis.
3. Dependency Injection sounds complicated to developers who are new to the pattern.
4. Many intermediate Flash developers have only just started getting into PureMVC. It will take some time for them to fully understand it’s strengths and weaknesses.
5. Experienced developers, on the other hand, are probably bored of the whole “Architectural Framework” trip, and are tired of trying out new frameworks. By now they’ve picked their favorite, learned how to be really productive with it, and have built code-generators and other such tools to work around the bad/boring parts of their chosen framework.
6. Setter injection turns some people off.. which it shouldn’t.
7. I’m not very “connected” in the developer circles. RobotLegs is my first Open Source project, and is the first time I’ve really put myself “out there”. I don’t have a very impressive online portfolio – the portfolio pieces on my blog are mostly just the small things (often built for friends) that I’m allowed to list publicly.

If you are an experienced Flash/Flex developer, and can bring yourself to review yet another framework, I would love to get some technical feedback on RobotLegs as a framework. Harsh criticism welcome.

And remember, RobotLegs is on GitHub – if you like some of it, but want to change other bits, all you have to do is click that little “fork” button and go crazy. Git For The Win!

First thought: version 2 is exactly what I’ve been trying to build with RobotLegs.

I’ve only briefly skimmed through the manual, but it really looks promising. I have some initial concerns (the use of Static methods for example; see: http://misko.hevery.com/2008/12/15/static-methods-are-death-to-testability/), but need more time to play around properly.

The forum pointed me to these two handy example projects:

http://www.sitronnier.com/blog/parsley-2-basic-flex-example
http://www.sitronnier.com/blog/parsley-2-basic-flash-example

Find them on the forum here:

http://www.spicefactory.org/forum/viewtopic.php?t=247

All the Spice:

http://www.spicefactory.org/

I’ve been meaning to do this for a while, but only got the chance to sit down and give it a bash this morning. It was pretty rushed, so I’ll probably redo these when I get a chance.

NOTE: If you don’t know PureMVC you should watch these first: PureMVC.TV

Update: The vids were pretty crap, so I removed them. Besides, they’re a bit dated now anyway (the framework’s API has tightened up quite a bit since this post). Have a look:

http://wiki.github.com/robotlegs/robotlegs-framework

I’ve recently switched from using SVN to using Git as my source control management tool of choice. It took a little while to get to grips with, but it rocks!

Git is not an evolution of SVN. It is entirely different. Git is a distributed revision control system – everybody working on a project has their own full copy of the repository and its entire history.

Git does not require the presence of a network connection: most commands in Git operate locally, allowing you to review your project history, make branches and tags, merge changes, but most importantly, allowing you to commit while offline.

If you’ve used SVN you’ve probably noticed the littering of .svn folders across your entire project tree, requiring the need for an export tool to retrieve clean copies of your code, and introducing problems when you delete, rename or move files or folders in your project. Git takes a slightly more sensible approach: it creates one folder (named .git) in the root folder of your project.

Git Concepts

With Git there are 3 important things to be aware of: the Git object database, the “index”, and your working area.

The Git object database contains a bunch of stuff that you typically don’t need to worry about. Essentially it’s the repository.

Your working area is the collection of files currently sitting in your project folder. You should treat these files as if they are temporary – because they are! Things you want to keep should be committed to the repository.

The Index is sometimes referred to as the Staging Area. It’s a list of what will get stored on your next commit. Conceptually it sits between your working files and the Git object database. Files that haven’t been staged to the index will be ignored when doing a commit. This gives you great control over what gets committed when.

A branch is a cheap copy of a particular state of the Git object database. Branches are easy to create and switch between, giving you a safe way to try out ideas quickly and easily. Switching to another branch updates your working area to reflect the state of that branch – this is why you should consider your working area temporary.

Installing Git on Mac OS X

Grab and install the latest OS-X Installer from:

http://code.google.com/p/git-osx-installer/

Configuring Git

You need to tell Git who you are – it uses this information for your commits etc.

Fire up your terminal, and type:

git config --global user.name "Your Name"
git config --global user.email your@email.com

Using Git

Once Git is installed on your system, creating a Git repository is easy: open your terminal, cd into the root folder of your project, and type: git init

That’s pretty much it!

After initialising your Git repository, it will most likely be empty. In order to commit files to the repository you first need to “stage” them by adding them to the index. To add all the files in your current project to the index type:

git add .

To commit these files type:

git commit -m "your commit message"

To view the status of your repository type:

git status

To Summarise

[Download and install Git]
[cd into the root of your project]

git init
ls -la
git status
git add .
git status
git commit -m "a useful commit message"
git status

[change some files in your working area]

git status
git diff
git commit -a -m "commit message. -a adds all files from your working area to the index"
git status

[delete some files from your local working area]

git status
git add -u
git commit -m "commit message. -u adds deleted files to the index"
git status

Ignoring Files

You will probably want to ensure than certain files don’t ever get committed to the repo:

http://www.kernel.org/pub/software/scm/git/docs/gitignore.html

Extra Configuration

You can enabled colorful output:

git config --global color.diff auto
git config --global color.status auto
git config --global color.branch auto

Some Bundled Visual Tools

gitk
git gui

Git Screencasts

http://gitcasts.com/

Installing Git on Windows

http://gitcasts.com/posts/git-on-windows

Some Other Git Links

• http://git-scm.com/
• http://www.eecs.harvard.edu/~cduan/technical/git/
• http://git.or.cz/index.html
• http://git.or.cz/course/svn.html
• http://git.or.cz/gitwiki/GitFaq
• http://learn.github.com/
• http://code.google.com/p/git-osx-installer/
• http://www.kernel.org/pub/software/scm/git/docs/user-manual.html
• http://tomayko.com/writings/the-thing-about-git
• http://video.google.com/videoplay?docid=-3999952944619245780

Eclipse Integration

Point your eclipse update manager to: http://www.jgit.org/update-site

More info: http://www.jgit.org/

Some Commands

Add all working files to the index:

git add .

Add deleted files to the index:

git add -u

Create and switch to a new branch:

git checkout -b newbranchname

Review last commit:

git show
git show --stat
git show --name -status
git show HEAD

Review commit history:

git log
git log tag..branch
git log -10
git log --since="May 1" --until="June 1"
git log --author=fred
git log -- some/file

Creating branches:

git branch name
git branch name commit

Switching branches:

git checkout name
git checkout -f name

Firstly, FlashDevelop 3 only runs on Windows XP/Vista, and requires the .NET 2 runtime. Additionally, to compile AS3 code you will need the Java 1.6 runtime and the Adobe Flex SDK. Ok, let’s go!

Part 1 – Downloading, Installing, and Compiling a SWF

Let’s begin by setting things up and compiling our first SWF.

1. Download the Adobe Flex SDK (just the Flex 3 SDK, not Flex Builder), and unpack it somewhere easy to find (C:FlexSDKFlex3).
2. Download the latest version of FlashDevelop, install it and run it.
3. Create a New Project, under ActionScript 3 choose Default Project, and give it a name (“hello”).
4. In the Project Panel expand the “src” folder and open up “Main.as”
5. In the constructor add the code: trace(“hello world!”);
6. Hit Ctrl-Enter (or F5). A dialog should pop up asking if you’d like to open the AS3 context settings. Click “OK”.
7. In the “Flex SDK Location” input field enter the path from step 1 (or browse to it).
8. Hit Ctrl-Enter again. This should compile your code into a SWF and launch it in a tab. The Flex 3 compiler does incremental compiling, so the first compile might take a while, but subsequent compiles should be much faster.
9. Make a “whooping” noise! “hello world!” should be displayed in the Output panel. You’ll find the SWF sitting in the “bin” folder. Notice that the project panel let’s you look into the guts of your SWF.. pretty damn sweet!

Part 2 – Some Adjustments

By default, FlashDevelop launches SWFs in it’s own version of the Flash Player. At the time of this writing, the player doesn’t perform quite as well as the official debug version of the Adobe Flash Player (besides, we want all the goodness of the very latest Flash Player!). Also, I find the tabbed view weird. So let’s change our setup a bit.

1. Head on over to Adobe downloads, “Download the Windows Flash Player 9 Projector content debugger” and put it somewhere easy to find (C:FlexSDKFlashPlayer)
2. Back in FlashDevelop, go to the main menu, click “Tools” and select “Program Settings” (or hit F10)
3. In the left panel, under “Plugins” select FlashViewer, and point the “External Play Path” to the debug player executable from step 1.
4. While you’re there, change the “Movie Display Style” to “External”. Click “Close”.
5. At the top of the Project Panel click the “Project Properties” button (third from the left).
6. Under “Test Movie” change the selection to “Play in external player”, and click “OK”.
7. Hit Ctrl-Enter. Make the universal “Whazzamm” sound!

Part 3 – Attaching Assets to the Stage

Perhaps “hello world!” is not that thrilling for you. Fine.

1. Create a folder called “lib” inside your project folder (alongside “bin” and “src”).
2. Fire up Adobe Flash CS3 and create a new Flash File (Action Script 3.0).
3. Save it inside the “lib” folder from step 1 and call it “assets.fla”.
4. In the Flash IDE grab the Oval tool and draw a circle.
5. Select the circle and convert it to a symbol by hitting F8 (or right-click and select “Convert to Symbol…”).
6. Give it the name “Circle” and expand the Linkage panel by clicking “Advanced”.
7. Under “Linkage” tick “Export for ActionScript” and click “OK”.
8. Open up your Publish Settings (Ctrl-Shift-F12), deselect “HTML”, and flip to the “Flash” tab
9. Tick “Export SWC”, click “Publish” and click “OK”.
10. Save the file and close the Flash IDE.
11. Flip back to FlashDevelop, and expand the “lib” folder in the Project Panel.
12. Right-click “assets.swc” and select “Add To Library”.
13. Replace our “trace” statement with the following code:
    var circle:Circle = new Circle();
    addChild( circle );
14. Hit Ctrl-Enter. Loudly exclaim “Golly, this is the biznis!”.

Part 4 – Extending Assets, Adding Interactivity

Perhaps a plain old circle on the stage doesn’t really do it for you. You want some motion. You want some interactivity. Some filters. Fine then. Let’s do it..

1. In the Project Panel, right click the “src” folder, select “New” “Class”, name it “ReactiveCircle” and click “OK”.
2. Head to the end of the line “public class ReactiveCircle”, type “extends”, hit Space and select “Circle”.
3. In the constructor type “filters = [new DropShadowFilter()];”
4. On the next line type “addEventListener(” and press Ctrl-Alt-Space (this enables autocompletion for all available classes, not just the imported ones). Start typing “MouseEvent” but hit Enter as soon as you see it selected. Complete the statement with “.CLICK, onClick);”
5. Move your cursor back onto the word “onClick”, press Ctrl-Shift-1 and hit Enter.
6. Inside the generated event handler add the code: x += 10;
7. Flip back to the Main class and change:
   var circle:Circle = new Circle();
   to
   var circle:ReactiveCircle = new ReactiveCircle();
8. Hit Ctrl-Enter. Click the circle. Shout “Kapoww!”

Ok, it’s not a fully fledged RIA, but it should be enough to get you started.

Happy Flashing!

FlashDevelop hello project