Views
8 months ago

tornadofx-guide

Advanced Data Controls

Advanced Data Controls The default settings gave each column the space it needs based on its content, and gave the remaining width to the last column. When you resize a column by dragging the divider between column headers, only the column immediately to the right will be affected, which avoids pushing the columns to the right outside the viewport of the TableView . While this often presents a pleasant default, there is a lot more we can do to improve the user experience in this particular case. It is evident that our table did not need the full 800 pixels it was provided, but it gives us a nice chance to elaborate on the configuration options of the SmartResize policy. The bed column is way too big, and it seems more sensible to give the extra space to the Type column, since it might contain arbitrary long descriptions of the room. To give the extra space to the Type column, we change its column definition (Figure 5.8): column("Type", Room::type).remainingWidth() Figure 13.2 Now it is apparent the Bed column looks cramped, being pushed all the way to the left. We configure it to keep its desired width based on the content plus 50 pixels padding: column("Bed", Room:bed").contentWidth(padding = 50.0) The result is a much more pleasant visual impression (Figure 5.9) : Figure 13.3 196

Advanced Data Controls This fine-tuning may not seem like a big deal, but it means a lot to people who are forced to stare at your software all day! It is the little things that make software pleasant to use. If the user increases the width of the Number column, the Type column will gradually decrease in width, until it reaches its default width of 10 pixels (the JavaFX default). After that, the Bed column must start giving away its space. We don't ever want the Bed column to be smaller that what we configured, so we tell it to use its content-based width plus the padding we added as its minimum width: column("Bed", Room:bed").contentWidth(padding = 50.0, useAsMin = true) Trying to decrease the Bed column either by explicitly expanding the Type column or implicitly by expanding the Number column will simply be denied by the resize policy. It is worth noting that there is also a useAsMax choice for the contentWidth resize type. This would effectively result in a hard-coded, unresizable column, based on the required content width plus any configured padding. This would be a good policy for the # column: column("#", Room::id).contentWidth(useAsMin = true, useAsMax = true) The rest of the examples will probably not benefit the user, but there are still other options at your disposal. Try to make the Number column 25% of the total table width: column("Number", Room::number).pctWidth(25.0) When you resize the TableView , the Number column will gradually expand to keep up with our 25% width requirement, while the Type column gets the remaining extra space. 197

GUIDE
GUIDE
GUIDE
Guide
Guide
GUIDE
GUIDE
GUIDE
Guide
GUIDE
Guide
GUIDE
Guide
GUIDE
GUIDE