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 🙂

The Flex Show…

I hit upon a very nice site today… The Flex Show is a podcast service run by Ryan Stewart and Jeff Houser

It has interviews by some awesome names in the Flex arena, ranging from Matt Chotin  to Juan Sanchez and the latest in the list being Doug Mccune… Do check it out. I’m adding this to my blogs to watch list 🙂

For Flex Beginners, do check out his first podacast… Talks about a lot of stuff that i did in my e-seminar

Enjoy ! 🙂

Subtitle Video

Some time back, there was a talk of how youTube can make money by showing Ads on its video itself using an overlay. MSN Video also does it (but not as a overlay, which doesnt look good, in my opinion). BrightCove used the overlay mechanism to show/hide their video controls.

Then i came across a blog entry, where he does a rather innovative use of the overlay, to show Subtitles for the video and in different languages. Cool… See it Here

I thought of providing a generalized container overlay to the video and the user can put any renderer he wants, pretty much like the itemRenderers on the FLEX List Componenet. So he can include ads, subtitles and pretty much anything on the overlay. Its still in draft quality, but i thought i’ll share it with you. What i want to impress here is that it can do a lot more with less. Like Ad support. What i mean is, by just changing the renderer in the component, you should be able to switch between subtitles and advertisements on the video… I’ll publish the code as a component when it reaches production quality 🙂

This is the first example, where I have used a custom Box with Anjali’s Marquee component inside it as the containerRenderer. This probably can be used as overlays for videos in various languages to provide subtitles in english

(click on the pic or here to view the application)

The second example is one where 2 ads are being shown alternating while the video plays. What’s to note here, is that we can even synchronize the ads with the content if the videos are tagged. Web2.0 rocks ! I’m not good at Flash Animations and hence the lousy Ads… 🙂

(click on the pic or here to view the application)

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 🙂

Vacation Over… Back in the Flex World

I’M BACK….

Just came back from a long vacation. Was in Delhi for about a month and then took a 10 day vacation to the Himalayas (to Leh Ladakh). The Trip was really amazing.

Now back to reality and back in the Flex World !!