JavaFX: créer un menu vertical ruban

Un exemple de ce que je suis en train de faire ici est: lorsque vous ouvrez un office Word 2013 fichier et vous cliquez sur fichier, sur le côté gauche, il affiche une liste {Info, Nouveau, Ouvrir...}.

Sont là tout JavaFX composants comme ça? Je suis à la recherche d'une sorte de Liste de (quelque chose) dont les éléments sont alignés verticalement et vous pouvez cliquer sur pour faire quelque chose (dans mon cas le point de vue sur le droit exactement comme Word).

entendez-vous la microsoft est terrible ruban chose?
non, j'ai ajouter une image, c'est que la liste
Il n'y a pas de contrôle semblables à ceci, mais vous pouvez certainement créer un.
Cela sonne comme une MenuButton. Pour l'obtenir à regarder de la même façon que votre image, vous devez appliquer un peu de CSS.

OriginalL'auteur usertest | 2015-02-25

Vous pouvez facilement reproduire le Mot comme menu avec une VBox et boutons personnalisés des styles CSS. Voici un rapide exemple qui montre qu'une solution possible.

public class Jfxdemos extends Application {
@Override
public void start(Stage primaryStage) {
Button btn = new Button();
btn.setText("File");
final StackPane root = new StackPane();
AnchorPane editorRoot = new AnchorPane();
editorRoot.getChildren().add(btn);
root.getChildren().add(editorRoot);
Scene scene = new Scene(root, 300, 250);
scene.getStylesheets().add("/jfxdemos/styles.css");
primaryStage.setScene(scene);
primaryStage.show();
HBox fileRoot = new HBox();
VBox menu = new VBox();
menu.setStyle("-fx-background-color: blue;");
menu.setFillWidth(true);
Button backBtn = new Button("Left Arrow");
backBtn.setPrefWidth(100);
backBtn.getStyleClass().add("custom-menu-button");
backBtn.setOnAction(new EventHandler<ActionEvent>(){
@Override
public void handle(ActionEvent event) {
FadeTransition hideFileRootTransition = new FadeTransition(Duration.millis(500), fileRoot);
hideFileRootTransition.setFromValue(1.0);
hideFileRootTransition.setToValue(0.0);
FadeTransition showEditorRootTransition = new FadeTransition(Duration.millis(500), editorRoot);
showEditorRootTransition.setFromValue(0.0);
showEditorRootTransition.setToValue(1.0);
showEditorRootTransition.play();
hideFileRootTransition.play();
root.getChildren().remove(fileRoot);
}
});
Button infoBtn = new Button("Info");
infoBtn.setPrefWidth(100);
infoBtn.getStyleClass().add("custom-menu-button");
Button newBtn = new Button("New");
newBtn.setPrefWidth(100);
newBtn.getStyleClass().add("custom-menu-button");
Button openBtn = new Button("Open");
openBtn.setPrefWidth(100);
openBtn.getStyleClass().add("custom-menu-button");
menu.getChildren().addAll(backBtn,infoBtn, newBtn, openBtn);
VBox.setVgrow(infoBtn, Priority.ALWAYS);
fileRoot.getChildren().add(menu);
btn.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
root.getChildren().add(fileRoot);
FadeTransition hideEditorRootTransition = new FadeTransition(Duration.millis(500), editorRoot);
hideEditorRootTransition.setFromValue(1.0);
hideEditorRootTransition.setToValue(0.0);
FadeTransition showFileRootTransition = new FadeTransition(Duration.millis(500), fileRoot);
showFileRootTransition.setFromValue(0.0);
showFileRootTransition.setToValue(1.0);
hideEditorRootTransition.play();
showFileRootTransition.play();
}
});
}
/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}

Plus les styles.css.

.custom-menu-button {
-fx-background-color: blue;
-fx-text-fill: white;
-fx-border: none; 
}
.custom-menu-button:hover {
-fx-background-color: lightblue;
}

JavaFX: créer un menu vertical ruban

La même scène après avoir cliqué sur le bouton Fichier. J'ai utilisé un FadeTransition ici parce que c'est simple. Mais bien sûr, vous pouvez essayer de reproduire la même animation que dans Word.

JavaFX: créer un menu vertical ruban

Merci pour l'effort de l'homme

OriginalL'auteur Surprised Coconut

Voici un petit exemple à l'aide d'un style MenuButton.

import java.util.stream.Collectors;
import java.util.stream.Stream;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.MenuButton;
import javafx.scene.control.MenuItem;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class WordLikeMenuButton extends Application {
@Override
public void start(Stage primaryStage) {
MenuButton menuButton = new MenuButton();
menuButton.getItems().addAll(
Stream.of("Info", "New", "Open", "Save", "Save As", "Print", "Share", "Export", "Close")
.map(MenuItem::new).collect(Collectors.toList()));
BorderPane root = new BorderPane(null, menuButton, null, null, null);
Scene scene = new Scene(root, 350, 75);
scene.getStylesheets().add("word-like-menu-button.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

mot-comme-menu-bouton.css:

.menu-button, .menu-button .menu-item, .menu-button .context-menu {
-fx-background-color: #28559c;  
}
.menu-button .menu-item:hover {
-fx-background-color: #3b6bb7 ;
}
.menu-button .menu-item .label {
-fx-text-fill: white ;
}
.menu-button > .arrow-button {
-fx-background-color: white, #28559c ;
-fx-background-insets: 1, 3 ;
-fx-background-radius: 16, 16 ;
-fx-padding: 8 ;
}
.menu-button > .arrow-button > .arrow {
-fx-background-color: white ;
/*-fx-background-insets: 0, 2 ;
-fx-background-radius: 12, 12 ;*/
-fx-padding: 8 ; 
-fx-shape: "M0 6 l-6 -6 l0 -2 l6 -6 l2 0 l-6 6 l12 0 l0 2 l-12 0 l6 6 z";
}

Cela donne

JavaFX: créer un menu vertical ruban

Merci pour le code homme

OriginalL'auteur James_D

0

Il serait beaucoup mieux d'utiliser JFXTabPane et de le personnaliser un peu. Comme pour la flèche de retour, vous pouvez faire ce que j'ai fait avec le bouton déconnexion dans ce tutoriel http://synappse.co/blog/vertical-stateful-jfxtabpane-with-icons-in-javafx/

OriginalL'auteur Sebastian Suchanowski

Vous devez vous connecter pour publier un commentaire.