quick tip- file associations in FDT

So this was the second time I heard somebody asking on twitter about why they don’t see the AS Class in the right click menu in FDT.
To include/remove items in this list is very easy in the customize perspectives in the tool bar.

I will use the example of adding the package to the right click menu


if you “rick click” on the tool bar you will see a sub menu to customize perspective.

This will give a new menu where you can add/remove file associations for the menu.

here I will add package so that when I right click on the project I can quickly add a new package.

this is the same place where you can add/remove items that show up in the top tool bar.

setting up FDT for Flex 4 SDK & Flash Player 10.1

Aiden Tailor wrote a great blog post on how to set up the Flex 4 SDK with FDT. You can check it out here

Read what he says, and follow the instructions, I did it and it works perfect, any problems just ask!

The point to this post is to take this one step more to configure the Flex 4 SDK to work with the Flash Player 10.1

Download Adobe Flash Player 10.1 beta 3 at Adobe Labs here

In the flex 4 SDK that you just set up from Aiden’s blog:

{SDKFolder}/frameworks/libs/player/10

replace the playerglobal.swc with the flash 10.1 that you just downloaded

open the flex-config.xml replace line 16 to read

 <target-player>10.1.0</target-player>

restart FDT

Now create a new project, “Flex 4 Test”
create a Main class

package {
	import flash.display.Sprite;
	import flash.events.AccelerometerEvent;
	import flash.sensors.Accelerometer;
	import flash.text.TextField;

	public class Main extends Sprite {
		private var myText:TextField = new TextField();
		private var acc:Accelerometer = new Accelerometer();
		private var isSupported:Boolean = Accelerometer.isSupported;

		public function Main() {
			myText.width = 200;
			addChild(myText);
			checksupport();
		}

		private function checksupport():void {
	    	if (isSupported) {
		    	myText.text = "Accelerometer feature supported";
			    acc.addEventListener(AccelerometerEvent.UPDATE, getInfo);
			} else {
			    myText.text = "Accelerometer feature not supported";

			}
		}

		private function getInfo(evt:AccelerometerEvent):void {
	    	myText.text = String("at: " + evt.timestamp + "n" + "acceleration X: " + evt.accelerationX + "n" + "acceleration Y: " +   evt.accelerationY + "n" + "acceleration Z: " + evt.accelerationZ);

		}
	}

}

Run file. I do get the following warning

This compilation unit did not have a factoryClass specified in Frame metadata to load the configured runtime shared libraries. To compile without runtime shared libraries either set the -static-link-runtime-shared-libraries option to true or remove the -runtime-shared-libraries option.

UPDATED
To fix this warning is an easy fix as it turns out, I had to search the flex-config.xml file to find it, but if you open the flex-config.xml file on line 385, you will see

<static-link-runtime-shared-libraries>true</static-link-runtime-shared-libraries>

make sure this property is set to true! it is set to false by default. This will get rid of the compiler warning when you run your projects using the Flex 4 SDK.

 

For some reason the text below in the swf file is very small, this is not the case! If you could like to see a version with larger text, lease go here.
The final swf
[kml_flashembed publishmethod=”static” fversion=”10.0.0″ movie=”http://blog.hawaiiflash.org/wp-content/uploads/2010/03/Main.swf” targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

Flash Components for FDT

Using the Flash IDE & FDT seems natural to me, and I think that it is the prefect work flow! While I enjoy working with the Flash IDE, as I use it daily, I much prefer writing all my code in FDT!

I will be showing how to set up everything in FDT for the Project, but will create the component in the Flash IDE, generating a .swc file and using that in FDT. This tutorial will have 2 parts. First I will  show how to just use the Flash IDE for the graphics and do everything else in FDT(my preferred work flow). The next one will first will be setting up FDT  but use Flash CS 4 to compile,

Part one will be using the FDT solution, and part #2 will show how to combine the Flash IDE with FDT.

when you open FDT 4 there is a nice welcome screen now!
click “create new project”

after you create a new project you will get a dialog. Give the project a name, and tell FDT how to compile. I am using the Flex SDK 3 for Flash Player 10.

FDT will create the project in your workspace. In the SCR folder create a new class(the green “C” button)

give the class a name of Main.as and extend Sprite

this will generate the base class

package {
	import flash.display.Sprite;

	public class Main extends Sprite {
		public function Main() {
		}
	}
}

Set up Flash
create a new Flash AS 3 file

call this file assets.fla and save it in the same directory as you Main.as
I will not be setting the document class, as we are just using flash to create the component swc for use in FDT

Drag an instance of the colorPicker & label to the library.
in the Publish settings, make sue you have “export swc”

Now in the “SRC” folder of the FDT project you will see the new files create by flash.
the only one we care about is the assets.swc(you can delete the rest of them)

right click on the assets.swc file, pick source folder, “add to classpath.

now you will have the classes that FDT will see for using the Color Picker

now in the main.as class ass the following code

package {

	import flash.display.Sprite;
	import fl.controls.ColorPicker;
	import fl.controls.Label;
	import fl.events.ColorPickerEvent;

	/**
	 *  uses the color picker from the Assets.swc(generated from Flash)
	 *
	 * @author johnbarrett
	 * @date Mar 27, 2010
	 */

	public class Main extends Sprite {

		//declare variables
		private var colorPicker:ColorPicker= new ColorPicker();
		private var label:Label = new Label();
		private var square:Sprite = new Sprite();

		public function Main() {
			init();
		}

		private function init() : void {
			//add box
			addChild(square);
			square.graphics.lineStyle(1,0x333333);
			square.graphics.beginFill(0xFFFFFF);
			square.graphics.drawRect(0,0,100,100);
			square.graphics.endFill();
			square.width = 300;
			square.height = 185;
			square.x = 10;
			square.y = 15;

			//add label propties
			label.text = "color is # "+ colorPicker.hexValue;
			label.width = 200;
			label.move(15, 55);
			addChild(label);

			//add color picker properties
			colorPicker:ColorPicker;
			colorPicker.move(30, 25);
			addChild(colorPicker);
			colorPicker.addEventListener(ColorPickerEvent.CHANGE, changeColor);
		}

		public function changeColor(evt:ColorPickerEvent):void {
			//update color properties when a new color is picked
			label.text = "color changed to # "+ colorPicker.hexValue;
		}
	}
}

Now run in FDT

final flash swf in FDT

that is it, easy right?
this is one way, next time I will show you another way
happy coding

Download Tutorial

Flex 4 & Remoting

First the ColdFusion component has not changed

<cfcomponent displayName= "testConn">
	<!--- Establish a Flash Remoting Connection --->
	<cffunction name="getTestConn" access="remote" returnType="string">
        <cfreturn "connection to the ColdFusion 9 Server was successful">
   </cffunction>
</cfcomponent>

The Flex code is a little different and strangely I get quotes return here in the text field, but the same code ran in Flash or even Flex 3 returns no quotes.

The Flex Code with using the Flex 4 SDK & Spark

<?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">
	<fx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import mx.utils.ObjectUtil;

			private function getTestConn_handler( event:ResultEvent):void {
				Result.text = ObjectUtil.toString(event.result);
			}
		]]>
	</fx:Script>

	<fx:Declarations>
		<mx:RemoteObject id="testConn" destination="ColdFusion" source="testConn">
			<mx:method name="getTestConn" result="getTestConn_handler(event)" />
		</mx:RemoteObject>
	</fx:Declarations>

	<mx:Label id="Result" x="127" y="22" width="395" textAlign="left" fontFamily="Verdana" color="#655E5E"/>
	<mx:Button x="10" y="21" label="Test Connection" click="testConn.getTestConn()"  cornerRadius="5" focusColor="#E6EBF0" chromeColor="#F4F6FA" width="109"/>

</s:Application>

So what has changed in remoting in the new Flex SDk & Flash Builder 4? Not much really.

  • New namespaces
  • the script is wrapped in <fx:Script>
  • the mx:RemoteObject is placed in the  <fx:Declarations>
  • afterwards I have a button and a text field which gets the data from the cfc

okay everything is working, but for the life of me I can get rid of the quote:(


Any ideas to this?

Flash Builder 4 is released

Flash Builder 4, the next version of what used to be Adobe Flex Builder is out now with lots of new features
https://www.adobe.com/products/flashbuilder/

Powerful coding tools ENHANCED

Develop using a powerful Eclipse™ based IDE that includes editors for MXML, the ActionScript® language, and CSS, as well as syntax coloring, statement completion, code collapse, interactive step-through debugging, and automatic generation of common code.

Rich visual layout ENHANCED

Visually design and preview user interface layout, appearance, and behavior using a rich library of built-in components. Extend the built-in Flex framework components or create new ones as needed. Import functional application UI created using the Adobe Flash Catalyst™ interaction design tool.

Data-centric development NEW

Introspect Java™, PHP, Adobe ColdFusion®, REST, and SOAP services to display methods and properties in the new Data/Service Explorer. Bind methods to UI components using a simple drag-and-drop approach.

Interactive data visualization ENHANCED

Create data dashboards and interactive data analysis by simply dragging and dropping a chart type and linking it to a data source using the Flex Charting library. Use the powerful Advanced Datagrid to enable users to explore complex data.

Skinning and styling ENHANCED

Customize the appearance of an application using CSS and graphical property editors. Quickly set the most commonly used properties and preview the results in Design View. Browse available themes and apply them to your project using the new Theme Browser.

Integration with Adobe Creative Suite design toolsENHANCED

Import design assets created using Adobe Flash Professional, Illustrator®, Photoshop®, or Fireworks® software, or import a complete application user interface created using Flash Catalyst. A new workflow between Flash Professional and Flash Builder facilitates importing and updating custom Flex components.

Native support for Adobe AIR

Create applications for the Adobe AIR® runtime with Flash Builder 4, including all the tools required to build, debug, package, and sign AIR applications. Adobe AIR lets you quickly develop RIAs for the desktop using the same skills and codebase you use to build RIAs for the browser.

Code refactoring ENHANCED

Quickly navigate through code or restructure it by renaming all references to a class, method, or variable. Flash Builder 4 adds move refactoring.

Powerful testing tools ENHANCED (Premium edition only)

Accelerate application performance using memory and performance profilers that monitor and analyze memory consumption and CPU cycles. Support for automated functional testing tools such as HP QuickTest Professional is also available.

Network Monitor NEW (Premium edition only)

Generate a detailed audit trail of all data passed between the local Flex application and the back end, assisting with debugging and performance tuning.

Advanced data services ENHANCED

Use open source BlazeDS to add binary, high-performance, HTTP-based data transport, or add the Adobe LiveCycle® Data Services ES2 module for real-time data push and pub/sub messaging.

Command line build NEW (Premium edition only)

Use the new command line build capability to automate your build process.

Flex unit testing integration NEW (Premium edition only)

Automate functional testing using the Flex unit testing framework.

ASDoc support NEW

Display comments in MXML and ActionScript editors using ASDoc.

FDT Remoting Template

This is meant to test a remoting connection with a ColdFusion back-end

The ColdFsuion Code has been tested and works. Here is the cfc that I am using


<cfcomponent displayName="getTest">
 <!--- Establish a  Flash Remoting Connection --->
     <cffunction  name="getTestConn" access="remote" returnType="string" output="true">
        <cfreturn "....connection successful">
     </cffunction>
 </cfcomponent>

The rest is actionscript!

import flash.net.*;

var gateway:NetConnection = new NetConnection();
var responder:Responder=new Responder(onResult,onFault);

function onResult(responds:Object):void {
    trace("cfc result"+":"+" "+responds.toString());
}

function onFault(responds:Object):void {
    //loop over the fault structure
    for (var i:String in responds) {
        trace( i + ":" + responds[i] );

    }
}

// name the default cf test server on this machine
gateway.connect("http://localhost/flashservices/gateway/");

// name of the cfc and the function in it that you want to hit in dot notation
gateway.call("com.cfcs.getTest.getTestConn", responder/*this is where any arguments to the remote call go*/)

Now I am attempting to make a template for this in FDT, it works fine in the Flash IDE, but I really don’t want to use the IDE for coding, as I really like FDT for coding!

Now this is the exact code, but I will try to figure out how to use the template propties in FDT to figure out how to change the names of the function, where the cfc is to varaibales, as these will not always be the same. This is just a test to see if you were able to connect to the gateway.

This does work when I dump it into my class, but I get a starnage error

the error panel tells me (click on image for bigger image)

the part besides the template I don’t get, if I have access to the flash.net package in FDT why would I recieve these errors? Works fine in the Flash IDE, but not in FDT.

You can see the post for setting this up for the Flash IDE here
http://hawaiiflash.net/blog/post.cfm/flash-remoting Download the code put the com folder in your CF webroot, open the fla and run just tested and works fine.

UPDATE

package {
    import flash.events.NetStatusEvent;
    //import flash.display.Sprite;
    import flash.net.NetConnection;
    import flash.net.Responder;

    /**
     * @author johnbarrett
     */

    public class Remoting extends NetConnection {

        //set up the variables for the connetion and the responder
        private static var _gateway : NetConnection = new NetConnection();
        private static var _responder : Responder =new Responder(onResult,onFault);

        //use protected to not get an error
        protected var responds : Object;

        private static function onFault(responds:Object) : void {
            //loop over the fault structure
            for (var i:String in responds) {
                trace( i + ":" + responds[i] );
            }
        }

        private static function onResult(event : NetStatusEvent) : void {
            var responds : Object;
            trace(responds.toString());
        }

        // name the default cf test server on this machine

        _gateway.connect("http://localhost/flashservices/gateway/");

        // name of the cfc and the function in it that you want to hit in dot notation
        _gateway.call("com.cfcs.getTest.getTestConn", _responder);
    }
}

this gets rid of the all the errors in FDT, but I do get an warning witht he .toString();

However, when I run the example I get the compile error:

[Info] Connection to player established.

Exception fault: Error: Error #2132: NetConnection.connect cannot be called from a netStatus event handler.

    at flash.net::NetConnection/connect()
    at Remoting$cinit()
    at global$init()[/Users/johnbarrett/Documents/workspace/Remoting/src/Remoting.as:13]