Page 1 sur 1

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

Publié : mer. 27/août/2014 9:09
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

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

Publié : ven. 29/août/2014 13:35
par MetalOS
Un grand merci pour ton tuto sur ce menu qui va servir à plus d'une personnes.

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

Publié : ven. 29/août/2014 15:02
par microdevweb
Merci MetalOS,

Cela fait toujours plaisir :mrgreen:

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

Publié : sam. 30/août/2014 9:19
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

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

Publié : sam. 30/août/2014 10:28
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

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

Publié : sam. 30/août/2014 10:51
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.

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

Publié : sam. 30/août/2014 10:59
par microdevweb
Bonjour Falsam,
oui c'est vrai aussi... bhaa les 2 alors.... Juste compromis

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

Publié : sam. 30/août/2014 11:14
par falsam
microdevweb a écrit :Bonjour Falsam,
oui c'est vrai aussi... bhaa les 2 alors.... Juste compromis
:)