Module 7 Éléments d interface

Transcription

1 Case à cocher / Check Box Groupe de bouton d option Radio / Radio Group Élément de liste / List Item Élément Image Élément Son Bouton Arborescence / Tree Présentation de l application : Summit Sporting Goods est une compagnie qui fournit des articles sportifs à différents clients (s_customer). Summit posséde un certain nombre d employées (s_emp) dans plusieurs départements (s_dept). Certains employées sont des représentants pour des clients spécifiques. Les clients (Customers) placent des commandes (orders). Chaque commande contient une ou plusieurs ligne de comande (s_item). Chaque ligne de commande représente un produit(s_product). Chaque produit possède une image (s_image). Les produits de cette compagnie sont stockés dans un certains nombre d entrepôts (s_warehouse). Le contenu des entrepôts est géré dans l inventaire (s_inventory). La figure suivante montre le schéma de relation de l application Summit OUTILS DE QUATRIÈME GÉNÉRATION

2 La compagnie Summit produit un certain nombre d articles sportifs, Les magasins de sports sont leurs clients. L application permet de maintenir l information sur des clients, leurs commandes et l inventaire disponible. L application est composés de deux formes principales : La forme CUSTOMERS : Cette forme facilite la recherche des données des clients et permet également d insérer, de supprimer et de mettre à jour des clients existants. La forme ORDERS : Cette forme est ouverte à partir du formulaire CUSTOMER. Cette forme permet d afficher la commande pour un client ainsi que la ligne de commande pour chaque commande. Vous pouvez également afficher l inventaire disponible pour chaque produit commandé. Description des tables s_customer ID NOT NULL NAME NOT NULL VARCHAR2(50) PHONE VARCHAR2(25) ADDRESS VARCHAR2(400) CITY VARCHAR2(30) STATE VARCHAR2(20) COUNTRY VARCHAR2(30) ZIP_CODE VARCHAR2(75) CREDIT_RATING VARCHAR2(9) 7-2 OUTILS DE QUATRIÈME GÉNÉRATION

3 SALES_REP_ID REGION_ID COMMENTS VARCHAR2(255) s_emp ID NOT NULL LAST_NAME NOT NULL VARCHAR2(25) FIRST_NAME VARCHAR2(25) USERID VARCHAR2(8) START_DATE DATE COMMENTS VARCHAR2(255) MANAGER_ID TITLE VARCHAR2(25) DEPT_ID SALARY NUMBER(11,2) COMMISSION_PCT NUMBER(4,2) s_dept ID NOT NULL NAME NOT NULL VARCHAR2(25) REGION_ID s_ord ID NOT NULL CUSTOMER_ID NOT NULL DATE_ORDERED DATE DATE_SHIPPED DATE SALES_REP_ID TOTAL NUMBER(11,2) PAYMENT_TYPE VARCHAR2(6) ORDER_FILLED VARCHAR2(1) s_warehouse ID NOT NULL REGION_ID NOT NULL ADDRESS LONG CITY VARCHAR2(30) STATE VARCHAR2(20) COUNTRY VARCHAR2(30) ZIP_CODE VARCHAR2(75) PHONE VARCHAR2(25) MANAGER_ID s_inventory PRODUCT_ID NOT NULL WAREHOUSE_ID NOT NULL OUTILS DE QUATRIÈME GÉNÉRATION

4 AMOUNT_IN_STOCK REORDER_POINT MAX_IN_STOCK OUT_OF_STOCK_EXPLANATION RESTOCK_DATE NUMBER(9) NUMBER(9) NUMBER(9) VARCHAR2(255) DATE s_product ID NOT NULL NAME NOT NULL VARCHAR2(50) SHORT_DESC VARCHAR2(255) LONGTEXT_ID IMAGE_ID SUGGESTED_WHLSL_PRICE NUMBER(11,2) WHLSL_UNITS VARCHAR2(25) s_item ORD_ID NOT NULL ITEM_ID NOT NULL PRODUCT_ID NOT NULL PRICE NUMBER(11,2) QUANTITY NUMBER(9) QUANTITY_SHIPPED NUMBER(9) s_image ID NOT NULL FORMAT VARCHAR2(25) USE_FILENAME VARCHAR2(1) FILENAME VARCHAR2(255) IMAGE LONG RAW s_region ID NOT NULL NAME NOT NULL VARCHAR2(50) Les types d objets Les types d objets qui peuvent être utilisés dans une forme sont regroupés selon deux catégories : Les interfaces de contrôle et les objets graphiques. Les objets graphiques (boilerplates) Les objets graphiques sont les formes géométriques, le texte et les images fixe que l on peut créer sur un canevas. Les interfaces de contrôle Ce type d objet est muni d une interface pour l utilisateur. Parmi les types d élément, on retrouve ceux qui peuvent accepter des données et ceux qui ne peuvent pas. 7-4 OUTILS DE QUATRIÈME GÉNÉRATION

5 Les éléments qui peuvent accepter une donnée sont : Text item : Ce type d objet correspond habituellement à une colonne d une table. Il est le plus fréquemment utilisé. La valeur peut correspondre à un type de données texte, numérique ou date. Check box : Ce type d objet permet d afficher une boîte à cocher. Il est habituellement utilisé lorsqu un élément peut avoir deux états, boîte cochée et boîte non cochée. List item : Ce type d objet permet d afficher une liste de valeurs permises pour l élément. On utilise ce type de liste lorsque les valeurs sont connues et stables. Radio group : Les valeurs sont affichées à l écran sous forme de bouton. Un seul bouton doit être sélectionné. Sound item : Ce type d objet permet la manipulation d un objet son sous le format AU, AIFF ou WAVE. Les éléments qui ne peuvent pas accepter des données sont : Image item : Pour afficher une image conservée dans un fichier sur disque ou dans la base de données. Display item : Ce type d objet est identique à l objet Text, à l exception qu il ne permet pas de manipuler la valeur de l élément. La valeur de l élément peut provenir par exemple d une table ou elle peut être générée par un programme. Push button : Ce type d objet ne peut pas afficher de l information provenant d une table. OLE container : Ce type d objet correspond à un lien à une autre application de Windows. Chart item : Ce type d objet permet d afficher un graphique ou un autre affichage généré par Graphics Builder. Hierarchical tree item : Ce type d objet affiche de l information sous forme arborescente. OUTILS DE QUATRIÈME GÉNÉRATION

6 Manipulation des interfaces de contrôle Pour créer un Objet : La création d objet se fait de trois façons : Lors de la création d un bloc avec l assistant. Un objet est créé pour chacune des colonnes qui fait partie de la sélection lors de la création d un bloc. Par défaut, une colonne correspond à un objet de contrôle de type Text. Ce dernier peut être modifié en sélectionnant un nouveau type d objet dans la liste déroulante Type. Des objets graphiques sont également créés pour les Encadrements /Frames du bloc. À partir du navigateur d objet. Sélectionnez le type d objet Items Cliquer sur le bouton + de la palette d outils. Un nouvel objet est créé avec le nom ITEMnn, où nn correspond à la prochaine séquence disponible. Par défaut, tous les objets créés de cette façon, prennent le type de données Text lors de la création. À partir de l éditeur de présentation. Sélectionnez le canevas sur lequel l objet doit apparaître. Sélectionnez le bloc auquel l objet doit appartenir. Sélectionnez le type d objet dans la palette d outils. Cliquez sur le canevas. Un nouvel objet est créé avec le nom ITEMnn, où correspond à la prochaine séquence disponible. L élément contient autant de rangées qu il est spécifié dans le bloc(records displayed). Propriété d un Objet La modification d un objet se fait à partir de la fenêtre des propriétés et/ou de l éditeur de présentation. La fenêtre des propriétés contient l ensemble des paramètres d un élément alors que l éditeur de présentation permet de modifier certaines propriétés d affichage seulement (l apparence et le placement). 7-6 OUTILS DE QUATRIÈME GÉNÉRATION

7 Manipulation des Éléments qui acceptent des données (Input Items) Input item est un terme générique utilisé par Form Builder afin d indiquer que ces éléments acceptent des données de l utilisateur. Les éléments suivants font partie de cette catégorie : Check box List item Radio Group Lorsque vous créez des éléments de type input item, ces derniers possèdent déjà certaines fonctionnalités initiales. A travers ces éléments, vous pouvez interagir avec la base de données de la façon suivante : Insérer des valeurs (Insert) Faire des mises à jour (Update) Supprimer des données (Delete) X`Interroger des données (Query) Vous pouvez également ajouter d autres fonctionnalités aux éléments de type input item en utilisant les déclencheurs (Trigger) et des sous-programmes (PL/SQL). Case à cocher/check box Propriétés spécifiques aux cases à cocher (check boxes) Propriétés Data type Label Access Key Initial value Value When Checked Value When Unchecked Check Box Mapping of Other Values Description Indique le type de données (Char, Number,Date) Indique l étiquette qui sera affichée à coté du check box Indique la combinaison de clés qui peuvent être utilisées pour naviguer à travers le check box et aussi le rendre dans l état cheked ou unchecked Indique la valeur initiale de l élément : checked ou Unchecked Indique la valeur qui représente l état Checked. Indique la valeur qui représente l état Unchecked. Indique comment les autres valeurs vont être traitées OUTILS DE QUATRIÈME GÉNÉRATION

8 La figure suivante explique le fonctionnement de la propriété Check Box Mapping of Other Values : Création d un check box Comme on a déjà mentionné, ce type d objet possède deux états : Checked Unchecked Un check box peut être créer de trois façons: À partir d un élément existant Utilisant l éditeur de présentation (Layout Editor) À partir de l Object Navigator Étapes pour convertir un élément existant en check box en changeant les propriétés de cet élément : 1. Activer la palette de propriétés pour l élément que vous voulez convertire (Property Palette). 2. Changer la propriété Item Type à Check Box. 3. Saisir le titre du check box dans la propriété label 4. Entrer les valeurs pour les deux états checked et unchecked. 5. Changer la propriété Check Box Mapping Of Other Values property 6. Entrer la valeur initiale pour le check Box. 7-8 OUTILS DE QUATRIÈME GÉNÉRATION

9 À partir du Layout Editor : Vous pouvez également créer un check box en utilisant l éditeur de présentation (Layout Editor). 1. Activer le layout Editor 2. Choisir le canevas et le bloc propriétaire de l item check box que vous voulez créer. 3. Cliquer sur l icône check box dans la barre d outil. 4. Cliquer sur le canevas à la position désirée. 5. Double-cliquer sur le check box pour activer la palette des propriétés du check box. 6. Initialiser les propriétés requises. Exemple : 1. Créer d abord le formulaire suivant basé sur la structure de l application Summit décrite ci-haut : OUTILS DE QUATRIÈME GÉNÉRATION

10 2. Convertir ensuite l élément Order Filled qui est de type texte en un check box. Modifier les propriétés de l item order_filled comme suit : Item_type = Check_Box Label = Ord Access Key = x (alt-x permet d acceder au checkbox) Value When Checked = Y Value When Unchecked = N Check Box Mapping of Other Values = Unchecked Initial Value = N Le résultat devrait ressembler à la figure suivante : 7-10 OUTILS DE QUATRIÈME GÉNÉRATION

11 Liste /List items L élément liste permet de définir un ensemble prédéfinie de choix, chaque choix correspond à une valeur spécifique. À l exécution du formulaire, on utilise l élément liste pour choisir une seule valeur, les valeurs dans la liste sont mutuellement exclusives. Un et un seul élément peut être sélectionné. Les trois styles de présentation de la liste sont les suivants : 1. Pop-List. Cette liste apparaît uniquement quand vous cliquez sur le choix. 2. T-liste. Cette liste montre un ensemble de choix qui est toujours visible dans un rectangle, s il y a trop de choix à placer dans celui-ci, une barre de défilement apparaît du côté droit. Vous indiquez la taille du rectangle dans la fenêtre des propriétés. 3. Combo Box. Cette liste est incluse dans l élément de liste lui-même. Par défaut le choix apparaît dans la boîte. L utilisateur clique sur la flèche de l élément pour regarder et choisir d autres sélections. La figure suivante montre les trois modèles de présentation. Création d un élément liste/list item Un élément du type liste peut être créer de trois façons: À partir d un élément existant Utilisant l éditeur de présentation (Layout Editor) À partir de l Object Navigator OUTILS DE QUATRIÈME GÉNÉRATION

12 Propriétés spécifiques aux listes (list item) Propriétés Elements in list List Style Mapping of Other Values Description Pour spécifier la liste d éléments Indique le type de liste parmi Poplist, Tlist ou Combo Box Indique comment les autres valeurs vont être traitées Propriété : Elements in List Lorsque vous cliquer sur le bouton More de la propriété Elements in List, la fenêtre de dialogue List Item element apparaît comme le montre la figure suivante : Étapes pour convertir un élément existant en un élément liste/list item : 1. Activer la palette de propriétés pour l élément que vous voulez convertir. 2. Changer la propriété Item Type à List Item. 3. Sélectionner la propriété Elements in List. 4. Cliquer sur le bouton More, une fenêtre apparaît. 5. Entrer l élément que vous voulez faire apparaître dans la liste dans List Elements. 6. Entrer la valeur sélectionnée par défaut dans List Item Value. 7. Créer des éléments additionnels en répétant les étapes 5 et Cliquer sur OK 9. Entrer une valeur initiale pour l élément List item. À partir du Layout Editor : Vous pouvez également créer un élément liste/ list item en utilisant l éditeur le Layout Editor. 1. Activer le layout Editor 2. Choisir le canevas et le bloc propriétaire de l élément liste que vous voulez créer. 3. Cliquer sur l outil list item dans la barre d outil. 4. Cliquer sur le canevas à la position désirée. 5. Double-cliquer sur le list item pour activer sa palette des propriétés. 6. Initialiser les propriétés requises OUTILS DE QUATRIÈME GÉNÉRATION

13 Groupe Radio /Radio Group Un groupe radio permet de créer deux choix ou plus pour une valeur stockée dans l item. Vous pouvez employer la case à cocher ou le groupe radio pour les colonnes qui ont seulement deux choix pour des valeurs. Création d un élément Groupe Radio/Radio Group Un élément du type Radio Group peut être créer de trois façons: À partir d un élément existant Utilisant l éditeur de présentation (Layout Editor) À partir de l Object Navigator Propriétés spécifiques aux éléments du type Groupe Radio / Radio Group Propriétés : Radio Group Data type Mapping Of Other Values Initial Value Propriétés : Radio Bouton Name Access Key Label Radio Button Value Description Indique le type de données (Char, Number,Date) Indique comment les autres valeurs vont être traitées Indique la valeur defaut Description Permet d identifier chaque bouton radio dans le groupe radio Indique la combinaison de clés qui peuvent être utilisées pour naviguer à travers le Bouton radio. Indique l étiquette qui sera affichée à coté du bouton radio Indique la valeur représentée par le bouton radio Étapes pour convertir un élément existant en un élément Groupe radio/radio Group : 1. Activer la palette de propriétés pour l élément que vous voulez convertire (Property Palette). 2. Changer la propriété Item Type à Radio Group. 3. Initialiser la propriété Mapping Of Other Values pour indiquer comment les autres valeurs seront traitées. 4. Changer la propriété Initial Value tels que requis. 5. Dans la fenêtre Object Navigator, cliquer sur + dans le nœud item. 6. Sélectionner le nœud Radio Button et cliquez sur l icône Create. 7. Entrer des valeurs pour les propriétés suivantes : name, value et label. 8. Créer des éléments additionnels en répétant les étapes 6 et 7. OUTILS DE QUATRIÈME GÉNÉRATION

14 À partir du Layout Editor : Vous pouvez également créer un élément groupe radio / Radio group en utilisant l éditeur de présentation (Layout Editor). 1. Activer le layout Editor 2. Choisir le canevas et le bloc propriétaire de l élément liste que vous voulez créer. 3. Cliquer sur l outil Radio Button dans la barre d outil. 4. Cliquer sur le canevas à la position désirée. 5. Double-cliquer sur le radio Button pour activer sa palette des propriétés. 6. Initialiser les propriétés requises. Exemple 1 : 1. Créer le formulaire suivant : 2. Dans ce formulaire, convertir le champ Credit_Rating en un élément de type pop-up list, le résultat devrait ressembler à la figure suivante : 3. Ajouter les éléments suivants dans la liste : Poor, Good,Excellent pour représenter les valeurs POOR, GOOD et EXCELLENT stockés dans la base de données OUTILS DE QUATRIÈME GÉNÉRATION

15 4. Un nouvel enregistrement doit afficher la valeur initiale GOOD. Le résultat doit ressembler à la figure suivante : OUTILS DE QUATRIÈME GÉNÉRATION

16 Exemple 2 : 1. Ouvrir le formulaire suivant : 2. Convertir l élément Payment_type en groupe radio 3. Ajouter des boutons radio pour Cash et Credit afin de représenter les valeurs CASH et CREDIT stockés dans la base de données. 4. Définir des clés d accès (access key) S pour cash et T pour credit. 5. Ajouter le texte Payment type pour décrire l objectif des boutons radio. 6. Ajouter un label Cash pour le bouton radio Cash et un label Credit pour le bouton radio Credit. 7. Un nouvel enregistrement doit afficher Cash par défaut OUTILS DE QUATRIÈME GÉNÉRATION

17 Le résultat doit ressembler à la figure suivante : OUTILS DE QUATRIÈME GÉNÉRATION