Discussion :

[borison]

Bonjour, voila je suis entrain de développer une application de messagerie instantannée et je suis bloqué au niveau de l' affichage des messages d'une discussion. En effet je veux que chaque message s'affiche dans une bulle un peu comme l'affichage des messages de wathsapp. Si quelqu'un a une solution...
Merci

[Celira]

Quel est l'environnement ? Tu écris une App pour Android ? pour Iphone ? une application Web ?
Et quel est exactement ton problème ? Tu arrives à afficher le texte mais sans mise en forme ? tu n'affiches pas le texte du tout ?

[borison]

C est une application pour pc, développé en java. Enfait les messages s'affichent mais ya pas de mise en forme

[joel.drigo]

Salut,

Il faudrait être un peu plus précis. Une "appli pour pc", ça veut tout dire et rien dire à la fois. En Java, il y a différents environnements graphiques, pour une application desktop : Swing, JavaFX...

Ensuite, tu parles de WhatsApp et de bulles d'une part, et de mise en forme d'autre part. La mise en forme, c'est l'affichage avec du centrage ou de la justificatiojn, du wrapping (passage à la ligne automatique) et des styles (gras, italique, des couleurs, des icônes dans le texte, tout ça). En revanche, si on regarde WhatsApp, on voit effectivement des effets graphiques de "bulles" façon BD, dans lesquels du texte s'affiche.

Pour afficher un texte avec des styles, en Swing, on peut utiliser un JTextPane, ou un JTextArea. Le stylage peut se faire en html, ou directement pas l'API.

Pour avoir cet effet graphique de bulles, il y a deux moyens possibles :

1. utiliser des images, ou plutôt des bouts d'images, dans le fond d'un composant. Ceci permet de faire un design au poil dans une application de dessin et d'avoir un rendu très précis et surtout joli, mais il faut une version dans chaque couleur, sinon ça peut être compliqué (changer dynamiquement de couleur, ça donne plutôt des résultats pas terribles, surtout pour l'antialiasing, ou alors il faut le faire dynamiquement, et ce n'est pas si simple).
2. utiliser simplement un border custom, dessiné en Java2D, mais graphiquement, ce sera soit limité, sera beaucoup plus fastidieux que tout ce que tu pourras faire dans une application de dessin. C'est le système le plus simple et souple ensuite pour intégrer l'affichage dans l'interface.
3. mixer les deux systèmes (un border, mais avec des parties sous forme d'images pour avoir un super rendu sur certaines parties, et des parties dessinées en Java2D pour le reste).

[borison]

Merci deja pour les propositions de solutions, en effet mon problème n est pas au niveau de la mise en forme mais plutôt l affichage des messges dans les bulles sous swing. Mais j aimerai que vous developpiez mieux les solutions pour ce cas et si possible des exemples illustratifs
Merci

[joel.drigo]

Par exemple, vite fait (le design de la bulle est à fignoler), avec un border entièrement Java2D :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Component;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridLayout;
import java.awt.Insets;
import java.awt.RenderingHints;
import java.awt.geom.Area;
import java.awt.geom.Path2D;
import java.awt.geom.Rectangle2D;
import java.awt.geom.RoundRectangle2D;
 
import javax.swing.BorderFactory;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextArea;
import javax.swing.SwingConstants;
import javax.swing.UIManager;
import javax.swing.border.Border;
 
public class DemoBalloon {
 
	public static void main(String[] args) {
 
		JFrame frame = new JFrame("");
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
		JPanel panel = new JPanel(new GridLayout(3, 0));
 
		int[] styles = {SwingConstants.NORTH_WEST, SwingConstants.NORTH, SwingConstants.NORTH_EAST,
				SwingConstants.WEST, SwingConstants.CENTER, SwingConstants.EAST,
				SwingConstants.SOUTH_WEST, SwingConstants.SOUTH, SwingConstants.SOUTH_EAST};
 
		for(int style : styles) {
			if( style==SwingConstants.CENTER ) {
				panel.add(new JPanel());
				continue;
			}
			JTextArea text = new JTextArea();
			text.setLineWrap(true);
			text.setWrapStyleWord(true);;
			text.setText("Blah blah\nblah blah");
			text.setBorder(new BalloonBorder(UIManager.getColor ( "Panel.background" ), Color.BLACK, Color.WHITE, 10, 20, style, 10));
			text.setEditable(false);  
			JPanel balloon = new JPanel(new BorderLayout());
			balloon.setBorder(BorderFactory.createEmptyBorder(5, 5, 5, 5));
			balloon.add(text);
			panel.add(balloon);
		}
 
		frame.add(panel);
 
		frame.setSize(400, 400);
		frame.setLocationRelativeTo(null);
		frame.setVisible(true);
 
	}
 
	public static class BalloonBorder implements Border {
 
		private Color fgColor;
		private Color bgColor;
		private int margin;
		private int tailWidth;
		private int tailLocation;
		private Color componentBg;
		private int tailthickness;
 
		public BalloonBorder(Color componentBg, Color fgColor, Color bgColor, int margin, int tailWidth, int tailLocation, int tailthickness) {
			this.componentBg=componentBg;
			this.fgColor=fgColor;
			this.bgColor=bgColor;
			this.margin=Math.max(margin,0);
			this.tailWidth=Math.max(tailWidth,0);
			this.tailLocation=tailLocation;
			this.tailthickness=tailthickness;
		}
 
		@Override
		public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
			Insets insets = getBorderInsets(c);
			int xballoon = x + insets.left - margin;
			int yballoon = y + insets.top - margin;
			int widthballoon = width - insets.left - insets.right + margin + margin - 1;
			int heightballoon = height - insets.top - insets.bottom + margin + margin - 1;
 
			RoundRectangle2D.Double balloon = new RoundRectangle2D.Double(xballoon, yballoon, widthballoon, heightballoon, margin*2, margin*2);
 
			Path2D tail = new Path2D.Double();
			switch(tailLocation) {
			case SwingConstants.NORTH_EAST:
				tail.moveTo(x+width,y);
				tail.lineTo(balloon.getCenterX()+tailthickness,balloon.getCenterY()+tailthickness);
				tail.lineTo(balloon.getCenterX()-tailthickness,balloon.getCenterY()+tailthickness);
				break;
			case SwingConstants.NORTH:
				tail.moveTo(x,y);
				tail.lineTo(balloon.getCenterX()+tailthickness,balloon.getCenterY());
				tail.lineTo(balloon.getCenterX()-tailthickness,balloon.getCenterY());
				break;
			case SwingConstants.NORTH_WEST:
				tail.moveTo(x,y);
				tail.lineTo(balloon.getCenterX()+tailthickness,balloon.getCenterY()-tailthickness);
				tail.lineTo(balloon.getCenterX()+tailthickness,balloon.getCenterY()+tailthickness);
				break;
			case SwingConstants.EAST:
				tail.moveTo(x+width,balloon.getCenterY());
				tail.lineTo(balloon.getCenterX(),balloon.getCenterY()+tailthickness);
				tail.lineTo(balloon.getCenterX(),balloon.getCenterY()-tailthickness);
				break;
			case SwingConstants.WEST:
				tail.moveTo(x,balloon.getCenterY());
				tail.lineTo(balloon.getCenterX(),balloon.getCenterY()+tailthickness);
				tail.lineTo(balloon.getCenterX(),balloon.getCenterY()-tailthickness);
				break;
			case SwingConstants.SOUTH_EAST:
				tail.moveTo(x+width,y+height);
				tail.lineTo(balloon.getCenterX()-tailthickness,balloon.getCenterY()-tailthickness);
				tail.lineTo(balloon.getCenterX()+tailthickness,balloon.getCenterY()-tailthickness);
				break;
			case SwingConstants.SOUTH:
				tail.moveTo(x+width,y+height);
				tail.lineTo(balloon.getCenterX()+tailthickness,balloon.getCenterY());
				tail.lineTo(balloon.getCenterX()-tailthickness,balloon.getCenterY());
				break;
			case SwingConstants.SOUTH_WEST:
				tail.moveTo(x,y+height);
				tail.lineTo(balloon.getCenterX()-tailthickness,balloon.getCenterY()-tailthickness);
				tail.lineTo(balloon.getCenterX()+tailthickness,balloon.getCenterY()+tailthickness);
				break;
			}
			tail.closePath();
			Area area = new Area(balloon);
			area.add(new Area(tail));
 
			Area borderarea = new Area(area);
 
			Area textArea = new Area(new Rectangle2D.Double(insets.left,insets.top,width-insets.left-insets.right,height-insets.top-insets.bottom));
			area.subtract(textArea); 
 
			Area clip = new Area(new Rectangle2D.Double(x,y,width,height));
			clip.subtract(textArea);
 
			Graphics2D g2d = (Graphics2D) g.create();
 
			g2d.setColor(componentBg);
			g2d.setClip(clip);
			g2d.fillRect(0, 0, width, height);
 
			g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
			if( bgColor!=null ) {
				g2d.setColor(bgColor);
				g2d.fill(area);
			}
			if( fgColor!=null ) {
				g2d.setColor(fgColor);
				g2d.draw(borderarea);
			}
			g2d.dispose();
 
		}
 
		@Override
		public Insets getBorderInsets(Component c) {
			int top=margin;
			int left=margin;
			int bottom=margin;
			int right=margin;
			switch(tailLocation) {
			case SwingConstants.NORTH_EAST:
				top+=tailWidth;
				right+=tailWidth*2;
				break;
			case SwingConstants.NORTH:
				top+=tailWidth*2;
				break;
			case SwingConstants.NORTH_WEST:
				top+=tailWidth;
				left+=tailWidth*2;
				break;
			case SwingConstants.SOUTH_EAST:
				bottom+=tailWidth;
				right+=tailWidth*2;
				break;
			case SwingConstants.SOUTH:
				bottom+=tailWidth*2;
				break;
			case SwingConstants.EAST:
				right+=tailWidth*2;
				break;
			case SwingConstants.WEST:
				left+=tailWidth*2;
				break;
			case SwingConstants.SOUTH_WEST:
				bottom+=tailWidth;
				left+=tailWidth*2;
				break;
			}
			return new Insets(top, left, bottom, right);
		}
 
		@Override
		public boolean isBorderOpaque() {
			return false;
		}
 
	}
 
}

ou le même avec du html :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
 
 
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Component;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridLayout;
import java.awt.Insets;
import java.awt.RenderingHints;
import java.awt.geom.Area;
import java.awt.geom.Path2D;
import java.awt.geom.Rectangle2D;
import java.awt.geom.RoundRectangle2D;
 
import javax.swing.BorderFactory;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextPane;
import javax.swing.SwingConstants;
import javax.swing.UIManager;
import javax.swing.border.Border;
 
public class DemoBalloon {
 
	public static void main(String[] args) {
 
		JFrame frame = new JFrame("");
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
		JPanel panel = new JPanel(new GridLayout(3, 0));
 
		int[] styles = {SwingConstants.NORTH_WEST, SwingConstants.NORTH, SwingConstants.NORTH_EAST,
				SwingConstants.WEST, SwingConstants.CENTER, SwingConstants.EAST,
				SwingConstants.SOUTH_WEST, SwingConstants.SOUTH, SwingConstants.SOUTH_EAST};
 
		for(int style : styles) {
			if( style==SwingConstants.CENTER ) {
				panel.add(new JPanel());
				continue;
			}
			JTextPane text = new JTextPane();
			text.setContentType("text/html");
			text.setText("<html><body><p>Blah blah</p><p>blah <img src='https://www.developpez.net/forums/images/smilies/icon_biggrin.gif'></p></body></html>");
			text.setBorder(new BalloonBorder(UIManager.getColor ( "Panel.background" ), Color.BLACK, Color.WHITE, 10, 20, style, 10));
			text.setEditable(false);  
			JPanel balloon = new JPanel(new BorderLayout());
			balloon.setBorder(BorderFactory.createEmptyBorder(5, 5, 5, 5));
			balloon.add(text);
			panel.add(balloon);
		}
 
		frame.add(panel);
 
		frame.setSize(400, 400);
		frame.setLocationRelativeTo(null);
		frame.setVisible(true);
 
	}
 
	public static class BalloonBorder implements Border {
 
		private Color fgColor;
		private Color bgColor;
		private int margin;
		private int tailWidth;
		private int tailLocation;
		private Color componentBg;
		private int tailthickness;
 
		public BalloonBorder(Color componentBg, Color fgColor, Color bgColor, int margin, int tailWidth, int tailLocation, int tailthickness) {
			this.componentBg=componentBg;
			this.fgColor=fgColor;
			this.bgColor=bgColor;
			this.margin=Math.max(margin,0);
			this.tailWidth=Math.max(tailWidth,0);
			this.tailLocation=tailLocation;
			this.tailthickness=tailthickness;
		}
 
		@Override
		public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
			Insets insets = getBorderInsets(c);
			int xballoon = x + insets.left - margin;
			int yballoon = y + insets.top - margin;
			int widthballoon = width - insets.left - insets.right + margin + margin - 1;
			int heightballoon = height - insets.top - insets.bottom + margin + margin - 1;
 
			RoundRectangle2D.Double balloon = new RoundRectangle2D.Double(xballoon, yballoon, widthballoon, heightballoon, margin*2, margin*2);
 
			Path2D tail = new Path2D.Double();
			switch(tailLocation) {
			case SwingConstants.NORTH_EAST:
				tail.moveTo(x+width,y);
				tail.lineTo(balloon.getCenterX()+tailthickness,balloon.getCenterY()+tailthickness);
				tail.lineTo(balloon.getCenterX()-tailthickness,balloon.getCenterY()+tailthickness);
				break;
			case SwingConstants.NORTH:
				tail.moveTo(x,y);
				tail.lineTo(balloon.getCenterX()+tailthickness,balloon.getCenterY());
				tail.lineTo(balloon.getCenterX()-tailthickness,balloon.getCenterY());
				break;
			case SwingConstants.NORTH_WEST:
				tail.moveTo(x,y);
				tail.lineTo(balloon.getCenterX()+tailthickness,balloon.getCenterY()-tailthickness);
				tail.lineTo(balloon.getCenterX()+tailthickness,balloon.getCenterY()+tailthickness);
				break;
			case SwingConstants.EAST:
				tail.moveTo(x+width,balloon.getCenterY());
				tail.lineTo(balloon.getCenterX(),balloon.getCenterY()+tailthickness);
				tail.lineTo(balloon.getCenterX(),balloon.getCenterY()-tailthickness);
				break;
			case SwingConstants.WEST:
				tail.moveTo(x,balloon.getCenterY());
				tail.lineTo(balloon.getCenterX(),balloon.getCenterY()+tailthickness);
				tail.lineTo(balloon.getCenterX(),balloon.getCenterY()-tailthickness);
				break;
			case SwingConstants.SOUTH_EAST:
				tail.moveTo(x+width,y+height);
				tail.lineTo(balloon.getCenterX()-tailthickness,balloon.getCenterY()-tailthickness);
				tail.lineTo(balloon.getCenterX()+tailthickness,balloon.getCenterY()-tailthickness);
				break;
			case SwingConstants.SOUTH:
				tail.moveTo(x+width,y+height);
				tail.lineTo(balloon.getCenterX()+tailthickness,balloon.getCenterY());
				tail.lineTo(balloon.getCenterX()-tailthickness,balloon.getCenterY());
				break;
			case SwingConstants.SOUTH_WEST:
				tail.moveTo(x,y+height);
				tail.lineTo(balloon.getCenterX()-tailthickness,balloon.getCenterY()-tailthickness);
				tail.lineTo(balloon.getCenterX()+tailthickness,balloon.getCenterY()+tailthickness);
				break;
			}
			tail.closePath();
			Area area = new Area(balloon);
			area.add(new Area(tail));
 
			Area borderarea = new Area(area);
 
			Area textArea = new Area(new Rectangle2D.Double(insets.left,insets.top,width-insets.left-insets.right,height-insets.top-insets.bottom));
			area.subtract(textArea); 
 
			Area clip = new Area(new Rectangle2D.Double(x,y,width,height));
			clip.subtract(textArea);
 
			Graphics2D g2d = (Graphics2D) g.create();
 
			g2d.setColor(componentBg);
			g2d.setClip(clip);
			g2d.fillRect(0, 0, width, height);
 
			g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
			if( bgColor!=null ) {
				g2d.setColor(bgColor);
				g2d.fill(area);
			}
			if( fgColor!=null ) {
				g2d.setColor(fgColor);
				g2d.draw(borderarea);
			}
			g2d.dispose();
 
		}
 
		@Override
		public Insets getBorderInsets(Component c) {
			int top=margin;
			int left=margin;
			int bottom=margin;
			int right=margin;
			switch(tailLocation) {
			case SwingConstants.NORTH_EAST:
				top+=tailWidth;
				right+=tailWidth*2;
				break;
			case SwingConstants.NORTH:
				top+=tailWidth*2;
				break;
			case SwingConstants.NORTH_WEST:
				top+=tailWidth;
				left+=tailWidth*2;
				break;
			case SwingConstants.SOUTH_EAST:
				bottom+=tailWidth;
				right+=tailWidth*2;
				break;
			case SwingConstants.SOUTH:
				bottom+=tailWidth*2;
				break;
			case SwingConstants.EAST:
				right+=tailWidth*2;
				break;
			case SwingConstants.WEST:
				left+=tailWidth*2;
				break;
			case SwingConstants.SOUTH_WEST:
				bottom+=tailWidth;
				left+=tailWidth*2;
				break;
			}
			return new Insets(top, left, bottom, right);
		}
 
		@Override
		public boolean isBorderOpaque() {
			return false;
		}
 
	}
 
}

[borison]

Merci, je teste le code et je vous informe.

[borison]

ok le code est bien fonctionnel même comme tu l'a dit, le design laisse encore à désirer. mais je voudrais que la taille des bulles soit proportionnelle à celle du message qui s'y trouve.
Merci d'avance.

[joel.drigo]

Proportionnelle ? La taille des bulles dans l'exemple que je t'ai donné s'adapter à la taille du composant texte. La taille du composant se gère par le Layout Manager. Mais taille proportionnelle, je ne vois pas ce que ça veut dire.
Pour le design, il t'appartient de l'améliorer à ton goût.