Formulaires et boutons

4D v16

Video script

Bonjour,
dans cette vidéo nous allons réaliser le maquettage de la navigation.

Nous devons donc disposer :

d’un formulaire d’accueil avec des objets fonctionnels et "décoratifs"
de quelques lignes de code pour afficher le formulaire à l’écran
et d’écrans de saisie/modification pour chacun des fichiers à traiter

Commençons cette découverte par la réalisation de l’écran principal de navigation.

Comme vous l’avez vu dans la vidéo de présentation de l'application finale, nous devons intégrer dans notre logiciel la gestion des demandes d’intervention, des lieux d'intervention et des techniciens, le tout à partir d'un écran principal.

Nous allons donc créer cet écran principal.

Dans la barre d’outils :

Cliquez sur le bouton "Explorateur" .
Cliquez sur le bouton "formulaires"
Choisissez "Formulaires projet" puis cliquez sur le bouton + en bas de l’explorateur.
Nommons ce formulaire "Navigation".
puis OK.

Un formulaire vide apparait ainsi que la liste des propriétés.

Les outils à gauche permettent d'ajouter des objets dans le formulaire :

textes
variables et champs
listes
popup menus
boutons
boutons radio
thermomètres
Objets décoratifs
séparateurs
plug-ins
etc ...

Les outils en haut permettent de manipuler les objets :

grouper / aligner
gestion du zoom
déplacement
gestion du multi-pages
et également des vues, des badges et de la bibliothèque d'objets.

Commençons par créer une interface de navigation simple pour en comprendre le fonctionnement:

un bouton pour afficher la liste des personnels
un bouton pour afficher la liste des interventions
un bouton pour fermer le formulaire
nous y ajouterons un titre en haut de la page

Sélectionnez l’objet bouton
Tracez un premier bouton dans le formulaire.
Renommez le bouton "Terminé"
en appuyant sur la touche entrée on valide la modification effectuée.
On peut associer une action standard à chaque bouton
ici, nous allons lui associer le choix "valider"

La liste des propriétés s'adapte à l'objet sur lequel on a cliqué.

Renommez le bouton "Terminé"
en appuyant sur la touche entrée on valide la modification effectuée.
On peut associer une action standard à chaque bouton
ici, nous allons lui associer le choix "valider"

Ce choix permettra de refermer la fenêtre.

Créez un 2e bouton que nous allons nommer "Interventions".

Nous verrons bientôt comment programmer ce bouton afin qu’il affiche la liste des interventions.

Pour tester ce formulaire, cliquez sur le triangle vert en haut à gauche de la fenêtre du formulaire. 4D vous présente le formulaire tel que l'utilisateur le verra.

Vous remarquez que la fenêtre s’est adaptée toute seule à la taille du formulaire. Le redimensionnement sera automatique et vous fera gagner de temps en développement et en maintenance (cet automatisme de redimensionnement est bien évidemment débrayable).

Cliquez sur le bouton "Terminé" pour refermer la fenêtre et revenir en mode Développement.

Rendons maintenant fonctionnel le 2e bouton :

Effectuez un clic droit sur le bouton "Interventions".
puis demandez "Méthode objet" :
Dans la fenêtre de la méthode objet, saisissez la ligne suivante :

ALERTE("Liste des Interventions bientôt disponible...")

puis validez la ligne, automatiquement la commande ALERTE est reconnu.

Refermez la méthode.

Vous remarquez le "badge" qui indique qu’une méthode est associée à l’objet.

Retestez le formulaire en cliquant sur le triangle vers en haut à gauche,
puis cliquez sur le bouton "Interventions".

Le message apparaît bien.

Dans une leçon ultérieure, nous transformerons ces boutons en boutons images afin d’améliorer l’ergonomie de notre application.

Pour confirmer cette première approche, nous allons créer un troisième bouton destiné à afficher la liste des "Techniciens".

Il est possible de dupliquer des objets. Dans ce cas on duplique l’ensemble des propriétés del'objet ainsi que sa méthode associée. Seul le nom d’objet est différent puisque chaque objet porte un nom unique au sein d'un formulaire.

Nous pouvons donc ici modifier le titre et la méthode de l'objet accessible aussi par les propriétés.
En testant le formulaire, on dispose bien de 3 boutons actifs.