WebBase HTML CSS Javascript
Publié : ven. 30/janv./2026 0:14
WebBase est une énumération de fonctionnalités HTML/CSS/Javascript en cours de développement.
Objectif :
Avoir les éléments nécessaires pour la production d'une application d'édition de code HTML/CSS/Javascript.
Fonctionnalités :
V 0.00
Mise en place du gadget Scintilla
Propriété du gadget Scintilla
Scintilla callback pour gérer les évènements Scintilla
V 0.01
Indentation.
V 0.02
Auto-complétions.
Code de mise en place du gadget Scintilla associé à un callback évènementiel. Les commentaires sont dans le code.
Objectif : Avoir les éléments nécessaires pour la production d'une application d'édition de code HTML/CSS/Javascript.
Fonctionnalités :V 0.00
Mise en place du gadget Scintilla
Propriété du gadget Scintilla
Scintilla callback pour gérer les évènements Scintilla
V 0.01
Indentation.
V 0.02
Auto-complétions.
Code de mise en place du gadget Scintilla associé à un callback évènementiel. Les commentaires sont dans le code.
Code : Tout sélectionner
; WebBase - Trame d'un éditeur HTML/JavaScript
; Version 0.00
; PureBasic 6.30 (x64)
; Mise à jour du 29 Janvier 2026
; Pas d'API & Scintilla natif
; Fonctionnalités
; ===============
; Mise en place du gadget Scintilla
; Propriété du gadget Scintilla
; Scintilla callback pour gérer les évenements Scintilla
EnableExplicit
Enumeration window
#app
EndEnumeration
Enumeration gadgets
#editor
EndEnumeration
Enumeration styles
EndEnumeration
Define version.s = "0.00"
; Largeur de la marge de numérotation des lignes
Global scMarginSizeDefault = 50
; Couleurs
Global scFrontColor = RGB(105,105, 105)
Global scBackColor = RGB(250, 240, 230)
Global scCurrentLineColor = RGB(255, 228, 181)
; Police de caractére
Global scFont.s = "Lucida Console"
Global scFontSize = 12
;- Sommaire des procédures
; Définir les paramétres du gadget scintilla
Declare ScintillaProperties(gadget)
; Callback évenementielle du gadget scintilla
Declare ScintillaCallBack(gadget, *scn.scNotification)
;- Fenetre de l'application
OpenWindow(#app, 0, 0, 800, 600, "WebBase " + version , #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
; Neutraliser la touche TAB et les caractéres spéciaux
RemoveKeyboardShortcut(#app, #PB_Shortcut_Tab)
AddKeyboardShortcut(#app, #PB_Shortcut_Control+#PB_Shortcut_B, 0)
AddKeyboardShortcut(#app, #PB_Shortcut_Control+#PB_Shortcut_G, 0)
AddKeyboardShortcut(#app, #PB_Shortcut_Control+#PB_Shortcut_E, 0)
AddKeyboardShortcut(#app, #PB_Shortcut_Control+#PB_Shortcut_R, 0)
AddKeyboardShortcut(#app, #PB_Shortcut_Control+#PB_Shortcut_O, 0)
AddKeyboardShortcut(#app, #PB_Shortcut_Control+#PB_Shortcut_P, 0)
AddKeyboardShortcut(#app, #PB_Shortcut_Control+#PB_Shortcut_Q, 0)
AddKeyboardShortcut(#app, #PB_Shortcut_Control+#PB_Shortcut_S, 0)
AddKeyboardShortcut(#app, #PB_Shortcut_Control+#PB_Shortcut_F, 0)
AddKeyboardShortcut(#app, #PB_Shortcut_Control+#PB_Shortcut_H, 0)
AddKeyboardShortcut(#app, #PB_Shortcut_Control+#PB_Shortcut_K, 0)
AddKeyboardShortcut(#app, #PB_Shortcut_Control+#PB_Shortcut_W, 0)
AddKeyboardShortcut(#app, #PB_Shortcut_Control+#PB_Shortcut_N, 0)
; Editeur Scintilla gadget associé à un callback
ScintillaGadget(#editor, 10, 10, 780, 580, @scintillaCallBack())
;- Parametres Scintilla (Couleur, font, numerotation, style, etc ...)
ScintillaProperties(#editor)
; Positionner le curseur de saisie dans l'éditeur
SetActiveGadget(#editor)
;- Boucle évenementielle
Repeat : Until WaitWindowEvent(10) = #PB_Event_CloseWindow
;-
;- Liste des procédures
; Parametres du gadget scintilla
Procedure ScintillaProperties(gadget)
;- 1 Style par défaut
; Couleur et police de caractéres
ScintillaSendMessage(gadget, #SCI_STYLESETFORE, #STYLE_DEFAULT, scFrontColor)
ScintillaSendMessage(gadget, #SCI_STYLESETBACK, #STYLE_DEFAULT, scBackColor)
ScintillaSendMessage(gadget, #SCI_STYLESETFONT,#STYLE_DEFAULT, @scFont)
ScintillaSendMessage(gadget, #SCI_STYLESETSIZE, #STYLE_DEFAULT, scFontSize)
;- 2 Propager vers tous les styles
ScintillaSendMessage(gadget, #SCI_STYLECLEARALL)
;- 3 Définir des styles spécifiques
; Activation et couleur de la ligne en cours d'édition
ScintillaSendMessage(gadget, #SCI_SETCARETLINEVISIBLE, #True)
ScintillaSendMessage(gadget, #SCI_SETCARETLINEBACK, scCurrentLineColor)
; Les tabulations sont remplacées par des espaces
ScintillaSendMessage(gadget, #SCI_SETUSETABS, #False)
; Nombre d'espaces pour une tabulation
ScintillaSendMessage(gadget, #SCI_SETINDENT, 4)
; Création de la colonne de numérotation des lignes
ScintillaSendMessage(gadget, #SCI_SETMARGINTYPEN, 1, #SC_MARGIN_NUMBER)
ScintillaSendMessage(gadget, #SCI_SETMARGINWIDTHN, 1, scMarginSizeDefault)
; Création de la colonne de pliages/dépliage
ScintillaSendMessage(gadget, #SCI_SETMARGINMASKN, 2, #SC_MASK_FOLDERS)
ScintillaSendMessage(gadget, #SCI_SETMARGINWIDTHN, 2, 20)
ScintillaSendMessage(gadget, #SCI_SETMARGINSENSITIVEN, 2, #True)
EndProcedure
;-
; Callback evenementielle du gadget scintilla
Procedure scintillaCallBack(gadget, *scn.scNotification)
; Analyser les evenement scintilla
Select *scn\nmhdr\code
Case #SCN_CHARADDED
Debug "#SCN_CHARADDED - Indentation et autocomplétion"
Case #SCN_UPDATEUI
Debug "#SCN_UPDATEUI - Coloration et systeme de folding"
Case #SCN_MARGINCLICK
; Clique sur la deuxiéme colonne (folding)
If *scn\margin = 2
Debug "#SCN_MARGINCLICK - pliage/dépliage du code"
EndIf
EndSelect
EndProcedure
Dans la procédure ScintillaProperties(), j'ai ajouté le paramétrage de la mise en œuvre de l'auto-complétions.
