Script de la vidéo

Bonjour,

Dans 4D, tous Les formulaires sont multipages (32767 pages maximum), ce qui nous permet de répartir les informations de manière thématique ou fonctionnelle, et d’y accéder en fonction de nos besoins. La navigation entre les pages peut se faire en utilisant des onglets, des boutons, ou par programmation.

Certains objets (textes, boutons...) devront cependant être visibles quelle que soit la page affichée.

Dans ce cas, il faut mettre ces objets sur la page 0 que 4D affiche systématiquement "en arrière plan" de la page courante. la page courante étant numérotée 1, 2, 3, ... N

Par exemple tous les boutons à gauche et en haut dans la base exemple figurent sur la page 0.

Pour naviguer de page en page ou en ajouter, vous pouvez utiliser les flèches droite et gauche qui sont ici ou utiliser le pop-up menu entre les deux flèches qui permet d’accéder aux pages existantes.

Pour déplacer des objets d’une page à une autre, il suffit de les couper de la page sur laquelle ils se trouvent, puis de les coller sur la page souhaitée.
Nous allons donc déplacer l’ensemble des boutons du formulaire sur la page 0.

• On sélectionne tous les boutons
• Edition couper
• Accès à la page 0
• Edition Coller

Dorénavant, si je reviens en page 1, mes boutons restent visibles mais ne sont pas cliquables puisqu'ils figurent en page 0.
Nous allons maintenant remplacer tous ces boutons au look “standard” quoique fonctionnel, par des boutons plus ergonomiques par des images que nous a transmises le graphiste.

• revenez en page 0
• Double-cliquez sur le bouton "Terminé" pour afficher ses propriétés.
• nous allons en profiter pour lui donner un nom de variable plus parlant  bouton fin "B_Fin" puisqu'il s'agit de fermer le dialogue
• puis dans la propriété "Type" nous allons choisir ici "Bouton Image".

Le bouton est transformé en image standard que nous allons rectifier par la suite.

Nous voyons juste sous le nom les propriétés de l'image avec la source de l'image et le numéro de l'image et d'autre propriétés que nous aborderons par la suite.

A ce stade, aucune image ne figure dans la bibliothèque d’images. Nous ne pouvons pas indiquer de numéro ou de nom d’image.
Voyons maintenant comment ajouter une image dans la bibliothèque.

• on Ouvre la boîte à outils    .
• on Clique  sur le bouton "Images"    .
• et dans le menu déroulant en bas nous allons choisir "Ouvrir" :
• Sur le bureau vous trouvez ans le dossier 4Dv13_Docs des images PNG
• Nous allons choisir le bouton "Fermer.png" puis ouvrir.
• En cliquant sur OK, l'image est ajoutée et on voit bien le découpage en 4 images différentes avec la taille 48 x 192.

Nous avons mémorisé le numéro d'image 2024 on peut maintenant refermer la boite de dialogue ici.

Ensuite, nous allons choisir  les propriétés de l'objet :

• bibliothèque d'images
• et l'image 2024.

Le bouton est changé automatiquement, il semble certes écrasé mais nous allons changer les propriétés en indiquant que ous avons 4 lignes sur 1 colonne, que la largeur de l'objet comme sa hauteur est de 48 et ensuite nous allons cocher les propriétés :

• Bascule sur passage du curseur pour gérer le rollover
• Retour sur relâchement du clic
• et Dernière imagette si désactivé

Nous pouvons tester le formulaire et nous voyons bien appraître le bouton qui a

• une image standard,
• une image lorsqu'on le survole
• et encore une autre image lorsqu'on clique dessus.

Maintenant que cette image est importée, nous pouvons demander à voir ses propriétés et notamment un découpage de l'image en 1 colonne sur 4 lignes. L'avantage étant qu'une fois ce découpage effectué, si nous glissons l'image directement dans le formulaire, 4D va considérer l'image non pas comme une image mais comme un bouton image.

Il attribuera automatiquement un nom de variable et les informations relatives à l'image sont mentionnées, la source, le numéro d'image et le nombre de lignes plus bien évidemment la largeur et la hauteur.

Pour ajouter les images plus rapidement à votre bibliothèque, vous pouvez les glisser du bureau vers la bibliothèque d'images.

• Affichez la bibliothèque
• Affichez les images sur le bureau
• Prenez une image et glissez-la sur votre bibliothèque

Automatiquement une image est proposée. Donnez-lui un nom et enregistrez-la. Vous pouvez procéder ainsi pour chaque images.
Pensez ensuite à afficher les propriétés de chacune image et et une fois qu'elle a été importée en 48x192 à procéder au découpage d'une colonne par 4 lignes afin que 4D la considère bien par la suite comme un bouton image.

Pour finaliser l'interface, nous allons positionner le bouton terminer en haut à gauche
lui ajouter un libellé en utilisant l'outil texte puis intégrer l'ensemble des images fournies par le graphiste et les disposer à l'écran de la manière suivante :

Les boutons d'accès aux tables seront situés à gauche
les boutons de fonction en haut.

Nous pouvons y ajouter un bouton de gestion des paramètres et un bouton de gestion des préférences. 2 traits de séparation tracés avec l'objet ligne et la touche Majuscule enfoncée pour les tracer de manière orthogonale et enfin le curseur qui nous permettra de savoir sur quelle table nous travaillons.

Et enfin 3 textes :

• un pour les interventions
• le deuxième pour les techniciens
• et le 3è pour les lieux.

Les 2 derniers textes concernant les préférences et les paramètres.