Develop Reference

Javafx: GridPane: Prevent column to grow width when text is too long

I have some legacy code to fix and I'm struggling on the following:
I have 2 nested gridpanes. Inside the inner grid, text has to be added.
The column widths of both inner and outer grids are calculated relative to the screen size using following function:
private GridPane createGridPane( int []colsPercent, int []rowsPercent ) {
GridPane gridPane = new GridPane()
// setup columns
ColumnConstraints []colConst = new ColumnConstraints[colsPercent.length];
for( int i = 0 ; i < colsPercent.length ; i++ ) {
colConst[i] = new ColumnConstraints();
colConst[i].setPercentWidth(colsPercent[i]);
colConst[i].setFillWidth(true);
}
gridPane.getColumnConstraints().addAll(colConst);
// setup rows
RowConstraints []rowConst = new RowConstraints[rowsPercent.length];
for( int i = 0 ; i < rowsPercent.length ; i++ ) {
rowConst[i] = new RowConstraints();
rowConst[i].setPercentHeight(rowsPercent[i]);
rowConst[i].setFillHeight(true);
}
gridPane.getRowConstraints().addAll(rowConst);
return gridPane;
}
The grids and their contents are added by following code:
gridPane = createGridPane(colConstFeedbackScreenPercent,
rowConstFeedbackScreenPercent);
gridPane.setGridLinesVisible(true);
GridPane.setHgrow(gridPane, Priority.NEVER);
GridPane innerGridPane = createGridPane(colConstFeedbackInnerPercent,
rowConstFeedbackInnerPercent);
GridPane.setHgrow(innerGridPane, Priority.NEVER);
innerGridPane.setGridLinesVisible(true);
gridPane.add(innerGridPane, 1, 1);
If I add text to the inner gridPane, like so:
VBox vBox = new VBox();
vBox.setSpacing(25);
{
Text text = new Text(IRAPfx.getData().getOptionString("Localised text 6"));
text.setFont(Font.font("Arial",FontPosture.ITALIC,FONT_SIZE_INSTRUCTIONS));
text.setFill(Color.WHITE);
GridPane.setHgrow(text, Priority.NEVER);
vBox.getChildren().add(text);
}
...
GridPane.setHgrow(vBox, Priority.NEVER);
innerGridPane.add(vBox, 1, 1 + resultsCell );
The inner grid, and together with this inner grid the outer grid, will grow when the text string is too large to fit in its cell, resulting in the whole grid (inner and outer) being "stretched" to fit this long contents, and running over the right edge of the screen.
What I would like to archieve is that the long string runs over the outer grid, or even out of the screen if it is really long, but not stretching the whole grid.
As you can see in the code, I tried setting Hgrow to NEVER to no avail. Any suggestions how to fix it (I can't find examples or tips on the www..) would be very welcome.
Thanks in advance,
Joris

I found a partial solution to it:
You can clip or wrap the text to the available width of the cell by using 'label' in stead of 'text'. See below:
For wrapping:
{
Label label = new Label(IRAPfx.getData().getOptionString("Localised text 6"));
label.setFont(Font.font("Arial",FontPosture.ITALIC,FONT_SIZE_INSTRUCTIONS));
label.setWrapText(true);
label.setTextFill(Color.WHITE);
vBox.getChildren().add(label);
}
For clipping:
{
Label label = new Label(IRAPfx.getData().getOptionString("Localised text 6"));
label.setFont(Font.font("Arial",FontPosture.ITALIC,FONT
label.setTextOverrun(OverrunStyle.CLIP);
label.setTextFill(Color.WHITE);
vBox.getChildren().add(label);
}
This more or less solves my problem, however I still did not manage to let the text run over into the next columns (the ones to the right of the cell where the text/label is put).
Any help on that still welcome!

Have you tried the setWrappingWidth method on Text object, you can define a predefined with of this way, 200 in this case:
text.setWrappingWidth(200);

It isn't really clear to me why you have the Text elements inside a VBox before putting them into the GridPane. But you can do something like this:
vbox.maxWidthProperty().bind(innerGridPane.widthProperty().multiply(innerGridPane.getColumnConstraints().get(1).percentWidthProperty());
text.wrappingWidthProperty().bind(vbox.maxWidthProperty());
Unfortunately, you can't just get a GridPane column and get it's width property to bind it, so you have to recalculate it using the ColumnConstraints properties.
Any case where you need to have items dynamically change behaviours base on window sizes and so on, you'll need to bind the relevant properties together.

Changing variables on button clicks - or in events in general

Introduction to the problem
It seams impossible to change a Veriable in a event (like so for example button.setOnAction(e -> { x = x+2});) and I can see why, but what if that's exactly what I need? It's actually not the first time that I needed to do that, but last time I got around it by saving the changed property directly to a file.
This time I used a really tricky trick to create a 'fake variable' by using the text in an invisibe TextField as my veriable. It works, that's not the problem, but I'd like to have a more 'elegant' salution :D
Friuts of my research
The only two salutions I could find were to either declare a Variable as a class member (which I don't want to do seeing that I already have six of them and don't want to tripple that amount) or to use seperate classes. (I found that here: How to change a variable when a button has been clicked in JavaFx )
The programm
Here is the code of my popup window (I'll spare you of the rest of my stupid programm ^^ ), I'll explain what it does after the codebox. (Note that props is a properties object and one of the mentioned class members as well as propPath (meaning I declared it at the very top of the programm so that it can be accessed from every function)):
private void createNewBuff() throws Exception {
Stage popupStage = new Stage(StageStyle.UTILITY);
popupStage.initModality(Modality.APPLICATION_MODAL);
popupStage.setTitle("Creating a new Buff");
popupStage.setMinWidth(400);
popupStage.setMinHeight(300);
GridPane layoutGP = new GridPane();
layoutGP.getColumnConstraints().addAll(
new ColumnConstraints(200), //TextField column col 0
new ColumnConstraints(10), //Gab column col 1
new ColumnConstraints(60), //tf manips column col 2
new ColumnConstraints(30), //Gab column col 3
new ColumnConstraints(80)); //Main buttons col col 4
TextField tfName = new TextField("Unknown Buff");
tfName.setPromptText("Name of the Buff, e.g. \"Unknown Buff\"");
Label lblName = new Label("Name");
layoutGP.add(tfName, 0, 0);
layoutGP.add(lblName, 2, 0);
TextField varTF = new TextField();
TextField tfEffect = new TextField();
tfEffect.setPromptText("Effect of the Buff, e.g. \"+10 LP\"");
Button btnAdd = new Button("Add");
btnAdd.setOnAction(e -> {
String input = tfEffect.getText();
String[] comps = input.split(" "); //components
if (Array.getLength(comps) == 2) {
if (input.contains("+")) {
varTF.setText(varTF.getText() + input + ";");
layoutGP.add(new Label(input), 0, 1 + Array.getLength(varTF.getText().split(";")));
} else if (input.contains("-")) {
varTF.setText(varTF.getText() + input + ";");
layoutGP.add(new Label(input), 0, 1 + Array.getLength(varTF.getText().split(";")));
}
}
});
layoutGP.add(tfEffect, 0, 1);
layoutGP.add(btnAdd, 2, 1);
Button btnDone = new Button("Done");
btnDone.setOnAction(e -> {
int buffNumber = 1;
while (props.containsKey("Buff-" + buffNumber + "-name"))
buffNumber++;
props.setProperty("Buff-" + buffNumber + "-name", tfName.getText());
props.setProperty("Buff-" + buffNumber + "-effect", varTF.getText());
try {
FileOutputStream streamOut = new FileOutputStream(propPath);
props.store(streamOut, null);
streamOut.close();
popupStage.close();
}catch (IOException someE){/*something meaningful*/}
});
btnDone.setMaxWidth(Double.MAX_VALUE);
Button btnCancel = new Button("Cancel");
btnCancel.setOnAction(e -> popupStage.close());
btnCancel.setMaxWidth(Double.MAX_VALUE);
layoutGP.add(btnDone, 4, 0);
layoutGP.add(btnCancel, 4, 1);
layoutGP.setAlignment(Pos.TOP_CENTER);
Scene popupScene = new Scene(layoutGP);
popupStage.setScene(popupScene);
popupStage.showAndWait();
}
I wanted to post a picture there of how it looks once you start it and another of how it looks after you used it, but my reputation is still to low ^^
Therefor I'll provide the links to the pictures: Befor something was done http://i.imgur.com/Wx3nIEX.png After it's used http://i.imgur.com/5QNmWP6.png
What the programm does
It's pretty strait forward actually: my main programm is a character sheet and with that popup you can add a buff to it (later I'll make it so that the effects of the buff get calculated into the values of the sheed, but one step at a time ^^ ). You can set the name of the buff you want to create ("Unknown Buff" is the standart in case you forgett to set one) and then you can simply add defferent effects by writing tem into the TextField and then pressing the 'Add' button. They will list themself top to bottom in the free space. They will also, behind the scenes, save themself as one large string into a hidden TextField to make figuring out in which line each individual Effect has to be displayed and to save it to the properties file afterwards. (and that salution with the undisplayed textfield is exactly the trick I want to remove and turn into a more 'elegant' salution)
Detailed explanaition of the code
At first the Stage is created. Then the layout is made in form of a gridpane und the column sizes are set (every second column is for spacing reasons). After that I'm creating the line for the name (the label and the textfield) and also my tricky textfield that's used as a String variable. Now I'm creating the effect textfield and add button, as well as the event for the button: at first it turns the input from the textfield into a easier to read name and splits it into it's components (at first I used tfEffect.getText() and tfEffect.getText().split(" ") inside the code below, but that was really messy) now I have if statements to verify it and make sure that the Effect is in the right format (that format beeing the amount a certain stat is raised or lowerd, consisting of either a plus or a minus symbol at the beginning and a number after that; followed by a space and then the index of the stat (I haven't been able to implement verifying if the typed thing actually is a valid stat, maybe that'll be content of a future question ;D )). After verifying the programm it adds the effect below all the others. If you're done and happy with you're buff you can click the Done button, it will first look up how many Buffs already exist, then assign the new on a number and save it all to the properties file. The cancel button with of course just cancel it and at the bottom I'm setting the scene and calling the stage.
What I'm hoping for with this question
Now I think you have a pretty clear idea of what I need to do and why I couldn't find a better salution then using a hidden TextField as a variable and I hope it's because I'm a beginner and not because there actually is no better way of doing it ^^
Also if you actually read all of this you may found one or two things I can improve besides that, but that would be the special bonus ;D

JavaFX TableView with two fixed-columns and last one taking available space

I'm trying to make a simple 3-column TableView:
One icon column containing a fixed size icon. This column must not be resizable, and must have a fixed size.
One text column with a predefined prefered size, which can be resized if needed.
One last column taking all available space.
Unfortunatly, this simple use case seems to be really complicated with Java FX 8. I tried the following, which should work according to my understanding of the documentation:
TableColumn<DebuggerItem, ImageView> iconColumn = new TableColumn<>("ICON");
TableColumn<DebuggerItem, String> typeColumn = new TableColumn<>("TEXT");
TableColumn<DebuggerItem, String> textColumn = new TableColumn<>("DATA");
setColumnResizePolicy(CONSTRAINED_RESIZE_POLICY);
// Fixed size column
iconColumn.setPrefWidth(40);
iconColumn.setMinWidth(40);
iconColumn.setMaxWidth(40);
iconColumn.setResizable(false);
// Predefined preferred size of 100px
typeColumn.setPrefWidth(100);
getColumns().addAll(iconColumn, typeColumn, textColumn);
This results in the following TableView:
We can see that if the first column has a correct size, the second and the hird have the same size, which is not what I expected. The second column should be 100px wide, and the last one take the rest of the space.
What did I miss ?

According to #kleopatra link, the solution is to use properties to compute last column width, and NOT use CONSTRAINED_RESIZE_POLICY :
LastColumnWidth = TableViewWidth - SUM(Other Columns Widths)
Which, according to my example give the following Java code:
TableColumn<DebuggerItem, ImageView> iconColumn = new TableColumn<>("ICON");
TableColumn<DebuggerItem, String> typeColumn = new TableColumn<>("TEXT");
TableColumn<DebuggerItem, String> textColumn = new TableColumn<>("DATA");
// Fixed size column
iconColumn.setPrefWidth(40);
iconColumn.setMinWidth(40);
iconColumn.setMaxWidth(40);
iconColumn.setResizable(false);
// Predefined preferred size of 100px
typeColumn.setPrefWidth(100);
// Automatic width for last column
textColumn.prefWidthProperty().bind(
widthProperty().subtract(
iconColumn.widthProperty()).subtract(
typeColumn.widthProperty()).subtract(2)
);
getColumns().addAll(iconColumn, typeColumn, textColumn);
Please note that we need to substract 2 pixels to get the exact width, it's not clear why.

I created a more general solution, that pixel-perfectly calculates width of last column for TableViews that:
have any number of columns
possibly hide or show columns at runtime
possibly have custom insets
possibly have scrollbar, possibly showing and hiding at runtime.
Usage:
bindLastColumnWidth(tableView);
Source:
public static <T> void bindLastColumnWidth (TableView<T> tableView) {
List<TableColumn<T,?>> columns = tableView.getColumns();
List<TableColumn<T,?>> columnsWithoutLast = columns.subList(0, columns.size() - 1);
TableColumn lastColumn = columns.get(columns.size() - 1);
NumberExpression expression = tableView.widthProperty();
Insets insets = tableView.getInsets();
expression = expression.subtract(insets.getLeft() + insets.getRight());
for (TableColumn column : columnsWithoutLast) {
NumberExpression columnWidth = Bindings.when(column.visibleProperty())
.then(column.widthProperty())
.otherwise(0);
expression = expression.subtract(columnWidth);
}
ScrollBar verticalScrollBar = getScrollBar(tableView, Orientation.VERTICAL);
if (verticalScrollBar != null) {
NumberExpression scrollBarWidth = Bindings.when(verticalScrollBar.visibleProperty())
.then(verticalScrollBar.widthProperty())
.otherwise(0);
expression = expression.subtract(scrollBarWidth);
}
expression = Bindings.max(lastColumn.getPrefWidth(), expression);
lastColumn.prefWidthProperty().bind(expression);
}
private static ScrollBar getScrollBar (Node control, Orientation orientation) {
for (Node node : control.lookupAll(".scroll-bar")) {
if (node instanceof ScrollBar) {
ScrollBar scrollBar = (ScrollBar)node;
if (scrollBar.getOrientation().equals(orientation)) {
return scrollBar;
}
}
}
return null;
}

You can call this below code after you add all columns to table.
This is nice when the code that resizes does not have a explicit list of columns.
public static void makeLastColumnGrow(TableView<?> items) {
var last = items.getColumns().get(items.getColumns().size() - 1);
var aBinding = Bindings.createDoubleBinding(() ->{
double width = items.getWidth();
for (int i = 0; i < items.getColumns().size() - 1 ; i++) {
width = width - items.getColumns().get(i).getWidth();
}
return width - 2; // minus -2 to account for border i think
}, items.widthProperty());
last.prefWidthProperty().bind(aBinding);
}

Create FormLayout rows and columns dynamically (at runtime)

Hello guys and ladies,
as I let the Eclipse WindowBuilder create me a JPanel with a FormLayout, I wanted to make this creation to be dynamical, because the program I'm writing needs it that way in order to avoid 1000 row long from. I used the following code:
JPanel pData = new JPanel();
pData.setBounds(10, 232, 381, 163);
FormLayout fLayout= new FormLayout(new ColumnSpec[]{}, new RowSpec[]{});
int numCols = 5;
int numRows = 10;
for(int i=1;i<=numCols;i+=2)
{
fLayout.insertColumn(i, FormFactory.RELATED_GAP_COLSPEC);
fLayout.insertColumn(i+1, FormFactory.DEFAULT_COLSPEC);
}
for(int j=1;j<=numRows;j+=2)
{
fLayout.insertRow(j, FormFactory.RELATED_GAP_ROWSPEC);
fLayout.insertRow(j+1, FormFactory.DEFAULT_ROWSPEC);
}
pData.setLayout(fLayout);
getContentPane().add(pData);
But starting the program, I get a stack of errors starting with:
"The column index 1 must be in the range [1, 0]"
Changing the index in the for-loop(s) simply changes the number in the middle of this error text, but the rest stays the same.
What am I doing wrong? Is it even possible to create a FormLayout dynamically? I'd really appreciate your help!
Additional Information:
The reason I'm using a FormLayout is the fact, the columns have different sizes. I know GridBagLayout can do so as well, but it needs many more lines and numbers to have the same result concerning insets and position. But if it's the only sensible alternative, I'll accept it ... as long as it's dynamical ;-)

It has to do with how the "insertRow()/insertColumn()" work. To insert something you must already have row/columns to insert in between. You should instead use the ".appendRow()/.appendColumn()" which just add a new row or column at the bottom of any existing rows or to the right of any existing columns.
EX:
int numCols = 2;
int numRows = 10;
for(int i=1;i<=numCols;i++)
{
fLayout.appendColumn(FormFactory.RELATED_GAP_COLSPEC);
fLayout.appendColumn(FormFactory.DEFAULT_COLSPEC );
}
for(int j=1;j<=numRows;j++)
{
fLayout.appendRow(FormFactory.RELATED_GAP_ROWSPEC);
fLayout.appendRow(FormFactory.DEFAULT_ROWSPEC);;
}
this.setLayout(fLayout);
This would add 4 columns(2 default and 2 related gaps) and 4 rows(2 default and 2 related gaps) to whatever already exists.

setColumnWidth() doesn't seem to work

I'm developing a webapplication in the Vaadin framework.
I have a table with 14 columns. The last column holds three icons and a problem I'm having is that like half of the time the table is rendered the icon furthest to the right will be "cut in half" vertically. To avoid this problem I tried to set a fixed width to this column that I think would eradicate the problem, however, nothing happens..
I'm using the conventional approach:
simCardTable.setColumnWidth(actionColumn, 135);
However, no matter what value I set to be the column width the column stays the same... Does anyone know why this is? Is it because it's the last column to be added and therefore there's no space to spare..?
Btw, that is the only column I set a specific width to, all of the restoring columns have a the standard width specified by the width of the column header or the cell content.
Any help would be very appreciated!

As i understand from your question ("The last column holds three icons") you use ColumnGenerator to create this last column, with icons. If I right, it mean that you created some sort of custom layout with this icons inside, in this case for you should work this:
final ColumnGenerator generator = new ColumnGenerator() {
private static final long serialVersionUID = 1L;
#Override
public Component generateCell(Table source, final Object itemId, Object columnId) {
final HorizontalLayout layout = new HorizontalLayout();
layout.setSizeFull();
Embedded icon1 = new Embedded();
Embedded icon2 = new Embedded();
Embedded icon3 = new Embedded();
//Add some themeresource to embedded components
//Do some listners to this icons
layout.addComponent(icon1);
layout.addComponent(icon2);
layout.addComponent(icon3);
//Set column with
setColumnWidth(columnId, 100);
return layout;
}
};