T3B

Yesterday I was working with the ToggleButtonBar in Flex and I wanted to change its appearance. I went over to the trusty Flex 3 style explorer and made some adjustments until I got it looking how I wanted. I copied the generated CSS, pasted it into my stylesheet and was ready to move on. When I ran my application however, I noticed that most of the styles had not taken effect. WTF?, I said. After some poking around and trying various configurations I came up with what I think is an acceptable solution.

When you copy the CSS from the style explorer you'll get something like this:

ToggleButtonBar {
   buttonHeight: 41;
   buttonWidth: 109;
   buttonStyleName: "mytoggleButtonBarButtonStyle";
   firstButtonStyleName: "mytoggleButtonBarFirstButtonStyle";
   lastButtonStyleName: "mytoggleButtonBarLastButtonStyle";
   selectedButtonTextStyleName: "mytoggleButtonBarSelectedButtonStyle";
}
 
.mytoggleButtonBarButtonStyle {
   highlightAlphas: 0, 0;
   fillAlphas: 1, 1, 1, 1;
   fillColors: #333333, #333333, #ff9900, #ff9900;
   color: #ffffff;
   textRollOverColor: #ffffff;
   textSelectedColor: #ffffff;
   themeColor: #0000cc;
   fontSize: 14;
   fontWeight: normal;
}
 
.mytoggleButtonBarFirstButtonStyle {
   cornerRadius: 9;
}
 
.mytoggleButtonBarLastButtonStyle {
   cornerRadius: 9;
}
 
.mytoggleButtonBarSelectedButtonStyle {
   color: #ffffff;
   fontSize: 14;
   fontWeight: normal;
   fontStyle: normal;
   textDecoration: none;
}
 

What I found is you need to copy the styles from the .mytoggleButtonBarButtonStyle class to the other styles that are generated for you. Obviously keep in mind that you only want to copy the properties that are going to be the same for each state, otherwise you'll overwrite your changes. This worked for me, hope it helps.

My latest article is up at InsideRIA. It's titled, "RIA's go Hollywood: An Introduction to Integrating Video Into Your Application." It provides an introductory look into how to best incorporate video into your applications. Special thanks to Josh Reed from Reed Multimedia for helping me out with shooting and editing the video.

With the NHL Playoffs in full swing and my beloved Red Wings starting the second round this evening against the Ducks I thought I'd post this little app I made a while back. It's just a simple AIR app that pulls in Red Wing RSS and Twitter feeds. Enjoy.

Download

A while back I submitted a session for 360|Flex on Cloud API's and the Flash Platform. I didn't get selected but it's still something I'm interested in so I'm going to do a series of blog posts about instead. Each post will focus on a different Cloud API including but not limited to digg, WordPress and of course the ubiquitous flickr. If you have any requests please feel free to leave them in the comments and I'll do my best to accomodate.

Here's another couple session submissions to consider:

1. FLEXperience - putting the Flex in UX ~ Joe Johnston: Universal Mind
2. RIAs w/ Soul - Creating great brand-driven experience w/Flex ~ Francisco Inchauste: Universal Mind

And of course, one last shameless self-promotion;

• Cloud APIs and the Flash Platform: A Match Made in Heaven ~ Me

I decided I'd take a shot and submit a session to 360Flex Indy. After listening to Kevin Lynch talk about the importance of connecting the "cloud" and the client during his MAX keynote I thought it might be cool to do a session on cloud api's and connecting them to the Flash Platform. The guys at 360Flex have opened up the session submissions for public voting. Please consider voting for my session. The link to vote and a brief description follow:

Click here to vote

One of the upcoming trends Kevin Lynch talked about during his keynote at
MAX 2008 was client and cloud computing, that is, tying data stored in the
"cloud" to applications on client devices (ie. PC's, phones, other
connected devices). The idea behind this session would be to introduce
developers to some of the top cloud API's available (Google, Twitter,
Flickr, digg, even RSS). In addition to letting developers know these
resources are out there, a large portion of the session would be devoted to
code examples showing how to use some of these API's. The main goals of the
session are to broaden awareness of cloud API's in general but more
importantly to show how easy it can be to integrate these resources into
Flash Platform applications (specifically Flex, AIR and Flash).

I wanted to try out my preview copy of Flex Builder 4 (aka Gumbo) that we received at MAX so I thought I'd put together a simple little AIR application. I always find myself looking around for a calendar to quickly reference so I thought this would be a perfect little application to build. If you're like me and still stuck in the Windows XP world this handy little apps just chills out in your system tray and displays the current date. Hover over it and you get the full date, click and you get a fully functioning calendar.

Download the app at http://doubletmedia.com/AIR/DockCal/DockCal.air

Enough about that, on to Gumbo. Initial impression, I like it. It's stable, even for an early build. It seems to be quicker than previous permutations of FB. I like the new code hinting and ties into ASDOCS, they are good for quick reference into what you can do with the components. I haven't had a chance to do much with the new "Gumbonents" yet, I'll have to save that for my next app.

I am having some trouble however, and I haven't been able to find any information on it so far. Since this is an AIR app I wanted to include the update frame work. However, whenever I add in that code (taken from the Tour de Flex app) I receive the following error:

VerifyError: Error #1053: Illegal override of seek in mx.effects.effectClasses.TweenEffectInstance.

Any ideas?

While at Knoware I had the opportunity to work on a very cool AIR application for Chrysler. Joe Johnston has a good write-up and some screenshots and video over at his blog. Congratulations to everyone who worked on the application, and good luck!

Update: Here's the link to the MAX site where you can vote. The app is listed under the RIA section.