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.
Related
How can I center the text of a Label in javafx ? In the .css stylesheet or directly in the fxml.
I tried Label { -fx-text-alignment: center;} in the .css but it does not work. Even in the scene builder it does not work.
You basically have two choices:
Use a layout pane that can center the label, and let the label be its "preferred size" (i.e. just big enough to hold the text), or
Make the label fill the entire width of its container, and set its alignment property to center.
You said in the comments that you're using an AnchorPane as the label's parent. This generally isn't usually a particularly good choice for a layout pane (essentially you have to hardcode the bounds of each control), and you can't center things in it (not without a large amount of work, anyway). So with an anchor pane as parent, you are reduced to choice 2:
label.setMaxWidth(Double.MAX_VALUE);
AnchorPane.setLeftAnchor(label, 0.0);
AnchorPane.setRightAnchor(label, 0.0);
label.setAlignment(Pos.CENTER);
Obviously, all that can be set in FXML too.
In general, though, I would recommend using a more appropriate layout pane and setting the appropriate properties on that layout pane to center the label.
I have created a Hbox with several Buttons inside as children. I want to increase one button size and be on top of others. Not as appreciated in the figure... I Have tried with children_button.toFront() but it changes the layout order.
Any help would be appreciated.
i am not sure if this works in an Hbox as I think toFront puts the Child on the first position of the ChildList in the parent Node. But this would mean that HBox would layout it on the very left on first place. So maybe they are overriding the default behavior in this Case? Just my guess
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 a problem in flex scroll bars. I have a mxml component based on canvas. Inside that I have used a VBox for my form. Above that Vbox I have another canvas just for title.
My form gets longer than normal screen size when the grid inside that is filled with more data. In that case I want a vertical scroll bar just for Vbox in which my form is located. But the whole canvas is getting scrollbar including title canvas. how to solve this problem.
I set vertical scrollbar policy of main canvas to off and inside Vbox's VerticalScrollbarPolicy to on. but that's not working. It is not overriding the property of parent container.
Thanks.
Keep your Form inside a Canvas inside the parent canvas instead of VBox. VBox and HBox are set to grow automatically in the parent container, so if your form grows, your corresponding VBox will grow as well.
You want to overload the "updateDisplayList" function for your parent canvas, and force the height of your form Vbox to be canvasHeight-titleHeight (including padding, space, etc...) so that the VBox never grows larger than the screen. This will solve your problem. Just make sure you check for the existence of the VBox as sometimes the updateDisplayList will be called before it has been instantiated.
Had the same problem myself and decided to take the easy route.
Have the following
App->vbox->[vbox + hbox]
components are dynamically being added to last vbox. Wanted hbox to stay on screen and have scrollbars only in vbox above it(2nd vbox).
Was experiencing the same problem. All containers had scroll policy=off except for last vbox, but when dynamically adding components, when the components filled the vbox > 100%, the outer vbox would start to scroll.
Resolution was simple once I went back to the documentation.
Set scroll policy - horizontal and vert on app and first vbox to off, and also added autoLayout=false. This causes the engine to not resize the components after initialization, ie, they are static sized.
Once I added this property, no more scrollbars except for the inner vbox.
Tada!
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?