I was reading a post about the Top 10 Flex Misconceptions and read in the 2nd section that "Flex also uses CSS for styling of components / applications."
I know since day one Adobe has listed CSS styling as a feature of Flex. But anyone who has used CSS to style a web page knows that Flex does not support CSS. It supports, well, SS.
CSS stands for Cascading Style Sheets. Flex is missing the "Cascading" part of it. CSS is all about using a style sheet to describe the "presentation of the document" (World Wide Web Consortium CSS1). Because of the limited amount of the CSS standard that Flex supports, you really can't define that without a LOT of verbosity.
Let's take some examples of what I'd LIKE to do in Flex, sometimes I can, sometimes I can't. I'd like to set the colors in my scrollbar buttons. Well, I can do this by using the many styles defined in ScrollBar such as upArrowUpSkin, upArrowOverSkin, and upArrowDownSkin. I had to look up the styles for ScrollBar to see if I could do that. Buttons have some nice styles that let you set the background color, but I can't access that so I'll have to replace the skin entirely.
upArrowUpSkin: Embed("myUpArrowUp.png");
... etc.
}
Now if I wanted to change those colors for this area of my app or that area, or for popups only etc. I'd have to go through and make sure each ScrollBar had a styleName that I could then use in the stylesheet for that. Here's what you SHOULD be able to do with CSS:
background-gradient-colors: #999, #555;
}
#certainPartOfMyApp ScrollBar Button.down {
background-gradient-colors: #555, #999;
}
Beautiful! Flex component developers didn't need to add a style on the ScrollBar component for every conceivable style that one might want to change for its buttons. With real CSS you can access them because the selectors allow your styles to cascade down to all scrollbars under the component with an ID of certainPartOfMyApp. I could have had one definition to style ALL buttons under that ScrollBar, but decided to use the styleNames which might be in place if Flex supported this to style each button separately.
Now if you were to use CSS pseudo selectors (e.g. a:hover) and mapped them to a component's "state" then you could really get going. Say your main application has several states in which different areas of the APP are viewable.
is showing. Good-bye ViewStack! */
#app Canvas {
visible: false;
}
#app:login #loginScreen {
visible: true;
}
#app:catalog #catalogScreen {
visible: true;
}
#app:checkout #checkoutScreen {
visible: true;
}
/* We should even be able to set the width/height/x/y in styles shouldn't we? Not just top, left, bottom, and right */
#catalogScreen .leftColumn {
width: 200;
}
#catalogScreen .rightColumn {
width: 100%;
}
#catalogScreen:addToCart .leftColumn {
width: 100%;
}
#catalogScreen:addToCart .rightColumn {
width: 200;
}
Now when I change the state of my app a different view is presented. And when I change the state of my catalogScreen the columns change their size, perhaps throwing an effect in there for smoothness could be part of the CSS as well.
I've put together a full implementation of CSS2 as far as the format is concerned and the selectors etc. It doesn't use the box model etc. that HTML uses, but I'll post a demo of it up here soon. It will of necessity use my own components because there is no way to integrate it into the existing Flex styling framework. I've looked, I've tried. :)
Vote For CSS!
If enough of us ask for it Adobe will give it to us. It's already too late to include in Flex 3 which should be coming out soon, but now is the time to be asking for big changes like this for Flex 4. Go sign up and vote for this feature in Adobe's bug base.