Tuto menu onglet Partie 1 (mise en place du squelette)

Informations pour bien débuter en PureBasic
Avatar de l’utilisateur
microdevweb
Messages : 1802
Inscription : mer. 29/juin/2011 14:11
Localisation : Belgique

Tuto menu onglet Partie 1 (mise en place du squelette)

Message par microdevweb »

Mise en place du squelette
Le but est de pouvoir obtenir un menu comme ci-dessous

Image


Pour faire cela, nous allons utiliser un des gadget des plus puissant de PB "le canvas gadget"
Comme nous désirons pouvoir réutiliser ce menu facilement, nous allons également faire appel au modules

Le menu de se décompose comme suit
  • Des onglets qui reprennent
    Des groupes qui reprennent
    Des boutons / des spins / et même une liste de boutons

Code : Tout sélectionner

DeclareModule ToolsBar
      
EndDeclareModule
Module ToolsBar
      ;*Structures
       Structure Label
            X.i ;Position X
            Y.i ;Position Y
            W.i ;Largeur
            H.i ;Hauteur
            Value$ ;Le texte à affiché
            Justification.i ;Le type de justification
            Font.i ;La police de caractère à utiliser
            FrontColor.i ;La couleur de texte
            BackColor.i  ;La couleur de fond
      EndStructure
      Structure Spin
            X.i ;Position X
            Y.i ;Position Y
            W.i ;Largeur
            H.i ;Hauteur
            Min.i ;Valeur minimum
            Max.i ;Valeur maximum
            Value.i ;Valeur par défaut
            Disabled.b ;Désactivé (grisé)
             UX1.i ;;Pour la procedure de localisation de survol de la souris
            UX2.i ;Idem
            UY1.i ;Idem
            UY2.i ;Idem
             DX1.i ;Idem
            DX2.i ;Idem
            DY1.i ;Idem
            DY2.i ;Idem
            HelpImage.i
             HelpWidht.i
            HelpHeight.i
            Font.i
            ColorFont.i
            ColorLine.i
            ColorBox.i
            *ProcedureCallback
      EndStructure
      Structure ImgButton
            X.i ;Position X
            Y.i ;Position Y
            W.i ;Largueur
            H.i ;Hauteur
            IdImage.i ;L'image qui sera affichée (elle doit avoir 4 état Normal/Survol/Actif si Toogle/Grisé)
            HelpImage.i ;Une image d'aide quant survol de la souris
            Toogle.b ;Bouton de type toogle si à vrai
            State.b ;Actif ou inactif si toogle
            Disabled.b ;Bouton désactivé (grisé)
            X1.i ;Pour la procedure de localisation de survol de la souris
            X2.i ;idem
            Y1.i ;idem
            Y2.i ;idem
            HelpWidht.i ;La Largeur de l'image d'aide
            HelpHeight.i ;La hauteur de l'image d'aide
            *ProcedureCallback ;Procedure appelée quand click sur le bouton
      EndStructure
      Structure Groupe
            Number.i ;L'identifiant du groupe
            Widht.i ;Sa largeur
            Title$ ;Son titre
            TitleBox.b ;Booleen qui indique si le titre doit être afficher
            TilePosUp.b ;Le titre sera afficher en haut si se booleen est à vrai
            BordreOn.b ;Si à vrai une bordure sera affichée
            Map myImgButton.ImgButton() ;Les boutons du groupe
            Map mySpin.Spin() ;Les spins du groupe
            List myLabel.Label() ; les texte du groupe
            X1.i ;Positionement X
            X2.i ;Pour la procedure de localisation de survol de la souris
            Y1.i ;Positionement Y
            Y2.i ;Pour la procedure de localisation de survol de la souris
      EndStructure
      Structure Onglet
            Number.i ;L'identifiant de l'onglet
            Title$ ;Le titre
            Selected.b ;Un booleen qui indique si sélectionner ou non
            X1.i ;position (qui va servir pour la procedure de survol de la souris
            X2.i ;idem
            List myGroupe.Groupe() ;Les groupe qui ferons partie de l'onglet
      EndStructure
      Structure Tools
            X.i ;La position X du canvas
            Y.i ;La position Y du canvas
            W.i ;La position Largeur du canvas
            H.i ;La Hauteur du canvas
            HeightOnglet.i ;La hauteur de l'onglet
            FontOnglet.i ;La police de caractère pour le titre des onglet
            IdCanvas.i ;L'identifiant du canvas
            IdWindow.i ;L'identifiant de la fenêtre qui utilisera ce menu
            Map MyOnglet.Onglet() ;Les onglet
            BackColor.i ;La couleur de fond
            LineColor.i ;La couleur des ligne
            LeftOngletMargin.i ;La marge de gauche des onglets
            BackColorOngletSelected.i ;La couleur de fond l'onglet quant il est selectionné (actif)
            FrontColorOngletSelected.i ;;La couleur de texte l'onglet quant il est selectionné (actif)
            MarginOnglet.i ;La marge entre les onglet
            OngletTexteColor.i ;La couleur de texte (quant non sélectionner)
            OngletBoxOverBackColor.i ;La couleur de font l'onglet quant il est survolé
            OngletBoxOverFrontColor.i ;La couleur de texte l'onglet quant il est survolé
            FontGroupeTitle.i ;La police utilisée pour le titre des groupe
            BackColorGroupeTitle.i ;La couleur de font du titre des groupe
            FrontColorGroupeTitle.i ;La couleur de texte du titre des groupe
            ColorLineGroupe.i ;La couleur de ligne des groupe
            *ProcedureEventOngletCallBack ;La porcedure qui sera appelée lors de la sélection d'un onglet
      EndStructure
      Global NewMap myTools.Tools()
      ;}
      ;*Procedure
      
      ;}
EndModule
La partie 2 ICI
http://www.purebasic.fr/french/viewtopi ... 21&t=14731
Windows 10 64 bits PB: 5.70 ; 5.72 LST
Work at Centre Spatial de Liège
Avatar de l’utilisateur
MetalOS
Messages : 1509
Inscription : mar. 20/juin/2006 22:17
Localisation : Lorraine
Contact :

Re: Tuto menu onglet Partie 1 (mise en place du squelette)

Message par MetalOS »

Un grand merci pour ton tuto sur ce menu qui va servir à plus d'une personnes.
Avatar de l’utilisateur
microdevweb
Messages : 1802
Inscription : mer. 29/juin/2011 14:11
Localisation : Belgique

Re: Tuto menu onglet Partie 1 (mise en place du squelette)

Message par microdevweb »

Merci MetalOS,

Cela fait toujours plaisir :mrgreen:
Windows 10 64 bits PB: 5.70 ; 5.72 LST
Work at Centre Spatial de Liège
Lemaquis
Messages : 271
Inscription : mer. 25/déc./2013 7:34
Localisation : la corse

Re: Tuto menu onglet Partie 1 (mise en place du squelette)

Message par Lemaquis »

merci microdevweb
dommage un petit exemple complet avec fenetre aurais été le bienvenu car tu propose que la partie menu
sinon c'est trop cool
LeMaquis
Avatar de l’utilisateur
microdevweb
Messages : 1802
Inscription : mer. 29/juin/2011 14:11
Localisation : Belgique

Re: Tuto menu onglet Partie 1 (mise en place du squelette)

Message par microdevweb »

Cette exemple est ICI :arrow: http://www.purebasic.fr/french/viewtopi ... 21&t=14743

A l'avenir je ferais plutôt mes tutos de la sorte, un seul topic et le code commenter à télécharger
Windows 10 64 bits PB: 5.70 ; 5.72 LST
Work at Centre Spatial de Liège
Avatar de l’utilisateur
falsam
Messages : 7324
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: Tuto menu onglet Partie 1 (mise en place du squelette)

Message par falsam »

microdevweb a écrit :A l'avenir je ferais plutôt mes tutos de la sorte, un seul topic et le code commenter à télécharger
Ce qui veut dire que le jour ou ton code disparaît de ton hébergement, ce tuto n'a presque plus de raison d'exister.
Configuration : Windows 11 Famille 64-bit - PB 6.20 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Avatar de l’utilisateur
microdevweb
Messages : 1802
Inscription : mer. 29/juin/2011 14:11
Localisation : Belgique

Re: Tuto menu onglet Partie 1 (mise en place du squelette)

Message par microdevweb »

Bonjour Falsam,
oui c'est vrai aussi... bhaa les 2 alors.... Juste compromis
Windows 10 64 bits PB: 5.70 ; 5.72 LST
Work at Centre Spatial de Liège
Avatar de l’utilisateur
falsam
Messages : 7324
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: Tuto menu onglet Partie 1 (mise en place du squelette)

Message par falsam »

microdevweb a écrit :Bonjour Falsam,
oui c'est vrai aussi... bhaa les 2 alors.... Juste compromis
:)
Configuration : Windows 11 Famille 64-bit - PB 6.20 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Répondre