Tutorial :About JavaFx Layout



Question:

I have a question about javafx layout, following is my code you can run the code directly:

import javafx.scene.Scene;  import javafx.scene.control.Button;    import javafx.scene.layout.VBox;  import javafx.scene.control.TextBox;  import javafx.scene.layout.HBox;  import javafx.scene.paint.Color;    import javafx.scene.Group;  import javafx.scene.shape.Rectangle;    import javafx.stage.Stage;    /**   * @author Administrator   */  var headerHeight: Number = 50;  var header: Group = Group {              var searchBox: HBox;              content: [                  Rectangle {                      width: bind scene.width;                      height: bind headerHeight;                      fill: Color.BLUE                  },                  searchBox = HBox {                              spacing: 10                              layoutY: bind (headerHeight - searchBox.layoutBounds.height) / 2;                              layoutX: bind scene.width - searchBox.layoutBounds.width - 20;                              var textBox: TextBox;                              content: [                                  textBox = TextBox {                                              promptText: "please input search key"                                              columns: 20                                              selectOnFocus: true                                          }, Button {                                      text: "search"                                      strong: true                                      action: function() {                                          println("Button  clicked");                                      }                                  }]                          }              ]          }  var rect = Rectangle {              width: bind 400;              height: bind 80;              fill: Color.YELLOW          }  var footerHeight: Number = 50;  var footer: Group = Group {              var bounds: Rectangle;              content: [                  bounds = Rectangle {                              width: bind scene.width;                              height: bind footerHeight;                              fill: Color.RED                          }              ]          }  var scene: Scene = Scene {              content: [                  VBox {                      content: [                          header,                          rect,                          footer                      ]                  }              ]          }    function run() {      Stage {          scene: scene      }  }  

The scene's height is not normal. Footer's height is 50, but seems only about 30.

what's wrong, any advise?

Thanks.


Solution:1

For some reason the Scene isn't resizing to fit the full contents. I'm not sure why, but you may be able to work around this by setting scene.height = headerHeight + 80 + footerHeight.


Solution:2

Try binding to the Stage instead of Scene.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »