Refining PagingControls styling.

gemsfx-demo/src/main/java/com/dlsc/gemsfx/demo/PagingControlsApp.java

@@ -2,50 +2,68 @@
 
 import com.dlsc.gemsfx.PagingControlBase.MessageLabelStrategy;
 import com.dlsc.gemsfx.PagingControls;
-import com.dlsc.gemsfx.Spacer;
 import fr.brouillard.oss.cssfx.CSSFX;
 import javafx.application.Application;
-import javafx.beans.binding.Bindings;
+import javafx.beans.property.BooleanProperty;
 import javafx.beans.property.ObjectProperty;
+import javafx.beans.property.SimpleBooleanProperty;
 import javafx.beans.property.SimpleObjectProperty;
 import javafx.geometry.HPos;
 import javafx.geometry.Insets;
 import javafx.geometry.Pos;
 import javafx.scene.Scene;
 import javafx.scene.control.CheckBox;
 import javafx.scene.control.ChoiceBox;
-import javafx.scene.control.Label;
-import javafx.scene.layout.FlowPane;
+import javafx.scene.control.ScrollPane;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.Region;
 import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
 import javafx.stage.Stage;
+import org.scenicview.ScenicView;
 
-import java.util.List;
+import java.util.Objects;
 
 public class PagingControlsApp extends Application {
 
     private final ObjectProperty<HPos> alignmentProperty = new SimpleObjectProperty<>(HPos.RIGHT);
 
+    private final BooleanProperty showControls = new SimpleBooleanProperty(false);
+
     @Override
     public void start(Stage stage) {
-        VBox vBox1 = createSection(10, 221, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.HIDE);
-        VBox vBox2 = createSection(15, 45, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.SHOW_ARROW_BUTTONS);
-        VBox vBox3 = createSection(20, 1000, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.SHOW_PAGE_BUTTONS);
-        VBox vBox4 = createSection(5, 5, MessageLabelStrategy.ALWAYS_SHOW, PagingControls.FirstLastPageDisplayMode.HIDE);
-        VBox vBox5 = createSection(5, 0, MessageLabelStrategy.ALWAYS_SHOW, PagingControls.FirstLastPageDisplayMode.HIDE);
+        VBox vBox1 = createSection(10, 221, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.HIDE, 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);
+        VBox vBox4 = createSection(15, 45, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.SHOW_ARROW_BUTTONS, 4);
+        VBox vBox5 = createSection(20, 1000, MessageLabelStrategy.SHOW_WHEN_NEEDED, PagingControls.FirstLastPageDisplayMode.SHOW_PAGE_BUTTONS, 5);
+        VBox vBox6 = createSection(5, 5, MessageLabelStrategy.ALWAYS_SHOW, PagingControls.FirstLastPageDisplayMode.HIDE, 6);
+        VBox vBox7 = createSection(5, 0, MessageLabelStrategy.ALWAYS_SHOW, PagingControls.FirstLastPageDisplayMode.HIDE, 7);
+        VBox vBox8 = createSection(10, 200, MessageLabelStrategy.ALWAYS_SHOW, PagingControls.FirstLastPageDisplayMode.HIDE, 8);
+        VBox vBox9 = createSection(10, 200, MessageLabelStrategy.ALWAYS_SHOW, PagingControls.FirstLastPageDisplayMode.HIDE, 9);
 
         ChoiceBox<HPos> alignmentChoiceBox = new ChoiceBox<>();
         alignmentChoiceBox.getItems().setAll(HPos.values());
         alignmentChoiceBox.valueProperty().bindBidirectional(alignmentProperty);
 
-        VBox all = new VBox(20, alignmentChoiceBox, vBox1, vBox2, vBox3, vBox4, vBox5);
+        CheckBox showControlsBox = new CheckBox("Show settings");
+        showControlsBox.selectedProperty().bindBidirectional(showControls);
+
+        HBox hBox = new HBox(10, alignmentChoiceBox, showControlsBox);
+        hBox.setAlignment(Pos.CENTER_LEFT);
+
+        VBox all = new VBox(20, hBox, vBox1, vBox2, vBox3, vBox4, vBox5, vBox6, vBox7, vBox8, vBox9);
 
         StackPane stackPane = new StackPane(all);
         stackPane.setPadding(new Insets(50, 50, 50, 50));
 
-        Scene scene = new Scene(stackPane);
+        ScrollPane scrollPane = new ScrollPane(stackPane);
+        scrollPane.setFitToHeight(true);
+        scrollPane.setFitToWidth(true);
+        scrollPane.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
+        scrollPane.setVbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);
+
+        Scene scene = new Scene(scrollPane);
 
         CSSFX.start(stackPane);
 
@@ -56,54 +74,26 @@ public void start(Stage stage) {
         stage.sizeToScene();
         stage.setTitle("Paging View");
         stage.show();
+
+        CSSFX.start();
     }
 
-    private VBox createSection(int pageSize, int itemCount, MessageLabelStrategy messageLabelStrategy, PagingControls.FirstLastPageDisplayMode displayMode) {
+    private VBox createSection(int pageSize, int itemCount, MessageLabelStrategy messageLabelStrategy, PagingControls.FirstLastPageDisplayMode displayMode, int index) {
         PagingControls pagingControls = new PagingControls();
         pagingControls.alignmentProperty().bind(alignmentProperty);
         pagingControls.setMessageLabelStrategy(messageLabelStrategy);
         pagingControls.setTotalItemCount(itemCount);
         pagingControls.setPageSize(pageSize);
         pagingControls.setFirstLastPageDisplayMode(displayMode);
-
+        pagingControls.getStylesheets().add(Objects.requireNonNull(PagingControlsApp.class.getResource("paging-controls-" + index + ".css")).toExternalForm());
         pagingControls.setStyle("-fx-border-color: black; -fx-padding: 20px");
         pagingControls.setPrefWidth(800);
 
-        Label pageLabel = new Label();
-        pageLabel.textProperty().bind(Bindings.createStringBinding(() -> "Page Index: " + pagingControls.getPage(), pagingControls.pageProperty()));
-
-        Label pageCountLabel = new Label();
-        pageCountLabel.textProperty().bind(Bindings.createStringBinding(() -> "Page count: " + pagingControls.getPageCount(), pagingControls.pageCountProperty()));
-
-        ChoiceBox<PagingControls.FirstLastPageDisplayMode> displayModeChoiceBox = new ChoiceBox<>();
-        displayModeChoiceBox.getItems().setAll(PagingControls.FirstLastPageDisplayMode.values());
-        displayModeChoiceBox.valueProperty().bindBidirectional(pagingControls.firstLastPageDisplayModeProperty());
-
-        CheckBox showPreviousNextButton = new CheckBox("Show prev / next buttons");
-        showPreviousNextButton.selectedProperty().bindBidirectional(pagingControls.showPreviousNextPageButtonProperty());
-
-        ChoiceBox<MessageLabelStrategy> strategyChoiceBox = new ChoiceBox<>();
-        strategyChoiceBox.getItems().addAll(MessageLabelStrategy.values());
-        strategyChoiceBox.valueProperty().bindBidirectional(pagingControls.messageLabelStrategyProperty());
-
-        ChoiceBox<Integer> maxPageIndicatorsBox = new ChoiceBox<>();
-        maxPageIndicatorsBox.getItems().setAll(List.of(1, 2, 5, 10));
-        maxPageIndicatorsBox.valueProperty().bindBidirectional(pagingControls.maxPageIndicatorsCountProperty().asObject());
-
-        HBox displayModeBox = new HBox(5, new Label("Display mode: "), displayModeChoiceBox);
-        displayModeBox.setAlignment(Pos.CENTER_LEFT);
-
-        HBox strategyBox = new HBox(5, new Label("Label strategy: "), strategyChoiceBox);
-        strategyBox.setAlignment(Pos.CENTER_LEFT);
-
-        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.setVgap(10);
-        flowPane.setHgap(20);
+        PagingControlsSettingsView pagingControlsSettingsView = new PagingControlsSettingsView(pagingControls);
+        pagingControlsSettingsView.visibleProperty().bind(showControls);
+        pagingControlsSettingsView.managedProperty().bind(showControls);
 
-        VBox vBox = new VBox(10, pagingControls, flowPane);
+        VBox vBox = new VBox(10, pagingControls, pagingControlsSettingsView);
         vBox.setMaxHeight(Region.USE_PREF_SIZE);
 
         return vBox;

gemsfx-demo/src/main/java/com/dlsc/gemsfx/demo/PagingControlsSettingsView.java

@@ -13,6 +13,7 @@
 import javafx.scene.layout.Region;
 import javafx.scene.layout.VBox;
 
+import java.util.ArrayList;
 import java.util.List;
 
 public class PagingControlsSettingsView extends VBox {
@@ -38,8 +39,14 @@ public PagingControlsSettingsView(PagingControlBase pagingControls) {
         strategyChoiceBox.valueProperty().bindBidirectional(pagingControls.messageLabelStrategyProperty());
 
         ChoiceBox<Integer> maxPageIndicatorsBox = new ChoiceBox<>();
-        maxPageIndicatorsBox.getItems().setAll(List.of(1, 2, 5, 10));
-        maxPageIndicatorsBox.valueProperty().bindBidirectional(pagingControls.maxPageIndicatorsCountProperty().asObject());
+        List<Integer> counts = new ArrayList<>(List.of(1, 2, 5, 10));
+        if (!counts.contains(pagingControls.getMaxPageIndicatorsCount())) {
+            counts.add(pagingControls.getMaxPageIndicatorsCount());
+        }
+
+        maxPageIndicatorsBox.getItems().setAll(counts);
+        maxPageIndicatorsBox.setValue(pagingControls.getMaxPageIndicatorsCount());
+        maxPageIndicatorsBox.valueProperty().addListener(it -> pagingControls.setMaxPageIndicatorsCount(maxPageIndicatorsBox.getValue()));
 
         HBox displayModeBox = new HBox(5, new Label("Display mode: "), displayModeChoiceBox);
         displayModeBox.setAlignment(Pos.CENTER_LEFT);

gemsfx-demo/src/main/java/com/dlsc/gemsfx/demo/PagingListViewApp.java

@@ -45,6 +45,9 @@ public void start(Stage stage) {
         box.setPadding(new Insets(20));
 
         Scene scene = new Scene(box);
+
+        scene.focusOwnerProperty().addListener(it -> System.out.println(scene.getFocusOwner()));
+
         stage.setTitle("Paging List View");
         stage.setScene(scene);
         stage.sizeToScene();

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-1.css

@@ -0,0 +1,23 @@
+.paging-controls > .pane > .page-buttons-container > .element {
+    -fx-background-color:
+            #090a0c,
+            linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%),
+            linear-gradient(#20262b, #191d22),
+            radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
+    -fx-background-radius: 5,4,3,5;
+    -fx-background-insets: 0,1,2,0;
+    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
+    -fx-font-family: "Arial";
+    -fx-text-fill: white;
+    -fx-font-size: 16px;
+    -fx-padding: 10 20 10 20;
+}
+
+.paging-controls > .pane > .page-buttons-container > .page-button.current {
+    -fx-border-color: red;
+    -fx-border-radius: 5px;
+}
+
+.paging-controls > .pane > .page-buttons-container > .element .icon {
+    -fx-background-color: white;
+}

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-2.css

@@ -0,0 +1,25 @@
+.paging-controls > .pane > .page-buttons-container {
+    -fx-spacing: 5px;
+}
+
+.paging-controls > .pane > .page-buttons-container > .button {
+    -fx-background-color:
+            #c3c4c4,
+            linear-gradient(#d6d6d6 50%, white 100%),
+            radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%);
+    -fx-background-radius: 30;
+    -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 );
+}
+
+.paging-controls > .pane > .page-buttons-container > .button:current {
+    -fx-background-color:
+            red,
+            linear-gradient(red 50%, white 100%),
+            radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%);
+    -fx-background-radius: 30;
+    -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 );
+}

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-3.css

@@ -0,0 +1,14 @@
+.paging-controls > .pane > .page-buttons-container > .button {
+    -fx-background-color:
+            linear-gradient(#ffd65b, #e68400),
+            linear-gradient(#ffef84, #f2ba44),
+            linear-gradient(#ffea6a, #efaa22),
+            linear-gradient(#ffe657 0%, #f8c202 50%, #eea10b 100%),
+            linear-gradient(from 0% 0% to 15% 50%, rgba(255,255,255,0.9), rgba(255,255,255,0));
+    -fx-background-radius: 30;
+    -fx-background-insets: 0,1,2,3,0;
+    -fx-text-fill: #654b00;
+    -fx-font-weight: bold;
+    -fx-font-size: 14px;
+    -fx-padding: 10 20 10 20;
+}

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-4.css

@@ -0,0 +1,10 @@
+.paging-controls > .pane > .page-buttons-container > .element {
+    -fx-background-color:
+            linear-gradient(#f0ff35, #a9ff00),
+            radial-gradient(center 50% -40%, radius 200%, #b8ee36 45%, #80c800 50%);
+    -fx-background-radius: 6, 5;
+    -fx-background-insets: 0, 1;
+    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
+    -fx-text-fill: #395306;
+    -fx-padding: 5px 15px;
+}

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-8.css

@@ -0,0 +1,16 @@
+.paging-controls > .pane > .page-buttons-container > .element {
+    -fx-background-color:
+            #3c7fb1,
+            linear-gradient(#fafdfe, #e8f5fc),
+            linear-gradient(#eaf6fd 0%, #d9f0fc 49%, #bee6fd 50%, #a7d9f5 100%);
+    -fx-background-insets: 0,1,2;
+    -fx-background-radius: 3,2,1;
+    -fx-padding: 3 30 3 30;
+    -fx-text-fill: black;
+    -fx-font-size: 14px;
+}
+
+.paging-controls > .pane > .page-buttons-container > .element.current {
+    -fx-border-color: red;
+    -fx-border-radius: 3px;
+}

gemsfx-demo/src/main/resources/com/dlsc/gemsfx/demo/paging-controls-9.css

@@ -0,0 +1,6 @@
+.paging-controls > .pane > .page-buttons-container > .button {
+    -fx-background-color: linear-gradient(#ff5400, #be1d00);
+    -fx-background-radius: 30;
+    -fx-background-insets: 0;
+    -fx-text-fill: white;
+}

gemsfx/src/main/java/com/dlsc/gemsfx/PagingControlBase.java

@@ -13,6 +13,7 @@
 import javafx.scene.Node;
 import javafx.scene.control.Control;
 import javafx.scene.control.Label;
+import javafx.scene.layout.Region;
 import javafx.util.Callback;
 
 public abstract class PagingControlBase extends Control {
@@ -42,12 +43,12 @@ public PagingControlBase() {
             return count;
         }, totalItemCountProperty(), pageSizeProperty()));
 
-        Label firstPageDivider = new Label("...");
+        Region firstPageDivider = new Region();
         firstPageDivider.getStyleClass().addAll("page-divider", "first-page-divider");
         setFirstPageDivider(firstPageDivider);
 
-        Label lastPageDivider = new Label("...");
-        lastPageDivider.getStyleClass().addAll("page-divider", "first-page-divider");
+        Region lastPageDivider = new Region();
+        lastPageDivider.getStyleClass().addAll("page-divider", "last-page-divider");
         setLastPageDivider(lastPageDivider);
     }
 

gemsfx/src/main/java/com/dlsc/gemsfx/PagingControls.java

@@ -1,8 +1,6 @@
 package com.dlsc.gemsfx;
 
 import com.dlsc.gemsfx.skins.PagingControlsSkin;
-import javafx.beans.binding.Bindings;
-import javafx.scene.control.Label;
 import javafx.scene.control.Skin;
 import javafx.scene.input.KeyCode;
 import javafx.scene.input.KeyEvent;

gemsfx/src/main/java/com/dlsc/gemsfx/PagingListView.java

@@ -14,14 +14,15 @@
 import javafx.collections.ObservableList;
 import javafx.concurrent.Service;
 import javafx.concurrent.Task;
-import javafx.geometry.HPos;
 import javafx.scene.Node;
 import javafx.scene.control.Cell;
 import javafx.scene.control.ListCell;
 import javafx.scene.control.ListView;
 import javafx.scene.control.MultipleSelectionModel;
 import javafx.scene.control.SelectionMode;
 import javafx.scene.control.Skin;
+import javafx.scene.input.KeyCode;
+import javafx.scene.input.KeyEvent;
 import javafx.util.Callback;
 
 import java.util.Collections;
@@ -38,9 +39,7 @@ public class PagingListView<T> extends PagingControlBase {
 
     private final ListView<T> listView = new ListView<>(items);
 
-    private final InnerListViewSkin<T> innerListViewSkin;
-
-    private final InvalidationListener updateListener = (Observable it) -> updateItems();
+    private final InvalidationListener updateListener = (Observable it) -> refresh();
 
     private final WeakInvalidationListener weakUpdateListener = new WeakInvalidationListener(updateListener);
 
@@ -50,8 +49,7 @@ public PagingListView() {
         listView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
         listView.cellFactoryProperty().bind(cellFactoryProperty());
 
-        innerListViewSkin = new InnerListViewSkin<>(listView, this);
-        listView.setSkin(innerListViewSkin);
+        listView.setSkin( new InnerListViewSkin<>(listView, this));
 
         loadingService.setOnSucceeded(evt -> {
             loadingStatus.set(Status.OK);
@@ -69,8 +67,8 @@ public PagingListView() {
         InvalidationListener loadListener = it -> loadingService.restart();
 
         pageProperty().addListener(loadListener);
-        totalItemCountProperty().addListener(loadListener);
         pageSizeProperty().addListener(loadListener);
+        totalItemCountProperty().addListener(loadListener);
         loaderProperty().addListener(loadListener);
 
         setCellFactory(lv -> new ListCell<>() {
@@ -90,7 +88,15 @@ protected void updateItem(T item, boolean empty) {
         pageProperty().addListener(weakUpdateListener);
         cellFactoryProperty().addListener(weakUpdateListener);
 
-        updateItems();
+        addEventFilter(KeyEvent.KEY_PRESSED, evt -> {
+            if (evt.getCode() == KeyCode.RIGHT) {
+                nextPage();
+            } else if (evt.getCode() == KeyCode.LEFT) {
+                previousPage();
+            }
+        });
+
+        refresh();
     }
 
     @Override
@@ -273,7 +279,7 @@ public final ObjectProperty<Callback<ListView<T>, ListCell<T>>> cellFactoryPrope
         return cellFactory;
     }
 
-    private void updateItems() {
-        innerListViewSkin.updateItems();
+    public void refresh() {
+        getProperties().put("refresh-items", true);
     }
 }