Loading SVG content in Flex Apps

June 10, 2009

This is a question that is often asked to me. A lot of people have complex graphics done in SVG and want to leverage it in their Flex apps. Its actually quite simple.

Like any asset used in your app, copy the svg files into your project structure. You can use the Image control (mx.controls.Image) to draw SVG content. Just that the source has to pointed to classes containing the SVG content instead of the images as you do with JPG and PNG assets. Here is a small bit of code that generated the following result

Code

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; backgroundColor=”0xffffff” layout=”horizontal”>
<mx:Script>
<![CDATA[
[Embed(source=”assets/bird.svg”)]
[Bindable]
public var bird:Class;

[Embed(source=”assets/tux.svg”)]
[Bindable]
public var tux:Class;

]]>
</mx:Script>
<mx:Image source=”{tux}”/>
<mx:Image source=”{bird}”/>
</mx:Application>

Result

The SVGs I have used can be found here:


Learning Resources.pdf

July 17, 2008

Lately, I have been getting a lot of mails from people who want to start with Flex, AIR, BlazeDS..etc (The Adobe RIA Platform in short) and are looking for learning resources.

I have compiled a document of resources that I found most useful. This is in no way an exhaustive list, feel free to leave suggestions here and I will add it to the list.

Learning Resources PDF


“Top 10 Mistakes when building Flex Applications” – My 2 cents

April 22, 2008

InfoQ.com (Information Queue) is an independent online community focused on change and innovation in enterprise software development targeted at architects, technical team leads, developers and project managers.

Recently our very own James Ward, teamed up with the team at InfoQ to write an article on “Top 10 Mistakes when building Flex Applications”. Read the rest of this entry »


Flash for Flex Developers I – Importing artwork from Flash CS3 into Flex

March 27, 2008

CSS support in Flex is something that lets you tidy up your vanilla UI in a very easy manner…. In Flex2, you could do this with the Flex Style Explorer. When Flex3 happened, we decided to add this into FlexBuilder using the new CSS Design View feature. This lets you do a whole lot of stuff, but what if you want a button that looks like this:

With Flash CS3 we have a method of exporting any artwork, which can then be used in your Flex application. Here are the steps to achieve this

Read the rest of this entry »


30 days of free Flex 2 online training from TotalTraining

September 20, 2007

A lot of people have blogged about this… but still I think this is really worth another mention. Total Training has come up with a 30 days of free Flex 2 online training on their website. This is very exciting for those programmers who are itching to give Flex a try, but are at loss of books and training materials.

Here’s what you should do…

  • Hit this link – www.totaltraining.com/guest/adobe
  • This will lead you to the Online Training Activation page. Note down the Activation Code in the “How to Redeem” section
  • Either sign in or register for an account
  • Enter your activation code, activate it and then proceed to training

NOTE : This training is valid only till Dec 31st 2007, so sign in as early as possible and also remember that this is a 30 day rial, so you have 30 days to complete your training…

I will be giving this training a spin myself, to see the way it is structured. Will provide comments as they come when I go through the trainings.


What is mx_internal ?

September 3, 2007

Traditionally in OOO languages access specifiers are used to control visibility of declarations (public, private, protected). Now with XML based languages like MXML making debut, a new mechanism for controlling visibility of declarations has evolved… using namespaces. Namespaces are essentially custom access specifiers, which can have names of your choosing. Namespaces are outfitted with a Universal Resource Identifier (URI) to avoid collisions, and are also used to represent XML namespaces when working with E4X.

What I’m interested in discussing here is an internal namespace that FLEX framework uses for its internal data, called mx_internal. A lot of variables in Flex are mx_internal variables and are available to the developers if they use the mx_internal namespace. Before we go into the details of how to use them… lets look at how to identify these variables. There are 2 ways to do this…

One is the straight forward way of looking into the source. Since Flex is Open Source and comes bundled with the source code.. one can easlily locate these variables in the source. For example, under the class defenition of VideoDisplay.as, you can see the an mx_internal variable called videoPlayer (of type VideoPlayer, which in turn extends from flash.media.Video)

mx_internal var videoPlayer:VideoPlayer = null;

This way of identifying mx_internal variables is not always effective, so a better way is to use FlexBuilder to identify them. This is what you need to do…

  1. Switch to Flex Debugging View
  2. Use the following code
      <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”&gt;
      <mx:Script> <![CDATA[
      public function debug():void{ } ]]>
      </mx:Script>
      <mx:VideoDisplay id=”vid”/>
      <mx:Button label=”Debug” click=”debug()”/>
      </mx:Application>
  3. Make sure that you can view the mx_internal variables in the debugging mode. You can do this by checking the options in the debug Layout as below
  4. Now put a break point in the debug() function and run the app in the debug mode. Click on the button to come to the debug view and add a watch for the VideoDisplay object. You’ll see the following in the debug view, when you search for videoDisplay under the watched vid variable…

The variables are color coded as below

  • Red Rectangle – private
  • Green Circle – public
  • Yellow Rhombus – mx_internal
  • Char codes “C” & “S” – constants and static vars

Now you have identified the mx_internal variables that you need to use. Now lets see how to use them. This is a 3 step process…

  1. Import the namespace that is going to be used. Note that this needs to be done after all other imports
      import mx.core.mx_internal;
  2. Tell Actionscript that is a namespace
      use namespace mx_internal;
  3. Prefix the property name with its namespace
      vd.mx_internal::videoPlayer.clear();

Thus you can now access and use the mx_internal variable and all its properties, methods, styles etc. I’ll tell you about some scenarios where this is most useful in the coming posts. Hope this makes your job easier 🙂

Addendum (4th Sep ’07) :  As rightly pointed out by Mrinal…. I should add this disclaimer.

Adobe uses the mx_internal namespace to mark things that may change in future versions of the framework .. So you have to use it at your own risk, because your inherited class or component may not work with future releases of Flex.


Binding in MXML & AS

August 30, 2007

Binding is one of the very useful feature in Flex. Though most intermediate programmers know how to bind a variable in mxml… most are clueless how to achieve this in AS. I’ll discuss both these aspects here.

Binding in MXML

Lets look at the following code…

<mx:TextInput id=”ti1″/>
<mx:Label id=”label1″ text=”{ti1.text}”/>

Here you are binding the text property of the TextInput to the label. So whatever you type in the textInput automatically reflects in the label. That’s the power of Binding…

Binding in AS

This is not as simple as binding in mxml. But it is simple enough…

The key to this is a class called BindingUtils in the mx.binding.utils package. You can use this class as below…

You have your components say in mxml as follows

<mx:TextInput id=”ti1″/>
<mx:Label id=”label2″/>

Now you impost the Binding utils class in the script tag

import mx.binding.utils.BindingUtils;

Then you use the bindProperty method to do the binding in AS as follows…

BindingUtils.bindProperty(label2,”text”,ti1,”text”);

This binds the ti1.text to label2.text. And you are set with your binding…

Binding is specially useful in data related components like List, DataGrid, Charts…etc. You can bind the dataProviders of these components to ArrayCollections or results of HTTPService objects, so that any change in data, immediately reflects in on the component