diff --git a/gemsfx/src/main/java/com/dlsc/gemsfx/PhoneNumberField.java b/gemsfx/src/main/java/com/dlsc/gemsfx/PhoneNumberField.java index da2fa1db..101e1336 100644 --- a/gemsfx/src/main/java/com/dlsc/gemsfx/PhoneNumberField.java +++ b/gemsfx/src/main/java/com/dlsc/gemsfx/PhoneNumberField.java @@ -1,8 +1,6 @@ package com.dlsc.gemsfx; import com.dlsc.gemsfx.skins.PhoneNumberFieldSkin; -import javafx.beans.property.IntegerProperty; -import javafx.beans.property.SimpleIntegerProperty; import javafx.beans.property.SimpleStringProperty; import javafx.beans.property.StringProperty; import javafx.scene.control.Control; @@ -29,33 +27,18 @@ public String getUserAgentStylesheet() { } // VALUE - private final StringProperty phoneNumber = new SimpleStringProperty(this, "phoneNumber"); + private final StringProperty value = new SimpleStringProperty(this, "value"); - public final StringProperty phoneNumberProperty() { - return phoneNumber; + public final StringProperty valueProperty() { + return value; } - public final String getPhoneNumber() { - return phoneNumberProperty().get(); + public final String getValue() { + return valueProperty().get(); } - public final void setPhoneNumber(String phoneNumber) { - phoneNumberProperty().set(phoneNumber); - } - - // COUNTRY - private final IntegerProperty countryCode = new SimpleIntegerProperty(this, "countryCode"); - - public final IntegerProperty countryCodeProperty() { - return countryCode; - } - - public final int getCountryCode() { - return countryCodeProperty().get(); - } - - public final void setCountryCode(int countryCode) { - countryCodeProperty().set(countryCode); + public final void setValue(String value) { + valueProperty().set(value); } } diff --git a/gemsfx/src/main/java/com/dlsc/gemsfx/skins/PhoneNumberFieldSkin.java b/gemsfx/src/main/java/com/dlsc/gemsfx/skins/PhoneNumberFieldSkin.java index d4a99d34..1318ca18 100644 --- a/gemsfx/src/main/java/com/dlsc/gemsfx/skins/PhoneNumberFieldSkin.java +++ b/gemsfx/src/main/java/com/dlsc/gemsfx/skins/PhoneNumberFieldSkin.java @@ -24,7 +24,7 @@ public class PhoneNumberFieldSkin extends SkinBase { public PhoneNumberFieldSkin(PhoneNumberField control) { super(control); - PhoneNumberFieldEditor editor = new PhoneNumberFieldEditor(); + PhoneNumberEditor editor = new PhoneNumberEditor(); ComboBox comboBox = new ComboBox<>(); comboBox.setMouseTransparent(true);// Disable all mouse events on the combo box @@ -41,9 +41,9 @@ public PhoneNumberFieldSkin(PhoneNumberField control) { comboBox.hide(); } else { - Bounds selectorBounds = editor.countrySelector.getBoundsInParent(); - if (selectorBounds.contains(evt.getX(), evt.getY())) { - editor.countrySelector.requestFocus(); + Bounds buttonBounds = editor.buttonBox.getBoundsInParent(); + if (buttonBounds.contains(evt.getX(), evt.getY())) { + editor.buttonBox.requestFocus(); comboBox.show(); } else { @@ -56,15 +56,16 @@ public PhoneNumberFieldSkin(PhoneNumberField control) { getChildren().addAll(comboBox); } - private class PhoneNumberFieldEditor extends ListCell { + private static class PhoneNumberEditor extends ListCell { private final TextField textField = new TextField(); - private final HBox countrySelector = new HBox(); + private final Label maskLabel = new Label(); + private final HBox buttonBox = new HBox(); - public PhoneNumberFieldEditor() { + public PhoneNumberEditor() { getStyleClass().add("editor"); - Label countryCode = new Label("(+##)"); + Label countryCode = new Label("(+###)"); countryCode.getStyleClass().add("country-code"); Region arrow = new Region(); @@ -74,10 +75,12 @@ public PhoneNumberFieldEditor() { arrowButton.getStyleClass().add("arrow-button"); arrowButton.getChildren().add(arrow); - countrySelector.getStyleClass().add("country-selector"); - countrySelector.getChildren().addAll(countryCode, arrowButton); + buttonBox.getStyleClass().add("button-box"); + buttonBox.getChildren().addAll(countryCode, arrowButton); + + maskLabel.setText("(###) ###-####"); + maskLabel.getStyleClass().add("text-mask"); - textField.textProperty().bindBidirectional(PhoneNumberFieldSkin.this.getSkinnable().phoneNumberProperty()); textField.setTextFormatter(new TextFormatter<>(change -> { if (change.isAdded()) { String text = change.getText(); @@ -85,39 +88,37 @@ public PhoneNumberFieldEditor() { return null; } } + else if (change.isContentChange()) { + String text = change.getControlNewText(); + if (text.length() > 10) { + return null; + } + } return change; })); } @Override protected Skin createDefaultSkin() { - return new PhoneNumberFieldEditorSkin(this); - } - - } - - private class PhoneNumberFieldEditorSkin extends SkinBase { - - private final Label maskLabel = new Label("(###) ###-####"); - - protected PhoneNumberFieldEditorSkin(PhoneNumberFieldEditor control) { - super(control); - maskLabel.getStyleClass().add("text-field-mask"); - getChildren().addAll(control.countrySelector, control.textField, maskLabel); - } + return new SkinBase<>(this) { + { + getChildren().addAll(buttonBox, textField, maskLabel); + } - @Override - protected void layoutChildren(double x, double y, double w, double h) { - final double arrowWidth = snapSizeX(getSkinnable().countrySelector.prefWidth(-1)); - getSkinnable().countrySelector.resizeRelocate(x, y, arrowWidth, h); + @Override + protected void layoutChildren(double x, double y, double w, double h) { + final double buttonWidth = snapSizeX(buttonBox.prefWidth(-1)); + buttonBox.resizeRelocate(x, y, buttonWidth, h); - final double textFieldX = snapPositionX(x + arrowWidth); - getSkinnable().textField.resizeRelocate(textFieldX, y, w - arrowWidth, h); + final double textFieldX = snapPositionX(x + buttonWidth); + textField.resizeRelocate(textFieldX, y, w - buttonWidth, h); - final Node textNode = getSkinnable().textField.lookup(".text"); - final double maskX = snapPositionX(textFieldX + textNode.getLayoutBounds().getWidth()); - final double maskWidth = snapSizeX(Math.max(0, Math.min(maskLabel.prefWidth(-1), w - maskX))); - maskLabel.resizeRelocate(maskX, y, maskWidth, h); + final Node textNode = textField.lookup(".text"); + final double maskX = snapPositionX(textFieldX + textNode.getLayoutBounds().getWidth()); + final double maskWidth = snapSizeX(Math.max(0, Math.min(maskLabel.prefWidth(-1), w - maskX))); + maskLabel.resizeRelocate(maskX, y, maskWidth, h); + } + }; } } diff --git a/gemsfx/src/main/resources/com/dlsc/gemsfx/phone-number-field.css b/gemsfx/src/main/resources/com/dlsc/gemsfx/phone-number-field.css index 70032799..795818e0 100644 --- a/gemsfx/src/main/resources/com/dlsc/gemsfx/phone-number-field.css +++ b/gemsfx/src/main/resources/com/dlsc/gemsfx/phone-number-field.css @@ -31,20 +31,20 @@ -fx-padding: 0px; } -.phone-number-field > .combo-box > .editor > .text-field-mask { +.phone-number-field > .combo-box > .editor > .text-mask { -fx-text-fill: rgb(0, 0, 0, .4); } -.phone-number-field > .combo-box > .editor > .country-selector { +.phone-number-field > .combo-box > .editor > .button-box { -fx-alignment: center; } -.phone-number-field > .combo-box > .editor > .country-selector > .arrow-button { +.phone-number-field > .combo-box > .editor > .button-box > .arrow-button { -fx-min-width: 10px; - -fx-padding: 10px; + -fx-padding: 10px 5px; } -.phone-number-field > .combo-box > .editor > .country-selector > .arrow-button > .arrow { +.phone-number-field > .combo-box > .editor > .button-box > .arrow-button > .arrow { -fx-background-color: -fx-mark-color; -fx-background-insets: 0; -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */ @@ -52,7 +52,7 @@ -fx-scale-shape: false; } -.phone-number-field > .combo-box > .editor > .country-selector > .country-code { +.phone-number-field > .combo-box > .editor > .button-box > .country-code { -fx-text-fill: rgb(0, 0, 0, .4); }