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.
Related
What should be added in order to the vertical scrollbar to be visible without to be clicked or touched ? Here is image of screen :
Here is code :
<s:Scroller width="100%" height="100%">
<s:VGroup width="100%" height="100%" paddingTop="5" verticalAlign="middle" horizontalAlign="center">
<s:TextInput id="chp1" width="50%"/>
<s:TextInput id="chp2" width="50%"/>
<s:Button label="Enregistrer" click="enregistrer(event)" styleName="btn"/>
<s:Label/>
<s:Button label="Lire" click="lire(event)" styleName="btn" />
<s:TextArea id="area"/>
<s:Label/>
<s:HGroup>
<s:Button label="Envoyer" click="send(event)" styleName="btn" />
<s:Button label="Retour" click="navigator.popView()" styleName="btn" />
</s:HGroup>
<s:TextArea id="resultHTTP"/>
<s:TextInput id="h_url" text="{url}" visible="false"/>
</s:VGroup>
</s:Scroller>
As you see the vertical scrollbar at the right of the screen is not visible. So how to make it visible anytime ?
Please try this, on your scroller:
verticalScrollPolicy = "on"
Update:
What about trying this:
interactionMode="mouse"
;)
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>
Is there any Toolbar exists in Flex like c# ToolBar (http://msdn.microsoft.com/en-us/library/ms752063.aspx)
I'm using HBox and clipAndEnableScrolling = true
But I need to have scrolling when content is wider, like c# does
By default, no it doesnt. There might be some components out there that other folks have built though. I have always just rolled my own as needed. I would probably do something like the below. I am sure there are better ways, but brute force works for my needs and hopefully it will help you.
<s:HGroup width="100%">
<s:Button label="scroll left" click="scrollLeftClick()"/>
<s:Scroller width="100%" horizontalScrollPolicy="off">
<s:HGroup>
<s:Button label="button"/>
<s:Button label="button"/>
<s:Button label="button"/>
<s:Button label="button"/>
<s:Button label="button"/>
<s:Button label="button"/>
...//as many more buttons as needed
</s:HGroup>
</s:Scroller>
<s:Button label="scroll right" click="scrollRightClick()"/>
</s:HGroup>
Then as a seperator, you can always use the below in between the buttons:
<s:Line height="100%">
<s:stroke>
<s:SolidColorStroke weight="2"/>
</s:stroke>
</s:Line>
Then just add functions for scrollLeft and scrollRight to move the scrollerPosition and all will be right with the world... in theory anyways.
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.
In flex UI, my <mx:list> can not be shown completely because of other component shelterring (for example: the refresh button shelter part of it ). How can I make the <mx:list> in front of all other UI component.
This is my code:
<s:HGroup verticalAlign="middle">
<s:Label text="Choose Log File"/>
<mx:ComboBox id ="logFileChooseCombo" dataProvider="{fileNameList}" width="150" color="0x000000"
close="changeLogFilesHandler(event);"/>
<mx:Spacer width="320" />
<s:Label text="Filter or HighLight:" />
<mx:ComboBox id ="filterChooseCombo" dataProvider="{filterOrHighlight}" width="150" color="0x000000"/>
<s:VGroup height="25">
<s:TextInput id="logContentInput" change="filterLogContent()"
enabled="true"
focusIn="clearMyTextInput()"
text="Filter/HightLight"
width="250" height="26"/>
**<mx:List id="searchMsgList"** x="65" y="35" width="200" height="200" fontSize="12"
change="itemChangEvent(event);" />
</s:VGroup>
</s:HGroup>
</mx:Canvas>
<s:HGroup verticalAlign="middle">
<s:Label text="Filter By Log Level:"/>
<mx:ComboBox id ="logLevelCombo" dataProvider="{logLevelsInt}" width="150" color="0x000000"
close="changeLogLevelHandler(event);"/>
<s:CheckBox id="showStack" click="showStackTrace(event)" selected="false"/>
<s:Label text="show stackTraces"/>
<mx:Spacer width="550" />
<s:Button id="test" label="refresh2">
</s:Button>
</s:HGroup>
You have a lot going on, with a mix of nested layouts and a mix of Halo and Spark containers. I'm not sure what layout you're trying to create.
That said, take a look at the swapChildren method. Something like this should work:
this.swapChildren(refresh2, searchMsgList);
But it will most likely hide your refresh button, which seems less than ideal.
A few things strike me:
Inside your first VGroup you have x and y values specified. I thought those values were ignored inide VGroups, which automatically position your children in a vertical line.
I see an closing </mx:Canvas> tag, but not an opening canvas tag. It is unusual to me to use a canvas among all the HGroups and VGroups.