Conception de formulaires- Formulaire
Une fenêtre servant à faciliter la saisie et la présentation des données sur l'écran de l'ordinateur.
- Source de données du formulaire
La table de base de données ou requête fournissant des données affichées dans le formulaire. La source de données est nécessaire car les formulaires eux même sont les seuls outils pour afficher et saisir des données, alors que les tables et les requêtes sont les sources de données. Les nouveaux formulaires sont vides et aucune source de données ne leur est associée. Ainsi, ils n'affichent aucune donnée venant de votre base de données, sauf si vous leur associez une source de données.
- Champ de formulaire
Équivalent direct d'une colonne dans une table ou une requête. Les plus fréquemment utilisés sont les champs servant à afficher du texte et des nombres. L'entrée d'une nouvelle valeur dans un tel champ provoque un changement dans la colonne correspondante de la table ou requête liée (après avoir accepté le changement).
- Conception du formulaire
Tâches à réaliser définir l'apparence et les fonctions du formulaire. Pour faire ceci, vous devez fournir une source de données. Insérez des champs de formulaire de types variés et placez les dans l'emplacement approprié.
- Composant graphique de formulaire
Éléments de formulaires. Les principaux type de composants graphiques sont :
Composants graphiques affichant des informations, par exemple une zone de texte ou d'image. Chaque composant graphique de ce type peut être relié à un champ de source de données (une colonne de table ou de requête). Cependant, de tels composants graphiques sont appelés dans des champs courts de formulaire.
Les composants graphiques capables de réaliser une action définie, par exemple un bouton à pousser qui peut fermer le formulaire actuel. Dans les autres applications, ce type de composant graphique est quelquefois appelé formulaire de contrôle car il peut réaliser des actions préalablement définies pour contrôler le comportement de vos applications de base de données.
D'autres composants graphiques permettant d'améliorer l'apparence du formulaire par exemple un « composant graphique de ligne » peuvent séparer visuellement deux zones d'un formulaire.
- Composant graphique conteneur
Un composant graphique en peut contenir d'autres dans sa zone. Par exemple, le composant graphique de cadre ou celui d'onglet sont des conteneurs. La surface du formulaire lui-même est aussi un conteneur. Un bouton de commande n'est pas considéré comme un conteneur car il n'est pas possible d'y insérer un composant graphique dedans. Dans des cas plus complexes, des composants graphiques de conteneurs peuvent être insérés dans un conteneur. Ainsi, l'inclusion en série est possible.
Dans le chapitre Saisie de données dans des tables, vous avez appris comment saisir des données directement dans des tables en utilisant leur affichage en feuille de données. Cependant, dans de nombreux cas, les formulaires sont beaucoup adaptés pour la saisie de données :
Une table peut avoir trop de colonnes pour que vous puissiez les afficher toutes à l'écran. Un formulaire permet d'afficher de telles données sur plusieurs lignes.
Un formulaire permet de séparer visuellement les champs de données en groupes logiques, augmentant ainsi la lisibilité. Les étiquettes avec des informations additionnelles peuvent être insérées pour donner aux utilisateurs plus d'astuces sur comment utiliser le formulaire ou à quoi correspondent les champs de données fournis.
Des boutons de commande peuvent être utilisés dans les formulaires pour implémenter les commandes les plus fréquentes, afin que les utilisateurs puissent utiliser les formulaires comme les applications qu'ils connaissent.
Dans un affichage de feuille de données, l'affichage de champs de texte ou d'images ou des données sur plusieurs lignes est aussi facile que dans les formulaires.
Comme pour la conception de tables ou de requêtes, vous avez la possibilité d'utiliser les affichages de données et de conception. La conception de formulaire est réalisé dans l'affichage de conception. La fenêtre de conception de formulaire sera souvent référencée comme Concepteur de formulaire.
Pour créer un nouveau formulaire vide, sélectionnez Formulaire à partir de la barre d'outils. De façon optionnelle, vous pouvez utiliser la commande Créer Objet / Formulaire à partir du bouton à liste déroulante dans la barre d'outils du navigateur de projets ou la commande Créer Objet / Formulaire à partir du menu contextuel du navigateur de projets.
Un nouveau cadre va apparaître, vous pouvez re-dimensionner le formulaire en déplaçant les bordures. Le formulaire est couvert d'une grille qui simplifie le placement précis des composants graphiques.
Comme pour la conception de table, le concepteur de formulaire propose un panneau Éditeur de propriétés. Pour économiser un peu d'espace sur l'écran, le panneau possède trois ongles associés au formulaire actuellement sélectionné :
- L'onglet de propriétés
Contient une liste de propriétés du composant graphiques actuellement sélectionné.
- L'onglet de sources de données
Contient des propriétés spécifiquement associées à la source de données du composant graphique actuellement sélectionné ou au formulaire lui même.
- L'onglet de composants graphiques
Contient une hiérarchie de toutes les composants graphiques du formulaire. La liste simplifie la navigation entre les éléments et leur recherche par nom.
Vous pouvez trouver des informations sur le nom et le type du composant graphique actuellement sélectionné dans le premier et deuxième onglet.
Des barres d'outils supplémentaires sont aussi disponibles :
La barre d'outils Composants graphiques utilisée pour insérer de nouveaux composants graphiques dans le formulaire. Sélectionnez pour l'afficher.
L'onglet des composants graphiques dans le panneau des Propriétés fournit une liste de composants graphiques de formulaires et leurs hiérarchies. Chaque composant graphique est présenté avec leur hiérarchie à coté des autres présents sur le même niveau (le même conteneur parent). Les composants graphiques fils (à l'intérieur du conteneur) sont présentés en utilisant leurs noms avec indentation.
Le nom et le type de chaque composant graphique sont affichés. L'icône du type est aussi affichée – la même que celle affichée dans la barre d'outils utilisée lors de la conception du formulaire.
Note
Le changement de la sélection courante dans la liste provoque la sélection appropriée du formulaire réalisé. Ceci permet une recherche plus facile de composant graphique par nom et une navigation plus facile. Par exemple, il est possible de sélectionner un composant graphique par nom puis de passer sur l'onglet Propriétés pour modifier les propriétés de celui-ci.
Maintenez la toucheCtrl enfoncée pendant qu'un composant graphique de la liste est sélectionné permet d'en sélectionner plusieurs à la fois. Maintenir la touche Maj enfoncée permet de sélectionner des listes entières de composants graphiques.
Donner aux composants graphiques des noms explicites peut être utile mais pas obligatoire. Veuillez noter que le nom de composant graphique est une propriété qui n'est pas visible à l'utilisateur de votre formulaire. Les utilisateurs ne voient qu'un texte de composant graphique, fourni par la propriété Texte ou son équivalent.
Créons un formulaire fournissant des informations concernant les personnes, c'est-à-dire un formulaire relié à la table Personnes.
Si le formulaire venant d'être réalisé doit affiché des données obtenues à partir de la base de données, vous devez y placer les champs appropriés dessus. Pour le faire, utilisez les boutons présents sur la barre d'outils Composants graphiques. Chaque bouton correspond à un type simple de composant graphique.
Cliquez sur le bouton Zone de texte dans la barre d'outils Composants graphiques.
Cliquez sur la surface du formulaire avec le bouton gauche de la souris. Un composant graphique de nouvelle fenêtre de texte sera placée au point sur lequel vous avez cliqué. Avant que vous ne relâchiez, vous pouvez faire glisser votre souris pour définir la taille désirée pour le composant graphique.
Si besoin est, vous pouvez déplacer le composant graphique inséré à la position désirée par un glisser & déposer. Vous pouvez ensuite re-dimensionner le composant graphique en déplaçant une des petites boîtes apparaissant aux coins. Remarquez que ces boîtes ne sont visibles que lorsque le composant graphique est sélectionné. Si vous sélectionner un autre composant graphique ou la surface du formulaire, les boîtes vont disparaître.
Cliquez à nouveau sur le bouton de barre d'outils Zone de texte et cliquez sur la surface du formulaire pour y insérer un autre composant graphique. Répétez cette action encore une fois, jusqu'à ce que vous obteniez trois autres zones de texte insérées dans votre formulaire. Pour raison de simplicité, la limite de cet exemple sera fixée à cinq champs de données.
Note
Un menu contextuel est disponible dans le mode de conception de formulaire, activé par un clic de bouton droit de la souris. Cliquez le composant graphique désiré ou la surface du formulaire. Le menu propose des commandes comme Couper, Copier, Coller, Supprimer et d'autres encore, plus complexes. Des raccourcis clavier sont aussi disponibles pour ces commandes. Certaines de ces commandes ne sont disponibles que pour certains types de composants graphiques.
Les commandes Couper, Copier et Coller offrent la possibilité de déplacer ou de copier des composants graphiques entre formulaires, même entre des projets séparés de bases de données.
Maintenir la touche Ctrl enfoncée lors du clic sur un composant graphique permet d'en sélectionner plusieurs.
Au lieu d'utiliser les commandes Copier et Coller pour dupliquer un composant graphique au sein du même formulaire, vous pouvez maintenir enfoncée la touche Ctrl lors du déplacement du composant graphique. Lorsque le bouton de la souris est relâché, le composant graphique que vous avez fait glisser ne sera pas déplacé mais copié sur le nouvel emplacement.
Les champs que vous avez insérés ne possèdent encore aucune source de données associée. Ainsi, ils ne sont pas capables d'afficher des informations à partir de la base de données. Pour associer une source de données, utilisez l'onglet (Source de données) du panneau Éditeur de propriétés.
La toute première étape est de défini la source de données du formulaire, c'est-à-dire un emplacement où doivent être recherchées les données à afficher. Comme indiqué ci-dessus, vous utiliserez la table Personnes comme source de données pour votre nouveau formulaire.
Cliquez sur la surface du formulaire, puisque vous allez modifier ses propriétés.
Passer à l'onglet
(Source de données) et saisissez le nom de la table Personnesdans la liste déroulante Source de données du formulaire. Alternativement, vous pouvez sélectionner ce nom à partir de la liste déroulante.
Vous avez associé une source de données de formulaire. Maintenant, vous devez définir une source de données du composant graphique.
Cliquez sur le premier composant graphique de zone de texte en haut du formulaire.
Dans l'onglet
(Source de données) du panneau de propriétés, saisissez le nom de champ nomdans la liste déroulante Source de données du composant graphique. Alternativement, vous pouvez sélectionner ce nom à partir de la liste déroulante.Cliquez sur le composant graphique de champ de texte suivant et saisissez
nom de famillecomme source de données.Saisissez les sources de données pour les champs de texte pour rue, numéro-rue et ville d'une façon similaire.
Vous pouvez enregistrer maintenant la conception du formulaire (ceci n'est pas obligatoire pour tester le fonctionnement du formulaire). Pour enregistrer, cliquez sur le bouton de barre d'outils Enregistrer. Durant l'enregistrement, une demande vous sera faite pour saisir u nom de formulaire. Saisissez Personnes comme titre et cliquez sur le bouton Ok. Le nom du formulaire sera rempli automatiquement.
Ceci est le bon moment pour tester notre formulaire. Cliquez sur le bouton de la barre d'outils Données. Sauf si vous avez commis une erreur durant la saisie des sources de données, vous devriez vois les champs de formulaire remplis avec les données provenant de la table Personnes
Note
Si vous souhaitez supprimer l'association de source de données pour le composant graphique, vous pouvez utiliser le bouton
dans la boîte de dialogue Source de données du composant graphique.Utilisez le bouton
(Aller à la source de données sélectionnée) pour sélectionner la table ou la requête appropriée dans le Navigateur de projets. Ainsi, vous pouvez rapidement ouvrir une table ou une requête étant la source de données du formulaire.
Pour que l'utilisateur du formulaire identifie plus facilement la signification de chaque composant graphique de champ, des étiquettes de texte devraient être ajoutées avec des libellées appropriés. Pour créer des étiquettes de texte, le composant graphique Étiquette est utilisé.
Insérez trois composants graphiques d'étiquettes de texte sur le formulaire, en les plaçant sur le coté gauche des champs de texte (ou, sur le coté droit, si votre système d'exploitation utilise un disposition de droite vers la gauche). Lors de l'insertion d'une nouvelle étiquette, un curseur de texte apparaît à l'emplacement où vous pouvez saisir le titre souhaité. Saisissez successivement : Nom, Nom de famille, Rue, Numéro-Rue et Ville. De plus, en haut du formulaire, insérez une autre étiquette affichant le nom du formulaire, c'est-à-direPersonnes. Agrandissez la taille de l'étiquette et augmentez la taille de la police en utilisant Police dans l'onglet Propriétés.
Une action est une activité simple isolée dans l'application, disponible pour que l'utilisateur l'exécute. Elle peut aussi être exécutée automatiquement comme réaction par rapport à un évènement données (par exemple après ouverture d'un formulaire).
De nombreuses actions peuvent être assignées aux boutons d'un formulaire. Les actions ainsi assignées sont lancées après que le bouton soit cliqué.
Pour assigner une action :
Changer vers l'affichage de conception de formulaire, si vous vous ne l'avez pas encore fait.
Sélectionnez un composant graphique existant de bouton en cliquant dessus ou insérez en un nouveau sur le formulaire. Si vous avez inséré un nouveau bouton, saisissez son titre et appuyez sur la touche Entrée.
Cliquez sur le composant graphique de bouton avec le bouton droit de la souris pour afficher le menu contextuel.
A partir du menu contextuel, sélectionnez la commande Associer une action....
Une fenêtre de boîte de dialogue Association d'une action à un bouton apparaîtra présentant une liste des actions disponibles. Une des actions est sélectionnée si le composant graphique est déjà associé à une action. sinon, la liste de Catégorie d'actions prend en compte l'élément Pas d'action.
A partir de la liste Catégorie d'action, sélectionnez l'élément Actions d'applications. Les actions disponibles pour toute application seront listées.
Choisissez une de ces actions de la liste (par exemple Supprimer l'objet sélectionné).
Après avoir basculé dans l'affichage des données de formulaire, vous pouvez essayer si l'action fonctionne.
Note
Pour supprimer une allocation d'action, sélectionnez l'élément Pas d'action à partir de la liste de Catégorie d'actions de la fenêtre de boîte de dialogue Allocation d'une action à un bouton.
Les actions ne fonctionnement que dans un affichage de données d'un formulaire. Tous les allocations 'actions ne sont pas forcément raisonnables. Par exemple, l'action Police... est disponible dans l'affichage des données mais seulement si vous avez sélectionné un composant graphique dans l'affichage de conception. Si vous effectuez des modifications aux paramètres de police, celles-ci sont appliquées au texte de ce composant graphique sélectionné.
Dans la plupart des cas, les composants graphiques devront être arrangés et alignés. Ce n'est pas très pratique de les positionner et de les re-dimensionner à la main et de plus les positions et tailles ne sont pas ajustées lorsque l'utilisateur re-dimensionne le formulaire. En fait, la situation est encore pire puisque vous ne pouvez pas prévoir l'espace requis par un formulaire donnée, à cause des différentes tailles de polices et résolutions d'écrans possibles.
Vous pouvez vous aider d'un outil spécial, appelé la disposition des composants graphiques, pour automatiquement répartir les éléments du formulaire. La mise en forme des composants graphiques est l'action de grouper deux éléments ou plus, afin que ceux-ci soient bien placés et aient la bonne taille.
Utiliser la disposition des éléments dans un formulaire améliore l'alignement. De plus, l'espace est mieux utilisé. Les zones de texte sont plus proches les unes des autres et l'espacement est constant.
Au lien de fixer une taille fixe pour vos composants graphiques dans Kexi, vous pouvez choisir parmi des stratégies variées de tailles de composants graphiques. Une stratégie de taille est une stratégie flexible pour contrôler comme un composant graphique est étiré (ou réduit) selon les composants graphiques voisins et l'espace disponible dans le formulaire.
Après avoir insérer les composants graphiques, la ligne sera redimensionnée pour ajuster leurs textes visibles.
Pour chaque composant graphique inséré dans le formulaire, il y a des paramètres pour la stratégie de taille, disponible dans l'Éditeur de propriétés. Les paramètres sont présentés dans un groupe de propriétés nommé Stratégie de taille.
Ce groupe de propriétés contient :
- Type de taille horizontale
définit la taille horizontale du composant graphique,
- Type de taille verticale
définit la taille verticale du composant graphique,
- Étirement horizontal
définition de la force de l'activité pour la stratégie de la taille horizontale,
- Étirement vertical
définition de la force de l'activité pour la stratégie de la taille verticale,
Les valeurs suivantes sont disponibles dans la liste déroulante pour Stratégie Horizontale. et Stratégie Verticale, visible dans l'Éditeur de Propriétés :
- Fixée
Cette valeur signifie qu'il est impossible de re-dimensionner automatiquement le composant graphique. Il doit toujours conserver sa taille constante telle que définie au moment de la conception (largeur et hauteur),
- Minimum
Cette valeur signifie que la taille originale du composant graphique est défini à la valeur minimale autorisée. Cela est suffisant et il n'y a pas besoin d'étirer le composant graphique. Mais ce dernier sera étiré, si nécessaire. Ce type de stratégie peut être utilisée pour forcer le composant à être étirer sur la totalité en longueur ou en hauteur, en particulier, si vous définissez une valeur d'étirement supérieure à 0.
- Maximum
cette valeur signifie que la taille originale du composant graphique est fixée au maximum permis et peut être diminuée si d'autres composants graphiques ont besoin de plus d'espace, sans compromettre l'utilisation et la lisibilité du composant graphique.
- Préférée
cette valeur signifie que la taille originale du composant graphique est la meilleure et la préférée ; le composant graphique peut cependant être étiré ou compressé, tout en restant lisible.
- Expansion
cette valeur signifie que la taille originale du composant graphique est raisonnable mais l'élément peut aussi être compressé ; il peut de même être étiré pour prendre autant de place que possible,
- Expansion minimale
cette valeur signifie que la taille initiale du composant graphique est permise ; il peut aussi être étiré pour prendre autant de place que possible,
- Ignorée
cette valeur signifie que la taille originale du composant graphique est ignorée, l'élément peut être étiré pour prendre autant de place que possible. Les autres composants graphiques ne le permettent normalement pas.
Des types d'éléments différents ont des politiques de tailles par défaut différentes ; par exemple, les boutons ont une politique de taille Minimum par défaut (dans les deux directions), alors que les zones de texte ont une politique de taille Fixée par défaut.
Les politiques de tailles les plus fréquemment utilisées sont Préférée, Minimum et Maximum.
Les propriétés d'Étirement vertical et d'Étirement horizontal acceptent des valeurs entières supérieures ou égales à 0. Ces propriétés permettent d'ajuster précisément le comportement des politiques de taille. Les valeurs par défaut de ces propriétés sont à 0. Une valeur plus grande d'étirements signifie que le composant graphique sera étiré plus que les composants graphiques ayant une valeur d'étirement plus faible.