Here’s something that I always do when writing any sort of Flex Application. I’ll write a batch file that would allow me to quickly double click it and copy all of the files on the bin-release folder to the production server. This normally save me a lot of time as I don’t have to manually look for the files and copy them to the server.

Here’s a quick way to create the batch file and edit it to do what you want to ,

1. Open up Notepad in Windows. You can do this by navigating to Start > Programs > Accessories > Notepad, or simply by entering notepad under Start > Run.
2. Save your file before you start writing any code
3. Go to File > Save As.
4. Click on the dropdown box “Save as type:” and select “All files” instead of Text (*.txt).
5. Add .bat to the end of your file name before you save. For example copy.bat.
6. Click on Save.

Now a little batch commands to delete the files that exist on the production server first before we copy the files from the bin-release folder to the production server followed by opening the page using the default browser.

1
2
3
4
5
6

REM Delete old production files
del \\production_server_name\production_folder\*.*
REM Copy over new production files
copy *.* \\production_server_name\production_folder\
REM Open the location of the file using default browser
start www.production_server.com

The batch file should be located in the same folder as the files that you want to copy

Here’s how to embed collada files into your Flex.

1
2
3
4
5
6
7

 
[Embed(source="collada.dae", mimeType="application/octet-stream")]
private var Model3D:Class;
var byteArray:ByteArray = new Model3D();
var collada:DAE = new DAE();
collada.load(byteArray, material);
scene.addChild(collada);

Here’s a quick way of restarting your Flex Application without reinitializing everything through a function

navigateToURL(new URLRequest(Application.application.url), ‘_self’);

In order to change the mouse cursor to a hand cursor when a mouse over a particular component in Flex Component you will need to set useHandCursor = true , however if you set this to true you will not be able to get the hand cursor unless you set another two properties on the Flex component , buttonMode = true and mouseChildren = false.

Here’s an example

1
2
3
4

var label:Label = new Label();
label.buttonMode = true;
label.useHandCursor = true;
label.mouseChildren = false;

Once you set all three property of the component you will have the hand cursor when the mouse moves over the flex component.

Recently I was working on a project that I was using MouseEvent.DOUBLE_CLICK and the darn thing wasn’t firing no matter how many times that I’ve clicked on it. After awhile I remember that most  Flex component actually have a doubleClickEnable property . Guess what was the result of the trace when I did

1

trace(image.doubleClickEnabled) // this will return false

The simple solution for getting MouseEvent.DOUBLE_CLICK to work is to ensure that you set the property of doubleClickEnable to true

1
2

image.doubleClickEnabled = true;
image.addEventListener(MouseEvent.DOUBLE_CLICK, double_click);

While working on a new project using Flex and Webservices, I got this annoying message when I’m trying to use dataprovider and custom ItemRenderer

warning: unable to bind to property ‘xxx’ on class ‘xxx’ (class is not an IEventDispatcher)
warning: unable to bind to property ‘xxx’ on class ‘xxx’ (class is not an IEventDispatcher)
This is happening because binding fails when using complex objects  , the compiler doesn’t know what kind of datatype that is being looped in the Repeater class and spits out a warning. Depending on what you are trying to do , sometimes it wont even spit out the data. The quick solution is to extend your class to Object and to make it bindable.

Here’s an example

package com.thedesilva
{
import mx.rpc.soap.types.*;
/**
* Wrapper class for a operation required type
*/
[Bindable]
public class Magazine extends Object
{
/**
* Constructor, initializes the type class
*/
public function Magazine() {}
 
public var id:String;
public var imagename:String;
public var name:String;
}
}

Here’s a really cool Flex learning tool called Tour de Flex. Tour de Flex is a desktop application for exploring Flex capabilities and resources, including the core Flex components, Adobe AIR and data integration, as well as a variety of third-party components, effects, skins, and more.

It’s a really great application as it provides alot of examples with source code that will allow you to learn and also visualize the changes.  Below is a screenshot of Tour de FLEX Air Application

Tour de FLEX Air Screen Shot

The application is also available as a plugin to Flex Builder and Eclipse .  Once installed you can search by component name, tag or author and double-click any item in the results to immediately see the component in Tour de Flex.  The plugin provides a search interface to the 200+ samples in Tour de Flex . It’s pretty simple to install it on Flex Builder 3 . Here are the instructions to install it in Flex Builder

1. Click on Help -> Software Updates -> Find and Install
2. Click on Search for New Feature to Install
3. Click on New Remote Site and enter http://tourdeflex.adobe.com/eclipse on the URL
4. You can type anything you want for the Name of the Remote Site. In my case I just put it as Adobe


Adding Tour de Flex to Flex Builder 3

5. Click OK and then click Finish
6. You will be presented with a list of new features that you can install , Select Tour de Flex and click Finish
7. Once installed, a new Tour de Flex view is available to add.
8. If you can’t find the Tour de Flex view on the Window preferences up top of your Flex Builder options then it could be hidden.  If that’s the case then follow on to the next step
9. Click Windows -> Other View -> Tour de Flex and you should be able to view the Tour de Flex Window which looks like below
   

   Tour de Flex Eclipse Plugin Screenshot

Prior to Flash Player 10 , if you need to write or read a file to a user system , you would need to bounce it off a server and then load it back to the user system before you can even access the file. This is no longer true in Flash Player 10 . The new API on FileReference class allows you to save and load file that is selected by the user , they are

FileReference.load() – loads data from a file that is selected by the user

FileReference.save() – save data to a file that is selected by the user

However , in order for the save() and load() to be called it need to be in response to a user interaction such as a button click and the location of the files cannot be exposed to Actionscript.

Below are the examples to use this new API

import mx.controls.Button;
import mx.controls.TextArea;
 
import flash.net.FileReference;
import flash.events.Event;
 
import flash.utils.ByteArray;
 
private var fileReference:FileReference;
private var textArea:TextArea = new TextArea();
private var loadButton:Button = new Button();
private var saveButton:Button = new Button();
private var myFilter:FileFilter = new FileFilter("Text","*.txt");
 
private function init():void{
	textArea.width = 200;
	textArea.height = 200;
	addChild(textArea);
 
	saveButton.label = "Save"
	this.addChild(saveButton);
	saveButton.addEventListener(MouseEvent.CLICK,saveFile);
 
	loadButton.label = "Upload Text File"
	this.addChild(loadButton);
	loadButton.addEventListener(MouseEvent.CLICK,loadFile);	
 
}
 
private function saveFile(e:MouseEvent):void{
	fileReference = new FileReference();
	fileReference.save(textArea.text,"test.txt");
}
 
private function loadFile(e:MouseEvent):void{
	fileReference = new FileReference();
	fileReference.browse([myFilter]);
	fileReference.addEventListener(Event.SELECT,selectFile);
	fileReference.addEventListener(Event.COMPLETE,loadText);
}
 
private function selectFile(e:Event):void{
	fileReference.load();
}
 
private function loadText(e:Event):void{
	var data:ByteArray = fileReference.data;
	textArea.text = data.readUTFBytes(data.bytesAvailable);
	fileReference = null;
}

Of course you can also use Event Listeners to make sure that the file are properly loaded or if the user canceled the file browsing.

Here’s the working example

View Source

If you haven’t heard about the next version of Flex , code name Gumbo is now in development. According to Adobe’s Open Source site , the next version of Flex has 3 primary themes :

• Design in Mind: provide a framework meant for continuous collaboration between designer and developer.
• Developer Productivity: improve compiler performance and add productivity enhancements to language features like data binding
• Framework Evolution: take advantage of new Flash Player capabilities and add features required by common use-cases

Here’s instructions on how to use Gumbo SDK in your Flex Builder 3.

1. First you will need to download the lastest Gumbo SDK nightly build from opensource.adobe.com. Once you downloaded the zip file you will need to extract them to your hard drive.
2. You will also need Flash Player version 10 , download it from Adobe.com or click here for Flash Player 10.
3. Put the newly extracted folder in flex builders sdk directory , which would be in C:\Program Files\Adobe\Flex Builder 3\sdks ( this would be your default installation folder it will different if you changed it ).
4. Now we need to configure your Flex Builder 3 in order to use this SDK. Launch Flex Builder and then goto Window -> Preference and you should see the window below.


Flex Builder 3 Preference Window

5. Now click “Add” and browse into your Flex SDK directory and select the folder where your Flex Gumbo SDK is located and Flex Builder should be able to retrieve the SDK name by itself. Click the “OK” button. I would suggest keeping the old Flex 3 SDK as the default SDK and choose the Flex Gumbo SDK each time you need to use it.
6. Now that we have Flex Gumbo SDK availabe in your Flex Builder let’s create new project to use it. In Flex Builder 3 , click on “New Project” to create a new project and after the project is created goto the project properties by right clicking on the project in the Flex Navigator Tab and then click “Properties”. In the “Properties” dialog click on “Flex Compiler” and select “Use a specific SDK”  , here you should select the Gumbo SDK that you have installed as your sdk and change the “Require Flash Version” to 10.0.0.


Flex Builder 3 Project Properties

7. That’s it , you should now be able to debug/compile your Flex project with Flex Gumbo SDK with Flash 10 features.

Recently I was working on a Flex project and realize upon having my project on the live server , I couldn’t retrieve the height and width property of my loaded image by doing below

var img:Image = new Image();
img.source = "image.jpg"
trace(img.height);
trace(img.width);

The trace statement above will just show 0 for both width and height. Of course after a few hours of searching Google for a solution I realized on the livedocs documentation for Image has the property contentWidth and contentHeight which provides the height and width of the image loaded.

var img:Image = new Image();
img.source = "image.jpg"
trace(img.contentHeight);
trace(img.contentWidth);