[Synth] Comment faire un cadre ?

**spekal** · 03/07/2006, 07h13

Bonjour,

Je m'essaie à Synth

Au niveau des cadres, j'ai bien vu qu'il existait une méthode qui veut qu'on définisse les portions de cadre les unes à la suite des autres (il y a 9 portions, si j'ai bien compris).

Mais je n'ai pas vu de méthode qui permette de définir un cadre facilement, style c'est un cadre, avec 2 pixels de large, enfin quelque chose comme on fait en CSS, si vous voyez ce que je veux dire...

Comment est-ce que l'on fait pour cela ?

**bbclone** · 03/07/2006, 17h47

un cadre? c'est quoi un cadre?

tu peut pas juster crer un cadre comme ca n'importe ou n'importe comment.

laisse moi t'expliquer les grand principe de Synth et si je dit des betise j'espere que Romain Guy me corrige parce que moi j'utilise Synth depuis environ deux semaines.

Synth n'est pas un vrai look and feel, moi je voit Synth comme un squelette de Look and Feel a completer. Avec Synth tu peut jouer sur le Look comme tu veut.

Tout commence avec un fichier XML. Sans ce fichier xml tu peut pas utiliser Synth.

Dans ce fichier XML tu defini les style pour tes composants (ton application).

ce fichier marche un peu comme ca:

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
 
<synth> <!-- noeud racine --> 
 
<!-- definition d'un style pour un TextField par exemple  -->
<style id="textFieldStyle">
   <state> 
      ... definir la font la couleur...
   </state>
 
   <state value="SELECTED">
      ... definir la font la couleur dans l'etat selected ...
   </state> 
</style>
 
 
<!-- une fois ton style crer tu dois le lier a tes composants.
 
<bind style="textFieldStyle" type="region" key="TextField"/>
 
<!-- tu peut utiliser le meme style pour plusieurs composant par exemple aussi pour un JFormattedTextField -->
<bind style="textFieldStyle" type="region" key="FormattedTextField"/>    
 
<!-- Tu peut trouver la liste des Region dans la classe Region de l'api -->
</synth>

certain composant comme le JComboBox ou le JScrollBar sont des composant qui sont composer de plusieurs autre composant.

alors tu dois definir plusieurs style pour les differente partie (region) de ce composant.

par exemple avec un JScrollBar tu as la region ScrollBar ScrollBarThumb et ScrollBarTrack
le JComboBox c'est un ArrowButton et un TextField quand c'est editable
ou quand c'est pas editable c'est un ArrowButton et un Label (+ scrollPane + list + renderer ...)
ou le JTabbedPane qui est un assemblage des region TabbedPane + TabbedPaneContent + TabbedPaneTabArea + TabbedPaneTab
ou encore le JTable qui est un assemblage des region Table et TableHeader.

faut connaitre un peu swing pour savoir ces truc la et tu peut aussi le decouvrir en testant.

mais pour definir un cadre comme ca je comprend pas qu'est ce que tu veut dire en fait, tu veut dire un Border? si par exemple tu veut mettre un cadre(Border) autour d'un JTextField. tu peut faire de plusieurs facons :

voila 3 simple exemple qui mete un cadre a un JTextField:

le fichier xml pour synth

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
 
<synth>
    <object class="javax.swing.plaf.BorderUIResource$EtchedBorderUIResource" id="aBorder">
           <int>0</int> <!-- // EtchedBorder.LOWERED Lowered-->
    </object>
    <defaultsProperty key="TextField.Border" value="aBorder"/>
 
    <object id="myPainterV1" class="MyPainterV1"/>
    <object id="myPainterV2" class="MyPainterV2"/>
 
    <!-- exemple 3 -->
 
    <style id="border3Style">
        <state>
            <insets top="3" left="3" bottom="3" right="3"/>
            <imagePainter method="textFieldBorder" path="border.png" sourceInsets="3 3 3 3" paintCenter="false" stretch="true"/>
        </state>
    </style>
    <bind style="border3Style" type="name" key="borderV3"/>
 
    <!-- exemple 2 -->
    <style id="border2Style">
        <state>
            <insets top="3" left="3" bottom="3" right="3"/>
            <painter method="textFieldBorder" idref="myPainterV2"/>
        </state>
    </style>
    <bind style="border2Style" type="name" key="borderV2"/>
 
    <!-- exemple 1 -->
    <style id="border1Style">
        <state>
            <insets top="3" left="3" bottom="3" right="3"/>
            <painter method="textFieldBorder" idref="myPainterV1"/>
        </state>
    </style>
    <bind style="border1Style" type="name" key="borderV1"/>
</synth>

les deux painter utiliser par ce fichier xml

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
 
import javax.swing.plaf.synth.SynthPainter;
import javax.swing.plaf.synth.SynthContext;
import javax.swing.border.Border;
import javax.swing.UIManager;
import javax.swing.JComponent;
import java.awt.Graphics;
 
/**
 * A simple SynthPainter getting a Border from the UIMananger and set it as a textField border.
 * @author bebe
 */
public class MyPainterV1 extends SynthPainter {
    @Override
    public void paintTextFieldBorder(SynthContext context, Graphics g, int x, int y, int w, int h) {
        Border b = (Border) UIManager.get("TextField.Border");
        JComponent c = context.getComponent();
        c.setBorder(b);
    }
}

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
 
import javax.swing.plaf.synth.SynthContext;
import javax.swing.plaf.synth.SynthPainter;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
 
/**
 * A simple SynthPainter drawing a roundRect as a textfield border.
 * @author bebe
 */
public class MyPainterV2 extends SynthPainter {
 
    @Override
    public void paintTextFieldBorder(SynthContext context, Graphics g, int x, int y, int w, int h) {
        Graphics2D g2d = (Graphics2D) g;
        g2d.setColor(Color.GREEN);
        g2d.drawRoundRect(x, y, w - 1, h - 1, 5, 5);
    }
}

un petit programme de test

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
 
import javax.swing.plaf.synth.SynthLookAndFeel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
import javax.swing.JFrame;
import javax.swing.JTextField;
import java.awt.EventQueue;
import java.awt.HeadlessException;
import java.awt.FlowLayout;
import java.awt.Dimension;
import java.text.ParseException;
import java.lang.reflect.InvocationTargetException;
import java.io.IOException;
 
 
/**
 * @author bebe
 */
 
public class SynthBorder extends JFrame {
   public SynthBorder() throws HeadlessException {
        setLayout(new FlowLayout());
        JTextField myTextField = new JTextField();
 
        myTextField.setName("borderV1");
        myTextField.setPreferredSize(new Dimension(150, 20));
        add(myTextField);
 
        myTextField = new JTextField();
        myTextField.setName("borderV2");
        myTextField.setPreferredSize(new Dimension(150, 20));
        add(myTextField);
 
        myTextField = new JTextField();
        myTextField.setName("borderV3");
        myTextField.setPreferredSize(new Dimension(150, 20));
        add(myTextField);
 
        setSize(400, 300);
    }
 
    public static void main(String[] args) throws InvocationTargetException, InterruptedException {
        EventQueue.invokeAndWait(new Runnable(){
            public void run() {
                SynthLookAndFeel synth = new SynthLookAndFeel();
                try {
                    synth.load(SynthBorder.class.getResource("synth.xml"));
                    UIManager.setLookAndFeel(synth);
                } catch (ParseException e) {
                    e.printStackTrace();  
                } catch (IOException e) {
                    e.printStackTrace();
                } catch (UnsupportedLookAndFeelException e) {
                    e.printStackTrace();
                }
            }
        });
 
        EventQueue.invokeLater(new Runnable() {
            public void run() {
                SynthBorder synthBorder = new SynthBorder();
                synthBorder.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                synthBorder.setVisible(true);
            }
        });
    }
}

Example 1:
1- dans ton fichier xml tu defini une resource Border. Tu crer un Painter qui extend SynthPainter. Tu override la methode paintXXXXXXXBorder(...). Tu recupere ce Border et tu fais un set sur le component que tu peut recuperer sur le SynthContext. On doit faire comme ca parce qu'il y a pas de propriete TextField.Border (http://java.sun.com/j2se/1.5.0/docs/...roperties.html)

Example 2:
2- Un peu comme la 1, mais tu dessine toi meme le Border avec Java2D completement sur le graphics passer a la methode paintXXXXXXXBorder(...). Attention j'ai pas utiliser les insets du composant. j'ai juste dessiner un bord de 1 pixel.

Example 3:
3- Tu utilise imagePainter et c'est la que les 9 zones joue un role. Si tu utilise une image, elle sera diviser en 9 zones. La zone central (9) pour dessiner un Border ca sert a rien alors on la dessine pas. (paintCenter="false" dans les option de imagePainter)

les autre zone c'est pour savoir comment le stretching va fonctionner.

si tu a une image avec des zones comme ici

Code :

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

1
2
3
4
5
6
 
1-------------2-------------3
|                           |
8             9             4
|                           |
7-------------6------------ 5

les zone 1 et 3 dans mon image font 3*3 pixel ca fait facile alors pour le sourceInsets :-))

les zone 2 4 6 et 8 peuvent etre etirer si le textField est plus grand que l'image. par exemple l'image que

j'ai fait est une image de 40*22. tu vois quand meme que les zone 2 et 6 sont quand meme etirer pour faire toute la longueur du textfield qui fait 150 :-) (j'ai mit des couleur different pour les zone 2 4 6 et 8 comme ca tu vois mieut :-))

voila a peu pres les different moyen de faire un cadre avec synth.

je repete, si j'ai dit des betise Romain Guy me corrigera surement.j'ai aussi decouvers Synth tres recemment :-)))

moi ce que je prefere c'est quand meme l'imagePainter.

pourquoi?

parce que tu peut avoir plusieurs state par JComponent.

DEFAULT, MOUSE_OVER, FOCUSED, PRESSED, ENABLED, DISABLED et tu peut les combiner (MOUSE_OVER and DEFAULT and ENABLED and FOCUSED par exemple).

imagine que tu veut ecrire un style pour un JButton (je t'explique parce que ca m'es arriver ;-) )

tu te dis tu vas utiliser un painter et refaire le code du background et du boder dedans en redefinissant les methode paintButtonBackground et paintButtonBorder.

tu as ton painter mais tu es parti pour un switch case interminable....

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
 
class MyPainter extends SyntPainter {
 public void paintTextFieldBorder(SynthContext context, Graphics g ....) {
    int state = context.getComponentState();
    switch state:
       case SyntConstants.ENABLED : 
         ... 
         break;
       case SynthConstants.DISABLED :
         break;
       .... 
 
       cse SynthConstants.ENABLED + SynthConstants.DEFAULT + SynthConstants.FOCUSED: 
         break;
 }

avec un imagePainter c'est plus simple parce que tu fait tout dans ton xml

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
 
 
<style id="buttonStyle">
  <state>
 </state>
 
  <state value="ENABLED">
    utilise une image
  </state>
 
  <state value="FOCUSED">
    utilise une autre image 
  </state>
 
  <state value="DEFAULT and FOCUSED">
    utilise une autre image 
  </state>
</style>

c'est facile de faire des image qui se ressemble avec the gimp. copy/paste tu change un peu les couleurs et tu resauve :-)) faire tous ca en Java2D c'est deja beaucoup plus long :-))

je croit pas que j'ai ete tres claire la. si tu a pas comprit un truc, dis le :-))

faudrait que je trouve un jour pour rediger une doc sur synth plus complete que ce qu'on trouve comme l'a proposer quelqu'un ici.

ps: l'image est uploader avec le message si tu teste prend la :-)

**spekal** · 03/07/2006, 22h03

Je voulais un cadre, quoi !

Bon, en tous les cas, grâce à toi, j'y suis arrivé, merci !

Quelques questions encore :

Je me suis fait un painter qui place sur les text field des cadres issus de BorderFactories. J'observe que cela supprime l'élément insets, s'il y en a un. Est-ce normal ?
serait-il possible de se créer un painter qui active n'importe laquelle de ses méthodes, sans que l'on soit obligé de lui donner un nom prédéfinit ?... bref est-il possible de créer n'importe quel painter pour n'importe quel composant ? Comment fait-on, par exemple, pour les composants persos ?
Je pense que ce qui m'avait dérouté c'est qu'il n'y a aucune mise en oeuvre du SynthPainter, je m'attendais à ce qu'il y ait des trucs simples d'intégrés ; par exemple je m'attendais intuitivement à ce qu'il y ait un painter associé aux BorderFactories, car il est tout de même trèèèès usuel de placer des bordures à ses composants ! A ce propos, quel est le painter que le imagePainter utilise ?

Sinon, à la pratique, le look and feel Synth est... intéressant, mais, un peu ardu à la prise de contact, je trouve !

**bbclone** · 03/07/2006, 22h46

ok alors un cadre pour toi c'est un Border :-)

> Je me suis fait un painter qui place sur les text field des cadres issus de BorderFactories. J'observe que cela supprime l'élément insets, s'il y en a un. Est-ce normal ?

je dois dire j'ai pas compris. :-S
tu utilise un BorderFactory dans ton Painter?
tu fais quelque chose comme ca?

Code :

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

1
2
3
4
5
6
7
 
MyPainter extends SynthPainter {
   paintTextFieldBorder(SynthContext context...) {
       JComponent c = context.getComponent()
       c.setBorder(BorderFactory.createXXXXXBorder(....);
   }
}

> serait-il possible de se créer un painter qui active n'importe laquelle de ses méthodes, sans que l'on soit obligé de lui donner un nom prédéfinit ?

Tu peut extend de SynthPainter et redefinir (implementer) toutes ses methodes si j'ai compri correctment?

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
 
class MyPainterForAllComponents extends SynthPainter{
   public void paintArrowButtonBackground(SynthContext context, Graphics g, int x, int y, int w, int h) {
        ...
    }
 
    public void paintArrowButtonBorder(SynthContext context, Graphics g, int x, int y, int w, int h) {
        ...
    }
 
    public void paintArrowButtonForeground(SynthContext context, Graphics g, int x, int y, int w, int h, int direction) {
        ...
    }
 
    public void paintCheckBoxMenuItemBackground(SynthContext context, Graphics g, int x, int y, int w, int h) {
        ...
    }
 
    public void paintCheckBoxMenuItemBorder(SynthContext context, Graphics g, int x, int y, int w, int h) {
        ...
    }
 
    public void paintCheckBoxBackground(SynthContext context, Graphics g, int x, int y, int w, int h) {
        ...
    }
 
    public void paintCheckBoxBorder(SynthContext context, Graphics g, int x, int y, int w, int h) {
        ...
    }
 
    public void paintColorChooserBackground(SynthContext context, Graphics g, int x, int y, int w, int h) {
        ...
    }
 
    public void paintColorChooserBorder(SynthContext context, Graphics g, int x, int y, int w, int h) {
        ...
    }
 
    public void paintComboBoxBackground(SynthContext context, Graphics g, int x, int y, int w, int h) {
        ...
    }
 
    public void paintComboBoxBorder(SynthContext context, Graphics g, int x, int y, int w, int h) {
        ...
    }
...
}

et dans ton xml tu reutilise toujours le meme painter. tu n'aura qu'une ligne comme ca :
<object id="MyPainter" class="MyPainterForAllComponents"/>

et tu idref toujours vers MyPainter dans tes style.

si tu veut definir un style pour tes composant perso (MyClass extends JComponent) par exemple, tu peut passer par le name.
c'est tres puissant quand on passe par le name.

Tu peut par exemple dire:

Code :

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

1
2
3
4
5
6
7
<style id="st">
  <state>
   <font name="Verdana" size="12"/>
  </state>
</style>
<bind style="st" type="name" key=".*"/>

tout les composant utiliseront cette police.

tu peut aussi faire comme ca

Code :

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

1
2
3
4
5
 
JButton button = new JButton("Button 1");
button.setName("Panel.button1");
button = new JButton("Button 2");
button.setName("Panel.button2");

et dans l'xml

Code :

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

1
2
<bind style="someStyle" type="name" key="Panel.*"/>

(plus type="region" mais type="name" !)
tout les composant qui ont comme nom Panel.quelque chose utiliseront se style. (j'aime cette option moi

) )

> Je pense que ce qui m'avait dérouté c'est qu'il n'y a aucune mise en oeuvre du SynthPainter,
moi c'est qu'y avais pas de doc.

> Je m'attendais à ce qu'il y ait des trucs simples d'intégrés ; par exemple je m'attendais intuitivement à ce qu'il y ait un painter associé aux BorderFactories, car il est tout de même trèèèès usuel de placer des bordures à ses composants !

imagePainter est pas mal pour ca une image et deux ligne dans l'xml :-))
et y'a quand meme quelques truc pour faciliter le travail http://download.java.net/jdk6/docs/a...hicsUtils.html
c'est peu mais c'est deja pas mal :-)) (sinon y'a toujours SwingUtilities2

)

> A ce propos, quel est le painter que le imagePainter utilise ?
ben je croit que c'est un painter interne a Synth. faut demander a Romain Guy ca (il a developer/maintenu/fixer les bug de Synth quelque temp )

> Sinon, à la pratique, le look and feel Synth est... intéressant, mais, un peu ardu à la prise de contact, je trouve !

apres quelque jour, ca passera et tu aimera.
moi aussi j'ai utiliser Synth que quelque jours :-))

c'est vraiment pas compliquer quand on comprend le principe.
mais ca devient enervant (par exemple) quand tu essaye de definir une ToolBar.handleIcon horizontal et que ca marche pas :-)) et tu te rend compte bien apres que le ToolBar n'est pas orienter

si tu a des question, tu veut bien les expliquer correctement stp? parce que moi je comprend pas tres bien ce que tu dit/veut dire.

merci et bonne soirée :-))

**Gfx** · 04/07/2006, 13h19

Je conseille vivement d'utiliser l'imagePainter le plus possible.

Note : Il y a eu de nombreuses améliorations dans Synth dans Java SE 6, notamment concernant l'orientation des composants (la toolbar est orientée maintenant

**bbclone** · 04/07/2006, 17h47

bonjour gfx :-))

> Note : Il y a eu de nombreuses améliorations dans Synth dans Java SE 6, notamment concernant l'orientation des composants (la toolbar est orientée maintenant.

J'ai commencer a faire du Java directement avec les versions de Mustang qu'on trouvait sur java.net il y 7-8 mois

je download une autre version tout les 3-4 jour ;-) (idea supporte deja java 6 alors pourquoi revenir a java 5?)

La plupart des composant orientable sont orienter, ca j'avait remarquer et meme la region ToolBarSeparator (pour JToolBar.Separator()) mais avec le handleIcon j'ai un problem.

par exemple si je fais ca

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
<style id="toolBarStyle">
 
    <imageIcon id="iconVertical"   path="synthimages/dividerVert.png" />
    <imageIcon id="iconHorizontal" path="synthimages/dividerHori.png" />
 
    <property key="ToolBar.handleIcon" value="iconVertical" direction="vertical" />
    <!--<property key="ToolBar.handleIcon" value="iconHorizontal" direction="horizontal" />-->
</style>
<bind style="toolBarStyle" type="region" key="ToolBar"/>

si je decomente la ligne en commentaire dans l'xml ca marche pas mieux. c'est la meme icon qui est toujours afficher. que le ToolBar soit Vertical ou Horizontal. alors qu'est ce que je peut faire de mal?

(j'ai un peu regarder dans les code de Synth. et quand je prend la classe SynthToolBarUI je vois null part ou est ce qu'il gere l'orientation de cet icon.)

j'ai fait un exemple simple pour tester. si tu veut les code pour tester toi meme envoi moi un mail (bbclone@gmail.com) et je t'envoi les source :-)

[Synth] Comment faire un cadre ?

AWT/Swing Java

Vue hybride

Discussions similaires

Partager

Partager