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 🙂

Happenings in the Flex World

I’ve been off blogging a bit. So here’s some news on what’s happening in the Flex World.

I have been reading a lot of Blogs lately (rather than writing stuff) and came across some interesting pieces of information. ThoughtI’ll collate them for the benifit of those who missed it.

1) Vista Blue Theme on ScaleNine

Juan’s site has an awesome Vista Blue CSS for your Flex Apps. Very nice indeed. What’s more exciting is that its done by an Indian – Bhavin Padhiyar. What impresses me most is the DateChooser and DateField. I dont like the ComboBox muxh and think that the TextInput looks like a button (But, who am I to comment when I cant do even a fraction of what he has done 😀 … Way to go BP).

You can experience it & Download it

One of the best things is that he gives you a Photoshop file where you can customize your assets… Nice

2) Animated GIF Loader by Doug

This is something I always wanted. SWFLoader/Image control has a drawback of not supporting animated GIFs (a workaround is to have the animated GIF inside a SWF and embed the SWF itself). Its great to see Doug come out with this. But it’s a commercial component (for a meger $50). This one’s surely for the FlexBox… Are you listening Mrinal?? 😉

3) [The Big One] Ryan Stewart is working for Adobe now

Anyone (well almost…) in the RIA Arena would have heard of/read the ZDNet Blog by Ryan Stewart. He’s very well known in the RIA domain and is now gonna work for Adobe… Ryan is joining as a Rich Internet Application Evangelist on the Platform Team. Welcome Ryan… we are looking forward to working with you 🙂 But, this notwithstanding, I sincerely hope he continues his unbiased evaluations of different technologies… may it be Flex, Flash, Ajax or Apollo

That’s all for now 🙂

Juan’s collection of awesome Themes

All of you looking to make cool Flex apps, especially those eyeing the “Adobe Developer Olympiad” in India, take a look at the cool themes on Juan Sanchez’s Blog. My favourites are as follows

1. Obsidian
2. Mac OS X
3. Napkin Skin
4. Shadow
5. Messenger

Download them here…