SDK Management

From FDT Documentation

Jump to: navigation, search
001 0008x.png

Right now is an exciting time for Flash development. Soon there will be mobile AIR development, mobile Flex development and new Flash/Flex features are continuously being added. This makes SDK management particularly important.

This tutorial will go over the basics of managing SDKs with FDT.


Contents

Source Files

Download soruce files.png

Getting Started

All you need to follow along is a project open. You can either create your own or import the project created at the end of the Basic AS3 Tutorial. Visit the Downloads page to get it.

FDT & SDKs

FDT is an IDE specializing in creating applications for the desktop and web - whether you're using the Flex framework, just ActionScript or even haXe. But in order to do build applications with these languages, FDT needs to know what tools to use to get you where you want. That is where SDKs come in.

Think of your finial application like a piece of hand crafted furniture. In this scenario, you're the master craftsman and FDT is your assistant. What's missing are your tools, and it's the job of your assistant (FDT) to make sure your tools are ready for you to use. The type of tools you and FDT use determine what kind of furniture (the finial application) you create. This is where SDKs come in. Explaining how and what exactly SDKs are is too big of a topic to get into here, but for a quick intro check out Wikipedia's article about SDKs.

FDT uses the Open Source Flex SDK to build Flash applications. The initial release of FDT 4 shipped with two SDKs - Flex 3.5 and Flex 4.0; however, you're likely going to want to add more SDKs as newer Flex SDK become available as well as add more specific SDKs (e.g. for mobile development) or even create and use custom SDKs.

FDT's Shipped SDKs

A good place to start is where FDT keeps the SDKs it ships with. If you look inside the plugins folder of your FDT installation directory, you'll see two folders that being with:

com.powerflasher.fdt.shippedFlexSDK

In this example, we see that FDT has shipped with Flex 3.5 and Flex 4 Img preview.png. Taking a closer look, we can see the SDK .ZIP file that FDT unzipped when it first installed. flex_sdk_4.zip in this example, and the flex directory where it unzipped to Img preview.png. Knowing where these default SDKs are is useful if you ever have a problem with them.

Adding and Removing SDKs

Adding and removing SDKs is very simple. Begin by going to FDT's Installed SDKs window located here Img preview.png at:

Preferences>FDT>Installed SDKs

Here we can see your installed SDKs and their location. In this example , we see the two SDKs pointed out earlier in this lesson that are inside of the plugins folder within FDT's installation directory Img preview.png.

The checkbox next to the SDK entry is what FDT will use by default when you create a project. You must always have a SDK selected and you can't remove a SDK when it's been selected as the default.

Add SDK

The quickest way to add a SDK is to click the Search button within the Installed SDKs window Img preview.png. A window will then open and ask you to Select the root directory of the SDK Img preview.png. In this example, several SDKs have already been downloaded and uncompressed and are all within one sdks folder. The specific location of your SDKs is not terribly important, but it helps to keep them together.

After selecting the root directory of the SDK you want to link to, select Open Img preview.png. FDT will then scan the SDK for all the source code (distributed as .SWCs) that are included with the SDK Img preview.png. When complete, FDT will detect the name of the SDK, Flex Hero in this example, and add it to your list of Installed SDKs for you to edit, delete, duplicate or remove Img preview.png.

Remove SDK

If you decide that a SDK is no longer needed, removing is just one click. With the target SDK selected, but not set as your default SDK, click the Remove button Img preview.png. FDT will then remove the SDK from your list.

*note: This doesn't delete your folder containing the SDK. It will still remain on your hardrive.

Using SDKs With Your Project

With your SDK locations installed into FDT, you can now begin to use them with your projects.

Change A Project's SDK

A time may come when working on a project where you may want to change the SDK that is being used. Changing an existing project's SDK is simple. With your project open in the Flash Explorer, right click on the project and navigate to Flash Project>Change SDK Img preview.png. The Change SDK window will appear and you can then select an existing SDK Img preview.png or click on configure... Img preview.png in case you want to add a new one Img preview.png.

Edit A Project's SDK (Add or Remove Source)

Another adjustment that can be made to a project's SDK, is to omit or add .SWCs that are already existing with the SDK.

For example, while using FDT's default AS 3 project type, you may want to use the new Text Layout Framework.

FDT's project types allow for a lean implementation of the Flex SDK - this helps keep things organized and minimize version and compilation errors while projects evolve. Because of this, some of FDT's default project types exclude certain parts of the Flex SDK from the build path. The SDK is still intact, but in order to add the SDK's Text Layout Framework to our AS 3 project type, we'll need to add to have FDT activate it.

*note: Any of FDT's Flex project types will automatically include the Text Layout Framework - it's just the lean AS 3 project type that omits it.

To begin, let's create a new Class that uses the Text Layout Framework. Create a new class, and copy the source code below.

package {
	import flashx.textLayout.container.ContainerController;
	import flashx.textLayout.elements.ParagraphElement;
	import flashx.textLayout.elements.SpanElement;
	import flashx.textLayout.elements.TextFlow;
 
	import flash.display.Sprite;
 
	public class TextLayout extends Sprite {
		public function TextLayout() {
 
                var textFlow : TextFlow = new TextFlow();
		var p : ParagraphElement = new ParagraphElement();
		textFlow.addChild(p);
 
		var span : SpanElement = new SpanElement();
		span.text = "Hello, World";
		span.fontSize = 48;
		p.addChild(span);
 
		textFlow.flowComposer.addController(
                    new ContainerController(this, 400, 200));
		textFlow.flowComposer.updateAllControllers();
		}
	}
}

As you'll notice, FDT lights up like a pinball machine Img preview.png! This is because FDT isn't including the textLayout.swc in the build path. If you were using a Flex project, it would, but since this is a lean AS 3 project, it's been left out. This can be confirmed by expanding the SDK library within the Flash Explorer Img preview.png.

Begin adding the textLayout.swc by right clicking on the project, and choosing Properties Img preview.png. When the Properties window opens, choose the SDK Library tab Img preview.png. Once here, click on the Select SWCs... button Img preview.png.

What will appear is the Included SWCs window. Here you can add or take away chunks of source code from the SDK your project is associated with. To add the Text Layout Framework, click on the textLayout.swc checkbox and then hit OK Img preview.png. FDT will then add the .SWC to your build path Img preview.png.

When you return to your editor, you'll see that FDT now has included the textLayout.swc with your build path and all the errors have disappeared Img preview.png.

Creating and Editing Custom SDKs

If you remember earlier in this tutorial, it was mentioned that FDT has a lean AS 3 project type to avoid compatibility errors - we'll quickly show why that's important and how to fix it using a custom SDK.

A Custom SDK In Action

The Open Source Media Framework (OSMF) is a great initiative to provide a platform for video delivery; however, there are some good news and bad news about it's distribution:

  • Good News : It's included with the Flex SDK.
  • Bad News : The source code the Flex SDK distribution is often outdated.

An example!

Create a new Class called OSMF and fill in the source code below:

package {
	import org.osmf.media.MediaPlayerSprite;
	import org.osmf.media.URLResource;
 
	import flash.display.Sprite;
 
	public class OSMF extends Sprite {
		public function OSMF() {
			var sprite : MediaPlayerSprite = new MediaPlayerSprite();
			addChild(sprite);
			sprite.resource = new URLResource(
"http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv");
		}
	}
}

Just like with the Text Layout Framework example above, FDT goes nuts with errors. This is because the AS 3 project type does not include the osmf.swc by default.

No problem right...? Well.....

If we go through the process again and add the osmf.swc to our source path like we did with the textLayout.swc earlier - Img preview.png and Img preview.png - we see that we still have two errors:

Variable 'resource' is not declared. Found 'resource' at line 14 column 11.	
Incompatible types URL and String. Found at line 14 column 38.


When this tutorial was created, the code in the example above is correct - but why do we get errors? We get errors here because the source code above is used for the most recent distribution of OSMF, and the osmf.swc that shipped with the Flex 4.0 SDK is outdated. While we could just download and then add the new version of the OSMF.swc to our specific project, this is a good time to show how useful it is to have a custom SDK. That way some of our projects can have access to this version of OSMF and other projects that rely on the old osmf.swc will be unaffected.

We'll need to do two things:

  1. Make sure we have the latest distribution of OSMF
  2. Compile to Flash 10.1 ( the latest OSMF requires 10.1 )

Begin by right clicking on the SDK icon (or project icon) and select Flash Project>Change SDK Img preview.png. When the Change SDK window appears, click on Configure... Img preview.png then hit Search Img preview.png. I've already created a copy of the Flex 4.1 SDK and added the latest OSMF .SWF in there, so I'll select that Img preview.png. Next, give it a new name so you'll know that it's not the standard Flex 4.1 SDK - select the SDK from the list of Installed SDKs and click Edit Img preview.png. Now give the SDK a new name, this example is simply calling it Custom Flex 4.1 Img preview.png.

After hitting OK you'll return back to the Change SDK window and select our new custom SDK Img preview.png. Then change the player version to Flash Player 10.1 Img preview.png.

FDT will already let you know that something is wrong Img preview.png. You'll see this message:

Some classpath libraries are missing or SDK version is not compatible.


FDT is letting us know that we're missing some source code, specifically the OSMF code that we were referencing earlier. Let's now make sure we're referencing the new OSMF by again assigning the updated OSMF .SWC to our project.

Once again, right click on the project and select Properties Img preview.png. Once inside the Properties window, remove the old osmf.swc Img preview.png ( if it's still there ) and then click the Select SWCs button Img preview.png. Choose the OSMF .SWC ( notice how this OSMF .SWC is all caps and the other one was all lower case ) Img preview.png.

When you return to your project, use the Organize Imports shortcut to make sure FDT imports any missing classes and then run then run your .SWF Img preview.png.

Wrap Up

FDT's new SDK management is powerful and easy - relieving stress for Flash developers around the world.

Get FDT5