2
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark"     
           >
    <fx:Style>    
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        s|VGroup {
            gap: 150;
            left: 30;
        }
    </fx:Style>
    <s:VGroup>
        <s:Label text="text1" />
        <s:Label text="text1" />
    </s:VGroup>
</s:Application>

The VGroup is 30 Pixel from left, as assumed (this is my proof that the style is used) But it ignores the given gap. When i feed 'gap="150"' directly into the VGroup-Element, it works. So why is this ignored when coming over css?

thank you for any hint.

cu, Markus

zero323
  • 322,348
  • 103
  • 959
  • 935
Markus Rossler
  • 143
  • 9

1 Answers1

2

Because gap is a 'property' of the VGroup class, not a style. This property is but a wrapper for the VerticalLayout#gap property.

If you use FlashBuilder, you can see the difference between the two in the suggestion list. A property is represented as a green circle. A style is shown as a blue 'Tetris block' shape.

edit Left is also a property but still it does get applied. The reason for this is that in older releases of the Flex SDK baseline, top, bottom, left, right, horizontalCenter and verticalCenter where implemented as styles. So the reason you can still use them as such is backwards compatibility.

RIAstar
  • 11,912
  • 20
  • 37
  • Thank you! this leads me to another question: gap is imho some kind of style property, because it influences the visual impression and has nothing to do with data grouping. So if i want to strictly divide data+logic and visual configuration on the other hand through writing a css file - how can i handle his? If vgroup were skinnable i could write a skinclass and introduce an own css value and read its value to set it manually via actionscript in the skinclass. – Markus Rossler Jan 16 '12 at 08:36
  • @MarkusRossler Think a bit further: VGroup in itself defines a vertical layout which could be considered styling. You can't do _everything_ through CSS and I personally think your CSS file would become unreadable if you could. The idea in the Spark architecture is that you create skin classes that contain the layout and graphical information, which you can the assign to a view through its `skinClass` style. – RIAstar Jan 16 '12 at 09:10
  • Thank you again! Through that i will solve this with a BasicLayout, placeing each Label by css. I personally do not understand that borderline which desides what should be styled via css and what properties should not. But we need not to discuss this here. :-) Thank you again! – Markus Rossler Jan 16 '12 at 10:11