how - javafx sample

Mostrar el menú desplegable con el mouse sobre

Question

Quiero crear un menú desplegable como este:

Quiero cuando coloque el mouse sobre el texto para ver el cuadro combinado que puedo usar para seleccionar un valor. Cuando elimine el mouse, quiero ver Label simple. ¿Como puedo hacer esto?

Answer 1

Desconocido:

En vuelo estacionario:

Al hacer clic y elegir:

En Choice Complete:

import javafx.application.Application;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class Hoverboard extends Application {
public class TextChooser extends StackPane {
private Label label = new Label();
private ComboBox<String> combo = new ComboBox<>();
public TextChooser(String... options) {
StackPane.setAlignment(label, Pos.CENTER_LEFT);
StackPane.setAlignment(combo, Pos.CENTER_LEFT);
label.textProperty().bind(
combo.getSelectionModel().selectedItemProperty()
);
label.visibleProperty().bind(
combo.visibleProperty().not()
);
label.setPadding(new Insets(0, 0, 0, 9));
combo.getItems().setAll(options);
combo.getSelectionModel().select(0);
combo.setVisible(false);
label.setOnMouseEntered(event -> combo.setVisible(true));
combo.showingProperty().addListener(observable -> {
if (!combo.isShowing()) {
combo.setVisible(false);
}
});
combo.setOnMouseExited(event -> {
if (!combo.isShowing()) {
combo.setVisible(false);
}
});
getChildren().setAll(label, combo);
}
}
@Override
public void start(Stage stage) throws Exception {
TextChooser textChooser = new TextChooser(
"xyzzy", "frobozz", "foobar"
);
VBox layout = new VBox(textChooser);
layout.setPadding(new Insets(10));
stage.setScene(new Scene(layout));
stage.show();
}
public static void main(String[] args) {
launch(Hoverboard.class);
}
}

Answer 2

Dos posibles enfoques:

1. Intenta usar CSS para modificar el aspecto de ComboBox para que parezca un campo de texto normal; ocultar la flecha y el borde, y volver a mostrarlos en: hover. Deberá buscar la referencia CSS para ComboBox: http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#combobox

2. Use un campo de texto normal y muestre un borde (y una flecha) en: hover. Adjunte un oyente de ratón al TextField para mostrar un PopupControl al hacer clic con el mouse. Ponga un ListView dentro de PopupControl para que se comporte como un ComboBox. Tendrá que crear una clase que implemente Skin para su control emergente. Debería poder encontrar algunos ejemplos en la web.

Answer 3

Aquí también está la versión de estilo css: https://github.com/varren/JavaFX-CSS-Styled-ComboBox-Demo

Un poco diferente del predeterminado, pero puedes jugar con css para obtener lo que quieres. Los estilos predeterminados se pueden encontrar en jxrt.jar! /com/sun/javafx/scene/control/skin/caspian/caspian.css

CSS

#changed{
-fx-background-color: transparent;
}
#changed .arrow,
#changed .arrow-button{
-fx-background-color: transparent;
}
/* this part is from default stiles fxrt.jar!/com/sun/javafx/scene/control/skin/caspian/caspian.css */
#changed:hover{
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-radius: 5, 5, 4, 3;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-padding: 0;
}
#changed:showing > .arrow-button {
-fx-color: -fx-pressed-base;
}
#changed:hover > .arrow-button > .arrow{
-fx-background-insets: 1 0 -1 0, 0;
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
}

JAVA

public class Main extends Application {
@Override
public void start(Stage primaryStage) throws Exception{
HBox root = new HBox();
primaryStage.setTitle("Combo Box Style From Css");
ComboBox combobox = new ComboBox<String>(FXCollections.observableArrayList("One", "Two", "Three"));
combobox.getSelectionModel().select(0);
combobox.setId("changed");
ComboBox normalCombobox = new ComboBox<String>(FXCollections.observableArrayList("One", "Two", "Three"));
normalCombobox.getSelectionModel().select(0);
root.getChildren().addAll(combobox, normalCombobox);
Scene scene = new Scene(root, 300, 275);
scene.setFill(Color.WHITE);
String css = Main.class.getResource("styles.css").toExternalForm();
scene.getStylesheets().clear();
scene.getStylesheets().add(css);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

MANIFESTACIÓN