Why use s: Line instead of mx: HRule?

Question

When using mx: HRule or mx: VRule , Flash Builder suggests using s: Line . Why should I write such things:

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

instead

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

How to get relative sizes? (In percents)

Answer 1

As mx components are phasing out for the best, Spark skin components. And why can't you use width = 100% with Line? By the way, this segment will not show anything because you do not have a set of strokes. Here is 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 want to do this with just one tag, you can always create a new component, name it HRule and configure it by default.

Answer 2

Well, you would not want to write such things ...

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 really is up to you. Any of the spark-shaped primitives can be recorded using relative positioning and calibration.

change

Jax beat me up :)

Answer 3

I had a mistake using the S: Line element, it did not fill 100% inside my skin. I replaced it with an S: SkinableContainer element as follows:

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

I found this to be a good solution for me, and it also saves space in the code, as you already mentioned.