i am building a AS3-Class extending SkinnableContainer. Vertical scrolling only.
public class Part extends SkinnableContainer {
public function Part() {
var scroller : Scroller = new Scroller();
scroller.percentHeight = 100;
addElement(scroller);
var content : VGroup = new VGroup();
scroller.viewport = content;
fillContent();
}
protected function fillContent():void {...}
}
Several instances of them are placed in a HGroup, everytime
the height of the HGroup or
the content in one of the instances
changes, the widths of the instances vary because some of them get a ScrollBar depending on their height.
How can i preserve the space which will be needed for a forthcoming ScrollBar?
scroller.measuredSizeIncludesScrollBars=true
does not lead to success.
Thank you for any hint.
My understanding is that you want there to always be a scrollbars width of space to the right of each component, so that your scrollbars will just slot in without causing repositioning, correct? If that is wrong you can stop reading now!
You should be able to achieve this by setting the verticalScrollPolicy style to ON (default is AUTO):
scroller.setStyle("verticalScrollPolicy", ScrollPolicy.ON);
This will mean that scrollbars are always visible, but when scrolling isn't possible they are disabled. If you need to hide disabled scrollbars you may need to reskin them or something similar.
Hope that helps!
Related
I have an HBox with width=500.
I actually want to add two arrows buttons that will scroll the contents of the HBox.
But when I turn HBox's scroll policy to off, I can't scroll it programmatically using horizontalScrollPosition.
What should i do now?
Thanks
I've hacked together this custom HBox that you could use. Simply set horizontalScrollPolicy to either "on" or "auto". I really haven't tested it all that much, works for a simple test I did...
public class CustomHBox extends HBox
{
override public function validateDisplayList():void
{
super.validateDisplayList();
if (horizontalScrollBar)
horizontalScrollBar.visible = false;
}
}
Scroll bars will not be displayed when scrollPolicy is turned off.
I think for what you want, you want to subclass ScrollBar make it look and feel the way you would like, then set it on your Container.horizontalScrollBar
I'm no Flex expert, but this is possible without too much trouble (using Flex SDK 3.2, anyway). You're right - when you turn off the horizontalScrollPolicy, the maxHorizontalScollPosition is set to 0, UNLESS you specify both a width value AND a maxWidth value. Then, maxHorizontalScrollPosition will again contain a useable value, and you'll be able to programmatically set the horizontalScrollPosition.
I have an HBox displaying a series of canvases. I am removing a child of a canvas and adding it to the rawChildren of the containing HBox, so I can position it, and make it appear to shift outside the bounds of the canvas.
Here is the code from the canvas:
private function onMouseOver(e:MouseEvent):void
{
(this.parent as HBox).rawChildren.addChild(dateLabel);
dateLabel.x = (this.parent as HBox).localToGlobal(new Point(this.x,0)).x - 18;
}
private function onMouseOut(e:MouseEvent):void
{
addChild(dateLabel);
dateLabel.x = 0;
}
It works, but if the containing HBox.horizontalAlign is set to "right", when I add the child back to the Canvas, the HBox stops displaying correctly and puts all the child canvases overlapping on the right. There is no issue if the HBox is aligned "left" tho.
Is this a bug? Is there a work around?
Thanks!!
Is this a bug? Is there a work around?
- John Isaacks
This isn't a bug as such, it's more that you are using a container in an unusual way.
When you use an HBox you are making a decision that all children are laid out in a linear, horizontal arrangement according to the rules of the HBox component.
Explicitly positioning a child is not what HBoxes are about - it's not in their job description.
I would recommend that you have an HBox inside a Canvas. You can add the dateLabel to the HBox when it should be laid out horizontally or move it to the Canvas when you need to set its position and make it look like it's outside the HBox.
When you use rawChildren, you simply bypass the layout mechanism.
You should use addChild or addChildAt directly on the component.
I have an application control bar at the bottom of my Flex application (with attributes width="100%", dock="false", left="0", bottom="0", height="50"). It contains a lot of elements (like buttons and labels). The width of the SWF is the width of the browser.
When the user makes the width of the browser window smaller, after a certain point, the components on the application control bar gets "squished": they are forced on top of each other. And so, it becomes confusing and ugly. To ensure that that doesn't happen, I've set the minWidth attribute to a value so that it'll always display the components without them overlapping each other.
But then, a horizontal scrollbar appears and hides the bottom half of the application control bar.
I've googled and I found this article: flex verticalscrollpolicy bug (referenced by this SO question: Flex: Prevent scrollbar from covering content when automatically displayed).
But that seems to apply only to a fixed size component. My component's width is a percentage. Any ideas on how to have the horizontal scrollbar appear and have it not cover up the application control bar?
Thanks!
See if adding the following code to the overriden validateSize method (as in the scrollpolicy bug page you linked to) solves the problem.
if (width < measuredWidth)
{
height = normal-height + height-of-the-horizontal-scrollbar;
}
else
height = normal-height;
(Find the normal height of the application control bar and the scroll bar (trace them out) and use those values).
So this happens when the ApplicationControlBar is fixed at the bottom: bottom=0 and left=0. The easiest solution is to make the bar a lot taller (that'll push the content way higher than the scrollbar height). But that makes it kinda ugly.
So another solution: in the MXML file, I capture the Resize event. And in that function, I do this:
if (width < bar.minWidth) // width is the width of the SWF
{
bar.height = ORIGINAL_SIZE + 10;
hbox.setStyle("verticalAlign", "top");
hbox.setStyle("verticalCenter", -10);
} else {
// normal case
box.height = ORIGINAL_SIZE;
hbox.setStyle("verticalAlign", "middle");
hbox.setStyle("verticalCenter", 0);
}
And the horizontal scrollbar doesn't hide the content anymore! Also, the Resize event doesn't get triggered when the bar has a minWidth & the width of the stage is less than that.
I had this come up today and I slightly tweaked sri's if statement like this:
if (buttonContainer.horizontalScrollbar)
{
// Change height & style properties
}
else
{
// Return to original properties.
}
In my project we needed to make the scollbars look like Windows scrollbars.
Therefore I have a thumbIcon on the thumb of a vertical scrollbar, but if I get too many items in the combobox, the scrollbar gets fiddly. This is because the margin between the thumbIcon and the border of the thumbSkin is too small.
Is there a way to set the minimum height of the thumbSkin so that I can ensure there is always a margin there and it always looks good, even if there are too many items?
Fiddly scroll bar http://img97.imageshack.us/img97/7057/nomargins.gif
Image above, see the thumb? By the thumbIcon I mean the 3 horizontal lines. The top and bottom margin between this icon and the border of the thumb itself is too small.
Normal scroll bar http://img15.imageshack.us/img15/5527/margins.gif
This is the normal scroll bar, the thumbIcon and the borders of the thumb have enough margin, which make the scroll bar look a lot better.
You should be able to extend (or if you feel really brave, edit) the ScrollThumb class, there's a minimum height setting in there of 10, which I agree is quite small.
Then you will want to extend the scrollBar class and set the style of the thumbUpSkin of to use that new extended ScrollThumb class.
Finaly you will want to extend your dropdown control to use the new extended scrollBar class.
I'd be more specific, but I'm not comfortable with extending classes and overriding stuff yet, maybe someone better at that will see my answer here and give a good code example.
There's an advantage to editing the class, in that you won't have to then extend all the other classes involved, but the disadvantage is that every ScrollBar in projects compiled on your SDK will use your new minimum height setting, and if it's compiled with a "pristine" SDK (maybe by a co-worker) it would be whatever the setting is in that SDK which could lead to some really difficult trouble-shooting in the future.
An alternative to overriding the classes is to get a reference to the the scrollThumb as a child of the ScrollBar.
var scrollThumb:ScrollThumb = hScrollBar.getChildAt(2) as ScrollThumb;
scrollThumb.minHeight = 50;
This is not ideal as it's dependent on the index of the ScrollThumb but I doubt that's likely to change and it's simpler than overriding the flex classes.
Here is the solution I found for enforcing a minimum size for the scroll thumb. I extended HScrollBar and VScrollBar and overrode the setScrollProperties method, to set the minimum size. Here is the HScrollBar version:
package your.package
{
import mx.controls.HScrollBar;
import mx.core.mx_internal;
use namespace mx_internal;
public class LargeThumbHScrollBar extends HScrollBar
{
public function LargeThumbHScrollBar()
{
super();
}
public override function setScrollProperties(pageSize:Number,
minScrollPosition:Number,
maxScrollPosition:Number,
pageScrollSize:Number = 0):void
{
super.setScrollProperties(pageSize, minScrollPosition, maxScrollPosition, pageScrollSize);
if (scrollThumb) {
scrollThumb.explicitMinHeight = 100;
}
}
}
}
For both HScrollBar and VScrollBar you set the explicitMinHeight (don't set explicitMinWidth in either version).
I'm not sure how to get the default scrollbars for a component to use the subclasses, though. I didn't have to tackle that problem because we were adding the scrollbars on ourselves. A quick google search didn't turn up any answers.
I'm trying to style vscrollbar and hscrollbar inside a Vbox.But there's always a white square thing at the right bottom cornor which can not be styled.
My CSS is:
ScrollBar{
downArrowUpSkin: Embed(source="assets/images/scrollbar/arrow_down.png");
downArrowOverSkin: Embed(source="assets/images/scrollbar/arrow_down.png");
downArrowDownSkin: Embed(source="assets/images/scrollbar/arrow_down.png");
upArrowUpSkin: Embed(source="assets/images/scrollbar/arrow_up.png");
upArrowOverSkin: Embed(source="assets/images/scrollbar/arrow_up.png");
upArrowDownSkin: Embed(source="assets/images/scrollbar/arrow_up.png");
thumbDownSkin: Embed(source="assets/images/scrollbar/thumb.png");
thumbUpSkin: Embed(source="assets/images/scrollbar/thumb.png");
thumbOverSkin: Embed(source="assets/images/scrollbar/thumb.png");
trackSkin:Embed(source="assets/images/scrollbar/track.png");
fillAlphas:0,0,0,0;}
Could anyone help me out?Much Thanks!
This is a weird one. The white box at the bottom right is actually a (raw) child of the container.
To get around this you need to subclass whatever container you want to add your styled scrollbars to and remove the child called "whitebox":
var whitebox:DisplayObject = rawChildren.getChildByName('whiteBox');
if (whitebox)
rawChildren.removeChild(whitebox);
IIRC you need to do the above in two places: an override of createChildren and an override of validateDisplayList. In both cases remember to call the super class method first!
That area isn't controlled by the scroll bar(s), it's part of the original container. Does the VBox have it's background colour set to black?