Skip to content

Commit

Permalink
Minor skin improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@gldiazcardenas
gldiazcardenas committed Oct 11, 2023
1 parent 66a65b1 commit 0fd9277
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 65 deletions.
31 changes: 7 additions & 24 deletions gemsfx/src/main/java/com/dlsc/gemsfx/PhoneNumberField.java
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
}

}
71 changes: 36 additions & 35 deletions gemsfx/src/main/java/com/dlsc/gemsfx/skins/PhoneNumberFieldSkin.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ public class PhoneNumberFieldSkin extends SkinBase<PhoneNumberField> {
public PhoneNumberFieldSkin(PhoneNumberField control) {
super(control);

PhoneNumberFieldEditor editor = new PhoneNumberFieldEditor();
PhoneNumberEditor editor = new PhoneNumberEditor();

ComboBox<String> comboBox = new ComboBox<>();
comboBox.setMouseTransparent(true);// Disable all mouse events on the combo box
Expand All @@ -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 {
Expand All @@ -56,15 +56,16 @@ public PhoneNumberFieldSkin(PhoneNumberField control) {
getChildren().addAll(comboBox);
}

private class PhoneNumberFieldEditor extends ListCell<String> {
private static class PhoneNumberEditor extends ListCell<String> {

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();
Expand All @@ -74,50 +75,50 @@ 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();
if (!text.matches("[0-9]")) {
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<PhoneNumberFieldEditor> {

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);
}
};
}

}
Expand Down
12 changes: 6 additions & 6 deletions gemsfx/src/main/resources/com/dlsc/gemsfx/phone-number-field.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,28 +31,28 @@
-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 */
-fx-shape: "M 0 0 h 9 l -4.5 5 z";
-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);
}

Expand Down

0 comments on commit 0fd9277

Please sign in to comment.