Question

How could I add separating line around HBox children component?

Like if I choose borderstyle as solid for the hbox, the problem is the line between the children component, like text components, who could I show it in efficient way, not just adding HBox to each element.

Answer 1

A HBox is just a box with a horizontal layout of children – it doesn’t actually have vertical lines running between those children, so you’re not going to be able to use borders or anything on the HBox.

Your best bet is probably adding VRule components in between each child component, something like:

<mx:HBox width="100%" borderColor="#000000" borderStyle="solid">
    <mx:Image />
    <mx:VRule height="100%" strokeColor="#000000" strokeWidth="1"/>
    <mx:Image />
    <mx:VRule height="100%" strokeColor="#000000" strokeWidth="1"/>
    <mx:Image />
</mx:HBox>

You can adjust the VRule and HBox border styles to be consistent however you like. The only other options I can think of are to put borders around each child component with no border on the HBox (may need child padding depending on your components), embed all your components in Box components within the HBox like you suggest, or doing something completely crazy like using a HorizontalList and embedding your components in a custom item renderer that is a consistent size with a border.

Personally I’d just use VRule separators and move on. I’d rather double up on children than have all my components of interest one family level deeper in the HBox. If you need to generate your HBox children from a variable array or suchlike, then you may want to put each one in a Box and use a Repeater or something. Some more detail would help for more specific answers.