Flex - Button label truncation problem

I recently had trouble with Flex truncating the label on some but...




It was a particularly aggravating affair, playing with the padding and the width which had no apparent effect. After hours of searching the net and finding nary a shred I discovered that there was a simple fix.




Simply changing the label placement property of the button to 'bottom' had the desired effect rendering the label correctly.




Ahhhhh, much better.

Making the Eclipse XML editor Useful

I use Eclipse for editing pretty much everything I on my Mac with its great free plugins who wouldn't want to use it there is only one small problem. That problem is the built in XML editor for Eclipse sucks, it tree based meaning you can't get the the underlying code without using the default Text Editor.

I decided that there must be a free plugin you can use so I Googled "free eclipse xml editor" and found several articles about an editor called XmlBuddy but there was a problem, the domain www.xmlbuddy.com has been sold so you are not going to be able to download it from there crap! So yet again I turn to my friend google and at last I have found the answer.

I downloaded the plugin from cnet unzipped into my Eclipse plugins directory, now I finally have a decent XML editor.

Custom Events in Action Script

You have an custom actionscript 3.0 class and it does all sorts of great thing, but now you want other people to be able to use it. There are many ways to do this but for this example I am going to create a custom event. Lets get started.

First add the following imports to your class.

import flash.events.Event;
import flash.events.EventDispatcher;

Then add the metadata about the custom event, the event in this example is called customEvent.

[Event(name="customEvent", type="flash.events.Event")]

Next copy and paste the following code anywhere into your class this is used to add the functions need to create event listeners and dispatch events.

private var disp:EventDispatcher;
public function addEventListener(type:String, listener:Function, useCapture:Boolean=false, 
 priority:int=0, useWeakReference:Boolean=false):void {
   if (disp == null) disp = new EventDispatcher();
   disp.addEventListener(type, listener, useCapture, priority, useWeakReference);
}
    
public function removeEventListener(type:String, listener:Function, useCapture:Boolean=false):void {
 if (disp == null) return;
   disp.removeEventListener(type, listener, useCapture);
}
    
public function dispatchEvent(event:Event):void {
 if (disp == null) return;
   disp.dispatchEvent(event);
}

Next you need to add the code to fire your custom event to do this add the following code to the function you want to fire the event.

var deviceDataEventObject:DeviceDataEvent = new Event("customEvent");
dispatchEvent(deviceDataEventObject);

OK you custom class can now fire your custom event all you need to do is set up a event listener in the calling class, use this code.

customClass.addEventListener("customEvent", yourFunction);
private function yourFunction(event:Event):void{
   //Do Something here
}

Thats it you are done simple huh?

Free Flex Visual Studio Plug-in

There is a plug-in for visual studio it is not as good as the adobe IDE but is free will do the job, for more info on the plug-in go to their website. First you need to download all the required files listed below:

• Flash Develop - "Release notes and download" link, then towards the bottom of the page redirected page.
• Java SE Runtime Environment (JRE) - download button under the table heading (Java SE Runtime Environment (JRE).
• Flex SDK - "Free Adobe Flex 3 SDK" link.
• Tofino Visual Studio Plugin - "Download Tofino [version] without Flex SDK" link.

Now you have a directory full of downloads it is time to start installing(please note [version] is a place holder for the current version of the file you downloaded):

1. Extract the Flex SDK (flex_sdk_3.zip) to "C:\Flex\3\".
2. Install the visual studio plugin (EnsembleTofinoWithoutFlexSDK.[version].msi) by double clicking it.
3. Open Visual studio
4. Open the Options Windows
5. Check the "Show all settings" checkbox if its there
6. Go to Projects > Flex Projects
7. Set the Flex 3 SDK location to "C:\FlexSDK\3\|

For more info on how to use the plug-in there is an article at developer fusion.

Controlling Flex With Javascript

For work I had to do a proof of concept to show that I could control flex using javascript and here is is with the source, if you want to do it follow this article.

I did have one problem tho and that was i was using Flash Develop and there is no "Create Ajax Bridge." menu option, luckily this can be solved pretty simply just by copying the the files from you sdk directory to you project they are located in


[sdk]\frameworks\javascript\fabridge\src\bridge\.

The Eclipse IDE and Google App Engine

App Engine is Googles offering in the realm of cloud computing. The free service that Google offers should be more than enough to host small websites. If an application does need extra resources, there is the option to enable flexible billing which alows a web application to scale and only pay for resources used. see Googles Billing Docs Orginally the App Engine only supported the Python scripting language, though the Google team have recently anounced Java support. Google have released an SDK and set of plugins for the Eclipse IDE, together they provide an integrated developement and deployment environment.

How to set up Eclipse/App Engine

Software needed:

• Java SE Development Kit(JDK)
• The Eclipse IDE

Installation:

1. Install the Java SE DEvelopment Kit
2. Unpack the Eclipse IDE
3. Follow these steps to install the SDK and App engine plugin through the Eclipse software update service. You will likely need to reboot.

Further Information: App Engine Docs Sample applications

Free Flex IDE

Ok so flex is great but there is one small problem and thats the US$ 299 for the IDE from adobe. Yes there is a free trial available so you can at least spend 60 days trying the IDE but what happens after your 60 days are up and you still want to use flex but don't have US $299 laying around to buy yourself the full version. With Flash Develop and a two little plugins you can.

Installing First you need to download all the required files listed below:

• Flash Develop - "Release notes and download" link, then towards the bottom of the page redirected page.
• Java SE Runtime Environment (JRE) - download button under the table heading (Java SE Runtime Environment (JRE).
• Flex SDK - "Free Adobe Flex 3 SDK" link.
• Design View plugin - "Download Plugin" link.
• Design View Air Package - "designview.air" link.
• Debugger Plugin - "FlexDbg.zip" link.

Now you have a directory full of downloads it is time to start installing(please note [version] is a place holder for the current version of the file you downloaded):

1. Run the installer(FlashDevelop[version].exe) for Flash Develop and and leave everything as the defaults.
2. Install the Java SE Runtime Environment (jre-[number]-windows-i586.exe).
3. Extract the Flex SDK(flex_sdk_3.zip) to "C:\Flex\3\".
4. Install the Design View AIR app(designview.air) by double clicking it.
5. Open the Design View plugin(FlexDesignView-[version].zip) and copy the contents of "Data" to "C:\Program Files\FlashDevelop\Data\" and the contents of "Plugins" to "C:\Program Files\FlashDevelop\Plugins\".
6. Extract the Debugger Plugin(FlexDbg.zip) to "C:\Program Files\FlashDevelop\Plugins\"".

Now Everything is in installed all you need to do is set up flex in Flash Develop:

1. Open the Flash Develop(Start > Applications > Flex Develop > Flex Develop).
2. Once the application is opened press F10 or go to "Tool > Program Settings" to open the Program Settings.
3. Click on AS3Content button (1. in the image below).
4. Then set the "Flex SDK Location" (2. in the image below) to "C:\Flex\3\".
5. Click Close, and enjoy Flash Develop.

Program Settings

Update: as requested here are some screen shots with FlashDevelop in both Source and Design Views.