PushButton Engine with FlashBuilder 4

I have been looking at bit more at PushButton Engine lately, it is potentially a very good fit with Firebase + Flex API. However, setting it up in FlashBuilder 4 took some steps I couldn’t find anywhere so here are the steps I had to do.

The goal here is to get Lesson #5 running within a Flex Project in FlashBuilder 4. This way we can take advantage of the new Flex 4 SDK and Spark components.

You can find the lessons here, and the source code for Lesson #5 is conviniently bundled with the PBE distribution.

#1 Create the project

Setup the project by selecting New -> Flex Project. Application type: Web. Add the PBE source code, PBE SWC and compiler arguments as specified here.

#2 Add the PBE Sprite to the Application

This is where I stumbled and went on a detour. However, this is fairly straight foward – the only caveat is that the Lesson class is a Sprite and the Application only accepts UIComponents so you need to wrap it.

My main application.mxml below

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   applicationComplete="onLoaded()">

	<fx:Script>
		<![CDATA[
			import Lesson5Final;

			import mx.controls.Alert;
			import mx.core.UIComponent;

			public function onLoaded():void
			{
				var lesson:Lesson5Final = new Lesson5Final();
				var ui:UIComponent = new UIComponent();
				ui.addChild(lesson);
				addElement(ui);
				lesson.init();
			}
		]]>
	</fx:Script>

</s:Application>

But, you also need to modify the Lesson5Final class. The class needs to be added to the stage area before we call PBE.startup(…), so I simply extracted the constructor logic to an init-method. I also removed the SWC annotations since they are not needed any more.

Snippet of modified Lesson5Final.as below

public class Lesson5Final extends Sprite
   {

      public function Lesson5Final()
      {
      }

	  public function init()
	  {
		  // Start up PBE
		  PBE.startup(this);

		  // Load up our embedded resources
		  PBE.addResources(new MyResources());

		  // Set up a simple scene entity
		  createScene();

		  // Create an avatar entity
		  createHero();

		  // Create a simple background entity
		  createBackground();
	  } ... // The rest is identical

That should do it! Easy enough =)