\/\/ BigTableXDGTable.fx
\npackage com.xenonsoft.nelson.scene.layout;<\/p>\n
import javafx.stage.Stage;
\nimport javafx.scene.Scene;
\nimport javafx.scene.text.Font;
\nimport javafx.scene.paint.Color;
\nimport javafx.scene.paint.LinearGradient;
\nimport javafx.scene.paint.Stop;
\nimport javafx.scene.control.ScrollBar;<\/p>\n
import com.xenonsoft.nelson.scene.layout.XenonDataGrid;
\nimport com.xenonsoft.nelson.scene.layout.grid.TableModel;
\nimport com.xenonsoft.nelson.scene.layout.grid.layer.MultiGridLayer;
\nimport com.xenonsoft.nelson.scene.layout.grid.layer.GridLayer;
\nimport com.xenonsoft.nelson.scene.layout.grid.renderer.XenonGridCellRenderer;
\nimport com.xenonsoft.nelson.scene.layout.grid.renderer.XenonGridCellHeaderRenderer;
\nimport com.xenonsoft.nelson.scene.layout.grid.selection.SelectionContext;<\/p>\n
\/**
\n * @author Peter Pilgrim
\n *\/
\ndef MARGIN_WIDTH = 5.0;
\ndef MARGIN_HEIGHT = 5.0;
\ndef OFFSET = 25.0;
\ndef GAP_SIZE = 3.0;<\/p>\n
\/\/ XDG size
\ndef GRID_ROWS=8<\/b>;
\ndef GRID_COLUMNS=8<\/b>;<\/p>\n
\/\/ Model matrix size
\ndef MATRIX_ROWS=50<\/b>;
\ndef MATRIX_COLUMNS=50<\/b>;
\ndef mt = new Matrix( MATRIX_ROWS, MATRIX_COLUMNS );
\nfor ( r in [0..mt.getRows()-1] ) {
\n for ( c in [0..mt.getColumns()-1] ) {
\n mt.setData( r, c, “Cell_{r}_{c}”);
\n }
\n}<\/p>\n
def font: Font = Font { size: 12 };
\ndef headerFont: Font = Font { name: “Arial Bold” size: 12 };<\/p>\n
def backFill = LinearGradient {
\n startX: 0.0, startY: 0.0, endX: 0.0, endY: 100
\n proportional: false
\n stops: [
\n Stop { offset: 0 color: Color.GRAY },
\n Stop { offset: 0.2 color: Color.BLACK }
\n ]
\n}<\/p>\n
var scene: Scene;
\nvar dataGrid: XenonDataGrid<\/b>;
\nvar vertSB: ScrollBar;
\nvar horzSB: ScrollBar;<\/p>\n
var myScrollRow <\/b>: Float = 0 on replace {
\n dataGrid.scrollRow<\/b> = myScrollRow as Integer;
\n};<\/p>\n
var myScrollColumn <\/b>: Float = 0 on replace {
\n dataGrid.scrollColumn <\/b>= myScrollColumn as Integer;
\n};<\/p>\n
\nStage {
\n title: “Xenon Data Grid Demo #2 (Scrollable)”
\n width: 750
\n height: 500
\n scene: scene = Scene {
\n fill: Color.web(“#F0F0F0”)
\n content: [
\n vertSB = ScrollBar {
\n layoutX: bind scene.width – OFFSET\/2
\n layoutY: MARGIN_HEIGHT
\n width: OFFSET
\n height: bind scene.height – ( 2 * MARGIN_HEIGHT + OFFSET + GAP_SIZE)
\n min: 0
\n max: mt.getRows() – GRID_ROWS<\/b>
\n vertical: true
\n value: bind myScrollRow with inverse<\/b>
\n },<\/p>\n
horzSB = ScrollBar {
\n layoutX: MARGIN_WIDTH
\n layoutY: bind scene.height – OFFSET
\n width: bind scene.width – ( 2 * MARGIN_WIDTH + OFFSET + GAP_SIZE)
\n height: OFFSET
\n min: 1
\n max: mt.getColumns() – GRID_COLUMNS<\/b>
\n vertical: false
\n value: bind myScrollColumn with inverse<\/b>
\n },<\/p>\n
dataGrid = XenonDataGrid {
\n debug: true;<\/p>\n
layoutX: MARGIN_WIDTH
\n layoutY: MARGIN_HEIGHT
\n width: bind scene.width – (2 * MARGIN_WIDTH + OFFSET + GAP_SIZE )
\n height: bind scene.height – ( 2 * MARGIN_HEIGHT + OFFSET + GAP_SIZE )
\n
\n headerCellFont: headerFont
\n cellFont: font;<\/p>\n
masterLayer<\/b>: MultiGridLayer <\/b>{
\n cornerLayer: GridLayer<\/b> {
\n debug: true
\n rowSize: 1
\n columnSize: 1
\n renderers: [
\n XenonGridCellHeaderRenderer <\/b>{
\n backgroundFill: Color.DARKGRAY
\n foregroundFill: Color.LIGHTGRAY
\n }
\n ]<\/p>\n
tableModel: TableModel <\/b>{
\n rowSize: 1 columnSize: 1 data: “Corner”
\n }
\n }<\/p>\n
rowHeaderLayer: GridLayer<\/b> {
\n debug: true
\n rowSize: GRID_ROWS
\n columnSize: 1
\n renderers: [
\n for ( r in [0..<GRID_ROWS] ) {
\n XenonGridCellHeaderRenderer <\/b>{
\n backgroundFill: backFill
\n foregroundFill: Color.WHITE
\n }
\n }
\n ]<\/p>\n
tableModel: TableModel<\/b> {
\n rowSize: mt.getRows()
\n columnSize: 1
\n data: for ( r in [0..mt.getRows()-1] ) {
\n “Row {r}” } }
\n }
\n <\/p>\n
columnHeaderLayer: GridLayer<\/b> {
\n debug: true
\n rowSize: 1
\n columnSize: GRID_COLUMNS
\n renderers: [
\n for ( c in [0..<GRID_COLUMNS] ) {
\n XenonGridCellHeaderRenderer <\/b>{
\n backgroundFill: backFill
\n foregroundFill: Color.WHITE
\n }
\n }
\n ]<\/p>\n
tableModel: TableModel<\/b> {
\n rowSize: 1
\n columnSize: mt.getColumns()
\n data:
\n for ( c in [0..mt.getColumns()-1] ) {
\n “Column {c}”
\n }
\n }
\n }<\/p>\n
bodyLayer: GridLayer<\/b> {
\n debug: true
\n rowSize: GRID_ROWS
\n columnSize: GRID_COLUMNS
\n renderers: [
\n for ( r in [0..<GRID_ROWS] ) {
\n for ( c in [0..<GRID_COLUMNS] ) {
\n XenonGridCellRenderer <\/b>{
\n backgroundFill: if ( r mod 2 == 1 ) Color.LIGHTGREEN else Color.LIGHTGRAY
\n }
\n }
\n }
\n ]<\/p>\n
tableModel: TableModel<\/b> {
\n rowSize: mt.getRows()
\n columnSize: mt.getColumns()
\n data:
\n for ( r in [0..mt.getRows()-1] ) {
\n for ( c in [0..mt.getColumns()-1] ) {
\n if ( c == 2)
\n “LONGTEXT {mt.getData( r, c).toString()<\/b>}”
\n else
\n mt.getData( r, c).toString()<\/b>
\n }
\n }
\n }
\n }
\n }
\n }
\n ]
\n }
\n}<\/p>\n
dataGrid.selectionStrategy.onUnselection = function ( ctx: SelectionContext ) <\/b>{
\n FX.println(“old selection ( {ctx.selectedRowMin}, {ctx.selectedColumnMin} ) – ( {ctx.selectedRowMax}, {ctx.selectedColumnMax} )”);
\n}<\/p>\n
dataGrid.selectionStrategy.onSelection = function ( ctx: SelectionContext, oldCtx: SelectionContext )<\/b> {
\n FX.println(“new selection ( {ctx.selectedRowMin}, {ctx.selectedColumnMin} ) – ( {ctx.selectedRowMax}, {ctx.selectedColumnMax} )”);
\n}<\/p>\n
\/\/ END\n<\/p><\/blockquote>\n
\nIn this example, we create a Java object type, Matrix, which represents our large table (50 rows down and 50 rows across, a grand total of 2500). XDG does not care where the data comes from, because it is contained in a TableModel type. Our scene contains three UI components, two scroll bars, horizontal and vertically respectively and the XeNoNDataGrid.<\/p>\n
We have two script variables, myScrollRow and myScrollColumn, to listen to the changes in the scrollbar. There are two triggers on them, which update the XDG scroll position. Two indirect script variable are used indirectly instead of binding, because it allows for future updates in the reverse direction – XDG implementation can update the scroll position. <\/p>\n
Pay particularly attention to the code, which declares each ScrollBar and set the maximum value. We avoid out of bound runtime exceptions if we can limit the coordinates to the confines of the table model<\/p>\n
So we declare the Scene and scrollbars. We declare the XDG with a MultiGridLayer<\/b>. We can optionally define the corner, column header and\/or row header layers, but we must declare the body layer. The body layer is a GridLayer <\/b>type, which accepts a sequence of renderer cells and a table model. Notice we set up the rowSize and columnSize of the grid layer’s renderers, which different to the user defined table model bounderies. It is this difference that provides the scrolling ability.<\/p>\n
<\/p>\n
Conclusion<\/h2>\n
\nThe article introduced the XenonDataGrid and its capabilities in scrolling data sets. The Milestone M2 code is downloadable from Project Kenai in binary and source release<\/a>.<\/p>\n\nTODO<\/b>: Milestone 3 will feature the ability to edit the data and it will show off editor renderer cell(s). There will be a fix to the ProportionalResizeLayoutStrategy (buggy). There will be ability to set the minimum and maximum width and heights of header cells. Finally there will possibly be a better selection model based on ranges. <\/p>\n
\n<\/p>\n
\nThis is Peter Pilgrim. Out.\n<\/p>\n
STOP PRESS <\/h2>\n
There is a bug in the reordering of the rows and column, which I won’t fix it in the M2 release. The solution is to change this line 183 in the TableUtils.fx<\/p>\n
\n var value Integer = (mapping.getByB( j ) as IntegerMapping ).getB();\n<\/p><\/blockquote>\n
to <\/p>\n
\n var value Integer = (mapping.getByA( j ) as IntegerMapping ).getB();\n<\/p><\/blockquote>\n
Download the source code, build the distribution, then recompile the code and build the JAR. This reminds to ask Stephen Chin’s permission to put the JFXtras 0.5 JARs into a Maven Repository in the future.<\/p>\n
See you for the M3 release
\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
XenonDataGrid M2, Nelson Framework (Milestone 2)*WIP* Hi All Yours truly I have just made Milestone 2.0 release of the Nelson Framework JavaFX Data Grid Component. Changes You can now scroll through a data grid. There is a new reordering implementation of renderer cells in the grid layer There is a new data structure Mapping and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/www.xenonique.co.uk\/blog\/wp-json\/wp\/v2\/posts\/51"}],"collection":[{"href":"https:\/\/www.xenonique.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xenonique.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xenonique.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xenonique.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":0,"href":"https:\/\/www.xenonique.co.uk\/blog\/wp-json\/wp\/v2\/posts\/51\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.xenonique.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xenonique.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xenonique.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}