Develop Reference

Vaadin Grid how to wrap long text in columns

I have a Vaadin grid with 7 columns:
Grid grid = new Grid<>();
grid.setSizeFull();
grid.addColumn(User::getUserName).setCaption("Name").setExpandRatio(2);
grid.addColumn(User::getLastName).setCaption("Last Name").setExpandRatio(1);
grid.addColumn(User::getAge).setCaption("Age").setExpandRatio(2);
grid.addColumn(User::getWork).setCaption("Work").setExpandRatio(1);
grid.addColumn(User::getJobTitle).setCaption("Job Title").setExpandRatio(1);
grid.addColumn(User::getSalary).setCaption("Salary").setExpandRatio(1);
grid.addColumn(User::getOther).setCaption("Other").setExpandRatio(1);
What I need is to set columns width in a way - that all 7 will have be shown on a screen.
With my code now it works in a way that if text content of any column cell is very long - the last columns are not shown on the screen and screen must be scrolled horizontally.
I tried to use method setWidth() and as it takes value in pixels the grid view may differ on various browsers and screens.
What I need is to be sure that my grid looks the same way on different screens and with different cell values.

Recently I had the same situation, this was my solution:
Grid configuration
Grid<Item> gridItem = new Grid<>();
gridItem.setRowHeight(50.0);
Column configuration
gridItem.addComponentColumn(item -> {
Label label = new Label();
label.setValue(item.getText());
label.setWidthUndefined();
label.setStyleName(ValoTheme.LAYOUT_HORIZONTAL_WRAPPING);
return label;
})
.setCaption("Item")
.setWidth(380.0);
Result:

Libgdx table setBackground does nothing

I made .pack file and load it to skin. I can set it as drawable for Image class and it works fine. But Table.setBackground do nothing.
Drawable background = skin.getDrawable("tooltip_background");
tooltipGroup.setBackground(background);
Why this code not work?
Full code:
tooltipGroup = new Table(skin);
tooltipGroup.setWidth(w/6);
Label.LabelStyle headerStyle = new Label.LabelStyle(headerFont, Color.GREEN);
Label headerLabel = new Label(effect.getName(), headerStyle);
headerLabel.setWidth(w/6);
headerLabel.setX(20);
headerLabel.setWrap(true);
headerLabel.setAlignment(Align.topLeft);
tooltipGroup.addActor(headerLabel);
Label.LabelStyle style = new Label.LabelStyle(font, Color.WHITE);
Label descriptionLabel = new Label(effect.getDescription(), style);
descriptionLabel.setWidth(w/6);
descriptionLabel.setWrap(true);
descriptionLabel.setAlignment(Align.topLeft);
descriptionLabel.setPosition(20, -descriptionLabel.getHeight());
tooltipGroup.addActor(descriptionLabel);
tooltipGroup.setPosition(mouseX, h - mouseY);
Drawable background = skin.getDrawable("tooltip_background");
tooltipGroup.setBackground(background);
stage.addActor(tooltipGroup);

Don't use addActor on the Table. In order to add Actors to the table, use the add method, and specify custom parameters like fill or width / height of the actors in chaining methods. Like this, you can control how you add the actors to the table, since the table does auto layouting.
Table rootTable = new Table();
rootTable.setFillParent(true);
TextField fieldFirst = new TextField("First", skin);
TextField fieldSecond = new TextField("Second", skin);
rootTable.add("First:");
rootTable.add(fieldFirst).width(100).row();
rootTable.add("Second:");
rootTable.add(fieldSecond).width(100);
stage.addActor(rootTable);
As you can see, this allows you to specify the width, in the table, with the expand(), and fill() methods, you can even have an element fill all the available space within one row. Once you use this auto layouting of your table, the table should have the appropriate size, and your background should show. More on how to use the libGdx table layouting can be found here.

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.

Libgdx Scene2d Table and Scrollpane bug?

I tried to do a simple scrollable table with buttons. Here is the code:
craft = new Stage();
craftbl = new Table();
craftbl.setDebug(true);
craftbl.add(button1);
craftbl.row();
craftbl.add(button2);
scroll = new ScrollPane(craftbl);
scroll.setSize(640, 480);
craft.addActor(scroll);
But as a result I have only one button on screen:
How can i fix it?

Solved. To fix this, you need to set size at least of one of table's cells. E.G. like this: table.add(somewidget).width(100);

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;
}
};