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" .../>
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 know I have done this before but every time I work with scrollers and group it doesn't work for me and kills my 2 days.
<s:Scroller width="100%" height="100%" horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
<s:Group clipAndEnableScrolling="true">...... ..... </s:Group></s:Scroller>
This is what I have. I have components inside my group with is more than enough to bring scrollers even on a big monitor. But I am not getting any scrollbars.
Kindly tell me what is that I am doing wrong here. because everytime I fix it and I struggle for the next time.
Thanks.
Try with this
Your scroller parent container need to set non-percentage height/width.
<s:BorderContainer width="120" height="100" backgroundColor="#FFFFFF">
<s:Scroller width="100%" height="100%">
<s:Group>
<s:layout>
<s:VerticalLayout horizontalAlign="justify"
clipAndEnableScrolling="true" />
</s:layout>
<s:Button label="button (1)" />
<s:Button label="button (2)" />
<s:Button label="button (3)" />
<s:Button label="button (4)" />
<s:Button label="button (5)" />
<s:Button label="button (6)" />
</s:Group>
</s:Scroller>
</s:BorderContainer>
Thank you for all your responses. After setting the minHeight it now works. I am able to achieve the scrollbars as expected (make it look like browser's scroll bar). Below is the code snippet
<s:Scroller width="100%" maxHeight="{this.height}">
<s:VGroup width="100%" minHeight="1000" height="100%" paddingLeft="40" paddingRight="40" paddingTop="0" >
..</s:VGroup></s:Scroller>
Kindly let me know if there is a better approach.
The Same code given by "Raja Jaganathan" itself will work with small modification on scroll parent height and width
Capabilities.screenResolutionX, Capabilities.screenResolutionY will give you the browser width and height respectively.
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 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.
i have an HGroup that contains a DataGroup with an ArrayCollection for a dataProvider.
the DataGroup has a VScrollBar attached to it.
how can i make sure that whenever new rows are added to the ArrayCollection, the dataGroup will scroll down ?
this window is gonna be used for a chat application so whenever new rows are added i need to see the new rows.
i know that i can perform the following command to scroll down: chatScrollBar.value=chatScrollbar.maximum
but what event do i need to attach to in order to run this command whenever a new row is visible ?
<s:HGroup width="100%">
<s:DataGroup id="vertView"
clipAndEnableScrolling="true" width="100%" height="60"
dataProvider="{chatMessages}">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="100%" height="8">
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
</s:states>
<s:RichText text="{ data }" textAlign="left" paddingLeft="2" color="black" color.hovered="blue"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:layout>
<s:VerticalLayout useVirtualLayout="true"/>
</s:layout>
</s:DataGroup>
<s:VScrollBar id="chatScrollBar" viewport="{vertView}"
height="{vertView.height}" />
</s:HGroup>
You have to set the verticalScrollPosition. See here or here. Or try this for a Spark List:
<s:List id="list"
horizontalCenter="0"
verticalCenter="0">
<s:layout>
<s:VerticalLayout id="vLayout" requestedRowCount="4"
verticalScrollPosition="{vLayout.maxScrollPosition}" />
</s:layout>
</s:list>
Try using Scroller, I think it is as simple as:
<s:Scroller >
<s:HGroup>
...
</s:HGroup>
</s:Scroller>
You shouldn't need to hook up your own scrollbar.