SDK Management

From FDT Documentation

(Difference between revisions)
Jump to: navigation, search
(Edit A Project's SDK (Add or Remove Source))
Line 63: Line 63:
import flash.display.Sprite;
import flash.display.Sprite;
-
/**
 
-
* @author Powerflasher
 
-
*/
 
public class TextLayout extends Sprite {
public class TextLayout extends Sprite {
public function TextLayout() {
public function TextLayout() {
Line 93: Line 90:
When you return to your editor, you'll see that FDT now had included the ''textLayout.swc'' with your build path and all the errors have disappeared [http://fdt.powerflasher.com/docs/File:012_020.png].
When you return to your editor, you'll see that FDT now had included the ''textLayout.swc'' with your build path and all the errors have disappeared [http://fdt.powerflasher.com/docs/File:012_020.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.
 +
 +
The Open Source Media Framework (OSMF) is a great initiative to provide a platform for video distribution; however, there are some good parts and bad news:
 +
 +
* '''Good News''' : It's included with the Flex SDK.
 +
* '''Bad News''' : The included source code is often outdated.
 +
 +
An example!
 +
 +
Create a new Class called ''OSMF'' and fill in the source code below:
 +
 +
<syntaxhighlight lang="actionscript">
 +
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");
 +
}
 +
}
 +
}
 +
</syntaxhighlight>
 +
 +
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 - [http://fdt.powerflasher.com/docs/File:012_021.png] and [http://fdt.powerflasher.com/docs/File:012_022.png] - we see that we still have two errors:
 +
 +
<syntaxhighlight  lang="bash">
 +
Variable 'resource' is not declared. Found 'resource' at line 14 column 11.
 +
Incompatible types URL and String. Found at line 14 column 38.
 +
</syntaxhighlight>
 +
 +
 +
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 all 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.
 +
 +
Get started by right clicking on the project within the ''Flash Explorer'' and choosing ''Flash Project>Change SDK'' [http://fdt.powerflasher.com/docs/File:012_023.png] and this time, choose the ''configure...'' link [http://fdt.powerflasher.com/docs/File:012_024.png]. Let's add our new SDK by choosing ''Search...'' [http://fdt.powerflasher.com/docs/File:012_025.png] and then selecting my custom sdk [http://fdt.powerflasher.com/docs/File:012_026.png].  I'll give it a unique name of ''Custom Flex 4.1'' [http://fdt.powerflasher.com/docs/File:012_027.png] and [http://fdt.powerflasher.com/docs/File:012_028.png].

Revision as of 20:36, 29 September 2010

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

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

Contents

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, ActionScript only or even haXe. But in order to do this, it needs to know what tools to use to get you where you want. That is where SDKs come in.

Think of your finial application as a piece of hand crafted furniture. In this scenario, you're the master craftsman and FDT is your assistant. What is missing here 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 (your 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 [1]. 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 [2]. 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 [3] at:

Preferences>FDT>Installed SDKs

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

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 your 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 [5]. A window will then open and ask you to Select the root directory of the SDK [6]. 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 [7]. FDT will then scan the SDK for all the source code (distributed as .SWCs) that are included with the SDK [8]. 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 [9].

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 [10]. 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 [11]. The Change SDK window will appear and you can then select an existing SDK [12] or click on configure... [13] in case you want to add a new one [14].

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 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 [15]! 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 [16].

Begin adding the textLayout.swc by right clicking on the project, and choosing Properties [17]. When the Properties window opens, choose the SDK Library tab [18]. Once here, click on the Select SWCs... button [19].

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 [20]. FDT will then add the .SWC to your build path [21].

When you return to your editor, you'll see that FDT now had included the textLayout.swc with your build path and all the errors have disappeared [22].

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.

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

  • Good News : It's included with the Flex SDK.
  • Bad News : The included source code 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 - [23] and [24] - 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 all 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.

Get started by right clicking on the project within the Flash Explorer and choosing Flash Project>Change SDK [25] and this time, choose the configure... link [26]. Let's add our new SDK by choosing Search... [27] and then selecting my custom sdk [28]. I'll give it a unique name of Custom Flex 4.1 [29] and [30].

Get FDT5