Loading SVG content in Flex Apps

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:

• Tux SVG
• Bird SVG

Learning Resources.pdf

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

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”.

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

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

30 days of free Flex 2 online training from TotalTraining

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 ?

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

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

Casting Vs The “as” operator

Just write a Flex app and try the following in a function

var btn:Button = new Button();

var lst:List = new List();

lst = List (btn);

In short, we are trying to cast a button into a list… What do you expect?? Yes… an RTE (Run Time Error)

It reads

TypeError: Error #1034: Type Coercion failed: cannot convert mx.controls::Button@16ab0479 to mx.controls.List.

There are times in your app development cycle, when you are not sure, if a particular casting is allowed or not. You definitely don’t want to throw an RTE (Run Time Error) to the user either. What you end up doing invariably is using a try…catch block to handle the RTE. A better and cleaner alternative to this is using the as operator

Using the as operator has the following advantages

• It does the exact same thing as casting does, if you are casting between compatible types
• It returns a null if the object cannot be casted to a particular type
• No RTEs 🙂

Once you use the as operator, you can just do a null check to see if the casting is allowed… as below

var btn:Button = new Button;

var lst:List;

lst = btn as List;

if (! lst) {mx.controls.Alert.show(“Sorry you cant cast it this way”); }

But a word of caution. You cannot use the as operator to cast between types in the Top Level classes (to view them , go to the flex language reference). Which means… Say you want to cast a String to a Number, you cannot do,

num = str as Number;

This gives the following error

Implicit coercion of a value of type Number to an unrelated type String

You’ll have to do the age-old way of casting

num = Number(str);

Hope this is useful… at least to beginners 🙂

Skinning the Scrollbar in a ComboBox

Rajesh asked me this question today and I thought I’ll share with everyone…

I have done the following example using CSS that was generated from the Flex Style Explorer App

This is what this will achieve

This is how we can achieve it. We know that the dropDown on the ComboBox is actually a List. So if you can set the scrollbar onto the List and then set the List style onto the ComboBox, we are done.

• The style on List verticalScrollBarStyleName can be used to skin the List’s scrollbar
• Once this is done, use the dropdownStyleName style on ComboBox to style the dropDown List

As simple as that 🙂

Let’s look at the CSS now.

.myVScrollBar {
cornerRadius: 16;
highlightAlphas: 0, 0;
fillColors: #0099ff, #0033ff, #000000, #ffffff;
trackColors: #000000, #ffffff;
themeColor: #009dff;
}

.myList {
cornerRadius: 10;
verticalScrollBarStyleName: myVScrollBar
}

A CSS style declaration called myVScrollBar is used to skin the scrollbar (generated from the Style Explorer App). Another style declaration called myList is defined and here, as you see we nest the style declarations, by setting myVScrollBar to the verticalScrollBarStyleName style of the List.

Once this CSS file is saved (as say, test.css), just do the following to get this onto your App

< mx:Style source=”test.css”/>

<mx:ComboBox dataProvider=”{cards}” dropdownStyleName=”myList”/>

Enjoy 🙂

Getting on the Flex Highway – How to get up to speed with Flex (done)

Thank you all for attending the seminar…

Sorry about the glitches with the audio. I guess the bandwidth got chocked.

The seminar was in 2 parts.

1. Introduction to Flex
2. Get up to speed with Flex

To view the recording and download the presentation go to this link (and see the 3rd Seminar). It links to the flexapacseminars project on google code. The audio seems to have a bit of lag…