I want to add two icons on spark button.I am using button skin.
But the icons are not coming properly. Do anyone is having any idea?
The code is:
<s:HGroup width="100%">
<s:HGroup id="iconContainer" top="1" bottom="1" left="0" right="0"
horizontalAlign="{iconPosition}" verticalAlign="middle">
<mx:Image id="iconImage" source="{icon}" />
</s:HGroup>
<s:HGroup id="decoratorContainer"
width="100%">
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1"
left="0" right="0" top="2" bottom="2">
</s:Label>
<mx:Image id="image" source="{decorator}" />
</s:HGroup>
</s:HGroup>
Give absolute width and height to 'iconImage' and 'image' OR override commitProperties by calling invalidateProperties once the image size is known by the works of {Binding}. Hope it helped.
Related
I'm trying to make a BitmapImage tag be as wide as its container, while scaling the bitmap. I achieved it using this code, which I think you'll find obvious:
<s:BitmapImage id='image' width='100%' source='assets/eyes.jpg' scaleMode="letterbox"/>
The problem I'm having is that under certain combinations of container width and image size, the bitmap doesn't show at all. I reduced the problem to discover that if I round up (or down) the height of the BitmapImage (using a timer, for instance), it displays perfectly. So I'm assuming the problem has to do with the height being some weird decimal number (although it does work with some non-integral heights).
Did someone found the same problem? I have code to reproduce it if you need it.
<s:Group id="grp" width="50%" height="50%" horizontalCenter="0" verticalCenter="0" color="RED" >
<s:BitmapImage id="bmpImg" depth="100" width="{grp.width - 20}" height="{grp.height - 30}"
source="#Embed('assets/image1.jpg')"
horizontalCenter="0" verticalCenter="0">
<s:mask>
<s:BorderContainer id="bmpMask"
cornerRadius="{sl.value}"
width="{bmpImg.width}" height="{bmpImg.height}" />
</s:mask>
</s:BitmapImage>
</s:Group>
<s:controlBarContent>
<mx:Form id="fid">
<mx:FormItem id="fiid" label="cornerRadius:">
<s:HSlider id="sl"
minimum="0"
maximum="{bmpImg.height/2}" />
</mx:FormItem>
</mx:Form>
</s:controlBarContent>
<s:Group id="grp" width="50%" height="50%" horizontalCenter="0" verticalCenter="0" color="RED" >
<s:BitmapImage id="bmpImg" depth="100" width="{grp.width}" height="{grp.height}"
source="#Embed('assets/image1.jpg')"
horizontalCenter="0" verticalCenter="0">
<s:mask>
<s:BorderContainer id="bmpMask"
cornerRadius="{sl.value}"
width="{bmpImg.width}" height="{bmpImg.height}" />
</s:mask>
</s:BitmapImage>
</s:Group>
I've created a skin that allows me to have two labels on a spark button, but the button text won't center vertically. It stays at the top of the button no matter what settings I give it. The icon in the skin DOES however, center vertically.
This is the skin:
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
minWidth="82" minHeight="82"
alpha.disabled="0.5" initialize="autoIconManagement=false">
<fx:Metadata>[HostComponent("com.XXXX.components.TwoLineButton")]</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Image source="{getStyle('upSkin')}"
source.over="{getStyle('overSkin')}"
source.down="{getStyle('downSkin')}"
source.disabled="{getStyle('disabledSkin')}"
width="100%" height="100%"
/>
<s:HGroup verticalAlign="middle" height="100%" width="100%"
paddingLeft="{getStyle('paddingLeft')}"
paddingRight="{getStyle('paddingRight')}"
paddingTop="{getStyle('paddingTop')}"
paddingBottom="{getStyle('paddingBottom')}"
gap="{getStyle('horizontalGap')}"
verticalCenter="0">
<s:BitmapImage id="iconDisplay" includeInLayout="{iconDisplay.source}"/>
<s:VGroup gap="{getStyle('verticalGap')}" height="100%" width="100%">
<s:Label id="labelDisplay"
textAlign="center"
width="100%"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
left="10" right="10" top="2" bottom="2">
</s:Label>
<s:Label id="bottomLabelDisplay"
textAlign="center"
width="100%"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
left="10" right="10" top="2" bottom="2">
</s:Label>
</s:VGroup>
</s:HGroup>
This is the code I'm calling it with:
<components:TwoLineButton
width="308"
label="TopLabel"
bottomLabel="Bottom label"
click="handleButtonClick(event)"
/>
I've tried making the HGroup use a hardcoded height value, and that doesn't work either.
Thanks in advance.
You cannot use absolute constraints like 'x', 'y', 'left', 'right', 'top', 'bottom', 'horizontalCenter', 'verticalCenter', ... inside a relative layout like VerticalLayout (VGroup is just a Group with a VerticalLayout). This makes sense since you can't position something both relatively and absolutely. In this case the layout of the container takes precedence over whatever constraints you put on the child component. This means you can simply remove any of these constraints you have there: they simply don't have any effect.
Also 'verticalAlign' is a style you apply to a container, but it tells the container how to layout its children. You've assigned it to the Labels, so you're saying "lay out the text component inside the Label in the middle of the Label component" and not "layout the Label component in the middle of the VGroup". So this one is also redundant.
Something like the following should fix your issue:
<s:VGroup height="200">
<s:Label text="A" height="50%" verticalAlign="middle" />
<s:Label text="B" height="50%" verticalAlign="middle" />
</s:VGroup>
or if you want both Labels grouped together in the middle of the VGroup (it's not apparent from the description which one of both you want):
<s:VGroup height="200" verticalAlign="middle">
<s:Label text="A" />
<s:Label text="B" />
</s:VGroup>
The HGroup in your skin should look something like this:
<s:HGroup verticalAlign="middle" height="100%" width="100%"
paddingLeft="{getStyle('paddingLeft')}"
paddingRight="{getStyle('paddingRight')}"
paddingTop="{getStyle('paddingTop')}"
paddingBottom="{getStyle('paddingBottom')}"
gap="{getStyle('horizontalGap')}" >
<s:BitmapImage id="iconDisplay" includeInLayout="{iconDisplay.source}"/>
<s:VGroup gap="{getStyle('verticalGap')}" width="100%" verticalAlign="middle" >
<!-- not sure if you need 100% width here -->
<s:Label id="labelDisplay"
textAlign="center"
width="100%"
maxDisplayedLines="1">
</s:Label>
<s:Label id="bottomLabelDisplay"
textAlign="center"
width="100%"
maxDisplayedLines="1">
</s:Label>
</s:VGroup>
</s:HGroup>
Your labels are in a VGroup so attributes like verticalCenter, horizontalCenter, top, left, etc. do not apply. These attributes only work in BasicLayout (absolutely positioned layouts).
I also removed the 100% height on the VGroup that contained the labels. This means that group of labels will only be as tall as necessary (so now we can actually center it).
Finally, added verticalAlign="middle" to the VGroup. Since the parent of this group is an HGroup, the VGroup should be positioned horizontally next to the BitmapImage if present, and vertically aligned in the middle.
I have a Hgroup that contains of four panels. Sometimes it happens then when users open it the panls have a unknown width even bigger than the window resolution.
does anyone know what the problem is or how to solve it?
<s:Scroller width="100%" height="100%" >
<s:Group width="100%" height="100%">
<s:VGroup gap="10" width="100%">
<s:TextInput/>
<s:Line width="100%"><s:stroke><s:SolidColorStroke color="#696969"/></s:stroke></s:Line>
<s:HGroup gap="20" width="100%">
<s:Panel width="100%"/>
<s:Panel width="100%"/>
<s:Panel width="100%"/>
<s:Panel width="100%"/>
</s:HGroup>
<s:TextInput/>
</s:VGroup>
</s:Group>
</s:Scroller>
it seems that the User who was testing it was using an older version of the flash player! updating this. fixed the problem.
I would like to right align an icon on a button or tabbarbutton and keep the text left aligned in Flex 4.0 Spark.
So far, I've come up with something like the following in my custom skin:
<s:HGroup>
<s:HGroup horizontalAlign="left">
<s:Label id="labelDisplay"
textAlign="left"
maxDisplayedLines="1"
top="10">
</s:Label>
</s:HGroup>
<s:HGroup horizontalAlign="right" bottom="5" right="0">
<s:BitmapImage source="#Embed('assets/images/icons/close.png')" />
</s:HGroup>
</s:HGroup>
But it seems silly to have an HGroup with 2 HGroup children just to get the horizontalAlign to the right.
Anyone know of a better way?
Thx,
=Dave
You could set the width of the label to be 100%.
<s:HGroup>
<s:Label id="labelDisplay" width="100%"/>
<s:BitmapImage source="#Embed('assets/images/icons/close.png')" />
</s:HGroup>
If your buttons are all an explicit width, you could also try something like this:
<s:HGroup>
<s:Label id="labelDisplay"/>
<mx:Spacer width="100%"/>
<s:BitmapImage source="#Embed('assets/images/icons/close.png')" />
</s:HGroup>
I am creating a vertical button bar with 3 buttons.
How do I force the same width for all three buttons so it doesn't look like crap?
<s:ButtonBar x="10" y="10" dataProvider="{viewstack1}" >
<s:layout>
<s:VerticalLayout gap="-1"/>
</s:layout>
</s:ButtonBar>
<mx:ViewStack id="viewstack1" left="115" paddingRight="0" right="0" bottom="0" top="0">
<s:NavigatorContent label="ABC Products" width="100%" height="100%"><custom:Banner width="100%" height="100%"/></s:NavigatorContent>
<s:NavigatorContent label="Btn Player" width="100%" height="100%"><custom:Player /></s:NavigatorContent>
<s:NavigatorContent label="Btn Cleaner" width="100%" height="100%"><custom:Cleaner width="100%"/></s:NavigatorContent>
</mx:ViewStack>
I had that problem too so I dropped s:VerticalLayout and used s:TileLayout with a fixed column width and it worked
<s:ButtonBar width="142" dataProvider="{almacen}" left="10" top="10">
<s:layout>
<s:TileLayout columnWidth="142"/>
</s:layout>
</s:ButtonBar>
Remember to define the gap, in order to avoid distance between the buttons
<s:layout>
<s:TileLayout verticalGap="-1" />
</s:layout>
Without forcing the width or setting the columnWidth in tile layout you can achieve the same result using horizontalAlign property of the vertical layout.
<s:ButtonBar id="btnBarVertical1" dataProvider="{menuData}" requireSelection="true" labelField="label">
<s:layout>
<s:VerticalLayout gap="-1" horizontalAlign="justify"/>
</s:layout>
</s:ButtonBar>
For icon based button bar apply the same property with iconPlacement to top like this...
<s:ButtonBar id="btnBarVertical2" dataProvider="{menuDataWithIcon}" requireSelection="true" labelField="label"
iconField="icon" iconPlacement="top">
<s:layout>
<s:VerticalLayout gap="-1" horizontalAlign="justify"/>
</s:layout>
</s:ButtonBar>
I hope this will help for dynamic text lengths...
Happy Flexing.