How to add custom Quick Assist options to FlashBuilder 4.5 ?

Adding custom quick assist options to FlashBuilder 4.5.1 is easy.

Here is a sample plugin I created to show how this can be done. Copy this plugin into the dropins folder found under the "Adobe FlashBuilder 4.5" folder of the installation. In FB pressing Ctrl+1 inside a ActionScript class or script block of MXML file should bring up the "Override/Implment Methods" quick assist option as shown below.

One needs to implement the "com.adobe.flexbuilder.as.editor.quickAssistProvider" extension point to add custom quick assist providers in a custom plugin. The extension point requires the IQuickAssistProvider interface to be implemented by a class and supply this as a "class" value to the extension point description.

Step by step instructions on how to do this:

1. Create a new workspace and import the following plugins from FlashBuilder plugins folder. (These are the basic plugins which are required for the example. You may need to import more plugins based on the exact quick assist you want to implement.)

com.adobe.flash.codemodel.core

com.adobe.flexbuilder.as.editor

com.adobe.flexbuilder.codemodel

com.adobe.flexbuilder.editorcore

com.adobe.flexbuilder.editors.derived

com.adobe.flexide.as.core

com.adobe.flexide.editorcore

2. Create a new plugin called say "com.adobe.flashbuilder.extras"

3. Add the extension point "com.adobe.flexbuilder.as.editor.quickAssistProvider"

4. Create a class implementing the interface IQuickAssistProvider by clicking the class link. Add the necessary code for the required functionality in the class following the example source given.

The interface has only one method getProposals which needs to return a list of proposals that need to be displayed at the particular offset at which the user has invoked the quick assist. Using the information available in the IQuickAssistInvocationContext and other code model APIs the code can arrive at this list.

5. Export the new plugin and place the jar in the dropins folder under the FB installation.

Caution : In case you find that quick assist functionality of FB stops working check the logs to see if the new plugin is causing any exceptions causing this.

The example source is available here.

"What is new in FlashBuilder 4.5" session at 360Flex video

Video of Adam's session on "What is new in FB 4.5" at 360Flex is available here

FlashBuilder Tips and Tricks slides

A copy of the slides I showed in 360Flex is available here.

In the end there are few more slides which I didn't show as they are already available in MAX 2010 and MAX 2009 videos.

There is also an article which contains most of the information presented but not all !

Use QuickAssist in FlashBuilder 4.5 to create labelFunction,iconFunction,dataFunction etc..

One of the cool features of FlashBuilder 4.5 is support for creating labelFunction, sortFunction, dataFunction, iconFunction (basically any Function property of Flex SDK MXML components) using Quick Assist.

Steps :

1. Go to the component tag and use content assist to enter the *Function attribute.

Ex: <s:List labelFunction=""

2. Type the function name.

Ex: <s:List labelFunction="myLabelFunc"

3. With the cursor still between the quotes hit Ctrl+1 (or Cmd+1 on Mac).

4. You should something similar to the following

5. Select it and hit enter. FB should create the function with proper signature and go into linked mode.

For adventurous developers:

If you find the "Create function ..." option missing any particular Function property for any component you can edit the componentDescriptor.xml file (which can be found under the Adobe Flash Builder 4.5\eclipse\plugins\com.adobe.flexbuilder.mxml.editor_4.5.0.xxxxx directory) and add the entry yourself and fix it !

Caution : Save the original xml file in case you end up spoiling it.

How to use code templates to enter keywords without mistakes ?

After my "FlashBuilder tips and tricks" session at 360Flex where I erred while entering "implements" keyword I thought through it and came up with this. Add the following code template with any name it suits you. I used "kw".

${keyword:values(public, protected, private, function, implements, var, try, catch, class, interface, package)} ${cursor}

Now where ever I need to enter a keyword I just need to type "kw" and hit Ctrl+Space to get a popup showing all the keywords. (Note: Modify the list of keywords to suit your need)

4 items to check if a Flex 4 Application is leaking memory !

I have been working with Flash Builder profiler for past few months. After looking at few applications and memory leaks in them I came up with following 4 items which can cause a Flex application to leak memory.

If you don't like to read lot of text the gist is to use weak references where ever possible.

1. addEventListener is being called with the default value of false for its useWeakReference flag.

2. bindProperty and bindSetter methods of BindingUtils are called with default value of false for its useWeakReference flag.

Please note: I don't know what is the equivalent thing in Flex 3.

3. ChangeWatcher.watch method is being called with default value of false for its useWeakReference flag.

Please note: I don't know what is the equivalent thing in Flex 3.

4. Dictionaries are being used with weakKeys flag in the constructor set to false.

Items 3 and 4 can cause some hidden links to be formed and memory to leak. More on that soon.

Ruby on Rails extension for FlashBuilder4

The DCD (Data Centric Development) feature of Flash Builder 4 is an extensible feature. What I mean by that is that developers can add a new plugin to FB which implements certain extension points available in FB and add support for any back end of their choice. Once added all the DCD features would work with the back end similar to other supported back ends like PHP, CF etc.

Gaurav has worked on a plugin to add support for Ruby.

Give it a try !

CallResponders explained..

Here is some explanation about CallResponders by Tom Lane. I thought this would be useful to many developers who want to understand more about them so that it becomes easy to work with them.

"Let me take a shot at explaining asynchronous calls. Most PHP developers are used to calling functions in one way only: synchronously. In ActionScript a sychronous function call looks like this:

var stuff = getStuff();

Pretty straightforward. It's how you expect functions to work: you call them, and then immediately on line #2 of this example you have a value in the stuff variable to work with.

But when it comes to calling remote functions on services sitting on a server somewhere, Flex calls them asynchronously. This is so that the Flex client can continue working while the request is pending. An aync call looks more like this (at least, the first part):

responder.token = getStuffFromService();

What this means is, "stuff" does not come back right away as the result of the function. Instead, what it returns is a kind of ticket. Sort of like ordering some food from a lunch counter and getting a receipt with a number on it. You don't get your food right away. Instead, you go hang out or do some other stuff while your order is pending, and then your number is called when it's ready. And then you "respond" to your number.

Well, that's what a CallResponder is. When you "place your order", you hook up a CallResponder to it. When your order is ready (data comes back from the service call), the responder kicks into action. It fires a result event (or a fault if something went wrong), and it updates its bindable lastResult property.

So, if you want to work with data from an async call, you can't simply do it on line #2 of the above snippet. You have to wait until the CallResponder for that call gets its result. If you create a databinding to lastResult, that will automatically update when the result is ready. But since you want to run some script on the result, you have to trigger that script from the CallResponder's result event handler.

Hope this helps!

Blogs on Data Centric Development workflows in FlashBuilder 4 for PHP, HTTPService, ColdFusion and WebService

Here are some great blogs on how to use DCD feature in FlashBuilder 4:

Howto: Connect a flex application to database (for PHP developers)

Howto: Use createItem method of the generated sample PHP file

Howto: Use the update and delete methods of the generated sample code

Howto: Enable Automatic Paging in Flex Applications for Any Kind of Service

A list of many articles on Sujit's blog

BlazeDS support

Using web-services with DCD workflow

FlashBuilder (FlexBuilder renamed) 4 Beta is out

FlexBuilder has been renamed to FlashBuilder and version 4.0 Beta is out.

Rather than say the same thing over and over...here are the links which give detailed information:

The Beta site

Srinivas Annam talking about Data Centric Development (DCD)

How to use DCD work flows explained using flow charts

Sujit explains DCD workflows with BlazeDS