Why use s:Line instead of mx:HRule?

Question

When using a mx:HRule or mx:VRule, Flash Builder suggests using a s:Line instead. Why would I want to write stuff like this :

<s:Line xFrom="0" xTo="245" yFrom="0" yTo="1"/>

instead of

<mx:Hrule width="100%" />

How do I get relative sizes ? (percent)

Calpac

Answer 1

Because mx components are being phased out for the better, skinnable Spark components. And why can't you use width=100% with Line? Btw, that line segment won't show anything because you don't have a stroke set. Here's what I think you want:

<s:Line width="100%">
   <s:stroke>
      <s:SolidColorStroke color="#000000" weight="1" caps="square"/>
   </s:stroke>
</s:Line>

If you really just want to make it just one tag, you could always create a new component, call it HRule and have a default style to it.

Amargo

Okay thanks. But still, seems like a lot of text for a simple "line" to me. – Calpac

It is, but again, this is made so that your line can be extremely customizable which is better for the long run. If you want a 'standardized' line, just create a custom component which can be reused. – Amargo

@Zenklys: You only have to do it once. Make a component from it, and then use the component from then on. – Woman

Answer 2

Well you wouldn't want to write stuff like that...

I would probably write it more like this..

<s:Line width="100%">
            <s:stroke>
                <s:SolidColorStroke caps="none" color="#AF0000" joints="miter" miterLimit="4"
                                    weight="2"/>
            </s:stroke>
            <s:filters>
                <s:BevelFilter angle="45.0" blurX="1" blurY="1" distance="1"
                               highlightAlpha="1.0" highlightColor="#FFFFFF" knockout="false"
                               quality="2" shadowAlpha="1.0" shadowColor="#000000" strength="1"
                               type="inner"/>
            </s:filters>
</s:Line>

But it's really up to you. Any of the spark shape primitives can be written using relative positioning and sizing.

edit

Jax beat me to it :)

Gyratory

Answer 3

I had kind of a bug using the S:Line element, it didn't fill the 100% inside my skin. I replaced it with an S:SkinableContainer element like this:

<s:SkinnableContainer backgroundColor="Lime" width="100%" height="10"/>

I found it is a good solution for me, and it also saves space in the code like you mentioned you'd like.

Wilkerson