Extending Flex Builder 3 – Building eclipse plugin

As mentioned in earlier post, I have been playing with FLEX builder and understand its extensibility APIs. After spending almost day crawling through various search engines and websites I couldn’t find a single site giving me details about how to work with MXML design editor APIs, I thought of giving up. But fortunately I could able to figure out how things actually work in FLEX Builder, and then I thought of publishing some of the details through the blog.

The next few paragraphs will talk about various APIs and options available in FLEX builder which can be used by anyone to build their own plugin in Flex Builder. While the title of the post says that “Building eclipse plugin”, it surely doesn’t describe basic steps required to build eclipse plugin. To learn basics of building eclipse plugin, you should visit other sites like java2s and yeah offcourse eclipse itself has plethora of information on building plugin.

The aim of this article is to give details about the editor used to design Flex layouts. You must have used plugins which can generate AS code, ident XML code etc in Flex builder but there are very few plugins which actually work on design editor.
Before writing any plugin code you need to make sure that you have the required environment set for plugin development. Though Eclipse comes with built in feature of plugin development, Flex builder doesn’t have built-in support for Java and plugin development project. So to get started with plugin development you need to first install plugin development and Java development feature into Flex builder. Keep it in mind that we need to build plugin inside Flex Builder, the simple reason behind this is to test your plugin code we will require sample workspace of Flex builder and that can be easily started through Flex builder. The installation of Java and Plugin development feature is only required if Flex Builder is installed as Standalone version. If you have installed Flex Builder in Eclipse you can skip this installation.

The next step is to add required Extensions and Jar files in plugin project. Make sure that you have added extensions listed in following image.

Flex builder extensions

Apart from adding above extensions you will need 3 additional Jar files which contain useful APIs. The filenames are derived.jar, mxml.jar and mxmlmodel.jar. You need to search these files in Flex plugins. Now create a default “view” using Plugin wizard available in Eclipse.
The wizard should create all the files required to build plugin.

Lets directly jump into java code and see how you can get the reference of MXML editor itself

MXMLEditor a = (MXMLEditor)getSite().getPage().getActiveEditor();

Above statement will give you the reference of current MXML editor. You need to be bit careful while using this statement as user may not always work with MXML editor (There is action script editor or user may switch from one MXML file to another or may even switch from design view to source code). So you need to logically place this code to get reference of MXML editor.
(Hint: Try to find out details about IPartListener.)

The editor object is pretty much useful to listen to the events raised in editor. An editor instance has a method called getMXMLModel which represents an MXML instance for the editor. You can use the IMXMLModel instance returned by getMXMLModel method to manipulate MXML code. The reference also provides a convenient method to listen to the user selection in design view.
Just place below code after getting IMXMLModel reference

mm.getSelectionProvider().addSelectionChangedListener(new SelectionChangeListener())

Note that the SelectionChangeListener is custom class implementing an interface ISelectionChangedListener. A method “selectionChanged” will be invoked on the above instance whenever user select control in MXML design editor. The method has one argument of “SelectionChangedEvent” which can be used to get the reference of the component selected. I leave the part of getting reference of control using instance of “SelectionChangedEvent” to you.
For demonstration, I have created a sample plugin which displays component selected in “Sample View”, check below images.
Flex Builder - Button selected

Flex Builder - checkbox selected

The story doesnt end here, I would be revealing more details about API – watch this space.

Be Sociable, Share!


Leave a Comment.