I. Introduction▲
Les palettes d'outils sont un standard dans beaucoup d'applications.
Des palettes sont associées à une « fenêtre contenante », c'est-à-dire une fenêtre contenant l'information éditable. La palette aide l'utilisateur à éditer ou en formater le contenu.
Des palettes d'outils sont souvent mises dans une fenêtre à gauche d'une « fenêtre contenante » ou au-dessus de la « fenêtre contenante », sous la barre de titre. Ces positions évitent les conflits avec des commandes standards de fenêtre.
Si la palette appartient à la « fenêtre contenante », l'utilisateur a moins de place pour le contenu, particulièrement sur un petit écran. En outre des options de la palette peuvent être cachées si l'utilisateur rend la fenêtre plus petite.
L'utilisation des boutons de triangle de déploiement avec une palette dans sa propre fenêtre est une solution pour contrôler efficacement l'espace de bureau. Il vous permet également de présenter les choix les plus fréquents de l'utilisateur tout en cachant des choix plus complexes ou l'information additionnelle.
Cette note technique décrira comment créer les palettes modernes.
II. Fonctionnalités▲
Nous voudrions associer une palette de formatage à une « fenêtre contenante ».
Quand la « fenêtre contenante » est au premier plan, la palette devrait être visible. Quand la « fenêtre contenante » n'est pas au premier plan, la palette devrait disparaître. La première fois que la palette s'ouvre, seules les options de police devraient être déployées.
L'utilisateur devrait pouvoir glisser et déposer les zones dans la palette à sa convenance. Ici l'énumération d'expressions a été déplacée en haut de la palette:
L'utilisateur devrait pouvoir individuellement cacher / déployer chaque zone :
Quand une zone est contractée, l'utilisateur doit avoir accès aux fonctionnalités de la zone par un Popup :
Et il serait intéressant de pouvoir « détacher » les zones et les montrer dans leur propre fenêtre.
III. La Base Demo: Constantes▲
Dans une Note Technique précédente, nous avons montré comment créer des constantes prédéfinies par programmation. La base Demo utilise des constantes créées par la méthode projet Ks_.
Ces constantes sont :
`
` TYPES DES PROCESS: SÉLECTEURS POUR DES MÉTHODES FORMULAIRE ET DES MÉTHODES OBJET
`
kProcType_SplashScreen
kProcType_Demo
kProcType_Palette
kProcType_Picker
kProcType_PopUpPicker
`
`PALETTES: LES DIFFÉRENTES PALETTES EMPLOYÉES PAR LA BASE DE DONNÉES
`
kPalette_NoPalette
kPalette_DemoPalette
`
` TYPES DES PICKERS: LES DIFFÉRENTES ZONES DE LA PALETTE
`
kPickerType_Phrases
kPickerType_Fonts
kPickerType_RGB
`
`NOMS DES PICKER: LE PRÉFIXE ALPHA POUR DES OBJETS DANS LA PALETTE
`
kPickerLabel_Phrases
kPickerLabel_Fonts
kPickerLabel_RGB
`
`AUTRES Ks: LA HAUTEUR DE LA BARRE DE TITRE
`
kPalette_HeaderHeight
`
`SELECTEURS POUR Alert_
`
kAlert_BadParamCount
IV. La Base Demo: Sur Ouverture▲
La base Demo initialise des variables interprocess et crée 3 process au démarrage.
2.
3.
4.
5.
6.
7.
8.
Compiler_InterProcess
`
`
<>Process_SplashScreen := Nouveau process( "SplashScreen_";32*1024;"$SplashScreen")
<>Process_Palette:=Nouveau process("Palettes_";32*1024;"$Palette")
<>Process_Demo:=Nouveau process("Demo_";32*1024;"$Demo")
Le Process SplashScreen▲
Le process SplashScreen récupère son ID et l'affecte à la variable interprocess <>Process_SplashScreen.
Le process SplashScreen initialise alors des variables process et affecte deux variables, theProcessType et thePalette avec des constantes prédéfinies.
TheProcessType sera employé comme sélecteur dans des méthodes formulaire et des méthodes objet.
ThePalette contient la palette à associer à ce process. Dans cette base exemple, il y a 2 constantes prédéfinies: kPalette NoPalette et kPalette DemoPalette. L'affectation de kPalette_NoPalette à la variable process ThePalette indique qu'aucune palette ne doit être montrée quand le process de SplashScreen est au premier plan.
Un dialogue de bienvenue simple est alors affiché :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<>Process_SplashScreen:=Numero du process courant
`
Compiler_Process
`
theProcessType:=kProcType_SplashScreen
thePalette:=kPalette_NoPalette
`
C_ENTIER LONG($W;$H)
LIRE PROPRIETES FORMULAIRE([Table 1];"SplashScreen";$W;$H)
`
C_ENTIER LONG($L;$T;$R;$B)
$L:=((Largeur ecran-$W)/2)
$T:=((Hauteur ecran-$H)/3)
$R:=$L+$W
$B:=$T+$H
`
Creer fenetre($L;$T;$R;$B;3)
DIALOGUE([Table 1];"SplashScreen")
FERMER FENETRE
Le Process Palette▲
Le process Palette récupère son ID et l'affecte à la variable interprocess <>Process_ Palette.
Le process Palette initialise alors des variables process et affecte deux variables, theProcessType et thePalette avec des constantes prédéfinies.
TheProcessType sera employé comme sélecteur dans des méthodes formulaire et des méthodes objet.
La constante prédéfinie kPalette_NoPalette est affectée à la variable process ThePalette. Le process de palette n'a pas d'autre palette associée à sa fenêtre.
La variable interprocess <>ThePalette est affectée avec la valeur contenue dans la variable process ThePalette.
Le process Palette fait maintenant une boucle jusqu'à ce que l'on quitte 4D. S'il y a une palette à montrer, les données nécessaires pour la palette sont initialisées, une fenêtre est ouverte et la palette montrée. Sinon, aucun dialogue n'est montré et le processus est suspendu.
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.
<>Process_Palette:=Numero du process courant
`
Compiler_Process
`
theProcessType:=kProcType_Palette
thePalette:=kPalette_NoPalette
<>thePalette:=thePalette
`
theEnd:=Faux
Repeter
`
thePalette:=<>thePalette
Si (<>thePalette=kPalette_NoPalette )
`
SUSPENDRE PROCESS(<>Process_Palette)
`
Sinon
`
Palettes_Init_ (kPickerType_Fonts ;kPickerType_Phrases ;kPickerType_RGB )
`
Repeter
Si (Chercher dans tableau(<>arPicker_IsThere;Vrai)>0)
Palettes_Window
DIALOGUE([Table 1];"Palette")
FERMER FENETRE
Sinon
<>thePalette:=kPalette_NoPalette
Fin de si
Jusque (thePalette#<>thePalette) | (theEnd) | (<>theEnd)
`
Fin de si
`
Jusque (theEnd) | (<>theEnd)
La Méthode projet Palettes_Init▲
La méthode Palette_Init reçoit comme paramètres des constantes prédéfinies des zones qui doivent être incluses dans la palette et leur ordre d'inclusion.
La base demo a trois « Pickers », un « Picker » de couleur de RVB (kPickerType_Phrases), un « Picker » de police (kPickerType_Fonts), et un « Picker » d'expressions (kPickerType_Phrases).
Des tableaux interprocess contiennent l'information nécessaire permettant à chaque « Picker » de fonctionner.
Le type du « Picker » : <>arPicker_Type{theElement}.
Si le « Picker » est dans la palette : <>arPicker_IsThere{theElement}.
Si le carreau du « Picker » est caché/montré : <>arPicker_IsOpen{theElement}.
Le préfixe alpha des objets appartenant au « Picker » : <>arPicker_PreFix{theElement}.
La hauteur de la zone du « Picker » : <>arPicker_Height{theElement}.
Si le « Picker » est dans sa propre fenêtre : <>arPicker_Process{theElement}.
Un pointeur sur le bouton du caché/montré : <>arPicker_bHideShow{theElement}.
Un pointeur sur le bouton de Glisser/Déposer : <>arPicker_bDrag{theElement}.
Un pointeur sur le bouton de Popup : <>arPicker_bPopUp{theElement}.
Les données pour le « Picker » sont initialisées par la méthode projet Picker_Init.
Le Process Demo▲
TheProcessType sera employé comme sélecteur dans des méthodes formulaire et des méthodes objet.
Cette fois ThePalette contient le kPalette_DemoPalette, la palette à associer à ce process.
Un DIALOGUE est alors dessiné, quoique caché.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<>Process_Demo:=Numero du process courant
CACHER PROCESS (<>Process_Demo)
`
Compiler_Process
`
theProcessType:=kProcType_Demo
thePalette:=kPalette_DemoPalette
`
C_ENTIER LONG($W;$H)
LIRE PROPRIETES FORMULAIRE([Table 1];"Demo";$W;$H)
`
C_ENTIER LONG($L;$T;$R;$B)
$L:=((Largeur ecran-$W)/2)
$T:=((Hauteur ecran-$H)/3)
$R:=$L+$W
$B:=$T+$H
`
<>Window_Demo:=Creer fenetre($L;$T;$R;$B;Regular window ;"Demo")
DIALOGUE([Table 1];"Demo")
FERMER FENETRE
Le Process Picker▲
Un process « Picker » est créé pour chaque occurrence d'un « détaché » d'une zone de la palette.
Le process reçoit trois paramètres: le « Picker » à montrer, et les coordonnées de la fenêtre à montrer.
Les deux drapeaux, theProcessType et thePalette sont affectés.
Le « Picker » est initialisé, et montré dans un dialogue.
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.
C_ENTIER LONG($1) `LE FORMULAIRE
C_ENTIER LONG($2) `MOUSEV
C_ENTIER LONG($3) `MOUSEH
`
`
Si (Nombre de parametres=3)
`
Compiler_Process
`
C_ENTIER LONG(thePicker;$MouseH;$MouseV)
thePicker:=$1
$MouseH:=$2
$MouseV:=$3
`
theProcessType:= kProcType_Picker
thePalette:= kPalette_NoPalette
`
Picker_Init (thePicker)
`
Picker_Window (thePicker;$MouseH;$MouseV)
DIALOGUE([Table 1];"Palette")
FERMER FENETRE
`
Sinon
Alert_ (Nom méthode courante;kAlert_BadParamCount )
Fin de si
La Méthode Projet PopUpPicker▲
La méthode projet PopUpPicker est appelée quand le bouton de PopUpPicker est cliqué dans la palette.
La méthode projet PopUpPicker installe la routine APPELER SUR EVENEMENT et ouvre une fenêtre pour montrer le « Picker » désiré.
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.
C_ENTIER LONG($1) `LE TYPE DE PICKER
C_ENTIER LONG($2) `MOUSEV
C_ENTIER LONG($3) `MOUSEH
`
`
Si (Nombre de parametres=3)
`
C_ENTIER LONG(thePicker;$MouseH;$MouseV;$theProcessType)
thePicker:=$1
$MouseH:=$2
$MouseV:=$3
`
$theProcessType:=theProcessType
theProcessType:=kProcType_PopUpPicker
`
<>Process_EventProcess:=Numero du process courant
`
PopUpPicker_Window (thePicker;$MouseH;$MouseV)
APPELER SUR EVENEMENT ("PopUpPicker_OnEventCall")
DIALOGUE([Table 1];"Palette")
APPELER SUR EVENEMENT ("")
FERMER FENETRE
`
theProcessType:=$theProcessType
<>Process_EventProcess:=0
`
Sinon
Alert_ (Nom méthode courante;kAlert_BadParamCount )
Fin de si
Le PopUpPicker_OnEventCall vérifie tous les clics de souris, et si un clic se produit en dehors de la fenêtre de PopUpPicker, l'événement est enlevé de la queue des événements, le process de PopUpPicker est appelé, et la fenêtre est fermée.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
Si (MouseDown=1)
`
C_ENTIER LONG($h;$v;$State)
POSITION SOURIS ($h;$v;$State;*)
`
C_ENTIER LONG($Window)
$Window:= Chercher fenetre ($h;$v)
Si ($Window#<>theWindow)
FILTRER EVENEMENT
APPELER PROCESS (<>Process_EventProcess)
Fin de si
`
Fin de si
Cacher / Montrer la Palette▲
Quand la fenêtre du process Demo est amenée au premier plan, l'événement formulaire Sur activation est reçu.
La méthode projet Palettes_Set est appelée avec la variable process thePalette comme paramètre. Cette méthode vérifie si la palette montrée est différente de la palette demandée, et si oui, le process Palette est appelé avec la variable interprocess <>thePalette mise à jour.
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.
C_ENTIER LONG($1) `PALETTE DEMANDEE
`
`
Si (Nombre de parametres=1)
Si (<>Process_Palette>0)
`
` VERIFIE L'INTEGRITE DE LA REQUETE
`
C_ENTIER LONG($TheRequestedPalette)
$TheRequestedPalette:=$1
Si ($TheRequestedPalette<kPalette_NoPalette )
$TheRequestedPalette:=kPalette_NoPalette
Sinon
Si ($TheRequestedPalette>kPalette_theCount )
$TheRequestedPalette:=kPalette_NoPalette
Fin de si
Fin de si
`
`CHANGE LA PALETTE SEULEMENT SI NECESSAIRE
`
Au cas ou
`
: ($TheRequestedPalette=kPalette_NoPalette ) & (<>thePalette=kPalette_NoPalette )
`
: ($TheRequestedPalette=kPalette_NoPalette ) & (<>thePalette>kPalette_NoPalette )
<>thePalette:=$TheRequestedPalette
REACTIVER PROCESS (<>Process_Palette)
APPELER PROCESS (<>Process_Palette)
`
: ($TheRequestedPalette=<>thePalette)
MONTRER PROCESS (<>Process_Palette)
`
: (<>thePalette=kPalette_NoPalette ) & ($TheRequestedPalette>kPalette_NoPalette )
<>thePalette:=$TheRequestedPalette
MONTRER PROCESS (<>Process_Palette)
REACTIVER PROCESS (<>Process_Palette)
`
: ($TheRequestedPalette#<>thePalette)
<>thePalette:=$TheRequestedPalette
APPELER PROCESS (<>Process_Palette)
`
Fin de cas
`
Fin de si
Sinon
Alert_ (Nom méthode courante; kAlert_BadParamCount )
Fin de si
Dessin des « Pickers » dans la palette▲
Le formulaire « Palette » contient tous les objets nécessaires pour dessiner les « Pickers ». La page 0 contient les objets d'interface et une simple variable pour gérer le Glissé /Déposé.
Dans une base de données complexe, il serait intéressant d'avoir plusieurs formulaires, avec pour chacun les objets nécessaires pour un type spécifique de palette.
La page 1 contient les objets actifs nécessaires pour faire fonctionner la palette.
Quand la palette est dessinée, pour chaque « Picker » montré dans la palette, les objets des « Pickers » sont déplacés à leur emplacement correct. Quelques éléments sont cachés ou montrés, cela dépend de l'état du sémaphore Hide/Show du « Picker ».
Quand un « Picker » est dessiné dans sa propre fenêtre, comme dans un PopUpPicker, seulement les objets pour ce « Picker » sont déplacés. Tous les autres objets sont cachés avec la commande CHOIX VISIBLE.
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.
C_ENTIER LONG($i;$thePicker;$thePickerCount;$theTop;$L;$T;$R;$B;$MoveH;$MoveV)
$thePickerCount:=Taille tableau(<>arPicker_Type)
`
C_BOOLEEN($Open)
$Open:=Faux
`
C_ALPHA(55;$PreFix)
`
` OBTENEZ TOUS LES 'PICKERS' UTILISÉS EN PLACE, OUVERTS, EN COMMENÇANT AU DESSUS
`
$theTop:=0
Boucle ($thePicker;1;$thePickerCount)
$PreFix:=<>arPicker_PreFix{$thePicker}
Si (<>arPicker_IsThere{$thePicker})
`
CHOIX VISIBLE(*;$PreFix+"@";Vrai)
LIRE RECT OBJET(*;$PreFix+"Rect";$L;$T;$R;$B)
DEPLACER OBJET(*;$PreFix+"Drag";$L+2;$T+2;$R-2;$B-2;*)
CHOIX VISIBLE(*;$PreFix+"Rect";Faux)
$MoveH:=0-$L
$MoveV:=0-($T-$theTop)
DEPLACER OBJET(*;<>arPicker_PreFix{$thePicker}+"@";$MoveH;$MoveV)
$theTop:=$theTop+($B-$T)-1
`
$Open:=<>arPicker_IsOpen{$thePicker}
CHOIX VISIBLE(*;$PreFix+"OpenPict";$Open)
CHOIX VISIBLE(*;$PreFix+"ClosedPict";Non($Open))
CHOIX VISIBLE(*;$PreFix+"PopUp";Non($Open))
CHOIX VISIBLE(*;$PreFix+"PopUpPict";Non($Open))
`
Sinon
DEPLACER OBJET(*;<>arPicker_PreFix{$thePicker}+"@";MAXENT ;MAXENT )
CHOIX VISIBLE(*;$PreFix+"@";Faux)
Fin de si
Fin de boucle
`
` POUR CHAQUE '"PICKER"', SI 'PICKER' NON OUVERT, ON CACHE LA ZONE DE CONTENU ET
` DEPLACE LES 'PICKERS' DU DESSOUS
`
Boucle ($thePicker;1;$thePickerCount)
Si (<>arPicker_IsThere{$thePicker})
Si (Non(<>arPicker_IsOpen{$thePicker}))
$PreFix:=<>arPicker_PreFix{$thePicker}
$MoveV:=0-<>arPicker_Height{$thePicker}
`
` ON VERIFIE LA TAILLE DE LA VARIABLE DRAG ET ON LA DEPLACE
` (en fonction du statut du "PICKER", ouvert ou fermé)
`
LIRE RECT OBJET(*;$PreFix+"Drag";$L;$T;$R;$B)
DEPLACER OBJET(*;$PreFix+"Drag";$L;$T;$R;$B+$MoveV;*)
CHOIX VISIBLE(*;$PreFix+"_@";Faux)
`
Boucle ($i;$thePicker+1;$thePickerCount)
DEPLACER OBJET(*;<>arPicker_PreFix{$i}+"@";0;$MoveV)
Fin de boucle
`
Fin de si
Fin de si
Fin de boucle
La Méthode Projet FM_▲
La méthode projet FM_ est appelée à partir de tous les formulaires.
Puis FM_ appelle la méthode projet appropriée suivant le type du process.
L'événement Sur chargement est celui où les objets de « Picker » sont mis en place.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
C_ENTIER LONG($1) `EVENEMENT FORMULAIRE
`
Au cas ou
`
: (theProcessType=kProcType_Palette )
Palettes_FM ($1)
`
: (theProcessType=kProcType_Demo )
Demo_FM ($1)
`
: (theProcessType=kProcType_Picker )
Picker_FM ($1)
`
: (theProcessType=kProcType_PopUpPicker )
PopUpPicker_FM ($1)
`
: (theProcessType=kProcType_SplashScreen )
`
Fin de cas
La Méthode Projet OM_▲
La méthode projet OM_ est appelée à partir de tous les objets actifs des formulaires.
Puis OM_ appelle la méthode projet appropriée suivant le type du process et objet appelés.
La méthode projet Picker_OM gère toutes les fonctionnalités des différents « Pickers » de la Palette.
Elle est également présente là où le bouton de Hide/Show (caché/montré), le bouton de PopUpPicker, et les routines de Glisser /Déposer sont gérés.
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.
C_ENTIER LONG($1) `EVENEMENT FORMULAIRE
C_POINTEUR($2) `SELF
`
`
Si (Nombre de parametres=2)
`
C_ENTIER LONG($Event)
C_POINTEUR($Self)
$Event:=$1
$Self:=$2
`
Au cas ou
`
: (theProcessType=kProcType_SplashScreen )
`
: (theProcessType=kProcType_Palette )
Picker_OM ($Event;$Self)
`
: (theProcessType=kProcType_Demo )
Demo_OM ($Event;$Self)
`
: (theProcessType=kProcType_Picker )
Picker_OM ($Event;$Self)
`
: (theProcessType=kProcType_PopUpPicker )
PopUpPicker_OM ($Event;$Self)
`
Fin de cas
`
Sinon
Alert_ (Nom méthode courante;kAlert_BadParamCount )
Fin de si
V. Conclusion▲
Les commandes LIRE RECT OBJET, DEPLACER OBJET, et CHOIX VISIBLE permettent au développeur de repenser sa manière de mettre en application des interfaces. Il est possible de grouper des objets et de traiter le groupe lui-même comme comme élément d'interface. Des éléments d'interface peuvent être organisés par des thèmes, avec les éléments de chaque thème sur un formulaire.
Pendant que les applications se développent en taille et complexité, une telle approche permet au développeur de créer les solutions modulaires aux problématiques qui se répètent. Dans la base Demo, la palette est montrée quand une fenêtre contenante est affichée. Elle pourrait également être appelée quand le curseur écrit entre dans une zone de texte, ou comme une zone popup associée à un bouton ; ou comme popup contextuel associé à un process d'APPELER SUR EVENEMENT.
VI. Bases exemples▲
Téléchargez les bases exemples :
base exemple Mac
base exemple Windows