Overview

NOTE: all source code is available for Repper at Github.

The above image shows my Air for Android app Repper ported over to the Blackberry Playbook.  The most remarkable thing about this port? It literally took about 60 seconds to complete!  Here is the shockingly simple, comprehensive list of steps I took to accomplish this:

1. Create a new Flex mobile project in Flash Builder “Burrito” to target the Blackberry Playbook
2. Copied the project files from my original Repper project to the new project
3. Set up the Playbook simulator run settings in my new project
4. Clicked “Run” and voila, Repper on the Playbook!

All components scaled properly.  All layouts fit to the available screen space appropriately.  All orientation transitions performed as expected.  How was this achieved without having to write a single line of device specific code?  It comes down to 3 simple things: Adobe Air, fluid layouts, and vector graphics skinning via Flex MXML.

Adobe Air

Blackberry’s use of the Adobe Air SDK for its Playbook development lets Flash/Air/Flex/AS3 developers leverage existing expertise and code to create apps.  The Air SDK for the Playbook also makes available QNX components to give Playbook apps a Blackberry look and feel.  You can choose from either.  This way Flex developers can use their existing paradigms and pure AS3 developers can make use of Blackberry’s QNX components.  You can even use both as Renaun Erickson details in this post.

For me the big win was taking Repper, a Flex “Hero” app for Android, and porting it directly, unchanged into a working Playbook app.  The Playbook Adobe Air SDK supports Flex “Hero” so everything just worked right out of the gate.  That’s the kind of portability that lets an independent developer be extremely productive.

Fluid Layout

Using fluid layouts with little to no defined pixel dimensions is key to writing a multi-screen app.  Take a look at this excerpt from the main RepperHome.mxml view.

        <s:HGroup id="landscapeGroup" includeIn="landscape" height="100%" width="100%"
			  paddingTop="{this.height*0.03}" paddingBottom="{this.height*0.03}" paddingLeft="{this.height*0.03}"
			  paddingRight="{this.height*0.03}" gap="{this.height*0.03}" verticalAlign="middle">
		<s:SkinnableContainer id="landscapeInput" width="36%" skinClass="RepperInputSkin">
			<s:layout>
				<s:VerticalLayout paddingTop="{this.height*0.06}" paddingLeft="{this.height*0.06}" 
								  paddingRight="{this.height*0.06}" paddingBottom="{this.height*0.06}" 
								  gap="{landscapeInput.height*0.04}" horizontalAlign="right"/>
			</s:layout>
			<s:HGroup width="100%" verticalAlign="middle" gap="0">
				<s:Label text="Weight" width="65%" color="0x000000" fontWeight="bold" fontSize="32"/>
				<s:TextInput width="35%" text="{inputWeight}" keyUp="onWeightKeyUp(event)" restrict="0-9." 
							 contentBackgroundColor="0xffffff" color="0x000000"/>
			</s:HGroup>
			<s:HGroup width="100%" verticalAlign="middle" gap="0"> 
				<s:Label text="# of reps" width="65%" color="0x000000" fontWeight="bold" fontSize="32"/>
				<s:TextInput width="35%" text="{inputReps}" keyUp="onRepsKeyUp(event)" restrict="0-9"
							 contentBackgroundColor="0xffffff" color="0x000000" focusIn="textinput1_focusInHandler(event)"/>
			</s:HGroup>
			<s:Button label="Rep It" click="recalculate();" chromeColor="#111111" />
		</s:SkinnableContainer>
		<local:VDataGroup width="32%" height="100%" dataProvider="{repValues1}" itemRenderer="RepperEntry"/>
		<local:VDataGroup width="32%" height="100%" dataProvider="{repValues2}" itemRenderer="RepperEntry"/>
	</s:HGroup>

If you look at every component and container in this chunk of Flex MXML you’ll notice that no defined pixel dimensions are used. Every component’s size is determined using percentages or data bindings. I’m not going to lie, specifying dimensions in this manner will take more time and requires a bit of trial and error to get right. It helps if you do it with the expectation that another, dissimilar device will be using this same layout in the future. I did, and in this case the little bit of extra forethought paid off huge in terms of portability.

Because of design via fluid layouts, Repper appears properly in both portrait and landscape orientation on the Blackberry Playbook with no additional effort.

Vector Graphics via Flex MXML Skinning

The final factor that made Repper such a breeze to port to the Playbook was Flex Hero’s ability to create vector graphics via Flex MXML. By utilizing this capability you can create skins for your components that scale as the app scales. No external artwork of any kind is necessary. While this is not ideal for designers or highly stylized apps, a developer like me loves it.

Here’s another excerpt from Repper. This time it shows how I used fluid dimensions once again to create vector graphic skins for my RepperEntry components via the RepperEntrySkin.mxml class

    <s:Rect id="background" x="0" y="{this.height/6}" height="66%" width="100%" radiusX="10" radiusY="10">
	<s:filters>
		<s:DropShadowFilter blurX="16" blurY="16"/>
	</s:filters>
	<s:stroke>
		<s:SolidColorStroke weight="3"/>
	</s:stroke>
        <s:fill>
		<s:LinearGradient rotation="-90">
			<s:GradientEntry color="#bbbbbb"/>
			<s:GradientEntry color="#ffffff"/>
	        </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <s:Rect x="0" y="{this.height/6}" height="66%" width="60%" radiusX="10" radiusY="10">
	<s:filters>
		<s:DropShadowFilter blurX="8" blurY="8" angle="0"/>
	</s:filters>
	<s:stroke>
		<s:SolidColorStroke weight="3"/>
	</s:stroke>
	<s:fill>
		<!--- @private -->
		<s:LinearGradient rotation="-90">
			<s:GradientEntry color="#000000"/>
			<s:GradientEntry color="#444444"/>
		</s:LinearGradient>
		<!-- <s:SolidColor color="#333333"/> -->
	</s:fill>
    </s:Rect>

As you can see, percentages and binding are used to create skins for my components that are appropriately scaled regardless of the dimensions of the device. Not having to create skin resources for each device and orientation is a tremendous time saver. Especially for someone like myself who has no patience or talent for it.

Summary

Lesson for the day: with a little forethought and a penchant for Adobe Air, magic can happen. OK, maybe not magic, but you’ll have more time to explore the possibility of creating magic now that you won’t be wasting it on porting your mobile apps. Yes, I know, I’ve griped a bit lately about Flex Hero on twitter, but there are undoubtedly some things it does very well.

In fact, if you think about it, anyone that openly supports Adobe and their efforts to create a viable cross-platform mobile development environment has done very well with it. I’m trying to think of who isn’t supporting it? Who’s at the “core” of the issue? I feel like day to day they are trying to keep the doctor away. Supporting Adobe should be as appealing as American pie. Oh well, hopefully some day they will have their thinking jolted like Isaac Newton did from a falling piece of fruit.

From Air for Android to Blackberry Playbook in seconds is a post from: SavageLook.com

In my prior 2 part guide entitled “Google Project, Subversion, and Eclipse” (Part 1 and Part 2) I discussed how to setup a Google Project Hosting Subversion repository and how to integrate it into an Eclipse based IDE. It came with lots of text and screenshots. While lots of people prefer this method of step by step instruction (I’m usually one of them), its layout left me disappointed.

To remedy this dissatisfaction I put together this video. It walks you through everything from that 2 part guide in a concise 6 minute video. You’ll get to see exactly how to create a Google Project Hosting Subversion repository, install the Subclipse SVN plugin for Flash Builder 4, and integrate the repository into your development environment.

You’ll have to forgive the very amateur nature of the video, this was my first time using Adobe Captivate .  Its a pretty intuitive software, but I’m totally ignorant to the finer points of video guide creation.  I’m sure that will start to change in the near future, though, especially if people actually take the time to watch this one.

Video: Google Project, Flash Builder 4, and Subclipse is a post from: SavageLook.com

In Part 1 of this guide we learned how to setup a Google Project Hosting Subversion repository for version control and remote storage of our code.  In Part 2 we will learn how to integrate this remote repository into the Eclipse based IDE of your choice.  Before starting, though, let me first mention that:

• I’m on a Windows system with TortoiseSVN, so some of this will vary on other OSes.
• I will be using Flash Builder 4 for this guide, but Flex Builder 3 and other Eclipse based IDEs are very similar.
• You’ll need to know the workspace directory of your IDE, which will be referred to as WORKSPACE from now on.

So let’s say I want to check out my Away3D Flash Builder 4 template project.

1. The first thing I do is go to my Google Project Hosting page and find the Subversion URL for that project.  You can find my project hosting at http://code.google.com/p/savagelook/
   
2. Goto “Source -> Browse” and we’ll find the project I’m looking for under the trunk, “away3d_template_fb4“.  The path to that project is “trunk/away3d_templates/away3d_template_fb4“.  You’ll need this for the checkout later.
   
3. Now its time to install Subclipse, an SVN plugin for Eclipse based IDEs.  Open up Flash Builder 4 (or whatever Eclipse based IDE you are using).  Goto “Help -> Install New Software…“
4. In the resulting dialog, enter the following URL in the “Work with” field: http://subclipse.tigris.org/update_1.6.x
   Then click  ”Add”.  You will be prompted for a name for the site.  Just call it “Subclipse”.  After you click OK you should get a dialog that looks like this:
   
5. Check “Subclipse” then expand its choices.  Deselect “Subclipse Integration for Mylyn 3.x (Optional)” and “Subversion Revision Graph”.  Your list should look like this:
   
6. From here just follow the steps for the Subclipse install.  If you need specific instructions to get Subclipse loaded in your Eclipse based IDE, use the Download and Install instructions from the Subclipse website.  The IDE will restart (or you should do it manually) when the install finishes.
7. After Flash Builder 4 reopens, right click in the Package Explorer and select “Import…”.  From the resulting dialog expand “SVN” and select “Checkout Projects From SVN“.  click Next.
   
8. Select the radio button next to “Create a new repository location” and click Next.
9. In the “URL” field, I will be entering the following URL: https://savagelook.googlecode.com/svn/trunk/away3d_templates/away3d_template_fb4
   Notice that the root of the path is my Google Project Hosting root “https://savagelook.googlecode.com/svn” and that it ends with the path to my specific project “trunk/away3d_templates/away3d_template_fb4” as mentioned in Step 2. click Next.
10. Your IDE will return a list of files under this project, but we are checking out the whole thing so just select the top level choice (the full URL) and click Finish.  It will likely take a few moments to finish, depending on the size of your project.
    
11. In your Package Explorer you should now have your Google Project Hosted code integrated into your Eclipse based IDE.  You can do a quick confirmation of this by seeing if there are little yellow icons indicating version control on your filenames.  Also, you can mouse-over any version controlled filename to see when it was last committed and by whom.
    
12. Now let’s try a quick change and commit.  I’m going to add a sphere to my Away3D template, then commit the change back to the Google Project Hosting Subversion repository.  After I make the code changes, save, and run the application, the local repository will mark the files as changed.  Notice the little yellow bars have changed to black and white asterisks on changed files.
    
13. To commit all my changes I am going to right click on the project root in the Package Explorer and goto “Team -> Commit…”
    
14. In the resulting dialog I am going to write a simple commit message to give a little info about the changes and then click OK.  Eclipse will execute the commit and when it is finished you will see all those little black and white asterisks turn back into yellow bars.  This signifies that your local changes have been successfully sent to the Google Project Hosting Subversion repository.  Feel free to go back to the Google project web interface to confirm it.
    

Congrats, you made it!  If you managed to follow along with these 2 long blog posts of mine, you now have your code hosted by Google Project Hosting in a Subversion repository and have it fully integrated into the Eclipse based IDE of your choice.  Give yourself a pat on the back!

It may seem like a lot of work up front, but the ability to revert, merge, backup, branch, and tag code becomes priceless once you get into some serious projects.  The simple assurance that you can fall back to a any revision of your code when you inevitably F something up is great.  Learn to love version control and I assure you it will love you back.  Creepy…

Google Project, Subversion, and Eclipse, Part 2 is a post from: SavageLook.com

OK, this is a pretty boring update to the blog, but I thought it might be useful to at least a handful of people.  Flash Builder 4 comes with a stock version of the Flex 3.5 and 4.0 SDKs.  If you are like me, though, you want the latest and greatest as soon as you can get your hands on it.  For that reason I put together this very short and simple explanation of how to install specific Flex SDKs for your Flash Builder 4.  For those familiar with Flex Builder 3, this will seem pretty familiar.

- FLASH_BUILDER_4_HOME is your Flash Builder 4 install path (i.e., C:\Program Files\Adobe\Flash Builder 4)
- SDK_VERSION is the version number of your Flex SDK (i.e., 4.1.0)

1. Get your desired Flex SDK from the Flex SDK Download page.
   

   Flex SDK Download Page

2. Unzip the archive to FLASH_BUILDER_4_HOME/sdks/SDK_VERSION
3. Open Flash Builder 4 and in the menu bar goto Windows -> Preferences

   

4. In the left pane of the Preferences window expand “Flash Builder” and click “Installed Flex SDKs”.  Click “Add…” in the right pane.

   

5. In the “Add Flex SDK” window enter the location of your new SDK (FLASH_BUILDER_4_HOME/sdks/SDK_VERSION) or click the “Browse..” button to find it yourself.  If you enter the path correctly, the “Flex SDK Name” field should auto-populate with the correct SDK name.

   

6. Click “OK” and your Flex SDK should be successfully installed.  You can now also set it as the default, if you wish, for all your future Flex projects.  Just click the checkbox next to the name of your SDK and click “Apply”.

Even if you set up a new SDK as the default, there’s no reason you have to use it on all of your projects. During the creation of a new Flex project you can specify which SDK you want to use in the “Flex SDK version” section. You simply need to click the “Use a specific SDK” radio button and then select one of your installed SDKs from the drop down.

You can also change the SDK after the project is created. With your project selected, goto Project -> Properties and then click on “Flex Compiler” in the left pane. On the right you’ll now see the same “Flex SDK version” section that was mentioned in the last paragraph. Just change it and click “Apply”.

And thats about it. Dig and have fun, Flash Builder 4 really is a fantastic IDE.

Configure Flex SDK in Flash Builder 4 is a post from: SavageLook.com

Here’s a quick tip for those of you who are also switching to Flex 4.x/Flash Builder 4 from Flex 3.x/Flex Builder 3.  In the past when you wanted to add a Flash DisplayObject to the main Application canvas you’d wrap the DisplayObject in a UIComponent, then add the UIComponent to the Application as a child, like this:

var sprite:Sprite = new Sprite();
var ui:UIComponent = new UIComponent();
ui.addChild(sprite);
this.addChild(ui);

Try that in Flash Builder 4 and you’ll encounter a fun error that looks like this:

Error: addChild() is not available in this class. Instead, use
addElement() or modify the skin, if you have one.

To resolve it, simply change the last line of the previous code to use addElement() instead (change in red):

var sprite:Sprite = new Sprite();
var ui:UIComponent = new UIComponent();
ui.addChild(sprite);
this.addElement(ui);

Flash Builder 4: addElement() instead of addChild() is a post from: SavageLook.com