Discussion :

[CptNome]

Bonjour,

J'aurais besoin d'un composant de "Ligne de Temps" semblable au Timeline de DVT d'Oracle qui me semble n'existe que pour Java EE.




Je n'ai pas trouvé ce genre de composant de déjà fait et disponible sur le web pour JavaFX, alors j'envisage de le développer moi-même. Par contre, je n'ai pas d'idée de la démarche à suivre pour ce projet. J'ai bien vue des petits tutoriels en anglais qui montrent comment faire des composants custom, mais qui ne sont rien d'autres que des assemblages de composants préexistant. Et j'aimerais bien pouvoir utiliser mon futur composant dans Scene Builder lorsque je serai rendu a développer l'application qui nécessite cette ligne de temps...

Bref, si vous connaissez déjà un composant JavaFX de Ligne de temps pré-existant, j'aimerais bien le connaître.

Sinon, connaissez-vous de la documentation style "marche à suivre" ou autre pour la création de composant JavaFX custom? (pas juste des assemblages de composants...)

Merci,
Nome

[bouye]

Un petit screenshot ou une image pour montrer ce à quoi ça ressemble ?

[CptNome]

Grosso modo c'est ce genre de diagramme:

[bouye]

Toute la frise est affichee d'une coup et on ne peut pas scroller a droite et a gauche ?

1. Déjà commence par de finir ton modèle, comment tu va représenter les infos importantes pour ce qui ressemble a un graphe (mais a une seule dimension contrairement aux graphes de l'API) :
   
   • Les bornes de la frise [date min, date max]. Plus tard tu pourra faire comme les graphe de l'API, essayer d'auto calculer des dates "jolies" qui sont rondes pour que ça ne pique pas les yeux de l'utilisateur.
   • Les écarts des ticks majeurs (ici décades)
   • Les écarts des ticks mineurs (ici toutes les 2 ans)
   • Les événements ponctuels qui semblent contenir les info suivantes :
     
     • Texte long riche (avec retour a la ligne)
     • Date
     • Coordonnées géographique (Apollo 11)
     • Image (Apollo11, paquet cadeau)
     • Icone de marqueur (W3C)
     • Couleur (plusieurs ont des couleurs différentes)
     • Y a une infobulle sur le marqueur qui dit "Special Event!" (anniversaire)
   • Les plages d'événements qui sont inclus dans la frise:
     
     • Non court
     • Date de début
     • Date de fin
     • marqueur Date de début
     • marqueur Date de fin
     • Texte Date de début
     • Texte Date de fin
     
     A voir les les dates de début et de fin peuvent être tout événements gérés comme des événements ponctuels.
2. Visiblement certaines choses sont des éléments liés a la représentation graphiques (couleur, image, icône, marqueur etc.). A voir si tu veux vraiment les inclure dans le modèle (pourquoi pas) ou si tu préfères passer par des CSS après coup.
3. Concernant la représentation que peut-on voir ?
   
   • La base de la frise est un rectangle bleu -> Rectangle ou Region
   • Le cadre WWII est un rectangle orange -> Rectangle ou Region
   • Les ticks sont des lignes -> Path ou Line ou Rectangle ou Region + borders que d'un seul coté dans CSS.
   • Les marqueurs sont des losanges -> Path ou Rectangle + rotation ou SVGPath ou Region + SVG dans CSS.
   • Les marqueurs sont des cercles -> Path ou Rectangle + coins arrondis ou Circle ou SVGPath ou Region + SVG dans CSS.
   • Noter le marqueur dispose d'une element secondaire : une petite ligne qui passe sous la frise (tres visible sur les deux premiers marqueurs) -> Path ou Line ou Rectangle ou Region + borders que d'un seul coté dans CSS.
   • Les marqueurs circulaires sont semi-transparents (on peut voir la bordure du cadre WWII au travers).
   • Les connecteurs sont des lignes -> Path ou Rectangle + coins arrondis ou Circle ou SVGPath ou Region + SVG dans CSS.
   • Les ticks et les connecteurs s'affichent par dessus l'icone W3C -> ça donne une idée sur comment est agencé le contenu.
   • Lest texte simples sont des Text ou des Label
   • Les texte multilignes sont des Text ou des Label configurés en multiligne ou du TextLayout avec de multiples textes dedans.
   • Pour les événements, l'image est toujours a droite du texte long -> un GridPane ou un HBox
   • Pour les événements on a des rectangles colores avec des bords arrondis ou non -> le layout choisi (voir ci-dessus) + bordure et fond et coins arrondis via CSS ou non
   • Pour les événements ils sont semi-transparents (on peut voir un connecteur passer sous l'événement "Boy Scout") -> encore une fois ça donne une idée sur comment est agencé le contenu.
   • Il y a assez d'espace autour de la frise pour éviter que les labels soient coupes pour les dates -> padding dans CSS.
   • Il y a assez d'espace autour de la frise pour éviter que les cadres sortent de l’écran -> va falloir voir le calcul des tailles préférées et minimales.
   
   
   PS : Les contrôles fournis dans JavaFX utilisent énormément Region (mème pour dessiner de simples lignes parfois), beaucoup plus souvent que les formes de base telles que Rectangle, Circle ou autres. Region c'est un peu comme le <DIV> en HTML, ça sert a tout faire.
4. Le positionnement et la mise en page... bon de ce coté la c'est pas trop mon truc mais soit on suppose que les placements sont donnés en dur dans le modèle (événement placé en haut, en bas, vers la droite, vers la gauche) ou que la frise a des règles (event normal et spécial en haut, début fin de plage et événement rouge en dessous), soit il va falloir calculer ça a mano. Tout ca bien sur influera sur les tailles préférées et minimales en plus.

Commençons par la base le squelette du nouveau composant (note je n'irai pas jusqu'au composant final, je veux juste donner une idée de comment commencer) :

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
package timeline;
 
import java.net.URL;
import javafx.scene.layout.Region;
 
public class TimelineView extends Region {
 
    public TimelineView() {
        super();
        setId("timelimeView");
        getStyleClass().add("timeline-view");
    }
 
    @Override
    public String getUserAgentStylesheet() {
        final URL url = getClass().getResource("timelineview.css");
        return (url == null) ? null : url.toExternalForm();
    }
}

Code CSS :

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

1
2
3
4
5
.timeline-view {
    /* Pour debuger le controle. */
    -fx-border-color: red;
    -fx-border-width: 5px;
}

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
package timeline;
 
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
 
public class Main extends Application {
 
    @Override
    public void start(final Stage primaryStage) {
        final TimelineView timelineView = new TimelineView();
        final StackPane root = new StackPane();
        root.getChildren().add(timelineView);        
        final Scene scene = new Scene(root, 600, 600);        
        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }    
}

Ici le CSS permet de fournir l'apparence par défaut du contrôle. Quand tu utilises ensuite ce controle dans une autre app, tu pourras le customiser davantage via le CSS de cette application.

[bouye]

Commençons par dessiner l'axe :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
public class TimelineView extends Region {
 
    private final Region axis = new Region();
 
    public TimelineView() {
        super();
        setId("timelimeView");
        getStyleClass().add("timeline-view");
        axis.setId("axis");
        axis.getStyleClass().add("axis");
        getChildren().add(axis);
    }
 
    @Override
    public String getUserAgentStylesheet() {
        final URL url = getClass().getResource("timelineview.css");
        return (url == null) ? null : url.toExternalForm();
    }
 
    @Override
    protected void layoutChildren() {
        super.layoutChildren();
        final double width = getWidth();
        final double height = getHeight();
        final Insets insets = getInsets();
        final double areaX = insets.getLeft();
        final double areaY = insets.getTop();
        final double areaW = Math.max(0, width - insets.getLeft() - insets.getRight());
        final double areaH = Math.max(0, height - insets.getTop() - insets.getBottom());
        layoutChildrenInArea(areaX, areaY, areaW, areaH);
    }
 
    private int clamp(final double position) {
        return (int) Math.round(position);
    }
 
    private void layoutChildrenInArea(final double areaX, final double areaY, final double areaW, final double areaH) {
        final int axisX = clamp(areaX);
        final int axisY = clamp(areaY + areaH * 2/3d);
        final int axisW = clamp(areaW);
        final int axisH = clamp(axis.getPrefHeight());
        layoutInArea(axis, axisX, axisY, axisW, axisH, 0, HPos.LEFT, VPos.TOP);
    }
}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.timeline-view {
    -timeline-axis-base: paleturquoise;
    -fx-padding: 15px;
    /* Pour debuger le controle. */
    -fx-border-color: red;
    -fx-border-width: 5px;    
}
.timeline-view .axis {
    -fx-border-color: -timeline-axis-base;
    -fx-border-width: 1px;
    -fx-background-color: linear-gradient(from 0% 0% to 0% 100%, transparent, -timeline-axis-base);
    -fx-pref-height: 15px;
}

[bouye]

Nous allons maintenant rajouter divers propriétés pour les fonctionnalités de base de notre ligne de temps (j'y vais un peu au pif donc je risque de changer en cours de route).

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
public TimelineView() {
        super();
        setId("timelimeView");
        getStyleClass().add("timeline-view");
        axis.setId("axis");
        axis.getStyleClass().add("axis");
        getChildren().add(axis);
        startDateProperty().addListener(timelineChangeListener);
        endDateProperty().addListener(timelineChangeListener);
        tickUnitProperty().addListener(timelineChangeListener);
        tickLengthProperty().addListener(timelineChangeListener);
    }
 
[...]
 
    private final ReadOnlyObjectWrapper<LocalDate> startDate = new ReadOnlyObjectWrapper<>(this, "startDate", LocalDate.parse("1900-01-01"));
 
    public final LocalDate getStartDate() {
        return startDate.get();
    }
 
    public final void setStartDate(final LocalDate value) throws NullPointerException {
        Objects.requireNonNull(value);
        startDate.set(value);
    }
 
    public final ReadOnlyObjectProperty<LocalDate> startDateProperty() {
        return startDate.getReadOnlyProperty();
    }
 
    private final ReadOnlyObjectWrapper<LocalDate> endDate = new ReadOnlyObjectWrapper<>(this, "endDate", LocalDate.parse("2000-01-01"));
 
    public final LocalDate getEndDate() {
        return endDate.get();
    }
 
    public final void setEndDate(final LocalDate value) throws NullPointerException {
        Objects.requireNonNull(value);
        endDate.set(value);
    }
 
    public final ReadOnlyObjectProperty<LocalDate> endDateProperty() {
        return endDate.getReadOnlyProperty();
    }
 
    private final ReadOnlyObjectWrapper<Period> tickUnit = new ReadOnlyObjectWrapper<>(this, "tickUnit", Period.ofYears(10));
 
    public final Period getTickUnit() {
        return tickUnit.get();
    }
 
    public final void setTickUnit(final Period value) throws NullPointerException {
        Objects.requireNonNull(value);
        tickUnit.set(value);
    }
 
    public final ReadOnlyObjectProperty<Period> tickUnitProperty() {
        return tickUnit.getReadOnlyProperty();
    }
 
 
    private final DoubleProperty tickLength = new SimpleDoubleProperty(this, "tickLength", 15);
 
    public final double getTickLength() {
        return tickLength.get();
    }
 
    public final void setTickLength(final double value) {
        tickLength.set(value);
    }
 
    public final DoubleProperty tickLengthProperty() {
        return tickLength;
    }
 
    private final ChangeListener timelineChangeListener = (observable, oldValue, newValue) -> requestLayout();

[CptNome]

Toute la frise est affichee d'une coup et on ne peut pas scroller a droite et a gauche ?
[LIST=1][*]Déjà commence par de finir ton modèle, comment tu va représenter les infos importantes pour ce qui ressemble a un graphe (mais a une seule dimension contrairement aux graphes de l'API) :

• Les bornes de la frise [date min, date max]. Plus tard tu pourra faire comme les graphe de l'API, essayer d'auto calculer des dates "jolies" qui sont rondes pour que ça ne pique pas les yeux de l'utilisateur.
• Les écarts des ticks majeurs (ici décades)
• Les écarts des ticks mineurs (ici toutes les 2 ans)
• Les événements ponctuels qui semblent contenir les info suivantes :
  
  • Texte long riche (avec retour a la ligne)
  • Date
  • Coordonnées géographique (Apollo 11)
  • Image (Apollo11, paquet cadeau)
  • Icone de marqueur (W3C)
  • Couleur (plusieurs ont des couleurs différentes)
  • Y a une infobulle sur le marqueur qui dit "Special Event!" (anniversaire)
• Les plages d'événements qui sont inclus dans la frise:
  
  • Non court
  • Date de début
  • Date de fin
  • marqueur Date de début
  • marqueur Date de fin
  • Texte Date de début
  • Texte Date de fin
  
  A voir les les dates de début et de fin peuvent être tout événements gérés comme des événements ponctuels.

En fait, l'image que j'ai envoyé n'était que pour donner une idée du genre de graphique que je veux faire.

Dans le concret, mon objectif est de faire un logiciel pour aider ma mère dans la gestion de la planification des accouplements et des naissances de son élevage canin. Donc grosso-modo je veux pouvoir inscrire les dates des chaleurs qui ont eu lieu et le système va estimer les date des prochaines chaleurs. Également inscrire une date d'accouplement et estimer la date de mise bas. Ma mère aura bientôt trois femelles reproductrices alors les informations des trois femelles seront entremêlée sur la même ligne de temps pour aider à planifier les accouplements pour éviter d'avoir deux portée de chiots en même temps et aussi prévoir des périodes de repos pour les femelles. (Laisser passer 1 ou 2 chaleur entre les grossesses.)

Ma ligne de temps sera donc divisée en années puis subdivisées en mois et j'aimerais pouvoir intercaler des ticks de semaines qui sont indépendants des mois et années.

En ce moment, pour me familiariser avec le début de code qui m'a été fourni précédemment, je tente d'ajouter un ScrollPane. ScrollPane qui maintenant présent, je ne comprends pas comment agrandir la zone à l'intérieur du scrollpane. En ce moments, tous les contrôles sont toujours à 600x600(Scene) et ma ligne de temps (que j'ai étirée en lui harcodant une largeur de 1200px) se fait dessiner dans le vide à droite en dehors de la Scene et le scrollbar horizontal ne s'ajuste à rien... J'ai fait des tentatives avec setPrefSize et setPrefViewSize et d'autres sur le ScrollPane et le StackPane sans succès...

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
@Override
    public void start(final Stage primaryStage) {
 
        final StackPane root = new StackPane();
        final TimeLineView timelineView = new TimeLineView();
 
        root.getChildren().add(timelineView);
 
        ScrollPane sp = new ScrollPane();
        sp.setHbarPolicy(ScrollBarPolicy.ALWAYS);   
        sp.setFitToHeight(true);
        sp.setFitToWidth(true);
 
        sp.setContent(root);
 
        final Scene scene = new Scene(sp, 600, 600);
        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
 
    }

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
private void layoutChildrenInArea(final double areaX, final double areaY, final double areaW, final double areaH) {
        final int axisX = clamp(areaX);
        final int axisY = clamp(areaY + areaH * 2 / 3d);
//        final int axisW = clamp(areaW);
        final int axisW = clamp(1200d);
        final int axisH = clamp(axis.getPrefHeight());
        layoutInArea(axis, axisX, axisY, axisW, axisH, 0, HPos.LEFT, VPos.TOP);
 
        (...)
 
        if (tickCount > 0 && ticks.getElements().isEmpty()) {
            final DateTimeFormatter yearExtractor = DateTimeFormatter.ofPattern("MMMM");
            final double tickDistance = axisW / Math.max(1, tickCount - 1);
 
        (...)     
 
        }
private final ReadOnlyObjectWrapper<LocalDate> startDate = new ReadOnlyObjectWrapper<>(this, "startDate", LocalDate.parse("2016-01-01"));
 
private final ReadOnlyObjectWrapper<LocalDate> endDate = new ReadOnlyObjectWrapper<>(this, "endDate", LocalDate.parse("2018-01-01"));
 
    private final ReadOnlyObjectWrapper<Period> tickUnit = new ReadOnlyObjectWrapper<>(this, "tickUnit", Period.ofMonths(1));

[CptNome]

Bon, je viens de réussir à faire fonctionner le ScrollPane et l'insérant celui-ci plutôt dans un VBox plutot que de mettre le StackPane dans le ScrollPane...