Voici un tutoriel qui vous permettra de réaliser un outil de dessin de diagrammes à partir d'une barre d'outils personnalisée.Il s'agit d'un développement simple et rapide, facilement adaptable à vos besoins. et qui est du plus bel effet !
Plaçons le décor...
La zone de travail
Commencez par désactiver la grille Excel dans les options d'affichage.
Délimitez la zone de dessin au centre de l'écran en sélectionnant les cellules correspondantes et en traçant les bordures dans les propriétés de format de cellules.
Maintenez les cellules sélectionnées, et nommez cette zone "Zone". Le nommage se fait en modifiant l'intitulé situé à gauche de la barre de formule. Vous constaterez qu'à chaque fois que vous sélectionnerez "Zone" dans cette liste déroulante, la zone en question sera sélectionnée automatiquement.
Vous pouvez placer un titre au-dessus de la zone de travail soit en fusionnant les cellules soit en insérant un contrôle ActiveX de type Label personnalisé.
La liste des composants
Sous MS Office 2003, affichez la barre d'outils "Visual Basic". Sous MS Office 2007/2010, affichez l'onglet "Développeur". Passez Excel en mode Edition et insérez à partir de la boîte à outils :
- un contrôle ActiveX de type ListBox à droite de la zone de travail que vous venez de délimiter. Cette première ListBox s'appelle par défaut ListBox1.
- deux contrôlesActiveX de type CommandButton sous la ListBox. Ces deux boutons s'appelleront par défaut CommandButton1 et CommandButton2.
- soit modifier sa propriété SpecialEffect en lui attribuant la valeur 3 - fmSpecialEffectEtched. La bordure sera alors grise par défaut.
- soit modifier sa propriété SpecialEffect en lui attribuant la valeur 0 - fmSpecialEffectFlat, et modifier sa propriété BorderStyle en lui attribuant la valeur 1 - fmBorderStyleSingle en veillant à choisir la couleur qui vous convient dans l'attribut BorderColor.
- CommandButton1 devient "Afficher" : ce bouton servira à afficher un composant de la liste sur le diagramme. Dans cet exemple, chaque composant ne peut être instancié / affiché qu'une seule fois.
- CommandButton2devient "Supprimer" : ce bouton servira à supprimer un composant de la liste et du diagramme.
La barre d'outils
Délimitez la zone où vous souhaitez placer votre barre d'outils en sélectionnant les cellules correspondantes et en traçant les bordures dans les propriétés de format de cellules. Si vous le souhaitez, vous pouvez colorer cette zone en lui affectant un fond uniforme ou en dégradé comme sur l'exemple ci-dessous.
Modifiez le paramètre Picture de ces trois labels en y appliquant des images de votre choix au format BMP.
Passez à l'onglet "Feuil2" et insérer les mêmes images que vous venez d'utiliser. Réglez leur taille aux dimensions auxquelles vous souhaitez les faire apparaître sur le diagramme.
Sélectionnez chaque image séparément et modifier son nom dans la zone de nommage située à gauche de la barre de formule, comme nous l'avions fait pour la zone de dessin en "Feuil1". Désormais, vous pourrez manipuler vos images en les invoquant par les noms que vous leur aurez donné.
Le formulaire de saisie
A partir de la barre d'outils "VisualBasic" (MS 2003) ou de l'onglet "Développeur" (MS 2007/2010), lancez l'éditeur de code VBA. Insérez dans le projet en cours une nouvelle feuille de type UserForm : votre nouveau formulaire s'appellera par défaut UserForm1.
Placez les éléments de votre formulaire :
- Affichez la fenetre de propriétés.
- Sélectionnez le formulaire et modifiez son titre en saisissant le titre souhaité (dans cet exemple "Composant") dans la propriété Caption.
- Créez un Label qui servira à indiquer à l'utilisateur l'action à réaliser (dans cet exemple on lui demande de renseigner le nom du composant de diagramme).
- Créez une TextBox qui servira à saisir du texte (dans cet exemple il s'agit du nom du composant)
- Créer deux CommandButton qui serviront à valider ou annuler la saisie. Par défault ils s'appelleront CommandButton1 et CommandButton2. Modifiez l'intitulé des boutons en renseignant leur propriété Caption : CommandButton1 prendra la valeur "OK" et CommandeButton2 prendra la valeur "Annuler".
Les détails
Revenons à l'onglet "Feuil1". Vous pouvez placer de la décoration et des titres au-dessus de chacun des éléments que vous avez créé, soit directement dans des cellules fusionnées, soit en insérant un contrôle ActiveX de type
Label personnalisé.
... puis passons au codage
Pour atteindre le code d'un contrôle ActiveX, sachez qu'il vous suffit de double cliquer sur celui-ci lorsque vous êtes en mode édition. Allons-y !
La barre d'outils
Les éléments de la barre d'outils seront considérés comme des boutons cliquables, bien qu'il s'agissent de contrôles Label. Voir le tutorial Customisez vos boutons.
- Label1 servira à créer un composant représentant un logo blanc.
- Label2 servira à créer un composant représentant un logo vert.
- Label3 servira à créer un connecteur dynamique (parmi les formes automatiques de MS Office) pour relier les composants entre eux.
Pour chacun des trois éléments de la barre d'outils, nous allons donc coder trois procédures :
- Celle qui se déroule lorsqu'on appuie sur le label avec le bouton gauche de la souris : Mouse_Down().
- Celle qui se déroule lorsqu'on relève le bouton gauche de la souris au-dessus du label : Mouse_Up().
- Celle qui se déroule lorsqu'on a fini de cliquer sur le label : Click().
Private Sub Label1_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
Label1.SpecialEffect = fmSpecialEffectSunken
End Sub
Private Sub Label1_MouseUp(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
Label1.SpecialEffect = fmSpecialEffectEtched
End Sub
Private Sub Label1_Click()
' Placer le composant dans la zone de diagramme nommée "Zone"
Sheets("Feuil2").Shapes("LogoBlanc").Copy
ActiveSheet.Range("Zone").Select
ActiveSheet.Paste
' Nommer le composant via formulaire
UserForm1.Show
End Sub
Private Sub Label2_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
Label2.SpecialEffect = fmSpecialEffectSunken
End Sub
Private Sub Label2_MouseUp(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
Label2.SpecialEffect = fmSpecialEffectEtched
End Sub
Private Sub Label2_Click()
' Placer le composant dans la zone de diagramme nommée "Zone"
Sheets("Feuil2").Shapes("LogoVert").Copy
ActiveSheet.Range("Zone").Select
ActiveSheet.Paste
' Nommer le composant via formulaire
UserForm1.Show
End Sub
Private Sub Label3_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
Label3.SpecialEffect = fmSpecialEffectSunken
End Sub
Private Sub Label3_MouseUp(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
Label3.SpecialEffect = fmSpecialEffectEtched
End Sub
Private Sub Label3_Click()
ActiveSheet.Shapes.AddConnector(msoConnectorCurve, 249#, 296.25, 63#, 84.75 _
).Select
Selection.ShapeRange.Line.ForeColor.SchemeColor = 23
Selection.ShapeRange.Line.Visible = msoTrue
Selection.ShapeRange.Line.BeginArrowheadStyle = msoArrowheadOval
Selection.ShapeRange.Line.EndArrowheadStyle = msoArrowheadOval
Selection.ShapeRange.Line.BeginArrowheadWidth = msoArrowheadWidthMedium
Selection.ShapeRange.Line.BeginArrowheadLength = msoArrowheadLengthMedium
Selection.ShapeRange.Line.EndArrowheadWidth = msoArrowheadWidthMedium
Selection.ShapeRange.Line.EndArrowheadLength = msoArrowheadLengthMedium
Selection.ShapeRange.Line.Visible = msoTrue
End Sub
Le formulaire de saisie
Affichez la fenêtre d'édition du formulaire, puis double cliquez sur le bouton "OK" (CommandButton1) pour accéder à son code. Copiez et collez le code suivant en lieu et place des deux lignes qui sont créées automatiquement : "Sub CommandButton1()" et "End Sub".
Private Sub CommandButton1_Click()
' Nommer le composant sélectionné sur le diagramme (il vient d'être collé, il est donc toujours sélectionné)
Selection.Name = TextBox1
' Ajouter le composant à la liste
ActiveSheet.ListBox1.AddItem Selection.Name
' Fermer le formulaire
Unload Me
End Sub
' Nommer le composant sélectionné sur le diagramme (il vient d'être collé, il est donc toujours sélectionné)
Selection.Name = TextBox1
' Ajouter le composant à la liste
ActiveSheet.ListBox1.AddItem Selection.Name
' Fermer le formulaire
Unload Me
End Sub
Revenez à la fenêtre d'édition du formulaire, puis double cliquez sur le
bouton "Annuler" (CommandButton2) pour accéder à son code. Copiez et collez
le code suivant en lieu et place des deux lignes qui sont créées
automatiquement : "Sub CommandButton2()" et "End Sub".
Private Sub CommandButton2_Click()
' Annuler la création de composant : supprime le logo du diagramme et ferme le formulaire
Selection.Delete
Unload Me
End Sub
' Annuler la création de composant : supprime le logo du diagramme et ferme le formulaire
Selection.Delete
Unload Me
End Sub
Restez dans la fenêtre de code du formulaire et ajoutez ces quelques lignes qui permettront d'interdire la fermeture du formulaire par clic sur la croix en haut à droite. Le but de cette manoeuvre est de forcer l'utilisateur à annuler son action en cliquant sur le bouton "Annuler" ci-dessus.
Private Sub UserForm_QueryClose(Cancel As Integer, CloseMode As Integer)
' Empêcher l'utilisateur de fermer le formulaire par la croix
If CloseMode = 0 Then Cancel = True
End Sub
' Empêcher l'utilisateur de fermer le formulaire par la croix
If CloseMode = 0 Then Cancel = True
End Sub
La liste des composants
Revenez à l'onglet "Feuil1" de votre classeur.
Nous ne coderons rien concernant la liste des composants ListBox1 car celle-ci est pilotée par le formulaire comme vous avez pu le constater dans les lignes de coques ci-dessus.
En revanche, nous allons coder les procédures des boutons "Ajouter" (CommandButton1) et "Supprimer" (CommandButton2).
En restant en mode Edition, double cliquez-sur le bouton "Ajouter" (CommandButton1). Copiez et collez le code suivant en lieu et place des deux lignes qui sont créées
automatiquement : "Sub CommandButton2()" et "End Sub".
Private Sub CommandButton1_Click()
Dim s As Shape
For Each s In Sheets("Feuil1").Shapes
' Vérification de la présence du composant parmi tous les éléments du diagramme
If s.Type = msoPicture And s.Name = ActiveSheet.ListBox1.Value Then
s.Select
' Le composant est déjà sur le diagramme, on le sélectionne et on quitte la procédure
Exit Sub
End If
Next
' Le composant n'est pas sur le diagramme : afficher le composant
' Placer le composant dans la zone de diagramme nommée "Zone"
Sheets("Feuil2").Shapes("LogoBlanc").Copy
ActiveSheet.Range("Zone").Select
ActiveSheet.Paste
' Nommer le composant
Selection.Name = ActiveSheet.ListBox1.Value
End Sub
Dim s As Shape
For Each s In Sheets("Feuil1").Shapes
' Vérification de la présence du composant parmi tous les éléments du diagramme
If s.Type = msoPicture And s.Name = ActiveSheet.ListBox1.Value Then
s.Select
' Le composant est déjà sur le diagramme, on le sélectionne et on quitte la procédure
Exit Sub
End If
Next
' Le composant n'est pas sur le diagramme : afficher le composant
' Placer le composant dans la zone de diagramme nommée "Zone"
Sheets("Feuil2").Shapes("LogoBlanc").Copy
ActiveSheet.Range("Zone").Select
ActiveSheet.Paste
' Nommer le composant
Selection.Name = ActiveSheet.ListBox1.Value
End Sub
Restez dans la fenêtre de code VBA, et copiez-collez directement le code suivant après la procédure que vous venez d'insérer. Il s'agit de la procédure du bouton "Supprimer" (CommandButton2).
Private Sub CommandButton2_Click()
Dim s As Shape
For Each s In Sheets("Feuil1").Shapes
' Vérification de la présence du composant parmi tous les éléments du diagramme
If s.Type = msoPicture And s.Name = ActiveSheet.ListBox1.Value Then
s.Select
' Supprimer le composant du diagramme
s.Delete
Exit For
End If
Next
' Supprimer le nom de la liste
ActiveSheet.ListBox1.RemoveItem (ActiveSheet.ListBox1.ListIndex)
End Sub
Dim s As Shape
For Each s In Sheets("Feuil1").Shapes
' Vérification de la présence du composant parmi tous les éléments du diagramme
If s.Type = msoPicture And s.Name = ActiveSheet.ListBox1.Value Then
s.Select
' Supprimer le composant du diagramme
s.Delete
Exit For
End If
Next
' Supprimer le nom de la liste
ActiveSheet.ListBox1.RemoveItem (ActiveSheet.ListBox1.ListIndex)
End Sub
Finalisez votre travail
Terminez en désactivant l'affichage des en-têtes de lignes et de colonnes de l'onglet "Feuil1", ainsi que les onglets du classeur, afin d'épurer votre interface et d'éviter que l'on puisse modifier votre mise en page ou vos images.
A vous à présent d'adapter ce tutorial à vos besoins : modifiez l'apparence de la barre d'outils, créez de nouveaux composants, ajoutez des paramètres supplémentaires aux composants, créez une base de données associée à la liste de composants...
Téléchargez le fichier
