Which components should I use to achieve such a visual effect?

Question

Hi,

I found a nice looking app made by Kap Lab. I like the components on the left, especially the grey background with rounded corners. It feels like one solid piece of GUI, despite it's made of four different components. I tried to put VBox, make its background grey, round corners and put other components with sligtly less width on the top of it, but it doesn't seem to work. The corners are not rounded and whole thing looks rather ugly :)

Answer 1

If you mean the box titled "LAYOUT", then it must be a Panel component, which can be easily customized using styles to look that way:

<mx:Style>
    .panelTitle
    {
     font-weight: bold;
     color: #ffffff;
    }
</mx:Style>
<mx:Panel x="300" title="LAYOUT" headerHeight="20" backgroundColor="#CCCCCC" titleStyleName="panelTitle"
        headerColors="[#333333, #333333]" highlightAlphas="[0, 0]"
     borderThicknessLeft="3" borderThicknessRight="3" borderThicknessBottom="3" borderThicknessTop="3">
    <mx:VBox height="300" width="200" backgroundColor="#FFFFFF" />
</mx:Panel>

Answer 2

It looks like a panel with a tab navigator inside it. CSS for the panel like this:

Panel {
   borderStyle: solid;
   borderColor: #d2d2d2;
   borderThickness: 1;
   roundedBottomCorners: true;
   backgroundColor: #e1e1e1;
   dropShadowEnabled: false;
}

I used Flex 3 Style Explorer to generate that. You could try messing around with it to get the styles you want.

Answer 3

Top component is just a VBox. Inside it, you first have a TabNavigator then a DataGrid and the last component is also a VBox which contains a Hbox with a simple Label and an Accordion

Vbox

• TabNavigator
• DataGrid
• VBox
  • Hbox
    • Label
  • Accordion