Gaia and Robotlegs together

Gaia and Robotlegs together

I have been doing a fair bit of adventuring in unchartered territory these last couple of months and the main things I have learnt is the concept of using programming frameworks.  I was recommended this combination by a wise person at the beginning of a project a project a few months ago .

About Gaia

Gaia is a fantastic front end framework made by Steven Sacks and has been around quiet some time.  It takes care of all the monotonous things at the start of the project and manages your assets. You simply write a XML for the basic layout of your site, and GAIA Does this for you;

  • Creates a new FlashDevelop Project
  • Creates all FLA (Index,Main,Nav,Preloader etc)
  • A FLA for each page with document Class
  • Some placeholder Page Animations
  • SWFAddress for Routing/Deeplinking
  • Placeholder navigation
  • SEO (yes it works)
  • Asset managment

All in one click, it’s a fantastic tool that I’d recommend, it does however has it’s limitation and uses so it’s not for every project.

After the initial Gaia scaffolding of the, you access Gaia using it’s very well documented API to handle global navigation and the state off the site (e.g. which page you are on ), after that though, you are on your own (which is great!) , Gaia keeps out of your way so you can do whatever you like, it  tries to be non-obstructive and doesn’t tie you down like some other front end frames works I’ve tried to use.

About Robotlegs

I wrote a blog entry on Robotlegs a few weeks ago, I’ve learnt a large amount since then but it’s still relevant to now. I’ll take a quote from there

“Robotlegs is a Framework based upon the MVC (Model View Controller) design pattern, MVC is a universal software architecture pattern that is used within many object oriented programming languages.  The Model is your program state, keeping your program variables and overall keeping the data for your program state. The View is everything that the user users, anything from a Movieclip, to a button to a sound.  And the controller is the medium that connects the view to the model.  There’s a ton of information about the MVC model if you want to know more about it.  What Robotlegs tries to do is help you program your application together, there’s no strict hard rules but more so a blueprint to get you started.”

Full article here

Why use them together?

If you have two fantastic AS3 frameworks than why use them both at the same time?  Do some of their roles double up on each other? I would say yes, but there is definitely solid roles both can play in making a application where both can work in harmony, there is definitely grey area between the two frameworks and how you develop is up the actual developer (at it should be!)

Using both frameworks you can separates all front end visual tasks from your application. In a common scenario a Flash Designer will create all the pages/sections/assets of the website, Gaia itself has no knowledge of what Robotlegs is or is doing , as far as Gaia is concerned, it’s a self contained part of your flash website and is dispatching user interface events, this is pretty typical of what a VIEW does in a MCV type application.

How to use them together

So how do you use both of these technologies together? I won’t go into detail on how to use Robotlegs as there’s many resources out there to do that. Here is my approach on getting things wired together.

The typical setup is have your Context in Main, that way any Robotlegs and Gaia have a direct path to each other.

The next step is to have public functions in your Gaia pages that you would want Robotlegs to have access too, then create a Interface for your Gaia pages to make those functions visible.

Next step adding the Mediator in your Context

mediatorMap.mapView("com.roboGaia.pages.GaiaPage", GaiaPageMediator, IGaiaPage);

Notice I am not importing the Gaia Page class into my Context but a reference to it, this is so Robotlegs is not importing the whole class, just a reference to it. First variable is your Class path to your view, then your mediator , then your interface. Here is how it’s all communication is made between Gaia and Robotlegs.

What’s in the mediator and what’s in the View in this setup?

This is a infamous question that has popped up several times in my travels; where should the listeners for the UI sit, one option is this, the View listeners for its own UI, and sends UIEvent through the interface like so;

Another option is to have the UI listeners in the mediators and have the view be objects with no listeners as such;

I am a fan of the first approach as you don’t need anything to be on the mediators and it makes the mediators a bit lighter, there’s arguments for both approaches but it’s up for personal interpretation.

In Ending…

I hope you have found this entry interesting, this last couple of weeks on this project has taught me quite a bit and I hope someone out there finds some use it in. Feel free to contact me about anything I wrote about in email or twtter

3 Responses to “Gaia and Robotlegs together”

  1. Clint

    I think the argument for the first setup is more about keeping view logic in the view, and to an extent that extends to mouse interaction for buttons, and navigation through Gaia.

    RobotLegs is then only interested in events that matter to the model or services it manages. So your UIEvents will be quite descriptive such as UIEvent.CONNECT_SERVICE or UIEvent.SAVE_ENTRY.

    The other argument is that maintainance is made easier for newcomers to the code. When they are looking for mouseEvent handlers, they only have to look as far as the class that the UI component is contained in, and not forced to search through your project for the class that implements the MouseEvent.CLICK handler.

    They see that a custom UIEvent is dispatched suggesting that further logic is contained elsewhere (and will likely be in the similarly named mediator). The descriptive UIEvent will obviously help as well, as it will explain what action is being handled.

    Arguments against include an explosion of UIEvent names for larger applications (or more custom events). Perhaps a Signals/RL/Gaia solution would reduce this though?

  2. .jez

    We had a cheeky little workaround that may help other folks.
    We wanted various seperate robotlegs components in Gaia pages to respond to events from other pages (such as a show dialog event or trigger login) which are in different application domains. Our solution is to consume a few custom events and VOs in the (to get around a coercion error) then dispatch the custom events from wherever in the site using the sharedEvents model

    stage.loaderInfo.sharedEvents.dispatchEvent(new DialogEvent(DialogEvent.SHOW_DIALOG, new DialogVO(“There you go”, “Everything works just dandy!”)));

    the robotlegs component on another page can then just hook into this shared event bus with

    stage.loaderInfo.sharedEvents.addEventListener(DialogEvent.SHOW_DIALOG, showDialogFunction);

    Not strictly relevant to the above but related so I thought I’d chip in…

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>