Vue d’ensemble

Le contrôle de vue graphique est responsable du rendu des activités et des couches système, de la modification des activités, des notifications d’événements, de la détection de cible, de la gestion des couches système et de la prise en charge des menus contextuels.

Rendu

Le contrôle graphique utilise le nœud Canvas et son API de dessin direct (par opposition au rendu différé effectué via le Scenegraph). Cela s’explique par les grands volumes de données souvent affichés par les diagrammes de Gantt. Rendre directement une activité dans un bitmap est beaucoup plus rapide que mettre à jour le graphe de scène, réappliquer le style CSS et mettre en page les nœuds. Le contrôle graphique de FlexGanttFX utilise une architecture de moteurs de rendu enfichables dans laquelle des instances de moteur de rendu peuvent être associées à des types d’activité, de manière très similaire à ce que faisait Swing pour les moteurs de rendu de cellules de listes et de tables. Le code suivant montre comment enregistrer un moteur de rendu personnalisé pour une activité « Flight » et un type de mise en page donnés. Notez que la vue graphique peut afficher les activités dans trois mises en page différentes ; le type de mise en page doit donc également être passé à la méthode.

GanttChart ganttChart = new GanttChart();
GraphicsBase<?> graphics = ganttChart.getGraphics();
graphics.setActivityRenderer(
    Flight.class, // the type of activities that will be rendered
    GanttLayout.class, // the type of layout where the renderer will be used
    new FlightRenderer(graphics)); // the actual renderer instance

Couches système

Les activités ne sont pas les seuls éléments à afficher. Il faut également afficher l’heure actuelle (« now »), les lignes de grille, les lignes internes, les lignes d’agenda / de graphique, etc. Tous ces éléments sont rendus par des couches système. Le contrôle graphique gère deux listes de ces couches : une liste pour les couches d’arrière-plan et une liste pour les couches de premier plan.

Les couches d’arrière-plan sont dessinées « derrière » les activités, tandis que les couches de premier plan sont dessinées « au-dessus » des activités. Chacune de ces listes est déjà préremplie, mais l’application peut la modifier. Pour plus d’informations sur les couches système disponibles, consultez leur documentation individuelle.

Les couches système peuvent être activées ou désactivées directement via l’API du contrôle graphique. Chaque couche possède une propriété booléenne. La valeur de ces propriétés peut être définie en appelant les méthodes qui suivent le modèle setShowXYZLayer. Les couches système contrôlées de cette manière apparaissent et disparaissent avec une animation de fondu entrant / sortant, tandis qu’un appel direct à SystemLayer.setVisible(boolean) ne produit aucune animation.

Modification

Deux fonctions de rappel distinctes permettent de contrôler le comportement de modification des activités. La première associe un événement / une position de souris à un GraphicsBase.EditMode et peut être enregistrée en appelant setEditModeCallback(Class, Class, Callback). La seconde fonction de rappel sert à déterminer si un mode / une opération de modification donné peut s’appliquer à une activité. Cette fonction de rappel est enregistrée en appelant setActivityEditingCallback(Class, Callback). La plupart des applications n’auront besoin que de la seconde fonction de rappel et conserveront les valeurs par défaut pour les emplacements des modes de modification (par exemple, bord droit pour modifier l’heure de fin, bord gauche pour modifier l’heure de début).

Événements

Des événements de type ActivityEvent sont envoyés chaque fois que l’utilisateur effectue un changement dans la vue graphique. Les applications qui souhaitent recevoir ces événements peuvent appeler l’une des méthodes setOnActivityXYZEvent() ou ajouter directement un gestionnaire d’événements via addEventHandler(ActionEvent.ACTIVITY_XYZ, ...). Les événements sont déclenchés pendant l’exécution du changement et une fois celui-ci terminé. Pour cela, la classe ActivityEvent liste des types d’événement avec les deux suffixes CHANGING et CHANGED.

Détection de point ciblé

La vue graphique permet d’obtenir des informations sur une position donnée. Vous pouvez trouver des activités en appelant getActivityBoundsAt(double, double) ou getActivityRefAt(double, double). Vous pouvez obtenir l’heure correspondant à une coordonnée x en appelant getTimeAt(double). L’opération inverse est également disponible : vous pouvez trouver la position correspondant à une heure donnée en appelant getLocation(Instant).

Menu contextuel

Des menus contextuels peuvent être définis sur n’importe quel contrôle JavaFX, mais la complexité de la vue graphique justifie une prise en charge intégrée supplémentaire. En appelant setContextMenuCallback(Callback), vous pouvez enregistrer une fonction de rappel spécifique aux menus contextuels auprès du contrôle graphique. Cette fonction de rappel est invoquée lorsque l’utilisateur déclenche le menu contextuel. Un objet de paramètre de fonction de rappel (voir GraphicsBase.ContextMenuParameter) est transmis à la fonction de rappel, déjà renseigné avec les valeurs les plus importantes susceptibles d’être utiles pour construire un menu contextuel.

Couches système

Les couches système sont utilisées à l’arrière-plan et au premier plan de chaque ligne. Une couche d’arrière-plan est dessinée avant les activités, tandis qu’une couche de premier plan est dessinée après les activités. Chaque couche est spécialisée dans le dessin d’un type d’information : heure actuelle, intervalles de temps sélectionnés, lignes de grille, etc. La vue graphique gère les couches dans deux listes et fournit des méthodes pratiques pour les retrouver facilement.

• getBackgroundSystemLayers() – renvoie la liste complète des couches système utilisées à l’arrière-plan des activités.
• getForegroundSystemLayers() – renvoie la liste complète des couches système utilisées au premier plan des activités.
• getBackgroundSystemLayer(Class) – renvoie l’instance de couche système d’arrière-plan du type donné.
• getForegroundSystemLayer(Class) – renvoie l’instance de couche système de premier plan du type donné.
• getSystemLayer(Class) – renvoie l’instance de couche système du type donné, qu’il s’agisse d’une couche de premier plan ou d’arrière-plan.

Vous pouvez ajouter ou retirer des couches de la vue graphique en les ajoutant à la liste de premier plan ou d’arrière-plan, ou en les en retirant. Une fois une couche récupérée, vous pouvez définir ses propriétés pour personnaliser son apparence. Les propriétés les plus courantes concernent les couleurs et les épaisseurs de lignes.

Exemple de couche système

GraphicsBase<?> graphics = ganttChart.getGraphics();
NowLineLayer nowLayer = graphics.getBackgroundSystemLayer(NowLineLayer .class);
nowLayer.setStroke(Color.ORANGE);
nowLayer.setLineWidth(3); // thick line

Couches système et couches de modèle

Notez que les couches système n’ont aucun lien avec les couches du modèle. Une couche système est essentiellement un moteur de rendu pour un retour visuel, tandis qu’une couche du modèle sert à regrouper des activités.

Couches d’arrière-plan disponibles

Le tableau suivant liste toutes les couches d’arrière-plan fournies avec FlexGanttFX.

Couches de premier plan disponibles

Le tableau suivant liste toutes les couches de premier plan fournies avec FlexGanttFX.

Glisser-déposer

Les fonctionnalités de glisser-déposer (DnD) lourdes et fournies par la plateforme ne sont utilisées dans FlexGanttFX que pour déplacer une activité d’une ligne vers une autre. Toutes les autres opérations de modification sont gérées avec des événements souris standard (pression, glissement). La nouvelle ligne peut même se trouver dans un autre diagramme de Gantt. Par défaut, vous lancez un DnD en plaçant le curseur de la souris au centre d’une activité tout en maintenant la touche SHIFT enfoncée. Le curseur devient alors le curseur DnD si ce type d’opération de modification est pris en charge par l’activité ciblée (voir aussi « Modification des activités »). Le DnD se termine lorsque l’utilisateur relâche le bouton de la souris.

Événements

Comme toutes les autres opérations de modification, le DnD déclenche plusieurs événements pendant son exécution. La liste suivante les décrit :

• DRAG_STARTED, DRAG_ONGOING, DRAG_FINISHED - ces types d’événement sont déclenchés si l’opération de modification est EditMode.DRAGGING.
• VERTICAL_DRAG_STARTED, VERTICAL_DRAG_ONGOING, VERTICAL_DRAG_FINISHED - ces types d’événement sont déclenchés si l’opération de modification est EditMode.DRAGGING_VERTICAL.

Le mode de modification DRAGGING_HORIZONTAL n’utilise pas le DnD de la plateforme. Par conséquent, les types d’événement HORIZONTAL_DRAG_STARTED / ONGOING / FINISHED ne sont pas listés ci-dessus.

Propriété d’information de glisser-déposer

Une propriété spéciale appelée dragAndDropInfo est disponible sur la vue graphique pour surveiller l’opération DnD. Elle s’ajoute aux types d’événement standard mentionnés ci-dessus. Les informations stockées dans cette propriété fournissent à l’application les données les plus importantes concernant l’activité déplacée.

Types de retour visuel

FlexGanttFX propose différentes manières de visualiser le retour DnD. L’énumération DragAndDropFeedback liste les valeurs suivantes, qui peuvent être définies en appelant la méthode setDragAndDropFeedback() sur GraphicsBase.

Fournisseur d’image de glissement

Si le type de retour DnD a été défini sur NATIVE, il est possible de transmettre une image personnalisée pour l’opération de glissement. Pour cela, définissez un fournisseur d’image de glissement sur GraphicsBase en appelant setDragImageProvider(). Cette méthode accepte une expression lambda de fonction de rappel. L’entrée de la fonction de rappel est un ActivityRef et sa sortie une image.

GraphicsBase<?> graphics = ganttChart.getGraphics();
graphics.setDragImageProvider(ref -> createImage(ref));

L’image par défaut est un instantané de l’activité au moment où le glissement a commencé.

Fournisseur de couche de dépôt

Les opérations de glisser-déposer peuvent être effectuées entre deux diagrammes de Gantt différents, chaque diagramme gérant sa propre liste de couches. Par défaut, une activité déposée est placée sur la même couche que celle depuis laquelle elle a été déplacée. Mais si le diagramme de Gantt cible ne contient pas cette couche, l’application doit indiquer quelle couche utiliser comme nouveau conteneur de l’activité. Pour cela, définissez une fonction de rappel « fournisseur de couche de dépôt » sur l’instance cible de GraphicsBase.

GraphicsBase<?> graphics = targetGanttChart.getGraphics();
targetGraphics.setDropLayerProvider(info -> targetLayer); // info is of type DragAndDropInfo

L’implémentation par défaut de cette fonction de rappel ressemble à ceci :

info -> info.getActivityRef().getLayer(); // use same layer as before

Si le fournisseur de couche de dépôt ne renvoie aucune couche, ou si la couche renvoyée n’a pas été ajoutée au diagramme de Gantt / aux graphismes cibles, vous verrez des messages comme ceux-ci.

• « le fournisseur de couche de dépôt n’a renvoyé aucune couche pour l’activité déposée »
• « le fournisseur de couche de dépôt a renvoyé une couche qui n’existe pas dans le diagramme de Gantt »

Gestion des événements

La vue graphique déclenche des événements JavaFX standard afin de permettre aux applications de réagir aux changements. Les concepts utilisés pour la prise en charge des gestionnaires d’événements dans FlexGanttFX sont identiques à ceux des contrôles JavaFX standard.

Événements d’activité

Les événements d’activité sont déclenchés chaque fois que l’utilisateur supprime ou modifie une activité. Pour recevoir un événement d’activité, enregistrez un gestionnaire d’événements auprès de la vue graphique via l’une des méthodes pratiques.

Gestionnaire d’événement d’activité unique

GraphicsBase<?> graphics = ganttChart.getGraphics();
graphics.setOnActivityChangeFinished(evt -> 
            System.out.println("An activity has changed"));

Si vous devez enregistrer plusieurs gestionnaires pour un type d’événement spécifique, utilisez cette approche :

Gestionnaires d’événements d’activité multiples

GraphicsBase<?> graphics = ganttChart.getGraphics();
graphics.addEventHandler(ActivityEvent.ACTIVITY_CHANGE_FINISHED, 
                            evt -> System.out.println("Listener 1"));
graphics.addEventHandler(ActivityEvent.ACTIVITY_CHANGE_FINISHED, 
                            evt -> System.out.println("Listener 2"));

Les tableaux suivants listent tous les types d’événement d’activité pris en charge ainsi que les méthodes setter pratiques de la vue graphique. Ces méthodes servent à enregistrer rapidement un gestionnaire d’événements pour les différents types.

Hiérarchie des événements d’activité

Les types d’événement définis dans la classe ActivityEvent définissent une hiérarchie d’événements. Tous les événements sont des événements d’entrée (InputEvent.ANY) et modifient l’activité. Certains sont déclenchés lorsque l’utilisateur commence le changement, d’autres pendant que le changement est en cours, et d’autres lorsqu’il est terminé.

• InputEvent.ANY
• ACTIVITY_CHANGE
  • ACTIVITY_DELETED
  • ACTIVITY_CHANGE_STARTED // Tous les types d’événement qui signalent le « début »
  • CHART_VALUE_CHANGE_STARTED
    • CHART_HIGH_VALUE_CHANGE_STARTED
    • CHART_LOW_VALUE_CHANGE_STARTED
  • DRAG_STARTED
  • END_TIME_CHANGE_STARTED
  • HORIZONTAL_DRAG_STARTED
  • PERCENTAGE_CHANGE_STARTED
  • START_TIME_CHANGE_STARTED
  • VERTICAL_DRAG_STARTED
  • ACTIVITY_CHANGE_ONGOING // Tous les types d’événement qui signalent « en cours »
  • CHART_VALUE_CHANGE_ONGOING
    • CHART_HIGH_VALUE_CHANGE_ONGOING
    • CHART_LOW_VALUE_CHANGE_ONGOING
  • DRAG_ONGOING
  • END_TIME_CHANGE_ONGOING
  • HORIZONTAL_DRAG_ONGOING
  • PERCENTAGE_CHANGE_ONGOING
  • START_TIME_CHANGE_ONGOING
  • VERTICAL_DRAG_ONGOING
  • ACTIVITY_CHANGE_FINISHED // Tous les types d’événement qui signalent la « fin »
  • CHART_VALUE_CHANGE_FINISHED
    • CHART_HIGH_VALUE_CHANGE_FINISHED
    • CHART_LOW_VALUE_CHANGE_FINISHED
  • DRAG_FINISHED
  • END_TIME_CHANGE_FINISHED
  • HORIZONTAL_DRAG_FINISHED
  • PERCENTAGE_CHANGE_FINISHED
  • START_TIME_CHANGE_FINISHED
  • VERTICAL_DRAG_FINISHED

Propriétés des événements d’activité

Les applications s’intéressent évidemment aux attributs d’une activité : non seulement aux nouvelles valeurs de ces attributs (par exemple la nouvelle heure de début), mais aussi aux anciennes valeurs (heure de début avant le changement). Les nouvelles valeurs sont déjà disponibles sur l’activité, car elles sont définies pendant que l’utilisateur effectue le changement. Les anciennes valeurs sont stockées sur l’objet événement. Le tableau suivant liste les méthodes d’ActivityEvent permettant de récupérer ces valeurs.

Événements de lasso

L’utilisateur peut utiliser un lasso pour sélectionner des activités. Des événements sont déclenchés lorsque cela se produit. Pour recevoir un événement de lasso, enregistrez simplement un gestionnaire d’événements auprès de la vue graphique via l’une des méthodes pratiques.

Gestionnaire d’événement de lasso unique

GraphicsBase<?> graphics = ganttChart.getGraphics();
graphics.setOnLassoFinished(evt -> System.out.println("The lasso was used"));

Si vous devez enregistrer plusieurs gestionnaires pour un type d’événement spécifique, utilisez cette approche :

Gestionnaires d’événements de lasso multiples

GraphicsBase<?> graphics = ganttChart.getGraphics();
graphics.addEventHandler(LassoEvent.SELECTION_FINISHED, 
                            evt -> System.out.println("Listener 1"));
graphics.addEventHandler(LassoEvent.SELECTION_FINISHED, 
                            evt -> System.out.println("Listener 2"));

Le tableau suivant liste les types d’événement et les méthodes setter pratiques de la vue graphique.

Hiérarchie des événements de lasso

Les types d’événement définis dans la classe LassoEvent définissent une hiérarchie d’événements. Tous les événements sont des événements d’entrée (InputEvent.ANY).

* InputEvent.ANY
    * LassoEvent.ALL
        * LassoEvent.SELECTION_STARTED
        * LassoEvent.SELECTION_ONGOING
        * LassoEvent.SELECTION_FINISHED

Informations de lasso

Le lasso sélectionne automatiquement des activités, mais vous pouvez parfois vouloir en savoir plus sur la nature exacte de cette sélection, ou utiliser le lasso pour un autre cas d’usage (par exemple créer de nouvelles activités). Pour cette raison, les instances de LassoEvent fournissent également un objet de type LassoInfo, qui contient de nombreux attributs que l’application peut utiliser pour réagir en conséquence. Les informations du lasso peuvent être récupérées en appelant LassoEvent.getInfo(). Le tableau suivant liste les attributs de LassoInfo.

Liens / Pour aller plus loin

Documentation Oracle JavaFX Exemples de gestion d’événements

Modification des activités

Deux fonctions de rappel différentes de la vue graphique permettent de contrôler le comportement de modification des activités. La première associe un événement / une position de souris à un mode de modification. La seconde fonction de rappel sert à déterminer si un mode / une opération de modification donné peut s’appliquer à une activité. La plupart des applications n’auront besoin que de la seconde fonction de rappel et conserveront les valeurs par défaut pour les emplacements des modes de modification (par exemple : bord droit pour modifier l’heure de fin, bord gauche pour modifier l’heure de début). L’enum GraphicsBase.EditMode liste toutes les opérations de modification disponibles sur une activité.

Callback de mode de modification

La fonction de rappel de mode de modification sert à déterminer le mode de modification à la position de souris donnée. Les instances de cette fonction de rappel peuvent être enregistrées via la méthode GraphicsBase.setEditModeCallback(), qui associe la fonction de rappel à une combinaison de type d’activité et de type de mise en page.

public final void setEditModeCallback(
    Class<? extends MutableActivity> activityType,
    Class<? extends Layout> layoutType,
    Callback<EditModeCallbackParameter, EditMode> callback);

Paramètre de la fonction de rappel de mode de modification

L’objet paramètre transmis à la fonction de rappel de mode de modification est de type EditModeCallbackParameter et contient les informations suivantes :

Exemple de fonction de rappel de mode de modification

Voici un exemple simple de fonction de rappel de mode de modification.

public class MyEditModeCallback implements Callback<EditModeCallbackParameter, EditMode> {

    public EditMode call(EditModeCallbackParameter param) {
        MouseEvent event = param.getMouseEvent();
        ActivityBounds bounds = param.getActivityBounds();

        /*
         * If the mouse cursor is touching the left edge of the activity
         * then begin a change of the start time of the activity.
         */
        if (event.getX() - bounds.getMinX() < 5) {
            return EditMode.CHANGE_START_TIME;
        }

        return EditMode.NONE;
    }

Cette fonction de rappel peut maintenant être enregistré comme ceci :

GraphicsBase<?> graphics = ganttChart.getGraphics();
    graphics.setEditModeCallback(
    ActivityBase.class,
    GanttLayout.class,
    new MyEditModeCallback());

Nous aurions pu utiliser une expression lambda pour toute l’instance de fonction de rappel, mais nous avons préféré une forme plus explicite.

Callback de modification

La fonction de rappel de modification sert à déterminer si un mode de modification spécifique est actuellement utilisable pour une activité donnée. Les instances de cette fonction de rappel peuvent être enregistrées via la méthode GraphicsBase.setActivityEditingCallback(), qui associe la fonction de rappel à un type d’activité.

public final void setActivityEditingCallback(
    Class<? extends MutableActivity> activityType,
    Callback<EditingCallbackParameter, Boolean> callback);

Paramètre de la fonction de rappel de modification

L’objet paramètre transmis à la fonction de rappel de modification est de type EditingCallbackParameter et contient les informations suivantes :

Exemple de fonction de rappel de modification

Voici un exemple simple de fonction de rappel de modification.

public class MyEditingCallback implements Callback<EditingCallbackParameter, Boolean> {

    public Boolean call(EditingCallbackParameter param) {
        ActivityRef ref = param.getActivityRef();
        Activity activity = ref.getActivity();

        /*
         * Only allow editing for activities that that have not
         * started, yet.
         */
        if (activity.getStartTime().isAfter(Instant.now())) {

            /*
             * Only allow changes to the start and end time
             * of the activity.
             */
            switch (param.getEditMode()) {
                case CHANGE_START_TIME:
                case CHANGE_END_TIME:
                    return true;
                default:
                    return false;
            }
          } 

        return false;
    }
}

Cette fonction de rappel peut maintenant être enregistré comme ceci :

GraphicsBase<?> graphics = ganttChart.getGraphics();
    graphics.setActivityEditingCallback(
    ActivityBase.class,
    new MyEditingCallback());

Modification des lignes

La vue graphique prend en charge non seulement la modification des activités, mais aussi celle des lignes. Lorsqu’une ligne est modifiée, toute la ligne se retourne et des contrôles supplémentaires deviennent visibles sur son « verso ». Si le verso de la ligne nécessite plus d’espace (hauteur) que son recto, la hauteur est ajustée automatiquement. Le tableau suivant liste les méthodes liées à la modification des lignes :

Factory d’éditeur de ligne

La factory d’éditeur de ligne sert à créer les contrôles d’une ligne donnée au moment où l’utilisateur demande sa modification. La factory est une méthode de fonction de rappel appelée avec un objet GraphicsBase.RowEditorParameter. Cet objet paramètre stocke des champs utiles pour créer les contrôles de l’éditeur, ainsi qu’une méthode permettant d’arrêter la modification de la ligne.

Une factory d’éditeur de ligne peut ressembler à ceci :

public class MyRowEditorFactory implements Callback<RowEditorParameter<R>, Node> {

    public Node call(RowEditorParameter<R> param) {
        VBox box = new VBox();

        /*
         * Bind the text property of the textfield to the name
         * property of the row. This allows us to change the name
         * of the row.
         */
        TextField nameField = new TextField();
        Bindings.bindBidirectional(param.getRow().nameProperty(), 
                nameField.textProperty());

        /*
         * A close button to invoke the stopEditing() method
         * on the parameter object.
         */
        Button closeButton = new Button("Close");
        closeButton.setOnAction(evt -> param.stopEditing());
        box.getChildren().addAll(nameField, closeButton);

        /*
         * Return the vbox node.
         */
        return box;
    }
}

Les éditeurs de ligne peuvent être enregistrés comme ceci :

GraphicsBase<?> graphics = ganttChart.getGraphics();
graphics.setRowEditorFactory(new MyRowEditorFactory());

Factory de contrôles de ligne

Pour déclencher la modification d’une ligne, l’interface utilisateur doit fournir une forme de contrôle. Cela peut se faire de nombreuses façons, par exemple à l’aide d’un menu contextuel sur une ligne. Une autre option consiste à utiliser la prise en charge intégrée des « contrôles de ligne ». Ces contrôles apparaissent / disparaissent chaque fois que le curseur de la souris entre dans une ligne ou en sort. Ils sont créés par une implémentation de fonction de rappel. Cette fonction de rappel reçoit un objet paramètre de type GraphicsBase.RowControlsParameter. Le tableau suivant liste les champs de ce type.

Exemple 1

Une implémentation possible de cette fonction de rappel peut ressembler à ceci :

public class MyRowControlsFactory extends StackPane 
        implements Callback<RowControlsParameter, Node> {

    private Button button;

    public MyRowControlsFactory() {

        /*
         * Important: let mouse events pass through.
         */
        setMouseTransparent(true);
        button = new Button("Press Me");
        getChildren().add(button);
    }

    /*
     * Reuse the button. Simply exchange the action that will
     * happen when the user presses on it.
     */
    public Node call(RowControlsParameter param) {
       button.setOnAction(evt -> 
            System.out.println("Pressed on row " + 
                    param.getRow().getName());
        return this;
    }

Notez que cette factory est un objet Node et qu’elle se renvoie elle-même chaque fois que la méthode call() est invoquée. Seule l’action du bouton est remplacée à chaque invocation. C’est logique, car les contrôles de ligne ne sont affichés que pour une ligne à la fois (contrairement aux éditeurs de ligne, dont plusieurs peuvent être utilisés simultanément).

La fonction de rappel peut être enregistrée comme ceci :

GraphicsBase<?> graphics = ganttChart.getGraphics();
graphics.setRowControlsFactory(new MyRowControlsFactory());

Exemple 2

Voici le code de la classe RowControls dans le projet FlexGanttFX « Extras ». Il ajoute un simple bouton « Edit » à la ligne. Lorsqu’il est cliqué, les contrôles de l’éditeur de ligne s’affichent au verso de la ligne.

package com.flexganttfx.extras;


import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.util.Callback;
import com.flexganttfx.model.Row;
import com.flexganttfx.view.graphics.GraphicsBase.RowControlsParameter;

public class RowControls<R extends Row<?, ?, ?>> extends HBox implements
        Callback<RowControlsParameter<R>, Node> {


    private Button editButton;

    public RowControls() {
        setPickOnBounds(false);
        setMinSize(0, 0);
        setAlignment(Pos.TOP_RIGHT);
        setFillHeight(true);
        editButton = new Button("EDIT");
        editButton.getStyleClass().add("row-controls-button");
        getChildren().add(editButton);
    }

    @Override
    public Node call(RowControlsParameter<R> param) {
        editButton.setOnAction(evt -> param.getGraphics().startRowEditing(
                param.getRow()));
        return this;
    }
}

Le CSS correspondant au bouton est défini comme ceci :

/*
 * Row controls button are shown when the mouse hovers over a row that can be
 * edited (flipped around).
 */
.row-controls-button {
  -fx-padding: 5 9 7 7;
  -fx-background-insets: 0 4 2 2;
  -fx-background-color: rgba(0,0,0,.5);
  -fx-background-radius: 0;
  -fx-text-fill: white;
  -fx-font-size: 8;
  -fx-font-weight: bold;
}

.row-controls-button:hover,
.row-controls-button:focused {
  -fx-padding: 5 9 7 7;
  -fx-background-insets: 0 4 2 2;
  -fx-background-color: rgba(0,0,0,.6);
  -fx-background-radius: 0;
  -fx-text-fill: white;
  -fx-font-size: 8;
  -fx-font-weight: bold;
}

.row-controls-button:pressed,
.row-controls-button:selected {
  -fx-background-color: rgba(0,0,0,.7);
  -fx-background-radius: 0;
}

Rendu des activités

La vue graphique utilise l’API canvas de JavaFX. Cela tient à la nature complexe d’un diagramme de Gantt et aux grands volumes de données qu’on y observe souvent. Rendre directement de grandes quantités d’activités dans un bitmap est beaucoup plus rapide que mettre constamment à jour le graphe de scène et réappliquer le style CSS. FlexGanttFX implémente une architecture de moteurs de rendu enfichables dans laquelle des instances de moteur de rendu peuvent être associées à des types d’activité, de façon très similaire à ce que faisait Swing.

Le code suivant montre comment enregistrer un moteur de rendu personnalisé pour un type d’activité « Flight » donné. Notez que la vue graphique peut afficher les activités dans différents mises en page ; le type de mise en page doit donc également être passé à la méthode.

GraphicsBase<?> graphics = ganttChart.getGraphics();
graphics.setActivityRenderer(
                Flight.class, 
                GanttLayout.class, 
                new FlightRenderer(graphics));

Nous passons généralement aussi la vue graphique au moteur de rendu lors de sa construction. C’est nécessaire, car les moteurs de rendu déclenchent un nouveau dessin des graphismes lorsqu’une de leurs propriétés change. Cette approche est très différente de celle de Swing. Cela implique également que les instances de moteur de rendu ne doivent être utilisées que pour une seule vue graphique : celle passée à leur constructeur.

Les méthodes suivantes de GraphicsBase sont utilisées pour travailler avec des moteurs de rendu :

Dessin

Les moteurs de rendu d’activité ont un point d’entrée unique pour le dessin : une méthode appelée draw(). Cette méthode est finale et ne peut pas être surchargée. Une fois invoquée, elle appelle différentes méthodes protégées pour effectuer le dessin réel. La hiérarchie d’appel ressemble à ceci :

• public final draw() .... appelle ...
  • protected ActivityBounds drawActivity()
  • protected void drawBackground()
  • protected void drawBorder()

Les sous-classes peuvent librement surcharger l’une des trois méthodes protégées pour personnaliser l’apparence de l’activité. Toutes les méthodes drawXXX() ont les mêmes arguments :

ActivityRef<A> activityRef,  // the activity to draw
Position position,           // agenda layout only (first, middle, last, only)
GraphicsContext gc,          // the graphics context into which to draw
double x,                    // the location of the start time of the activity
double y,                    // the y coordinate (0 when drawn on row or line location)
double w,                    // end time location minus start time location
double h,                    // row or line height
boolean selected,            // is activity currently selected?
boolean hover,               // is mouse cursor currently hovering over it?
boolean highlighted,         // is activity currently blinking?
boolean pressed)             // is user currently pressing on it?

Moteurs de rendu par défaut

Le tableau suivant liste les différents moteurs de rendu d’activité fournis par défaut.

Limites d’activité

Chaque moteur de rendu d’activité doit renvoyer une instance d’ActivityBounds après avoir dessiné l’activité. Ces limites sont essentielles au framework, et de nombreuses opérations ne fonctionnent correctement que si elles sont valides. Elles sont utilisées pour modifier les activités, détecter les points ciblés, positionner les liens, créer les menus contextuels, etc. Le tableau suivant liste les attributs de la classe ActivityBounds.

Veuillez ignorer les attributs overlapColumn, overlapCount et la liste overlapBounds. Ils sont tous utilisés en interne pour les opérations liées à la mise en page d’agenda.

Propriétés

Tous les moteurs de rendu définissent plusieurs propriétés permettant de personnaliser leur apparence. Beaucoup de ces propriétés dépendent du « pseudo-état » de l’activité : hover, pressed, selected, highlighted. Pour faciliter la recherche de la bonne couleur au bon moment, plusieurs méthodes pratiques sont disponibles :

• Renderer: protected Paint getFill(boolean selected, boolean hover, boolean highlighted, boolean pressed);
• Renvoie la couleur à utiliser pour l’arrière-plan de l’activité selon les pseudo-états transmis.
• ActivityRenderer: protected Paint getStroke(boolean selected, boolean hover, boolean highlighted, boolean pressed);
• Renvoie la couleur à utiliser pour la bordure de l’activité selon les pseudo-états transmis.
• ActivityBarRenderer: protected Paint getTextFill(boolean selected, boolean hover, boolean highlighted, boolean pressed);
• Renvoie la couleur à utiliser pour le texte selon les pseudo-états transmis.

Rendu des lignes

La couche système RowLayer prend en charge des moteurs de rendu enfichables pour personnaliser l’arrière-plan de chaque ligne selon son type. Dans le tutoriel, nous avons vu que nous pouvions avoir des lignes Aircraft et des lignes Crew. Pour plus de clarté, ces deux lignes pourraient avoir des couleurs d’arrière-plan différentes. C’est ce que permet un moteur de rendu de ligne.

Moteur de rendu de ligne

Tous les moteurs de rendu de ligne doivent hériter de RowRenderer. Cette classe définit une méthode publique finale appelée draw(), invoquée par le framework. Elle appelle ensuite la méthode protégée drawRow(), que les sous-classes peuvent surcharger. Une implémentation possible peut ressembler à ceci :

public class AircraftRowRenderer extends RowRenderer<Aircraft> {

    public AircraftRowRenderer(GraphicsBase<?> graphics) {
        super(graphics, "Aircraft Row Renderer");
    }

    protected void drawRow(Aircraft row,
                           GraphicsContext gc,
                           double w,
                           double h,
                           boolean selected,
                           boolean hover,
                           boolean highlighted,
                           boolean pressed) {
        gc.setFill(Color.ORANGE);
        gc.fillRect(0, 0, w, h);       
    }
}

Ce moteur de rendu peut maintenant être enregistré auprès de RowLayer comme ceci :

GraphicsBase<?> graphics = ganttChart.getGraphics();
graphics.getSystemLayer(RowLayer.class).setRowRenderer(
                    Aircraft.class, new AircraftRowRenderer());

Menu contextuel

Il existe deux façons d’enregistrer un menu contextuel auprès de la vue graphique : la méthode standard, en appelant GraphicsBase.setContextMenu(ContextMenu), ou l’enregistrement d’une fonction de rappel de menu contextuel avec GraphicsBase.setContextMenuCallback(). L’avantage de la seconde option est qu’un objet paramètre de type ContextMenuParameter est transmis à la méthode de fonction de rappel. Cet objet paramètre contient les informations les plus pertinentes dont la plupart des menus contextuels auront besoin pour permettre à l’utilisateur d’effectuer une action sur la vue graphique.

Notez qu’une fonction de rappel de menu contextuel a priorité sur un menu contextuel standard.

Exemple de code

L’extrait suivant montre un exemple d’implémentation d’une fonction de rappel de menu contextuel. Ici, nous ajoutons simplement un élément de menu pour chaque activité trouvée à la position de la souris où l’utilisateur a demandé le menu contextuel.

GraphicsBase<?> graphics = ganttChart.getGraphics();
graphics.setContextMenuCallback(param -> {
    ContextMenu menu = new ContextMenu();
    for (ActivityRef<?> ref : param.getActivities()) {
        Activity activiy = ref.getActivity();
        MenuItem item = new MenuItem("Move " + activity.getName());
        item.setOnAction(evt -> moveActivity(activity);
        menu.getItems().add(item);
    }
    return menu;
});

En-têtes de ligne

Chaque ligne de la zone graphique peut afficher son propre en-tête, affiché sur le côté gauche de la ligne. L’en-tête reste toujours à cet emplacement et ne défile pas lorsque la plage de temps visible change (par exemple lorsque l’utilisateur fait défiler vers la gauche ou vers la droite).

L’en-tête de ligne par défaut fourni avec FlexGanttFX sait afficher des échelles lorsque l’application utilise des mises en page de graphique ou d’agenda. L’implémentation de l’en-tête par défaut se trouve dans la classe ScaleRowHeader.

Vous pouvez créer des en-têtes de ligne personnalisés en sous-classant GraphicsBase.RowHeader. La propriété item est mise à jour chaque fois que la ligne pour laquelle l’en-tête est utilisé change. Comme les cellules de liste ou de table, la classe d’en-tête de ligne étend Label, ce qui signifie que vous pouvez remplacer entièrement son contenu en appelant setGraphics(Node node) et setContentDisplay(ContentDisplay.GRAPHICS_ONLY).

Voir aussi :

public void setRowHeaderFactory(Callback<GraphicsBase<R>, RowHeader<R>> factory);
public void setShowRowHeaders(boolean showRowHeaders);

Remarque : dans les anciennes versions de FlexGanttFX, la fonctionnalité d’affichage des en-têtes de ligne / échelles se trouvait dans la classe ScaleLayer. Avec l’introduction du concept de tampon de canvas et du défilement via la propriété translateX, il est devenu nécessaire de modifier cela, car les échelles étaient placées à différents endroits selon la valeur de la propriété translateX.