Discussion :

[n!co]

Bonjour,

J'ai besoin de redefinir le look (voir le feel ?) d'un JSlider pour répondre a plusieurs de mes problématiques, qui sont :
- Pouvoir afficher un nombre à l'intérieur du curseur (knob).
- Pouvoir afficher la valeur du Slider au dessus du curseur (comme avec GTK)
- Pouvoir changer facilement en cours d'execution la couleur du curseur et de la piste (track)

J'ai lu deux sujet fort intéressant du forum :
http://developpez.net/forums/showthread.php?t=223993
http://developpez.net/forums/showthread.php?t=221538
Mais c'est encore trop flou, je n'arrive pas a visualiser ce que je dois étendre pour arriver au résultat voulu.

Le LAF général de l'application est Metal/Ocean et je souhaite rester dans cette charte graphique.
Or apres avoir regarder la classe MetalSliderUI, c'est un peu le fouilli entre le code steel et ocean, le knob qui est une image dessinée dans une autre classe, ....

Un peu d'aide des experts dans le domaine, me serait d'une grande aide pour choisir la meilleure méthode (la moins couteuse surtout) a utiliser pour arriver à mes fins.

Merci
Nico

[xavlours]

Bonjour,

tout d'abord, pour respecter la séparation données présentation, je pense qu'il te faut créer une sous classe de JSlider (disons monJSlider) qui contienne les données nécessaires au fonctionnement voulu : nombre à afficher, couleur du thumb et de la piste, etc.

Ensuite, ton UI peut faire des tests du genre if(slider instanceof MonJSlider) pour peindre un chiffre sur le thumb ou changer la couleur de peinture de la track.

Rapidement, ça peut donner :

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
public class MonJSlider extends JSlider {
  private int number;
  private Color userColor;
  // getters et setters
}
// autre fichier
public class MonSliderUI extends MetalSliderUI {
 
  public void paintThumb(Graphics g) {
    super.paintThumb(g);
    if(slider instanceof MonSlider) {
      String text = String.valueof( ((MonJSlider)slider).getNumber() );
      g.drawString(thumbRect.x, thumbRect.y + g.getFont().getSize() );
      // bon le placement est tout pourri, mais à toi de jouer
    }
  }
 
  public void paintTrack(Graphics g) {
    Color oldColor;
    boolean isUserDefinedColor = slider instanceof MonSlider && ((MonSlider)slider).getUserColor() != null;
 
    if(isUserDefinedColor) {
      oldColor = highlightColor;
      highlightColor = ((MonSlider)slider).getUserColor());
    }
    super.paintTrack(g);
    if(isUserDefinedColor) {
      highlightColor = oldColor;
    }
  }
 
}

[n!co]

merci pour ta reponse,

tu confirmes donc que le plus simple reste d'étendre MetalSliderUI ?
je m'en doutais, mais je voulais avoir confirmation.

Pour le knob, c'est un nombre a trois chiffre qu'il faut que j'affiche, la taille du knob de base ne va pas suffir. En plus le knob utilisé dans ocean est une icon dessiné dans MetalIconFactory. Va falloir que je me retape le dessin du knob en entier !
Et pour la valeur du slider au dessus du knob je fait comment ? Il faut que j'agrandisse la taille du rectangle, cela va t'il bien se repercuter sur la hauteur du slider en général ?

Pour le track c'est une bonne idée, je vais essayé ca. De plus je me dis que changer la couleur du track va peut être suffir, ca mévitera de trop galérer avec le knob.

Merci pour cette réponse rapide.

[xavlours]

Je pense que c'est en effet mieux d'étendre MetalSpinnerUI, de toutes façons l'autre alternative serait d'étendre BasicSpinnerUI (quand à tout coder à la main, c'est vraiment dommage quand on voit comment ces classes ont été pensées pour être étendues).

Pour le knob (ou thumb), essaie déjà de surcharger getThumbSize et de retourner un rectangle plus grand. Ensuite pour la méthode paintThumb, tu risques de devoir te taper ça à la main. Enfin voilà comment je ferais :
- surcharger getThumbSize pour renvoyer une Dimension suffisamment grand pour pouvoir dessiner le thumb, le nombre à l'intérieur ET le nombre au-dessus.
- dans la méthode paintThumb, essayer d'appeler super.paintThumb à travers une AffineTransform, avec de la chance ça rendra bien. Sinon, vive les fillRect !!

Un bout de code qui peut t'aider :

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
public void paintThumb(Graphics g) {
  Graphics2D g2 = (Graphics2D) g;
 
  Dimension iconDim = super.getThumbSize();
  Dimension thumbDim = this.getThumbSize();
  // On laisse la place pour le nombre au dessus du thumb
  thumbDim.height -= TEXT_HEIGHT;
 
  double xScale = 1.0 * thumbDim.width / iconDim.width;
  double yScale = 1.0 * thumbDim.height / iconDim.height;
 
  g2.translate(0, TEXT_HEIGHT);
  g2.scale(xScale, yScale);
  // on récupère l'icône
  super.paintThumb(g2);
  g2.scale(1/xScale, 1/yScale);
  // on peint le nombre dans le Thumb
  g2.drawString(...);
  g2.translate(0, -TEXT_HEIGHT);
 
  // on peint le nombre au-dessus du Thumb
  g2.drawString(...);
}

[n!co]

Merci beaucoup de ta réponse.
Entre temps, mes impératifs sont tombés, je n'ai plus a répondre a ce problème, trop couteux !
Mais tu m'as poussé à oser me plonger plus en profondeur dans la redéfinition des UIDelegate, qui me serviront bien un jour ou l'autre.

Hop je met résolu, bien que ce n'est pas réellement la cas