Custom Chrome AIR Windows w/ Drop Shadows
As the design lead for many of the Adobe Lighthouse client projects, I have come in contact with many different types of potential uses of AIR. One common UI element that has always come up was the ability to have “Custom Chrome” (with a drop shadow). So I thought I would pass along a base file I always start with when utilizing custom chrome. *Note, my method was abstracted from Daniel Wabyick’s “Example AIR App - Dynamically Resizing Windows based on Content Area” example.
*The “Source” is available by right-clicking and selecting ‘view-source’ in the application.
**This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 United States License.
February 6th, 2008 at 4:00 am
IMO custom chrome make apps look unprofessional. Every other app I have on my OS uses the OS chrome, and is what users expect. The more OS specific the apps can be made the better.
For instance one of my guys here runs Vista, but he has all the Vista shit turned off so the all the chrome on every app looks like XP. Every other app on his system updates and renders as he would expect, but if he opens the Ebay AIR app, due to its custom chrome it ignores his personal settings and renders the chrome in Vista stylee. From a user perspective this is bad, bad, bad!
February 6th, 2008 at 9:08 am
Wow, someone actually reads this blog.I am always looking for feedback from the community to what features they like or dislike about AIR. And it sounds as though you have a pretty strong opinion on this topic.
Your supporting example sounds like a feature request more then a reason why custom chrome “make apps look unprofessional”.
February 6th, 2008 at 10:22 am
Hey Brett
User experience is the most important part of any app (i.e. form follows function). The chrome is something users expect to be consistent. They know how it works, where everything is placed etc. Changing this for the sake of design (even if its just color) detracts for what they expect, it may scare some people away, it just put some people off, some may even like it.
Those uncertainties can all be removed by supplying what they expect (which no-one is actually going to dislike, after all it’s what they expect).
I’d be interested to know of any apps you use on a daily basis that do have custom chromes. I’m a Mac user, and too be honest I can’t think of any.
February 6th, 2008 at 10:24 am
Sorry to be blazing your blog!
I just thought I’d add that it’s not a feature that I dislike, just a feature I would advise against using
February 6th, 2008 at 11:25 am
Amen. Love it! Preaching to the choir. In all honesty I thought it would be nice to share my approach to using custom chrome. And save the topic of categorizing what is or isn’t a good use of custom chrome for another post (which I still plan to do
. I will have to say atleast this much, that I do agree that there are certain use cases that make sense for custom chrome and others that do not. When I come up for AIR in the next week I will elaborate. Until then, keep rockin the good fight.
February 26th, 2008 at 8:51 am
The above custom chrome job looks stunning. Thanks so much for posting it. I’ve been searching for a good example of how to do this, and there it is!!
Regarding the off-topic discussion above, I don’t know anyone who would be remotely or even slightly confused by it. People have been looking at that kind of thing in browsers for years and years. It looks fantastic, especially because is has lost the standard garbage that usually lives above it.
Hey, thanks.
February 27th, 2008 at 7:29 am
Looks nice in the screenshots but can’t run it to get the source since it’s in an older version of AIR and won’t run on the latest player. Any chance of a refresh?
Jamie.
February 29th, 2008 at 1:41 pm
Jamie, This runs for me using the current AIR 1.0 runtime. The problem I have is that it doesn’t quite work correctly. When I click anywhere in the title bar, the whole app jumps a few hundred pixels to the left or right. If I drag the app using the title bar, it also jumps. If I take the code and remove all controls from the title bar so that the only thing that can be done is to drag it, everything is fine.
Doesn’t make any difference which computer it is running on, and it happens even when freshly compiled under AIR 1.0
February 29th, 2008 at 2:38 pm
Jools, Try downloading the new example and let me know if you are still having issues. As I am on a MacBook Pro running 10.5.2. If your still having issues, let me know and we can pull this offline and work through the issues.
March 1st, 2008 at 3:32 am
> Jools, Try downloading the new example and let me know if you are still having issues.
> As I am on a MacBook Pro running 10.5.2. If your still having issues, let me know and we
> can pull this offline and work through the issues.
Hi Brett,
I’m also on a MacBook Pro running 10.5.2. BUT, I’ve actually figured it out and it isn’t unique to your example. It happens with any air app. Everything that follows, relates to MacBook Pro’s.
When using the button below the trackpad, everything is fine. When using finger tapping on the trackpad, instead of the button (system prefs->keyboard and mouse->trackpad->clicking = checked), air applications don’t seem to get a mouse up notification when the finger is lifted. When you next click on the title bar, the window logic (NativeWindow->startMove) seems to be confused.
I have two MacBook Pro’s (must always have a spare). This happens with both of them.
I came here to let you know what I discovered, therefore I haven’t yet tried your new sample. This happens 100% of the time with all air apps though, so it probably won’t make much difference.
Hope that’s helpful.
Jools
March 1st, 2008 at 3:55 am
Brett,
A correction…
> It happens with any air app.
For me, it happens with any air app made using Flex. As far as I can tell, those made with html or Flash CS3 are fine. I’ve just made a custom chrome air app with Flash CS3 and it behaves perfectly. I made one using Flex 3, and like your app, it exhibits strange behaviour
Also having a problem with air apps not shutting down properly. The window closes, but much of the time the app stays alive in the dock. This also seems to be related to Flex, though I am not certain. Looking around the web, other people also say they have that problem on macs.
Cheers
Jools
August 23rd, 2008 at 1:23 pm
this app is no longer supported by Adobe Air Runtime
September 3rd, 2008 at 9:00 pm
Yes, app is no longer supported. Regrettable since it was just what I needed.
September 4th, 2008 at 5:04 pm
FYI, this example has been updated a while back. Here is the URL:
http://www.graviti.tv/blog/?p=46