Table Control

Hi :slight_smile:

I had the need for table control, something missing from Tonegodgui. So, here is my attempt. It is loosly based off of SelectList, but using Elements for each row/cell, not a scrollable text area. For this reason it’s probably not best for large tables, but it will suffice for my needs for now, and hopefully others.

Usage is …

[java]
final Table table = new Table(screen, new Vector2f(10, 40)) {
@Override
public void onChange() {
}
};
table.setColumnResizeMode(Table.ColumnResizeMode.AUTO_FIRST);
table.addColumn(“Column 1”);
table.addColumn(“Column 2”);
table.addColumn(“Column 3”);
for (int i = 0; i < 20; i++) {
Table.TableRow row = new Table.TableRow(screen, table);
row.addCell(String.format(“Row %d, Cell 1”, i), i);
row.addCell(String.format(“Row %d, Cell 2”, i), i);
row.addCell(String.format(“Row %d, Cell 3”, i), i);
table.addRow(row);
}
panel.addChild(table);
[/java]

  • You can stuff Object values into each cell. If these implements Comparable, they are used for sorting when the headers are clicked.
  • There is currently no facility for single cell selection, but it should be relatively easy to add.
  • 4 column resize modes.
  • You’ll see diagonal resize cursors when hovering over the buttons. I think this is a bug, they should not be shown if the element is not resizable north/south.

Patch is here.

And a video …

[video]http://www.youtube.com/watch?v=2c5QggEBqD0&feature=youtu.be[/video]

Hope you find it useful.

RR

5 Likes

Really nice!

I’m pretty sure I missed last nights build with the fix custom cursors, which solves the cursor not showing properly when losing mouse focus for a control. Hopefully you’ll see this go away after.

I’ll add this control tonight or tomorrow if you’re ok with that. I’m really interested in seeing how you have the resizing working correctly for this. I always had the intent for redoing child resizing to work this way.

I’m also hoping to add html-like tabling to the new TextElement, but we’ll see how that goes.

Oh.!!! I just caught what you meant by the cursor showing improperly. Yep… that’s a bug. I’ll try and resolve this today.

@t0neg0d said: Really nice!

I’m pretty sure I missed last nights build with the fix custom cursors, which solves the cursor not showing properly when losing mouse focus for a control. Hopefully you’ll see this go away after.

I’ll add this control tonight or tomorrow if you’re ok with that. I’m really interested in seeing how you have the resizing working correctly for this. I always had the intent for redoing child resizing to work this way.

I’m also hoping to add html-like tabling to the new TextElement, but we’ll see how that goes.

Thanks! Totally ok with you adding this off course.

I don’t think I did anything particularly special for resizing. The sizing of the columns is done on the header buttons controlResized() hook AND controlResized() of the table itself . This calculates the right widths for all the other header columns, then just sets the sizes / positions on each row and cell based on that. Neither the cells or rows are using scaling in elements. Like SelectList it has a pack() method that does all the row positioning.

The fiddliest bit was the clipping. The scrolling content appeared underneath the header buttons. I couldn’t just increase clip padding, so It finally occured to me to use an invisible clip layer that I could size and position at will. I don’t know if this is a valid technique :S

Nice news on html-like tables in text. I hope you crack it, It sounds complicated lol.

@rockfire said: Thanks! Totally ok with you adding this off course.

I don’t think I did anything particularly special for resizing. The sizing of the columns is done on the header buttons controlResized() hook AND controlResized() of the table itself . This calculates the right widths for all the other header columns, then just sets the sizes / positions on each row and cell based on that. Neither the cells or rows using the scaling in elements. Like SelectList it has a pack() method that does all the row positioning.

The fiddliest bit was the clipping. The scrolling content appeared underneath the header buttons. I couldn’t just increase clip padding, so It finally occured to me to use an invisible clip layer that I could size and position at will. I don’t know if this is a valid technique :S

Nice news on html-link tables in text. I hope you crack it, It sounds complicated lol.

Well… I committed an update to Screen that should fix the cursor issue mentioned above. Let me know if it worked.

For the clipping issues, I’m slowly but surely adding methods for pulling sub-elements for prefab controls. Which control in particular was the holdup so I can add the methods and commit the changes which will allow you to alter the the clip padding, etc?

Just playing around with this now.

I think your solution for clipping worked fine. Adding the extra container oly element has no impact on FPS as there is no render component in the scene.

Couple questions: Clipping for cell text…

What’s it supposed to do (ideally)?
Should it clip to the cell?
Or text wrap?

Couple more thoughts, etc:

In TableColumn.init: you might want to add: (to clip the headers on resize)
[java]
setClippingLayer(table);
[/java]
Also, for resize modes, would it be possible to add a resize mode that adjusts the width of the two adjacent columns within their combined total width?

Really liking this control. You did a great job with it!

Oh… also forgot to mention. On mouse down when resizing, adding a flag that lets mouse up know that you are resizing columns will stop the resort from happening on mouse up when not over the resize area of the column header.

Couple questions: Clipping for cell text…

What’s it supposed to do (ideally)?
Should it clip to the cell?
Or text wrap?

Good question. Ideally, optionally both I guess :wink: In theory the table should be able to handle uneven row sizes should wrapping be enabled (only the mouse handling code I think assumes even rows, this could be easily fixed).

In TableColumn.init: you might want to add: (to clip the headers on resize)

Done. Thanks :slight_smile:

On mouse down when resizing, adding a flag that lets mouse up know that you are resizing columns will stop the resort from happening on mouse up when not over the resize area of the column header.

Also done.

Really liking this control. You did a great job with it!

Thanks! It was actually easier to implement than I feared it would be. All the right bits were there, they just needed arranging in the right way.

I should also say I have some more changes. Not quite sure how best to deliver them to you. A patch against the current SVN I guess would be best? They include :-

  • Above suggestions
  • Multiple selection modes. NONE, ROW, MULTIPLE_ROWS, CELL, MULTIPLE_CELLS,
  • A tidy up. Got rid of some unused stuff in style definition. Renamed some methods and variable
  • It only worked with the default theme. When I tried in my game with its custom theme, it sort of fell to pieces (mainly misalignment).
  • Sorting can be turned off completely.
  • NONE resize mode was a bit broken.

RR

1 Like

Wow… very nice!

Ok… was playing around with this as well and added sort arrows to the column headers. Since the version I am playing with will need to be updated with your changes, I’ll just give a rundown on what was needed to add them. The only arrow that shows is the one for the column being sorted against.

But! before I do that, I was giving a tiny bit more though to the resizing feature. I’m playing with the control directly added to the screen, so resizing columns is completely based on my actions against the table, as apposed to child resizing from parent changes.

I was wondering if these two resize methods can be separated? What’s in place makes ideal sense for parent resizing. But I think that resiizing based on the two adjacent cells makes more sense as a default for user resizing based on column headers.

Now… for the sort arrows… I added a couple variables holding the style properties for:

[java]
screen.getStyle(“Common”).getString(“arrowUp”); // arrowDown and blankImg
[/java]

In the column header init I added the following lines:

[java]
setButtonIcon(20,20,arrowNull); // start with the blank icon
getButtonIcon().setX(getWidth()-getButtonIcon().getWidth());
[/java]

In the controlResizeHook, I added:

[java]
getButtonIcon().setX(getWidth()-getButtonIcon().getWidth());
[/java]

And finally, in the table sort method, I added:

[java]
for (TableColumn tc : columns) {
if (tc == column)
tc.getButtonIcon().setColorMap((ascending) ? arrowDown : arrowUp);
else
tc.getButtonIcon().setColorMap(arrowNull);
}
[/java]

Obviously, this isn’t necessary… can have or not… but in case you wanted it, thought I’d throw it here.

Oh… also forgot to mention. I noticed when you resort you lose your selected indexes. If you want, I can throw something together that will rebuild these. Just let me know.

Ok… I think I’m officially becoming a nag.

Had one last thought. This by no means has to happen, but I’ll throw it out there in case it makes sense to you.

When you create a row, you might want to auto create the cells based on the number of columns and then provide a method for setting the display textdata/whatever.

Ok… was playing around with this as well and added sort arrows to the column headers. Since the version I am playing with will need to be updated with your changes, I’ll just give a rundown on what was needed to add them. The only arrow that shows is the one for the column being sorted against.

Heh. great :slight_smile: I’ll get this added to my version. Yet one more thing you’d expect from a Table control crossed of the list.

But! before I do that, I was giving a tiny bit more though to the resizing feature. I’m playing with the control directly added to the screen, so resizing columns is completely based on my actions against the table, as apposed to child resizing from parent changes.

I confess I hadn’t tried that. The design of my UI is such that most stuff is generally in moveable panels, so I rarely add controls directly to the Screen. Will check that out, I’m pretty sure I understand what you are asking for.

Oh.. also forgot to mention. I noticed when you resort you lose your selected indexes. If you want, I can throw something together that will rebuild these. Just let me know.

Sure. Might be best to wait for my next version though. The selection code has changed a bit (to allow for cell selection), so that will likely have an impact. The bug certainly still exists :wink:

Oh, it occurs I need to add keyboard navigation as well.

2 Likes

Ok, here finally is an updated patch for the Table control. It contains all discussed above, including keyboard handling/selection and cell selection mode.

Patch here against the current SVN.

A video showing keyboard navigation and the various selection modes :-

[video]http://www.youtube.com/watch?v=ZfXITvY_Mb8&feature=youtu.be[/video]

Also …

I was wondering if these two resize methods can be separated? What’s in place makes ideal sense for parent resizing. But I think that resiizing based on the two adjacent cells makes more sense as a default for user resizing based on column headers.

I thought I knew what you meant here, but am now not so sure. Are you saying you just want a different default for the resize mode?

One last thing, I wanted a gap between the vertical scrollbar and the table itself. ScrollArea currently has no provision for this, so I made a little tweak to ScrollArea to use a new style property “gap” (defaults to 0 in default theme). This separates the bar and the content slightly. Below is a screen shot with my own theme showing the gap.

And the patch for ScrollArea.

RR

4 Likes

That’s beautiful! Crap, this is going to make me wanna change a couple screens XD.

@rockfire said: Ok, here finally is an updated patch for the Table control. It contains all discussed above, including keyboard handling/selection and cell selection mode.

Patch here against the current SVN.

A video showing keyboard navigation and the various selection modes :-

[video]http://www.youtube.com/watch?v=ZfXITvY_Mb8&amp;feature=youtu.be[/video]

Also …

I was wondering if these two resize methods can be separated? What’s in place makes ideal sense for parent resizing. But I think that resiizing based on the two adjacent cells makes more sense as a default for user resizing based on column headers.

I thought I knew what you meant here, but am now not so sure. Are you saying you just want a different default for the resize mode?

One last thing, I wanted a gap between the vertical scrollbar and the table itself. ScrollArea currently has no provision for this, so I made a little tweak to ScrollArea to use a new style property “gap” (defaults to 0 in default theme). This separates the bar and the content slightly. Below is a screen shot with my own theme showing the gap.

And the patch for ScrollArea.

RR

Amazing work! Will update it n the plugin.

1 Like

@rockfire Sorry to be a bother. Can you send me the .java and .gui.xml files? I can’t get the diff patch to apply properly.

EDIT: The scrollarea patch worked fine btw.

@t0neg0d said: @rockfire Sorry to be a bother. Can you send me the .java and .gui.xml files? I can't get the diff patch to apply properly.

EDIT: The scrollarea patch worked fine btw.

Awesome. No need to apologise, I should have checked it.

Table.java and Table.gui.xml

Also, thanks @loopies :slight_smile:

@rockfire said: Awesome. No need to apologise, I should have checked it.

Table.java and Table.gui.xml

Also, thanks @loopies :slight_smile:

Update has been pushed out with this included. The 2D Framework integration is in there too, which means one step closer to finally having hyperlinking working for TextElement. The proper integration will save me from having to duplicate code in the library for no reason other than being lazy :wink:

Hey i have a problem with the new table control. I impemented it in my highscore gui and the last row is cutted.

What can i do to solve this problem?

Edit:
I changed the fontsize from 20 to 28 and the row highlighting is also buggy (changed in the xml).
I try to set the fontsizes in the code but for rows it doenst work.