Chat offline via un composant vcl

**beletot** · 29/03/2022, 11h52

Bonjour,

Je suis sous delphi 10.3 en mode vcl
Je cherche à réaliser un chat style teams mais en version offline.
Les messages d'un utilisateur s'affichant à gauche et les réponses de l'autre utilisateur à droite.
Un utilisateur de doit pas pouvoir répondre en direct à une réponse.

Dans les grandes lignes, j'ai une table conversation et un autre message
Conversation
ID,title, created_by
1, validation classe 22, robert

Message
ID, message,from,to ,conversation_id
1,peux-tu valider ma classe,robert,denise,1
2,non il manque l'info 22,denise,robert,1

Mon écran ressemble à ça
Nom : Capture.PNG
Affichages : 298
Taille : 28,5 Ko

Nom : Capture.PNG
Affichages : 298
Taille : 28,5 Ko

J'ai utilisé une grid sur la droite pour afficher les messages.
Et en dessous un tdbedit lié sur la colonne message, permettant de rajouter/modfier un message
Mais c'est très bof bof.

Auriez-vous déjà trouvé un composant ou une façon de procéder pour réaliser ce type de panneau?

Merci pour vos conseils.

Bertrand

**ShaiLeTroll** · 29/03/2022, 12h08

Un Message = TShape + TLabel ... plus pour des effets de relief, ombre ...
ScrollBox pour contenir les messages, cela va gérer le défilement vertical
Suffit ensuite juste de gérer le Left selon l'auteur du message

Rien de bien compliqué, faut juste se lancer.

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
 
unit SMSList_MainForm;
 
interface
 
uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls, Vcl.ExtCtrls;
 
type
  TForm1 = class(TForm)
    btnFillRandom: TButton;
    ScrollBox1: TScrollBox;
    procedure btnFillRandomClick(Sender: TObject);
  private
    { Déclarations privées }
  public
    { Déclarations publiques }
  end;
 
var
  Form1: TForm1;
 
implementation
 
{$R *.dfm}
 
procedure TForm1.btnFillRandomClick(Sender: TObject);
var
  I, K: Integer;
  ExpIsMe: Boolean;
  Shape: TShape;
  LabelInShape: TLabel;
  X: Integer;
begin
  ScrollBox1.VertScrollBar.Range := ScrollBox1.Height;
 
  X := 0;
  if ScrollBox1.ControlCount > 0 then
    X := ScrollBox1.Controls[ScrollBox1.ControlCount - 1].Top + ScrollBox1.Controls[ScrollBox1.ControlCount - 1].Height + 8;
 
  Shape := TShape.Create(ScrollBox1);
  Shape.Parent := ScrollBox1;
  Shape.Shape := stRoundRect;
  Shape.Top := X;
  Shape.Height := 5;
  Shape.Width := ScrollBox1.ClientWidth;
  Shape.Left := 0;
  Shape.Pen.Color := clRed;
 
  Inc(X, Shape.Height + 8);
 
  K := Random(10);
  for I := 0 to K do
  begin
    ExpIsMe := ByteBool(Random(2) - 1);
 
    Shape := TShape.Create(ScrollBox1);
    Shape.Parent := ScrollBox1;
    Shape.Shape := stRoundRect;
    Shape.Top := X;
    Shape.Height := 20;
    Shape.Width := ScrollBox1.ClientWidth - 100;
    if ExpIsMe then
    begin
      Shape.Left := 100;
      Shape.Pen.Color := clNavy;
      Shape.Brush.Color := clBlue;
    end
    else
    begin
      Shape.Left := 0;
      Shape.Pen.Color := clOlive;
      Shape.Brush.Color := clGreen;
    end;
 
    LabelInShape := TLabel.Create(ScrollBox1);
    LabelInShape.Caption := X.ToString();
    LabelInShape.Parent := ScrollBox1;
    LabelInShape.AutoSize := False;
    LabelInShape.SetBounds(Shape.Left + 4, Shape.Top + 2, Shape.Width - 8, Shape.Height - 2);
    if ExpIsMe then
    begin
      LabelInShape.Alignment := taRightJustify;
      LabelInShape.Font.Color := clYellow;
    end
    else
    begin
      LabelInShape.Alignment := taLeftJustify;
      LabelInShape.Font.Color := clWebOrange;
    end;
 
    Inc(X, Shape.Height + 8);
  end;
  ScrollBox1.VertScrollBar.Range := X + 20;
  ScrollBox1.VertScrollBar.Position := X;
end;
 
end.

**beletot** · 29/03/2022, 12h39

Salut ShaiLeTroll,

C'est exactement cela.
Je n'ai pas le réflex de la création des objets. C4est effectivement assez simple comme solution et beaucoup plus facile à contrôler qu'une grid.

Un grand merci.

Bertrand

**Paul TOTH** · 29/03/2022, 14h25

j'ai fait un système de chat dans une application, mais j'ai ajouté une table

Participants:
Id
Nom

Messages:
Id
Conversation => ID du premier message de la conversation (Messages.id)
DateEnvoi => Date du message
Expediteur => Participant.id
Texte => Texte du message

Conversions:
ID
Titre (de la conversation pour le participant)
Participant => Participants.id
Conversation => ID du premier message de la conversation (Messages.id)
DernierLu => Numéro du dernier message lu dans la conversation

Donc chaque Participant peut ajouter un message dans une conversation qui débute par son premier message
la table Conversations permet de référencer justement ces conversations, une même "conversation" a une ligne par participant avec un titre qui lui est propre, et le n° du dernier message lu
Un participant peut quitter une conversation, c'est à dire qu'on supprime l'entrée dans Conversations pour ce Participant, et j'ajoute juste un message (XXX a quitté la conversation) dans Messages

et cela permet d'afficher les messages dans l'ordre de publication indépendamment de l'auteur

Pour l'affichage j'utilise un composant riche TRichView pour mettre en forme, mais ça doit pouvoir se faire avec un TRichEdit

Participants: Participant1 , Participant2

Participant1 23/03/2022 14:21
blahbla

Participant2 23/03/2022 15:12
blahbla t'es pas d'accord ?

Participant3 a quitté la conversation 23/03/2022 15:22

Participant1 23/03/2022 16:21
Sans dire au revoir ?!

**beletot** · 29/03/2022, 14h46

Hello,

Oui j'ai aussi une autre table avec mes utilisateurs.
Ce panneau message est inséré dans TPanel, c'est une option supplémentaire dans mon logiciel.
Je vous avais d'ailleurs posé quelques question sur le sujet :-)

Donc là j'ai repris le code avec les shapes et je regarde pour y rajouter du texte.
Ma première idée fut de : Memo := TMemo.Create(Shape); mais bon là c'était sans doute innocent comme idée.
Je continue de creuser.

Bertrand

**ShaiLeTroll** · 29/03/2022, 15h40

Soit une approche Texte enrichi via TRichEdit

Soit une approche Graphique via TGraphicControl comme le TLabel et TShape qui sont purement dessiné sans handle windows

Pas de TMemo, trop lourd, si tu veux du multiligne le TLabel le gère, voir TextRect ajouté dans le code précédent sur cette nouvelle version

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
unit SMSList_MainForm;
 
interface
 
uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls, Vcl.ExtCtrls;
 
type
  TForm1 = class(TForm)
    btnFillRandom: TButton;
    ScrollBox1: TScrollBox;
    procedure btnFillRandomClick(Sender: TObject);
  private
    { Déclarations privées }
  public
    { Déclarations publiques }
  end;
 
var
  Form1: TForm1;
 
implementation
 
{$R *.dfm}
 
uses System.Math;
 
procedure TForm1.btnFillRandomClick(Sender: TObject);
var
  I, K, J, L: Integer;
  ExpIsMe: Boolean;
  Shape: TShape;
  LabelInShape: TLabel;
  LabelRect: TRect;
  LabelText: string;
  X: Integer;
begin
  ScrollBox1.VertScrollBar.Range := ScrollBox1.Height;
 
  X := 0;
  if ScrollBox1.ControlCount > 0 then
    X := ScrollBox1.Controls[ScrollBox1.ControlCount - 1].Top + ScrollBox1.Controls[ScrollBox1.ControlCount - 1].Height + 8;
 
  Shape := TShape.Create(ScrollBox1);
  Shape.Parent := ScrollBox1;
  Shape.Shape := stRoundRect;
  Shape.Top := X;
  Shape.Height := 5;
  Shape.Width := ScrollBox1.ClientWidth;
  Shape.Left := 0;
  Shape.Pen.Color := clRed;
 
  Inc(X, Shape.Height + 8);
 
  K := Random(10);
  for I := 0 to K do
  begin
    ExpIsMe := ByteBool(Random(2) - 1);
 
    Shape := TShape.Create(ScrollBox1);
    Shape.Parent := ScrollBox1;
    Shape.Shape := stRoundRect;
    Shape.Top := X;
    Shape.Height := 20;
    Shape.Width := ScrollBox1.ClientWidth - 100;
    if ExpIsMe then
    begin
      Shape.Left := 100;
      Shape.Pen.Color := clNavy;
      Shape.Brush.Color := clBlue;
    end
    else
    begin
      Shape.Left := 0;
      Shape.Pen.Color := clOlive;
      Shape.Brush.Color := clGreen;
    end;
 
    LabelInShape := TLabel.Create(ScrollBox1);
    LabelText := X.ToString();
    L := Random(3);
    for J := 1 to L do
      LabelText := LabelText + sLineBreak + Format('Line N°%d', [J]);
    LabelInShape.Parent := ScrollBox1;
    LabelInShape.AutoSize := False;
    LabelInShape.Canvas.TextRect(LabelRect, LabelText, [tfCalcRect]);
    Shape.Height := Max(Shape.Height, LabelRect.Height + 4);
    LabelInShape.SetBounds(Shape.Left + 4, Shape.Top + 2, Shape.Width - 8, Shape.Height - 2);
    LabelInShape.Caption := LabelText;
    if ExpIsMe then
    begin
      LabelInShape.Alignment := taRightJustify;
      LabelInShape.Font.Color := clYellow;
    end
    else
    begin
      LabelInShape.Alignment := taLeftJustify;
      LabelInShape.Font.Color := clWebOrange;
    end;
 
    Inc(X, Shape.Height + 8);
  end;
  ScrollBox1.VertScrollBar.Range := X + 20;
  ScrollBox1.VertScrollBar.Position := X;
end;
 
end.

Code dfm :

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
object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Form1'
  ClientHeight = 466
  ClientWidth = 654
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  DesignSize = (
    654
    466)
  PixelsPerInch = 96
  TextHeight = 13
  object btnFillRandom: TButton
    Left = 8
    Top = 7
    Width = 75
    Height = 25
    Caption = 'Fill Random'
    TabOrder = 0
    OnClick = btnFillRandomClick
  end
  object ScrollBox1: TScrollBox
    Left = 8
    Top = 38
    Width = 638
    Height = 420
    HorzScrollBar.Visible = False
    VertScrollBar.ParentColor = False
    Anchors = [akLeft, akTop, akRight, akBottom]
    AutoScroll = False
    TabOrder = 1
  end
end

J'espère que le code fonctionne sur ta version, sur D10 Seattle, cela affiche :

Nom : Nouvelle image bitmap.png
Affichages : 423
Taille : 16,0 Ko

Chat offline via un composant vcl

Composants VCL Delphi

Discussions similaires

Partager

Partager