Yes, it’s a slow coding day here at polyGeek.com. All I got for you is a css-style but it’s a good one. I read WIRED.com quite a bit and I really like the font-style they use for the articles. So, I copied it as a style to use in some of my Flex apps.

.WIRED {
	font-family: 		'font-family: Arial, Helvetica, sans-serif';
	font-size:		14;
	line-height:		19;
	color:			#333333;
}

You can see a sample below. The top text is an image that I got from doing a screen-capture. The bottom text is a RichEditableText component. The only thing that’s off between the two styles is the letter spacing.

It isn’t going to make headlines but being able to apply multiple styles to a component in Flex 4 is great. I find that it really helps keep my CSS more organized and modular. Below is a simple example in which you can apply many different styles to the same <TextInput>.

Now what I do is define certain global css styles such as colors separately from other styles so that I only need to update one specific style if I want to apply changes across the board.

One thing that is confusing to me is the order in which styles are applied and how conflicts are resolved. It seems that in general the last style listed wins. So setting the font-size to 10 and then later to 20 means that it will get a size of 20. However that logic doesn’t apply to the color. It seems that blue wins over everything. Perhaps it’s just and issue with the beta-ness of Flex 4 right now.

An example of how useful this is comes with the style clearBox with the following properties:

border-visible:              false;
content-background-alpha:    0.0;

It’s really handy having that on tap to make my <TextArea> and <TextInput> background and borders disappear without having to set the properties on each and every instance.

Sometimes it’s the simple things that make us happy. And for me one of those simple things is just how easy it is to make a <s:Button> look like an HTML link with Flex 4.

If you’re an HTML coder then first, “WTF you doin’ on my blog hillbilly boy?” and second you’re probably thinking, “Yeah, or you could just use HTML in the first place and actually have regular links. That may be true but can your regular links do this?

I’m laughing at the superior web standard. ( from??? ) And if you can do that with your shitty Javascript then can you do it in just 5 minutes – on all browsers? ‘Cause that’s all it took me and I’m being generous.

Watch the music-video tutorial

Show me some skin
Here’s all that you need in your HTMLBtn skin file. I said it was easy. Was I right or was I right? :)

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";

	.upStyle { color: #0000FF; }
	.overStyle { color: #009900; }
	.downStyle { color: #00FF00; }
	.disabledStyle { color: #666666; }

</fx:Style>

<s:states>
	<s:State name="up" />
	<s:State name="over" />
	<s:State name="down" />
	<s:State name="disabled" />
</s:states>

<s:transitions>
	<s:Transition toState="over" autoReverse="true">
		<s:Resize target="{ underlineOver }" />
	</s:Transition>

	<s:Transition toState="up" autoReverse="true">
		<s:Resize target="{ underlineOver }" />
	</s:Transition>
</s:transitions>

<s:Label
	id="labelDisplay"
	styleName.up="upStyle"
	styleName.over="overStyle"
	styleName.down="downStyle"
	styleName.disabled="disabledStyle"/>

<!--This is the blue line that is always present-->
<s:Rect
	width="100%" height="1"
	bottom="0" horizontalCenter="0">
	<s:fill>
		<s:SolidColor color="#0000FF"/>
	</s:fill>
</s:Rect>

<!--This is the green underline that grows out to 100%
width when the mouse moves over and then shrinks
back to 0 width when the mouse moves out.-->
<s:Rect id="underlineOver"
	width.over="100%" width.up="0" height="1"
	bottom="0" horizontalCenter="0">
	<s:fill>
		<s:SolidColor color="#009900"/>
	</s:fill>
</s:Rect>

</s:Skin>

Notice that the <Resize> Transitions only specify a target. You don’t have to bother with telling it exactly what width to transition to. It figures that out from the properties of the target. In this case it’s the <Rect> which has width.up=”0″ and width.over=”100%”. Have I said lately that I love Flex 4 states?

If you are dynamically instantiating custom components in Flex 4 you may have run into a strange runtime error:

ArgumentError: Undefined state ‘closed’.
at mx.core::UIComponent/getState()
…

You’re state name may be different but it’s still caused by the same issue. Basically you have no skinClass assigned to your component. So your component has no idea what to do with it’s current state. It’s no problem if you declare the component in MXML because there you can assign the skinClass. But if you are creating it dynamically you would think something like the following might work:

var myComponent:CustomComponent = new CustomComponent();
myComponent.skinClass = 'skins.CustomComponentSkin';

But you cannot do that. The only way that I know of to assign the skin is via CSS like this:

comps|CustomComponent {
	skinClass:  ClassReference( 'skins.CustomComponentSkin' );
}

That is a Type selector and so will work but only in the Application root. If you try that from inside another component then you’ll see a warning: CSS type selectors are not supported in components: ‘whateverComponentYouAreIn’.

You will have to take the above CSS and place it in the <s:Application> or in a CSS file that is declared in the <s:Application>

Upon further review
After doing a little research I’ve discovered that this is nothing new. The same situation applied in the MX days. I think I only noticed this problem recently because I always placed my CSS in a file declared in the <mx:Application>. However with a custom component it just seems natural to declare it’s CSS in the hostComponent. But I guess we’ll have none of that.

The only problem I find with this is what If I want to use different skins in different parts of my application? If anyone has a suggestion as to how to make that happen for dynamically created components then please comment.

First off, kudos to the Flex Builder team for creating a remarkable framework. You guys/gals rock! 99.9 % of the time.

<rant>

With that being said, what the frak were you thinking about when you named the styles for the font colors on <Button> states? You started out good with the Embed skin names:  upSkin, overSkin, pressSkin, disabledSkin. No problems there. All very self descriptive. Thank you.

However, to change the text color on a button for those 4 states is a bit tricky. First there’s color. That’s just the default color of the text in the up-state. The style name is a bit ambiguous don’t you think? Perhaps textColorUp would be more appropriate.

I don’t change the text colors for the hover and press states all the time so it’s easy to forget what they are. When I do look for them I look for, naturally, over and press text colors. But there aren’t any. This time the style names are perfectly descriptive textRollOverColor and textSelectedColor. The problem is that the skins are named by overSkin and pressSkin, respectively. One or the other would be just fine. I’d vote for textOverColor and textPressColor.

Besides, if I didn’t know any better I’d think that textSelectedColor was the color of the text when it is selected with the mouse.

Then we get to the last state: disabled. Or if you are more politically correct then call it the mousePressChallenged state. :) The style for this state is disabledColor. Which again begs the question: the color of what part of the button in the disabled state?

When I name properties I try to keep things grouped so that they all show up together in the code hinting and also so that if you find one of them you’ll know the other 3. I would name the styles as such:

• textColorUp
• textColorOver
• textColorPressed
• textColorDisabled

Then all anyone would have to do is type textC… and get the code hinting for all of the textColor states.

</rant>

At least now that I’ve bothered to blog about this I’m more likely to remember the cryptic styles names in the future. But then hopefully the style names will change in Gumbo and I won’t have to burden my feeble brain with these details.