Forum Stats

  • 3,840,393 Users
  • 2,262,599 Discussions
  • 7,901,261 Comments

Discussions

Layout BorderPane and allow scroll of TableView

zorro2b
zorro2b Member Posts: 9
edited May 22, 2017 8:30PM in JavaFX 2.0 and Later

I am trying to layout an application with a central tableview within a borderpane.

The top is used for the menu, the centre for the tableview which grows to use all available space and the bottom for the footer.

You can see it in action here:

https://www.youtube.com/watch?v=6-0YFMwa4RA

You can see that the tableview increases size nicely with the window, but when the window shrinks the tableview is truncated and no scrollbar is displayed to allow viewing of all of the content.

The other more minor issue is that the logo in the footer also gets truncated whereas I would like it always to be shown at the right side of the footer area.

Here is my layout:

https://gist.github.com/zorro2b/a3db62dd5d382be767a70a8142a0fb16

Is there any way to achieve this layout with the header and footer and such that the table view takes available space but if the window becomes too small it adds scrollbars?

thanks,

Andrew

Answers

  • jsmith
    jsmith Member Posts: 2,856
    edited May 22, 2017 8:30PM

    Try the following sample code.

    In your original, on the containing BorderPane you are setting maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" which will pin the min/max size of the BorderPane to the prefSize.    This in effect makes the containing BorderPane non-resizable.  So when you resize the window, the BorderPane just stays at its original size instead of resizing and allowing the ScrollBar in the table to be displayed or removed as necessary.  And whatever doesn't fit inside the resized window is just truncated.

    To always show the footer you can set  minHeight="-Infinity" minWidth="-Infinity" on the footer border pane, this will tell the layout manager that the minimum height and width of the footer can never go smaller than the pref height and width.  This means that the footer will always be shown and not truncated no matter the size of the window as long as there is enough room to fit the footer inside the window.

    Designing the layout and testing its results is easier if you use Gluon SceneBuilder (which is what I used to debug and solve your issues).

    Scene Builder - Gluon

    At runtime you can also use ScenicView to debug layouts if necessary:

    Scenic View | JavaFX News, Demos and Insight // FX Experience

    <?xml version="1.0" encoding="UTF-8"?>

    <?import javafx.geometry.Insets?>
    <?import javafx.scene.control.Menu?>
    <?import javafx.scene.control.MenuBar?>
    <?import javafx.scene.control.MenuItem?>
    <?import javafx.scene.control.TableColumn?>
    <?import javafx.scene.control.TableView?>
    <?import javafx.scene.image.ImageView?>
    <?import javafx.scene.layout.BorderPane?>

    <BorderPane prefHeight="600.0" prefWidth="1000.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
      <top>
      <MenuBar fx:id="menuBar" BorderPane.alignment="CENTER">
      <Menu mnemonicParsing="false" text="File">
      <MenuItem mnemonicParsing="false" text="Preferences..." />
      <MenuItem mnemonicParsing="false" text="Quit" />
      </Menu>
      </MenuBar>
      </top>
      <bottom>
      <BorderPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="40.0" prefWidth="200.0" styleClass="status-bar" BorderPane.alignment="CENTER">
      <right>
      <ImageView fx:id="statusLogo" fitHeight="40.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" BorderPane.alignment="CENTER" />
      </right>
      </BorderPane>
      </bottom>
      <center>
      <TableView fx:id="table" BorderPane.alignment="CENTER">
      <columns>
      <TableColumn fx:id="colName" prefWidth="500.0" text="Name" />
      <TableColumn fx:id="colPrice" prefWidth="400.0" text="Price" />
      </columns>
      <BorderPane.margin>
      <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
      </BorderPane.margin>
      </TableView>
      </center>
    </BorderPane>

This discussion has been closed.