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.
Related
I have to display a lot of controls in my application. And I have done it using Group .
<s:Group clipAndEnableScrolling="true" >
<s:Scroller horizontalScrollPolicy="auto" verticalScrollPolicy="auto" top="0" bottom="0" right="0" left="0">
<s:Group clipAndEnableScrolling="true" >
<s:layout>
<s:VerticalLayout paddingTop="30" paddingLeft="20" paddingRight="20"/>
</s:layout>
<s:HGroup horizontalAlign="left" verticalAlign="top">
<s:Button id="clearButton" label="Clear"/>
<s:Button id="addEmployee" label="Add"/>
</s:HGroup>
<s:HGroup horizontalAlign="left" verticalAlign="top">
<s:Label id="mainLabel" text="Employee Details"/>
</s:HGroup>
<s:HGroup horizontalAlign="left" verticalAlign="top">
// some more components
</s:HGroup>
<s:HGroup horizontalAlign="left" verticalAlign="top">
<s:DataGrid id="grid">
// Grid column
</s:DataGrid>
</s:HGroup>
<s:HGroup horizontalAlign="left" verticalAlign="top">
<s:DataGrid id="dataGrid">
// Grid column
</s:DataGrid>
</s:HGroup>
</s:Group>
</s:Scroller>
</s:Group>
For this code, there is no scrollbar for both Grop and DataGrid. I don't have any idea about this scroller. How to add scrollbar in it? or How can I arrange my components?
First, you have to set height and width property for the Group container scroller. Than you have to set
verticalScrollPolicy="on" horizontalScrollPolicy="on"
for both DataGrid
And here, there is no need of Group before the scroller.
It seems like your group doesn't have a width or height set, but instead the top, right, bottom and left. I'd assume its not triggering the scroller to be necessary based on the contents.
Restrict the dimensions of the scroller component (width and height) and make sure the group's contents are larger than the scroller.
also, you can specify "viewport" on the scroller and pass in the id of the group inside.
the default value for viewport is null.
reference: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Scroller.html
-AJ
I have a Spark form with horizontal layout and I would like to reduce the top and bottom vertical padding.
Neighter using the paddingBottom/paddingTop on the HorizontalLayout nor using the paragraphSpaceAfter/paragraphSpaceBefore of the FormItem reduces the vertical space before and after the form.
<s:Form width="100%" height="50%" fontSize="15">
<s:layout>
<s:HorizontalLayout verticalAlign="middle" gap="3" paddingBottom="0" paddingTop="0">
</s:HorizontalLayout>
</s:layout>
<s:FormItem >
<mx:DateField id="selDateFrom" formatString="DD/MM/YYYY" selectedDate="{new Date()}">
</mx:DateField>
</s:FormItem>
<s:FormItem >
<mx:DateField id="selDateTo" formatString="DD/MM/YYYY" >
</mx:DateField>
</s:FormItem>
</s:Form>
Can someone help me?
Davide
I create a custom FormSkin like this one and it works:
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5">
[...]
<s:Group id="contentGroup" showErrorSkin="true" showErrorTip="true"
left="0" right="0" top="0" bottom="0">
<s:layout>
<s:FormLayout gap="7"/>
</s:layout>
</s:Group>
</s:Skin>
Thanks
I have an mx accordian in my application like.
<mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Accordion id="accSubmenu" />
</mx:VBox>
Accordian has NavigatorContents as its elements..
<s:Group clipAndEnableScrolling="true">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Scroller id="scrlSubMenu"
horizontalScrollPolicy="off"
hasFocusableChildren="true">
<s:DataGroup id="lstSubMenu"
clipAndEnableScrolling="true"
hasFocusableChildren="true"
itemRenderer="renderers.SubmenuItmRndr">
<s:layout>
<s:TileLayout/>
</s:layout>
</s:DataGroup>
</s:Scroller>
itemRenderer is of HoverImage as below..
<s:ItemRenderer clipAndEnableScrolling="true"
autoDrawBackground="false" >
<s:layout>
<s:VerticalLayout/>
</s:layout>
<controls:HoverImage toolTip="{data.Name}" source="{'assets/' + data.IconFileName}"/>
</s:ItemRenderer>
I want keyboard navigation(Tab focus) on images inside itemRenderer..
Could anybody help me to get solution?
i have the following code:
<s:ButtonBar id="tabs" y="15" left="0" height="31"
change="VideosMenuBar_changeHandler(event)" requireSelection="true">
<s:layout>
<s:HorizontalLayout gap="1" columnWidth="180" variableColumnWidth="false"
/>
</s:layout>
<s:ArrayCollection>
<fx:String>Latest Videos</fx:String>
<fx:String>Last Week Videos</fx:String>
<fx:String>Last Month Videos</fx:String>
</s:ArrayCollection>
</s:ButtonBar>
how can i change the height of the buttons in this buttonbar?? is it possible without extra skin class??
i solved the problem with the answer of Maxim Kachurovskiy given above by putting
<s:HorizontalLayout verticalAlign="justify" .../>
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.