"4tip-of-the-day" Posts

Submit a Tip (Jan 09) winner announced!

Congratulations to Aaron E. for submitting his tip walking us through using Sprouts! He is the winner for my first Submit a Tip contest.

A license for Baslamiq Mockups is on it’s way to you. Aaron’s tip will be featured as today’s Tip of the Day.

Thanks everyone for submitting your tips… I will probably end up using them as time goes by and will be sure to give you recognition.

A special thanks also goes to Balsamiq for providing the license for this contest.

Tip of the Day – Leverage Sprouts to quickly get your Flex projects up and running

Sprouts is a tool that helps you get a Flex development environment setup quickly, and helps automate development, testing, and deployment.

Sprouts is an open source project that uses Ruby to make Flex development easier. If you’ve ever used Ruby on Rails or a similar framework, you may be familiar with project generation. In fact the sprouts code generator, rubigen, was extracted from Rails. For those who are used to Java development, Sprouts can be likened to Maven.

Sprouts can not only generate a project, but fetch and install dependencies similar to a package management tool such as RPM. It will even install the Flex SDK and Flash debug player if you don’t have them installed. Sprouts provides wrappers around tools such as MXMLC and COMPC (and recently even FDB) to faciliate automation. It also helps encourage best practices such as unit testing by helping create a framework for executing tests with asunit and integrating with continuous integration tools such as CruiseControl.rb.

The website for sprouts has a great getting started tutorial.

What follows is a typical pattern of usage with Sprouts based on the tutorial.

1. Generate a project:

sprout -n as3 MyProject

This builds the basic directory structure and a simple ActionScript 3 application.

2. Execute:

cd MyProject
rake

This will run the project, but even better, will download and install dependencies, and set up your environment configuration.

Rake, I as I mentioned, is a ruby build program (think ant or make) But it isn’t just for Ruby. It’s part of the power behind sprouts. You don’t have to know Ruby to use Rake, but you’ll probably learn a little bit without even realizing it.

Rubygems is the package installer used by ruby, and also used by sprouts to install your Flex development dependencies. It’s another part of the secret sauce, and it just works. Similar tools include ivy (for Java), cpan (for perl), or pear (for php).

3. Generate code:

script/generate myPackage.MyClass

You don’t need to know how rubigen works to use it, but you might find yourself learning a bit about it to build your own generators. It’s not that daunting.

4. Test your code:

rake test

This will execute your unit tests. What tests, you say? When sprouts generated your class, it also generated tests to go with it. Of course the tests will fail until you implement the tests (and functionality to make them pass.)

Sprouts also has tasks to help you deploy a project. For instancing, zip and sftp wrappers.

In summary, sprouts performs three main types of tasks:

1) setup flex development environment
2) project and code generation
3) build, test, and deployment tools


This tip was provided by Aaron E, during our submit a tip contest.

Tip of the Day – Using interactive assets from Flash in Flex

So for the most part… up to this point I haven’t really needed to use extensive Flash animations within Flex. I mean like most people, I’ve embedded swf assets into my Flex application by using the [Embed] metadata tag. However, using the Embed metadata tag, in my opinion, is for static assets or simple animations… you know… images, animation only swfs, fonts, etc…

Today I found a cool button that I wanted to use in my Flex application.

The button (roll your mouse over me):

Get Adobe Flash player

The thing about this button is that it has complex roll over and roll out animations. Of course we could create the same thing within Flex using an ActionScript tween class… but some things are better left to the Flash timeline.

So how do we get our button into Flex, with all of its animation and interactivity intact? The answer, my friends, is to use Adobe’s Flex Component Kit.

Doing some research online, it’s not really clear where to get it, or how to use it. According to labs, it’s released within Flex 3… but I don’t have a clue where. So we’re going to do this my way…

Step 1 : Install Adobe Extension Manager 2.1

Obviously, you can skip this step if you already have Extension Manager 2.1 installed.

If you didn’t install the Adobe Extension Manager when you installed your copy of CS4, you can download it here —> Download Adobe Extension Manager

If you already had Adobe Extension Manager installed… just be sure it has been updated to version 2.1.

Download and open up Setup.app
installfck_01

Click Next
installfck_02

Let it run
installfck_03

You’re welcome Adobe
installfck_05

Extension Manager > About Extension Manager
installfck_06

Says 2.1… cool, we’re ready to move on to step 2.

Step 2 : Install the Flex Component Kit

Now we need to go download the extension —> Download the Flex Component Kit (you need an adobe.com account)

All the way at the bottom you’ll find the extension we’re looking for… Flex Component Kit for Flash CS3 Professional (I know it says CS3 and we’re working in CS4, don’t worry)
installfck_07

Once downloaded, unzip and double-click FlexComponentKit.mxp
installfck_08

Read this whole agreement and only if you agree the terms click “Accept”
installfck_09
…how many of you read that?

Okay, you should see this now.
installfck_10

Documentation for this component can be found here —> FCK Docs

Onward!

Step 3 : The Flash Side

Let’s take our button and load it into Flash. We’re going to name it “MyButton”.
fck_part2_01

Create an AS3 class to handle all of the button interactions we need
fck_part2_02

package {
	// MyButton
	import mx.flash.UIMovieClip;
	import flash.events.MouseEvent;
 
	public class MyButton extends UIMovieClip
	{
		public function MyButton()
		{
			super();
 
			buttonMode = true;
			useHandCursor = true;
 
			addEventListener(MouseEvent.MOUSE_OVER, onOver);
			addEventListener(MouseEvent.MOUSE_OUT, onOut);
		}
 
		public function onOver(event:MouseEvent):void
		{
			gotoAndPlay(1);
		}
 
		public function onOut(event:MouseEvent):void
		{
			gotoAndPlay("end");
		}
 
	}
}

Make sure you have MyButton selected in the Library, and then use Commands > Convert Symbol to Flex Component.
fck_part2_03

Your output panel will let you know the command worked properly.
fck_part2_04

Test the movie by pressing ⌘ + enter (ctrl + enter on the PC).
fck_part2_05

Publish the movie, which creates both a SWF and a SWC file.
fck_part2_06

Now that we have our SWC file, we’re ready to move into Flex Builder.

Step 4 : The Flex Side

Copy our newly create SWC file into our libs directory.
fck_part2_07

With the SWC in our libs directory, it will automatically be included in the classpath of our Flex application (see this tip for more information on the libs directory).

The SWC file includes the MyButton class, so we can now write our code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:local="*" 
	layout="absolute" backgroundColor="0x000000" backgroundGradientAlphas="[0,0]" 
	creationComplete="onReady()">
	<mx:Script>
		<![CDATA[
			private function onReady():void
			{
				// How to use the custom button in ActionScript 
				/*
				var button:MyButton = new MyButton();
				button.x = 35;
				button.y = -10;
 
				addChild(button);
				*/
 
				// And just for fun				
				makeGrid();
			}
 
			private function makeGrid():void
			{
				var pad:int = 35;
				var gridWidth:int = 10;
				var gridHeight:int = 10;
				var yOffset:int = -45;
				var xOffset:int = -25;
 
				for(var h:int=1; h<=gridHeight; h++) {
					for(var w:int=1; w<=gridWidth; w++) {
						var button:MyButton = new MyButton();
						button.x = w*pad+xOffset;
						button.y = h*pad+yOffset;
						myPanel.addChild(button);
					}
				}
 
			}
		]]>
	</mx:Script>
	<mx:Panel id="myPanel"
		layout="absolute" left="10" right="10" top="10" bottom="10" 
		backgroundColor="#1D1D1D" title="Hey look, I'm a Flex Panel"/>
 
	<!-- How to use the custom button in MXML -->
	<!--<local:MyButton x="-5" y="-10" />-->
</mx:Application>

And here’s what it looks like:

Get Adobe Flash player

Weeeeee…. that’s fun, you can download the source here.

The source there is an Archived Flex project, all you need to do is Import it into Flex Builder and you’re good to go.

That was a long tip, any questions please post them.

Tip of the Day – Creating an AIR application for a kiosk

Today I needed to prototype a chromeless AIR application for use in a kiosk. It’s actually a whole lot easier than I thought it would be.

Here’s a quick example of what you can do with Adobe AIR and FlexMDI.

airkiosktest

The cool thing about Adobe AIR is that it can run on Linux. So if I needed to deploy thousands of kiosks I could install Linux on them and save on windows licensing.

Here is the application source:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:flexmdi="flexlib.mdi.containers.*" 
    layout="absolute" backgroundColor="0x000000" showFlexChrome="false"
    applicationComplete="onReady()">
 
    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            import mx.controls.Button;
            import mx.core.Application;
            import mx.events.MenuEvent;
            import flexlib.mdi.containers.MDIWindow;
            import flash.display.StageDisplayState;
            import net.natebeck.BrowserWindow;
 
            [Bindable] public var ADOBE:String = "Adobe";
 
            // FlexMDI Manager layout types
            [Bindable] public var TILE:String = "Tile";
            [Bindable] public var TILE_FILL:String = "Tile and Fill";
            [Bindable] public var CASCADE:String = "Cascade";
 
            // File Menu
            [Bindable] public var EXIT:String = "Exit";
 
            [Bindable] public var buttons:Array = []
 
            private function onReady():void
            {
                // Enter Fullscreen Interactive State
                stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
 
            }
 
            public function openWindow(event:MenuEvent):void
            {
                var location:String = "";
 
                switch(event.label) {
                    case ADOBE:
                        location = "http://www.adobe.com";
                        break;
                    case CASCADE:
                        mdic.windowManager.cascade();
                        break;
                    case TILE:
                        mdic.windowManager.tile(false, 10);
                        break;
                    case TILE_FILL:
                        mdic.windowManager.tile(true, 10);
                        break;
                    case EXIT:
                        var exitingEvent:Event = new Event(Event.EXITING, false, true); 
                        this.nativeApplication.dispatchEvent(exitingEvent); 
                        if (!exitingEvent.isDefaultPrevented()) { 
                            this.nativeApplication.exit(); 
                        } 
                        break;
                }
 
                if(location.length > 0) {
                    var window:BrowserWindow = new BrowserWindow();
                    mdic.windowManager.add(window);
                    window.title = event.label;
                    window.location = location;
                    window.maximize();
                }
 
            }
        ]]>
    </mx:Script>
 
 
    <mx:ApplicationControlBar dock="true">
        <mx:MenuBar id="myMenuBar" labelField="@label" width="100%" height="100%"
            itemClick="openWindow(event);" >
            <mx:XMLList>
                <menuitem label="File" >
                    <menuitem label="Exit"/>
                </menuitem>
                <menuitem label="Launch" >
                    <menuitem label="Adobe"/>
                </menuitem>
 
                <menuitem label="Window" >
                    <menuitem label="Tile"/>
                    <menuitem label="Tile and Fill"/>
                    <menuitem label="Cascade"/>
                </menuitem>
 
            </mx:XMLList>
        </mx:MenuBar>
    </mx:ApplicationControlBar>
 
    <flexmdi:MDICanvas id="mdic"  top="10" bottom="10" left="10" right="10"/>
 
</mx:WindowedApplication>

And here is Browser.mxml

<?xml version="1.0" encoding="utf-8"?>
<flexmdi:MDIWindow 
    xmlns:flexmdi="flexlib.mdi.containers.*"
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="400" height="300">
 
    <mx:Script>
        <![CDATA[
            [Bindable] public var location:String = "";
        ]]>
    </mx:Script>
 
    <mx:HTML width="100%" height="100%" location="{location}" />
 
</flexmdi:MDIWindow>

The full application can be downloaded here.

:: Update ::

There seems to a be a little bug in the applicaiton… when you’re rendering HTML with Flash Content within it. It won’t display in StageDisplayState.FULL_SCREEN_INTERACTIVE mode. However, if you hit the ESC key… the flash content will show up. I’ll have to check and see if there is a bug filed on this.