Refined PagingControls. Introduced a separate GridPane for the page b…

…uttons so that they can all have the same width.
dlsc-software-consulting-gmbh · Dec 12, 2024 · e97248b · e97248b
1 parent 63e5961
commit e97248b
Show file tree

Hide file tree

Showing 13 changed files with 336 additions and 64 deletions.
diff --git a/gemsfx-demo/src/main/java/com/dlsc/gemsfx/demo/PagingControlsApp.java b/gemsfx-demo/src/main/java/com/dlsc/gemsfx/demo/PagingControlsApp.java
@@ -7,8 +7,10 @@
 import fr.brouillard.oss.cssfx.CSSFX;
 import javafx.application.Application;
 import javafx.beans.property.BooleanProperty;
+import javafx.beans.property.IntegerProperty;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.SimpleBooleanProperty;
+import javafx.beans.property.SimpleIntegerProperty;
 import javafx.beans.property.SimpleObjectProperty;
 import javafx.geometry.HPos;
 import javafx.geometry.Insets;
@@ -37,6 +39,15 @@ public class PagingControlsApp extends Application {
 
     @Override
     public void start(Stage stage) {
+        ObjectProperty<Integer> obj = new SimpleObjectProperty<>();
+
+        IntegerProperty inti = new SimpleIntegerProperty(10);
+        obj.bindBidirectional(inti.asObject());
+
+        System.out.println("Obj: " + obj.get());
+        obj.set(20);
+        System.out.println("inti: " + inti.get());
+
         VBox vBox1 = createSection(10, 221, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.SHOW_ARROW_BUTTONS, 1);
         VBox vBox2 = createSection(10, 221, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.HIDE, 2);
         VBox vBox3 = createSection(10, 221, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.HIDE, 3);

diff --git a/gemsfx-demo/src/main/java/com/dlsc/gemsfx/demo/PagingControlsSettingsView.java b/gemsfx-demo/src/main/java/com/dlsc/gemsfx/demo/PagingControlsSettingsView.java
@@ -27,13 +27,19 @@ public PagingControlsSettingsView(PagingControlBase pagingControls) {
         Label pageCountLabel = new Label();
         pageCountLabel.textProperty().bind(Bindings.createStringBinding(() -> "Page count: " + pagingControls.getPageCount(), pagingControls.pageCountProperty()));
 
+        Label pageSizeLabel = new Label();
+        pageSizeLabel.textProperty().bind(Bindings.createStringBinding(() -> "Page size: " + pagingControls.getPageSize(), pagingControls.pageSizeProperty()));
+
         ChoiceBox<PagingControls.FirstLastPageDisplayMode> firstLastPageDisplayModeBox = new ChoiceBox<>();
         firstLastPageDisplayModeBox.getItems().setAll(PagingControls.FirstLastPageDisplayMode.values());
         firstLastPageDisplayModeBox.valueProperty().bindBidirectional(pagingControls.firstLastPageDisplayModeProperty());
 
         CheckBox showPreviousNextButton = new CheckBox("Show prev / next buttons");
         showPreviousNextButton.selectedProperty().bindBidirectional(pagingControls.showPreviousNextPageButtonProperty());
 
+        CheckBox showPageSizeSelector = new CheckBox("Show page size selector");
+        showPageSizeSelector.selectedProperty().bindBidirectional(pagingControls.showPageSizeSelectorProperty());
+
         ChoiceBox<PagingControlBase.MessageLabelStrategy> strategyChoiceBox = new ChoiceBox<>();
         strategyChoiceBox.getItems().addAll(PagingControlBase.MessageLabelStrategy.values());
         strategyChoiceBox.valueProperty().bindBidirectional(pagingControls.messageLabelStrategyProperty());
@@ -48,6 +54,9 @@ public PagingControlsSettingsView(PagingControlBase pagingControls) {
         maxPageIndicatorsBox.setValue(pagingControls.getMaxPageIndicatorsCount());
         maxPageIndicatorsBox.valueProperty().addListener(it -> pagingControls.setMaxPageIndicatorsCount(maxPageIndicatorsBox.getValue()));
 
+        CheckBox sameWidthButtonsBox = new CheckBox("Same width page buttons");
+        sameWidthButtonsBox.selectedProperty().bindBidirectional(pagingControls.sameWidthPageButtonsProperty());
+
         HBox displayModeBox = new HBox(5, new Label("First / last buttons: "), firstLastPageDisplayModeBox);
         displayModeBox.setAlignment(Pos.CENTER_LEFT);
 
@@ -57,7 +66,8 @@ public PagingControlsSettingsView(PagingControlBase pagingControls) {
         HBox indicatorBox = new HBox(5, new Label("# Indicators: "), maxPageIndicatorsBox);
         indicatorBox.setAlignment(Pos.CENTER_LEFT);
 
-        FlowPane flowPane = new FlowPane(pageLabel, pageCountLabel, new Spacer(), showPreviousNextButton, displayModeBox, strategyBox, indicatorBox);
+        FlowPane flowPane = new FlowPane(pageLabel, pageSizeLabel, pageCountLabel, new Spacer(), showPreviousNextButton, showPageSizeSelector, sameWidthButtonsBox,
+                displayModeBox, strategyBox, indicatorBox);
         flowPane.setVgap(10);
         flowPane.setHgap(20);
 

diff --git a/gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-1.css b/gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-1.css
@@ -2,7 +2,7 @@
     -fx-background-color: white;
 }
 
-.paging-controls > .pane > .page-buttons-container > .element {
+.paging-controls > .pane .element {
     -fx-background-color:
             #090a0c,
             linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%),
@@ -17,11 +17,23 @@
     -fx-padding: 10 20 10 20;
 }
 
-.paging-controls > .pane > .page-buttons-container > .page-button.current {
+.paging-controls > .pane > .buttons-container .element.current {
     -fx-border-color: red;
     -fx-border-radius: 5px;
 }
 
-.paging-controls > .pane > .page-buttons-container > .element .icon {
+.paging-controls > .pane > .buttons-container .element .icon {
     -fx-background-color: white;
+}
+
+.paging-controls > .pane > .page-size-container > .choice-box > .label {
+    -fx-text-fill: white;
+}
+
+.paging-controls > .pane > .page-size-container > .choice-box .open-button .arrow {
+    -fx-shape: "M6.7656 6.1875 Q6.9062 6 7.125 6 Q7.3438 6 7.5312 6.0938 L13.0156 11.5625 Q13.2031 11.7188 13.2031 11.9375 Q13.2031 12.1406 13.1094 12.3438 L7.625 17.8125 Q7.4375 18 7.2188 18 Q7.0156 18 6.8125 17.8594 Q6.625 17.7188 6.5938 17.4844 Q6.5781 17.2344 6.7188 17.0469 L11.7656 12 L6.7656 7.0156 Q6.5781 6.8594 6.5781 6.6094 Q6.5781 6.3438 6.7656 6.1875 Z";
+    -fx-rotate: 90;
+    -fx-background-color: white;
+    -fx-pref-width: 10px;
+    -fx-pref-height: 10px;
 }
diff --git a/gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-10.css b/gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-10.css
@@ -2,11 +2,15 @@
     -fx-background-color: white;
 }
 
-.paging-controls > .pane > .page-buttons-container {
+.paging-controls > .pane > .buttons-container {
     -fx-spacing: 10px;
 }
 
-.paging-controls > .pane > .page-buttons-container > .button {
+.paging-controls > .pane > .buttons-container > .grid-pane {
+    -fx-hgap: 10px;
+}
+
+.paging-controls > .pane .element {
     -fx-background-color: transparent;
     -fx-border-color: lightgrey;
     -fx-border-width: 1px;
@@ -16,13 +20,22 @@
     -fx-text-fill: -fx-text-base-color;
 }
 
-.paging-controls > .pane > .page-buttons-container > .button:hover {
+.paging-controls > .pane .button:hover {
     -fx-text-fill: -fx-text-base-color;
 }
 
-.paging-controls > .pane > .page-buttons-container > .button.current {
+.paging-controls > .pane .button.current {
     -fx-background-color: black;
     -fx-background-radius: 4px;
     -fx-border-color: transparent;
     -fx-text-fill: white;
+}
+
+.paging-controls > .pane > .page-size-container > .page-size-label {
+    -fx-font-size: 1.5em;
+    -fx-padding: 0px 20px;
+}
+
+.paging-controls > .pane > .message-label {
+    -fx-font-size: 1.5em;
 }
diff --git a/gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-2.css b/gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-2.css
@@ -2,11 +2,11 @@
     -fx-background-color: white;
 }
 
-.paging-controls > .pane > .page-buttons-container {
+.paging-controls > .pane > .buttons-container {
     -fx-spacing: 5px;
 }
 
-.paging-controls > .pane > .page-buttons-container > .button {
+.paging-controls > .pane .element {
     -fx-background-color:
             #c3c4c4,
             linear-gradient(#d6d6d6 50%, white 100%),
@@ -15,9 +15,14 @@
     -fx-background-insets: 0,1,1;
     -fx-text-fill: black;
     -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 );
+    -fx-min-width: 2em;
 }
 
-.paging-controls > .pane > .page-buttons-container > .button:current {
+.paging-controls > .pane > .buttons-container > .grid-pane {
+    -fx-hgap: 5px;
+}
+
+.paging-controls > .pane .element:current {
     -fx-background-color:
             red,
             linear-gradient(red 50%, white 100%),
@@ -28,14 +33,14 @@
     -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 );
 }
 
-.paging-controls > .pane > .page-buttons-container > .navigation-button {
+.paging-controls > .pane > .buttons-container > .navigation-button {
     -fx-content-display: graphic-only;
 }
 
-.paging-controls > .pane > .page-buttons-container > .navigation-button.previous-page-button  > .icon-wrapper > .icon {
+.paging-controls > .pane > .buttons-container > .navigation-button.previous-page-button  > .icon-wrapper > .icon {
     -fx-translate-x: -1;
 }
 
-.paging-controls > .pane > .page-buttons-container > .navigation-button.next-page-button  > .icon-wrapper > .icon {
+.paging-controls > .pane > .buttons-container > .navigation-button.next-page-button  > .icon-wrapper > .icon {
     -fx-translate-x: 1;
 }
diff --git a/gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-3.css b/gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-3.css
@@ -2,7 +2,7 @@
     -fx-background-color: white;
 }
 
-.paging-controls > .pane > .page-buttons-container > .button {
+.paging-controls > .pane .element {
     -fx-background-color:
             linear-gradient(#ffd65b, #e68400),
             linear-gradient(#ffef84, #f2ba44),
@@ -15,4 +15,20 @@
     -fx-font-weight: bold;
     -fx-font-size: 14px;
     -fx-padding: 10 20 10 20;
+}
+
+.paging-controls > .pane > .page-size-container {
+    -fx-padding: 0px 40px 0px 0px;
+}
+
+.paging-controls > .pane > .page-size-container > .label {
+    -fx-font-size: 16px;
+}
+
+.paging-controls > .pane > .page-size-container > .choice-box .open-button .arrow {
+    -fx-shape: "M6.7656 6.1875 Q6.9062 6 7.125 6 Q7.3438 6 7.5312 6.0938 L13.0156 11.5625 Q13.2031 11.7188 13.2031 11.9375 Q13.2031 12.1406 13.1094 12.3438 L7.625 17.8125 Q7.4375 18 7.2188 18 Q7.0156 18 6.8125 17.8594 Q6.625 17.7188 6.5938 17.4844 Q6.5781 17.2344 6.7188 17.0469 L11.7656 12 L6.7656 7.0156 Q6.5781 6.8594 6.5781 6.6094 Q6.5781 6.3438 6.7656 6.1875 Z";
+    -fx-rotate: 90;
+    -fx-background-color: black;
+    -fx-pref-width: 10px;
+    -fx-pref-height: 10px;
 }
diff --git a/gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-4.css b/gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-4.css
@@ -2,7 +2,7 @@
     -fx-background-color: white;
 }
 
-.paging-controls > .pane > .page-buttons-container > .element {
+.paging-controls > .pane .element {
     -fx-background-color:
             linear-gradient(#f0ff35, #a9ff00),
             radial-gradient(center 50% -40%, radius 200%, #b8ee36 45%, #80c800 50%);

diff --git a/gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-8.css b/gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-8.css
@@ -2,7 +2,7 @@
     -fx-background-color: white;
 }
 
-.paging-controls > .pane > .page-buttons-container > .element {
+.paging-controls > .pane .element {
     -fx-background-color:
             #3c7fb1,
             linear-gradient(#fafdfe, #e8f5fc),
@@ -14,7 +14,21 @@
     -fx-font-size: 14px;
 }
 
-.paging-controls > .pane > .page-buttons-container > .element.current {
-    -fx-border-color: red;
+.paging-controls > .pane .element.current {
+    -fx-border-color: orange;
     -fx-border-radius: 3px;
+}
+
+.paging-controls > .pane > .buttons-container {
+}
+
+.paging-controls > .pane > .page-size-container > .choice-box > .label {
+}
+
+.paging-controls > .pane > .page-size-container > .choice-box .open-button .arrow {
+    -fx-shape: "M6.7656 6.1875 Q6.9062 6 7.125 6 Q7.3438 6 7.5312 6.0938 L13.0156 11.5625 Q13.2031 11.7188 13.2031 11.9375 Q13.2031 12.1406 13.1094 12.3438 L7.625 17.8125 Q7.4375 18 7.2188 18 Q7.0156 18 6.8125 17.8594 Q6.625 17.7188 6.5938 17.4844 Q6.5781 17.2344 6.7188 17.0469 L11.7656 12 L6.7656 7.0156 Q6.5781 6.8594 6.5781 6.6094 Q6.5781 6.3438 6.7656 6.1875 Z";
+    -fx-rotate: 90;
+    -fx-background-color: black;
+    -fx-pref-width: 10px;
+    -fx-pref-height: 10px;
 }
diff --git a/gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-9.css b/gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-9.css
@@ -2,19 +2,35 @@
     -fx-background-color: white;
 }
 
-.paging-controls > .pane > .page-buttons-container > .button {
+.paging-controls > .pane .element {
     -fx-background-color: linear-gradient(#ff5400, #be1d00);
     -fx-background-radius: 30;
     -fx-background-insets: 0;
     -fx-text-fill: white;
 }
 
-.paging-controls > .pane > .page-buttons-container > .button.current {
+.paging-controls > .pane .element.current {
     -fx-border-color: derive(red, -30%);
     -fx-border-radius: 1em;
 }
 
-.paging-controls > .pane > .page-buttons-container > .navigation-button {
+.paging-controls > .pane > .buttons-container > .navigation-button {
     -fx-content-display: text-only;
     -fx-padding: 2px 10px;
-}
+}
+
+.paging-controls > .pane > .page-size-container > .choice-box > .label {
+    -fx-text-fill: white;
+}
+
+.paging-controls > .pane > .page-size-container > .choice-box .open-button .arrow {
+    -fx-shape: "M6.7656 6.1875 Q6.9062 6 7.125 6 Q7.3438 6 7.5312 6.0938 L13.0156 11.5625 Q13.2031 11.7188 13.2031 11.9375 Q13.2031 12.1406 13.1094 12.3438 L7.625 17.8125 Q7.4375 18 7.2188 18 Q7.0156 18 6.8125 17.8594 Q6.625 17.7188 6.5938 17.4844 Q6.5781 17.2344 6.7188 17.0469 L11.7656 12 L6.7656 7.0156 Q6.5781 6.8594 6.5781 6.6094 Q6.5781 6.3438 6.7656 6.1875 Z";
+    -fx-rotate: 90;
+    -fx-background-color: white;
+    -fx-pref-width: 10px;
+    -fx-pref-height: 10px;
+}
+
+.paging-controls > .pane > .buttons-container > .page-divider {
+    -fx-background-color: red;
+}