Discussion :

[Heavy Metal Hero]

Bonjour,

J'ai fait une tab pane qui a cette apparence:


Comme vous voyez, il y a un blanc sur la droite, c'est l'espace réservé à un bouton flèche qui apparaît lorsque la largeur du tabpane est trop petit pour contenir tous ses tabs.

J'aimerais remplir toute la largeur de la tabpane, sans ce blanc.

Voici mon code:
HelloApplication.java:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package com.example.demo;
 
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
 
import java.io.IOException;
 
public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(HelloApplication.class.getResource("hello-view.fxml"));
        Scene scene = new Scene(fxmlLoader.load(), 320, 240);
        stage.setTitle("Hello!");
        stage.setScene(scene);
        stage.show();
    }
 
    public static void main(String[] args) {
        launch();
    }
}

HelloController.java:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package com.example.demo;
 
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TabPane;
import javafx.scene.layout.BorderPane;
 
import java.net.URL;
import java.util.ResourceBundle;
 
public class HelloController implements Initializable {
 
    private static final int GAP = 19;
 
    @FXML
    private TabPane tabPane = null;
 
    @FXML
    private BorderPane borderPane = null;
 
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        // Permits to change the width of the tabs to fit all the space.
        tabPane.tabMinWidthProperty()
               .bind(tabPane.widthProperty()
                            .divide(tabPane.getTabs()
                                           .size())
                            .subtract(GAP));
    }
}

hello-view.css:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.tab-header-area {
    -fx-padding: 0 0 0 0;
}
 
.tab-header-background {
    -fx-background-color: transparent;
}
 
.tab-down-button {
    -fx-padding: -7;
}
 
.tab-down-button .arrow {
    -fx-padding: -7;
}
 
.tab {
    -fx-background-color: transparent;
    -fx-border-width: 0 0 0 0;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
}
 
.tab-label {
    -fx-font-size: 13px;
    -fx-font-weight: bold;
}
 
.tab:hover {
    -fx-background-color: cyan;
    -fx-border-color: black;
    -fx-border-width: 0 0 2 0;
}
 
.tab:pressed {
    -fx-background-color: gray;
    -fx-border-color: black;
    -fx-border-width: 0 0 2 0;
}
 
.tab:selected {
    -fx-background-color: blue;
    -fx-border-color: black;
    -fx-border-width: 0 0 2 0;
}

hello-view.fxml:

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import java.net.URL?>
<TabPane fx:id="tabPane" side="BOTTOM" tabClosingPolicy="UNAVAILABLE" xmlns="http://javafx.com/javafx/null" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.demo.HelloController">
    <tabs>
        <Tab fx:id="trackTab" text="Tracks">
            <content>
                <BorderPane fx:id="borderPane"/>
            </content>
        </Tab>
        <Tab text="Volumes">
            <content>
                <AnchorPane minHeight="0.0" minWidth="0.0" />
            </content>
        </Tab>
    </tabs>
    <stylesheets>
        <URL value="@hello-view.css" />
    </stylesheets>
</TabPane>

Dans le controller, j'utilise un binding pour que les tabs prennent la largeur de la tabpane. Dans le CSS, j'essaye de masquer le bouton flèche et son espace. D'ailleurs j'aimerais aussi me déparasser de ma constante GAP.

Avez-vous une solution ?

Merci de votre aide.

[gervais.b]

A quoi sert le GAP ? Est-ce que ce n'est pas lui qui cause cet espace vide sur la droite ?

[Heavy Metal Hero]

J'ai mis le GAP parce que les tabs sont plus larges que la largeur du tap pane, donc la soustraction de GAP permet d'ajuster ça. Mais peu importe la valeur du GAP, il y aura toujours le trou sur la droite. En tout cas c'est temporaire j'ai mis ça pour tester mais je l'enlèverai pour la solution.

[Heavy Metal Hero]

Puisque je n'ai pas besoin de toutes les fonctionnalités des tabs, je vais simplement créer mon propre tab pane avec des toggle switch. Par exemple, une VBox(contentPane, controlPane) où controlPane est HBox(new Button("Tracks"), new Button("Volumes")) et VBox.setVgrow(contentPane, Priority.ALWAYS); puis lorsqu'un bouton est actionné, je remplace contentPane par le volet approprié pour le bouton.

[bouye]

C'est probablement ce qu'il y a de mieux à faire.
Pour corriger le soucis de la zone blanche, il aurait fallu aller créer un nouveau skin dérivé de l'ancien qui supprime cette zone morte ou faire de l'introspection et tenter de jouer avec CSS.