How to give TableColumns a relative width in FXML? - javafx

Question

Is it possible to get a resizing TableView in FXML, where each columns resizes itself relatively?
I know it's possible in code, but I'm specifically looking for an FXML approach.
This is the current approach:
<BorderPane xmlns:fx="http://javafx.com/fxml">
<fx:define>
<Double fx:id="tableViewWidth" fx:value="600"/>
</fx:define>
<center>
<TableView fx:id="expensesTableView" editable="true" prefWidth="${tableViewWidth}">
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
<columns>
<TableColumn text="Title" prefWidth="${tableViewWidth * 3}">
<cellValueFactory>
<PropertyValueFactory property="title" />
</cellValueFactory>
</TableColumn>
<TableColumn text="Category" prefWidth="${tableViewWidth * 3}">
<cellValueFactory>
<PropertyValueFactory property="category" />
</cellValueFactory>
</TableColumn>
<TableColumn text="Period" prefWidth="${tableViewWidth * 2}">
<cellValueFactory>
<PropertyValueFactory property="period" />
</cellValueFactory>
</TableColumn>
<TableColumn text="Value" prefWidth="${tableViewWidth * 2}">
<cellValueFactory>
<PropertyValueFactory property="value" />
</cellValueFactory>
</TableColumn>
</columns>
</TableView>
</center>
</BorderPane>
The multiply-part doesn't seem to work.

Answer 1

You need to remove the resize policy and also bind to the width of the TableView instead to some double constant.
Furthermore some of the expressions used for the binding are syntactically wrong...
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.cell.*?>
<BorderPane xmlns:fx="http://javafx.com/fxml">
<center>
<TableView fx:id="expensesTableView" editable="true" prefWidth="600">
<columns>
<TableColumn text="Title" prefWidth="${expensesTableView.width*0.3}">
<cellValueFactory>
<PropertyValueFactory property="title" />
</cellValueFactory>
</TableColumn>
<TableColumn text="Category" prefWidth="${expensesTableView.width*0.3}">
<cellValueFactory>
<PropertyValueFactory property="category" />
</cellValueFactory>
</TableColumn>
<TableColumn text="Period" prefWidth="${expensesTableView.width*0.2}">
<cellValueFactory>
<PropertyValueFactory property="period" />
</cellValueFactory>
</TableColumn>
<TableColumn text="Value" prefWidth="${expensesTableView.width*0.2}">
<cellValueFactory>
<PropertyValueFactory property="value" />
</cellValueFactory>
</TableColumn>
</columns>
</TableView>
</center>
</BorderPane>