Vous êtes sur la page 1sur 66

Module 10 Programmation Evnementielle

DRPS/ISGI LAYOUNE

Module 10 - Programmation vnementielle

Propos par :A BENDAOUD

Page 1/66

OFPPT

Module 10 Programmation Evnementielle

I. Table des matires


I. II.
A.
1. 2.
a) b)

Table des matires ................................................. 2 Introduction ........................................................... 5


L'interface de Visual Studio ........................................................5
Structure des applications.................................................................. 5 Interface graphique .......................................................................... 5
Fentre des proprits .............................................................................. 7 L'diteur de code ..................................................................................... 7

III. Environnement de dveloppement intgr ............. 5

IV.
A. B.
1. 2.
a)

Outils de dbogage ................................................. 8


Les erreurs de syntaxe ..............................................................8 Les erreurs dexcution .............................................................9
Erreur de conception : ..................................................................... 10 Erreurs de lutilisateur : ................................................................... 10
Capturer les erreurs avec Try Catch ....................................................... 10

C.
1.
a) b)

Les erreurs de logique : .......................................................... 11


Dbogage dune application ............................................................. 11
Suspendre lexcution ............................................................................. 11 Dbogage pas pas ............................................................................... 12

V. VI.
A.
1. 2. 3. 4. 5.

Consulter laide..................................................... 12 Gnrer un fichier excutable ............................... 13


Les concepts de la programmation vnementielle ..................... 14
Les consquences dune interface rate ............................................. Les avantages dune interface russie ............................................... Multi-fentrage............................................................................... Les icnes...................................................................................... Les menus ..................................................................................... 14 14 14 15 15

VII. Rgles de ralisation dune interface .................... 14

B.
1. 2.

Applications SDI et MDI........................................................... 15


SDI ............................................................................................... 15 MDI .............................................................................................. 15

VIII. Les bases des interfaces graphiques .................... 16


A. Un premier projet ................................................................... 16
Page 2/66 OFPPT

Module 10 Programmation Evnementielle


B. C.
1.
a) b) c) d) e) f)

Exemple pratique ................................................................... 20 Les composants de base .......................................................... 30


Les proprits communes des objets ................................................. 30
Name ................................................................................................... 30 Text ..................................................................................................... 31 Enabled ................................................................................................ 31 Visible .................................................................................................. 31 Font ..................................................................................................... 31 BackColor ForeColor ............................................................................... 31

2.
a) b) c) d) e) f) g) h) i) j) k) l) m)

Formulaire Form ............................................................................. 32


Name ................................................................................................... 32 Text ..................................................................................................... 32 Icon ..................................................................................................... 32 WindowState ......................................................................................... 32 ControlBox ............................................................................................ 32 MaximizeBox ......................................................................................... 32 MinimizeBox .......................................................................................... 32 FormBorderStyle .................................................................................... 32 StartPosition .......................................................................................... 33 Opacity ................................................................................................. 33 Les dialogues modale et non modale ........................................................ 33 Formulaire d'avant plan .......................................................................... 33 Les vnements ..................................................................................... 33

3. 4. 5. 6. 7. 8. 9. 10.
a) b)

Etiquettes Label et boites de saisie TextBox ....................................... Listes deroulantes ComboBox ........................................................... Composant ListBox ......................................................................... Cases a cocher CheckBox, boutons radio ButtonRadio ......................... Variateurs ScrollBar ........................................................................ vnements souris.......................................................................... Crer une fentre avec menu ........................................................... Composants non visuels ...............................................................

35 39 42 46 48 50 53 56

Boites de dialogue OpenFileDialog et SaveFileDialog ................................... 56 Boites de dialogue FontColor et ColorDialog ............................................... 60

11. 12.
a) b) c)

Timer ......................................................................................... 62 Regroupement de contrles........................................................... 65


GroupBox et Panel ................................................................................. 65 PictureBox ............................................................................................. 65 TabControl ............................................................................................ 65

Page 3/66

OFPPT

Module 10 Programmation Evnementielle

Page 4/66

OFPPT

Module 10 Programmation Evnementielle

I. Introduction
Lobjectif de ce module est de prsenter les concepts fondamentaux de la programmation vnementielle ainsi que les lments ncessaires une bonne prise en main de la plate forme de dveloppement Microsoft .Net ainsi que des environnements classiques qui y sont ddis.

II. Environnement de dveloppement intgr


A. L'interface de Visual Studio
1. Structure des applications
La premire chose faire, c'est d'assimiler l'architecture des difices que nous allons crer et le vocabulaire qui va avec. Une application C#, c'est : Un ensemble de fichiers formant ce qu'on appelle le code source, crit dans le langage C#. Un fichier excutable, produit partir de ce code source. Rappelons que le fait d'engendrer un fichier excutable partir du code source s'appelle la compilation. Le point de dpart d'une application C#, c'est une solution. Lorsqu'on cre une nouvelle solution, C# demande pour celle-ci un nom et un rpertoire. Une solution est un fichier *.sln contenant les informations de la solution. Dans une solution C#, nous allons devoir insrer nos applications, c'est--dire nos projets. Si on le souhaite, une mme solution peut contenir plusieurs projets. Dans chaque projet il ya un certain nombre d'lments de base. Ces lments sont, pour l'essentiel, des Form, ou formulaires. Une application Windows basique compte un seul formulaire, et une application complexe peut en rassembler plusieurs dizaines. Chaque formulaire sera sauvegard dans un fichier diffrent, dont l'extension sera *.cs. Il faut noter que c'est dans ces fichiers *.cs que se trouve le code proprement dit.

2. Interface graphique
Les produits de la gamme Visual Studio partagent le mme environnement de dveloppement intgr (IDE). L'IDE est compos de plusieurs lments : la barre d'outils Menu, la barre d'outils Standard, diffrentes fentres Outil ancres ou masques automatiquement sur les bords gauche, infrieur et droit, ainsi que l'espace d'diteur. Les fentres Outil, menus et barres d'outils disponibles varient en fonction du type de projet ou de fichier dans lequel vous travaillez. Lorsqu'on va la programmer via Visual Studio, une application va donc toujours pouvoir tre aborde sous deux angles complmentaires : Laspect graphique, visuel, bref, son interface. Dans la fentre principale de C#, nous pourrons facilement aller piocher les diffrents objets que nous voulons voir

Page 5/66

OFPPT

Module 10 Programmation Evnementielle


figurer dans notre application, les poser sur notre formulaire, modifier leurs proprits par dfaut, etc :

Le code proprement dit, o nous allons entrer les diffrentes procdures en rapport avec le formulaire en question :

Page 6/66

OFPPT

Module 10 Programmation Evnementielle

a) Fentre des proprits


Chaque fois qu'un contrle (ou plusieurs) est slectionn, la fentre des proprits (situe en standard droite de l'cran) affiche les valeurs associes ce contrle. C'est--dire que se mettent jour la liste des proprits et la valeur de ces proprits.

b) L'diteur de code
Passons au code. Visual Studio, dans sa grande magnanimit, va tcher de faire au mieux pour nous faciliter la vie. Il va en fait dcrypter notre code au fur et mesure de sa rdaction, et nous donner en temps rel des indications via des codes de couleur, comme on peut le voir sur l'image ci-dessus. Ainsi : Les mots-cls du langage seront ports en bleu. Les commentaires seront en vert. Enfin, toute ligne comportant une faute de syntaxe, ou posant un problme au compilateur, sera immdiatement souligne.

Page 7/66

OFPPT

Module 10 Programmation Evnementielle

III.

Outils de dbogage
Les erreurs de syntaxe Les erreurs dexcution Les erreurs de logique

Cette section prsente les outils de dbogage offerts par la plate forme, nous ferons les illustrations partir de Visual Studio 2008. En programmation on rencontre trois types derreurs qui sont :

A. Les erreurs de syntaxe


Elles surviennent en mode conception quand on tape le code: Exemples :

Dans ces cas C# souligne en ondul rouge le code. Il faut mettre le curseur sur le mot soulign, l'explication de l'erreur apparat. Exemple: Proprit Text d'un label mal orthographie:

Il faut les corriger immdiatement en tapant le bon code (ici 'Text'). En bas il y a aussi une fentre; "liste des erreurs":

Page 8/66

OFPPT

Module 10 Programmation Evnementielle


Elle affiche tous les problmes; pour atteindre le code correspondant une de ces erreurs, double-cliquez sur une des lignes de la liste. Si vous excuter le programme dans l'IDE alors quil y a un problme, C# demande si on veut excuter la dernire gnration russie:

Si vous tapez 'oui' C# excute la dernire version qui a t gnre correctement, mais PAS de code source actuel qui contient des erreurs!!

B. Les erreurs dexcution


Elles surviennent en mode Run ou lors de l'utilisation de l'excutable: une instruction ne peut pas tre effectue. Quand on utilise l'excutable: Le logiciel s'arrte brutalement, c'est trs gnant!! Pour l'utilisateur c'est un 'BUG' Il y a leve d'une exception, voila ce que cela donne dans l'IDE: Exemple: tenter d'accder un lment d'un tableau qui n'existe pas (l'indice est trop grand cela entrane une exception 'OutOfRange'):

Page 9/66

OFPPT

Module 10 Programmation Evnementielle


Les erreurs dexcution sont soit des erreurs de conception ou des erreurs de lutilisateur.

1. Erreur de conception :
Exemples : Ouvrir un fichier qui n'existe pas (On aurait du vrifier qu'il existe avant de l'ouvrir!). Utiliser un index d'lment de tableau suprieur au nombre d'lment. Envoyer un mauvais paramtre une fonction.

2. Erreurs de lutilisateur :
Exemples : On lui demande de taper un chiffre, il tape une lettre ou rien puis valide.

Il faut toujours vrifier ce que fait l'utilisateur et prvoir toutes les possibilits. Si je demande l'utilisateur de tapez un nombre entre 1 et 10, il faut: Vrifier qu'il a tap quelque chose. Que c'est bien un chiffre (pas des lettres). Que le chiffre est bien entre 1 et 10. Sinon il faudra reposer la question.

a) Capturer les erreurs avec Try Catch


try { // Appel de la fonction susceptible de gnrer l'exception } catch (Exception e) { // traiter l'exception e } // instruction suivante Exemples : try { int i1 = int.Parse("abcd"); Console.WriteLine(i1); } catch (Exception e) { Console.WriteLine("Erreur :"+e.Message); }

Page 10/66

OFPPT

Module 10 Programmation Evnementielle


C. Les erreurs de logique :
Le programme fonctionne, pas d'erreurs apparentes, mais les rsultats sont errons, faux. Il faut faire des tests dans les conditions relles avec des donnes courantes, mais aussi avec des donnes remarquables pour voir si les rsultats sont cohrents et exacts. Une fois l'erreur trouve, il faut en dterminer la cause et la corriger. Pour cela il faut analyser le fonctionnement du programme pas pas, instruction par instruction en surveillant la valeur des variables

1. Dbogage dune application


Les erreurs de logique sont plus difficiles dtecter. Le code est syntaxiquement correct, mais il ne ralise pas les oprations prvues. C'est l qu'intervient le dbogage afin de diagnostiquer l'origine de l'erreur. Pour dboguer, il faut lancer l'excution du programme puis, A. Suspendre l'excution certains endroits du code. B. Voir ce qui se passe puis faire avancer le programme pas pas. C. Afficher des informations de dbogage quand le programme tourne.

a) Suspendre lexcution
Pour dmarrer et arrter l'excution, on utilise les boutons suivants:

On lance le programme avec le premier bouton, on le suspend avec le second, on l'arrte dfinitivement avec le troisime, et le dernier bouton permet de redmarrer le dbogage. On peut suspendre (l'arrter temporairement) le programme: Avec le second bouton. Grce des points d'arrt (pour dfinir un point d'arrt en mode de conception, cliquez en face d'une ligne dans la marge grise: la ligne est surligne en marron. Quand le code est excut, il s'arrte sur cette ligne marron).

Page 11/66

OFPPT

Module 10 Programmation Evnementielle


b) Dbogage pas pas
Quand le programme est suspendu, on peut observer les variables, dplacer le point d'excution, on peut aussi faire marcher le programme pas pas (instruction par instruction) et observer l'volution de la valeur des variables , on peut enfin modifier la valeur d'une variable afin de tester le logiciel avec cette valeur. F11 permet l'excution pas pas, instruction par instruction (y compris des procdures appeles: si il y a appel une autre procdure, le pas pas saute dans l'autre procdure) F10 permet le pas pas (sans dtailler les procdures appeles: excute la procdure appele en une fois)

IV.

Consulter laide

La plupart des interfaces de dveloppement .Net offre un certain nombre ditem daide communs, pour cela utiliser le menu ? :

Page 12/66

OFPPT

Module 10 Programmation Evnementielle

V.

Gnrer un fichier excutable

La gnration de lexcutable dans un environnement .Net seffectue au travers du menu Gnrer qui propose comme possibles options la Gnration de la solution ou sa Rgnration .

Quand on choisit lune des deux options un excutable ainsi quune ou plusieurs Dll (Dynamic Link Library) sont gnres et places dans un dossier situ la racine du projet et qui porte le nom de Bin, dpendamment de loption de compilation choisi lexcutable sera plus spcifiquement dploy dans un sous dossier du dossier BIN intitul Debug ou Release.

Page 13/66

OFPPT

Module 10 Programmation Evnementielle

VI.

Rgles de ralisation dune interface

A. Les concepts de la programmation vnementielle


La programmation vnementielle est base sur linteraction avec lutilisateur de lapplication. Les diffrents objets de linterface vont tre manipuls indpendamment les uns des autres, en fonction de la tche quil souhaite raliser. Cest lutilisateur qui contrle lapplication. De ce fait lergonomie dune interface utilisateur est un des lments importants de lapplication. Elle peut tre dcline selon deux axes : La prsentation des informations lutilisateur et leur lisibilit ; Linteraction existant entre lutilisateur et lapplication.

1. Les consquences dune interface rate


Confusion (utilisateur perdu dans lapplication ne sachant plus o aller, ni que faire) ; Frustration (utilisateur ne sachant pas atteindre son but) ; Panique (peur de lutilisateur davoir perdu des donnes ou dtruit des fichiers) ; Stress (charge de travail et dinformations reues trop importante pour lutilisateur) ; Ennui (utilisateur fatigu davoir rpter des tapes fastidieuses et non productives) Sous-utilisation (utilisateur refusant de se servir dune application trop complexe) Sur-utilisation (application ncessitant de multiples aller-retour entre les fentres).

2. Les avantages dune interface russie


Acceptation (utilisateur sappropriant lapplication plutt que de la rejeter) ; Utilisation (application utilise bon escient et de manire efficace) ; Formation rduite (apprentissage minimal par lutilisateur retrouvant les automatismes lis dautres applications).

3. Multi-fentrage
Windows est une interface graphique multi-fentres. Cest dire que lcran est fractionn en plusieurs parties o sexcutent les applications. Ces fentres peuvent se chevaucher, se recouvrir mutuellement ou tre disposes cte cte permettant ainsi de partager lesp ace de travail. Windows permet de travailler sur plusieurs applications la fois. Lenvironnement multi contextes est la partie visible du multi-tches. Lutilisation du multi-contextes prsente par contre des dsagrments pour le dveloppeur. Chaque fentre et ainsi chaque application doit tre clairement identifie afin que lutilisateur puisse aisment sy retrouver. De plus, plusieurs occurrences dune mme application peuvent fonctionner simultanment, chacune dentre elles devant tre repre. Cela implique que le programmeur devra rflchir son application en tenant compte de lenvironnement qui la supporte et devra rflchir la

Page 14/66

OFPPT

Module 10 Programmation Evnementielle


cohrence entre cette application et lenvironnement. Dans ces conditions deux remarques simposent : Lapplication devra pouvoir communiquer avec lenvironnement ; Lapplication ne devra pas monopoliser les ressources communes du systme. Lutilisateur doit toujours pouvoir passer dune application une autre, en dsignant la fentre o elle sexcute. Cette fentre passe alors au premier plan et devient active. Les autres fentres se retrouvant places larrire plan. La notion de fentre active implique que les vnements en provenance du clavier ou de la souris lui sont destins.

4. Les icnes
Les objets sont reprsents par des icnes (petits dessins) plutt que par des libells. Lusage de ces icnes permet de rapprocher lenvironnement de travail de lenvironnement rel de lutilisateur. Ces icnes vont permettre de transmettre un message lutilisateur par lintermdiaire dune mtaphore. Par exemple licne symbolisant une imprimante indique sans ambigut une fonction dimpression.

5. Les menus
Lutilisation de menus permet de proposer un processus bas sur lassociation objet/action. On slectionne un objet, puis on dsigne laction que lon souhaite associer cet objet dans un menu. Lavantage essentiel de ce processus rside dans la possibilit de combiner plusieurs actions sans avoir redfinir lobjet. Ce processus est le mode dinteraction avec linterfa ce et se divise en trois phases : Dsignation de lobjet ; Choix de laction raliser ; Production du rsultat.

B. Applications SDI et MDI


1. SDI
Le SDI (Single Document Interface) est un mode de fonctionnement autorisant le chargement dun seul document la fois. Pour travailler sur nouveau document, lapplication doit au pralable fermer celui actuellement ouvert. Le principe des applications SDI est exploit dans le Bloc-notes de Windows.

2. MDI
Le MDI (Multiple Document Interface) autorise louverture de plusieurs documents lintrieur dune mme application. Il dfinit le comportement des fentres documents lintrieur dune fentre mre ou fentre de lapplication. Les meilleurs exemples de lutilisation de fentres MDI se trouvent dans les outils bureautiques Word et Excel. Lintrt du principe MDI est suffisamment manifeste pour lutiliser galement dans des applications de gestion. Il se justifie alors dans louverture simultane de plusieurs vues du systme dinformations de lentreprise. Dun point de vue technique, il permet de limiter les accs au rseau en stockant temporairement sur le poste client les donnes.

Page 15/66

OFPPT

Module 10 Programmation Evnementielle


Pour crer un formulaire MDI parent au moment du design, Dans la fentre Proprits, affectez true la proprit IsMDIContainer. Ce faisant, vous dsignez le formulaire comme le conteneur MDI des fentres enfants. Les formulaires MDI enfants reprsentent un lment essentiel des applications de type MDI car ils constituent le centre de l'interaction utilisateur. Pour designer un formulaire comme MDI enfant : Form1 f1= new Form1(); f1.MdiParent = this; f1.Show();

VII. Les bases des interfaces graphiques


Nous nous proposons ici de donner les premiers lments pour construire des interfaces graphiques et grer leurs vnements

A. Un premier projet
Construisons un premier projet de type "Application windows" :

[1] [2] [3] [4]

: : : :

crer un nouveau projet de type Application Windows le nom du projet importe peu pour le moment le projet cr

Page 16/66

OFPPT

Module 10 Programmation Evnementielle

[5] : on sauvegarde la solution courante [6] : nom du projet [7] : dossier de la solution [8] : nom de la solution [9] : un dossier sera cr pour la solution [Chap5]. Les projets de celle-ci seront dans des sous-dossiers.

[10] :

le projet [01] dans la solution [Chap5] : [Program.cs] est la classe principale du projet [Form1.cs] est le fichier source qui va grer le comportement de la fentre [11] [Form1.Designer.cs] est le fichier source qui va encapsuler l'information sur les composants de la fentre [11] [11] : le fichier [Form1.cs] en mode "conception" (design) [12] : l'application gnre peut tre excute par (Ctrl-F5). La fentre [Form1] s'affiche. On peut la dplacer, la redimensionner et la fermer. On a donc les lments de base d'une fentre graphique. La classe principale [Program.cs] est la suivante :

Page 17/66

OFPPT

Module 10 Programmation Evnementielle

ligne 2 : les applications avec formulaires utilisent l'espace de noms System.Windows.Forms. ligne 4 : l'espace de noms initial a t renomm en Chap5. ligne 10 : l'excution du projet (Ctrl-F5), la mthode [Main] est excute. lignes 11-13 : la classe Application appartient l'espace de noms System.Windows.Forms. Elle contient des mthodes statiques pour lancer / arrter les applications graphiques windows. ligne 11 : facultative - permet de donner diffrents styles visuels aux contrles dposs sur un formulaire ligne 12 : facultative - fixe le moteur de rendu des textes des contrles : GDI+ (true), GDI (false) ligne 13 : la seule ligne indispensable de la mthode [Main] : instancie la classe [Form1] qui est la classe du formulaire et lui demande de s'excuter.

Le fichier source [Form1.cs] est le suivant :

ligne 5 : la classe Form1 drive de la classe [System.Windows.Forms.Form] qui est la classe mre de toutes les fentres. Le mot cl partial indique que la classe est partielle et qu'elle peut tre complte par d'autres fichiers source. C'est le cas ici, o la classe Form1 est rpartie dans deux fichiers : [Form1.cs] : dans lequel on trouvera le comportement du formulaire, notamment ses gestionnaires d'vnements [Form1.Designer.cs] : dans lequel on trouvera les composants du formulaire et leurs proprits. Ce fichier a la particularit d'tre rgnr chaque fois que l'utilisateur modifie la fentre en mode [conception]. lignes 6-8 : le constructeur de la classe Form1

Page 18/66

OFPPT

Module 10 Programmation Evnementielle


ligne 7 : fait appel la mthode InitializeComponent. On voit que cette mthode n'est pas prsente dans [Form1.cs]. On la trouve dans [Form1.Designer.cs]. Le fichier source [Form1.Designer.cs] est le suivant :

ligne 2 : il s'agit toujours de la classe Form1. On notera qu'il n'est plus besoin de rpter qu'elle drive de la classe Form. lignes 25-37 : la mthode InitializeComponent appele par le constructeur de la classe [Form1]. Cette mthode va crer et initialiser tous les composants du formulaire. Elle est rgnre chaque changement de celui-ci en mode [conception]. Une section, appele rgion, est cre pour la dlimiter lignes 19-39. Le dveloppeur ne doit pas ajouter de code dans cette rgion : il sera cras la rgnration suivante.

Il est plus simple dans un premier temps de ne pas s'intresser au code de [Form1.Designer.cs]. Il est gnr automatiquement et est la traduction en langage C# des choix que le dveloppeur fait en mode [conception]. Prenons un premier exemple :

Page 19/66

OFPPT

Module 10 Programmation Evnementielle

[1] : slectionner le mode [conception] en double-cliquant sur le fichier [Form1.cs] [2] : cliquer droit sur le formulaire et choisir [Properties] [3] : la fentre des proprits de [Form1] [4] : la proprit [Text] reprsente le titre de la fentre [5] : le changement de la proprit [Text] est pris en compte en mode [conception] ainsi que dans le code source [Form1.Designer.cs] :

B. Exemple pratique
Nous commenons un nouveau projet appel 02. Pour cela nous suivons la procdure explicite prcdemment pour crer un projet. La fentre crer est la suivante :

Les composants du formulaire sont les suivants :

Page 20/66

OFPPT

Module 10 Programmation Evnementielle

On pourra procder comme suit pour construire cette fentre :

[1] : cliquer droit sur le formulaire en-dehors de tout composant et choisir l'option [Properties] [2] : la feuille de proprits de la fentre apparat dans le coin infrieur droit de Visual studio Parmi les proprits du formulaire noter :

Ici, nous fixons les proprits Text et Name :

Page 21/66

OFPPT

Module 10 Programmation Evnementielle

[1] : choisir la bote outils [Common Controls] parmi les botes outils proposes par Visual Studio [2, 3, 4] : double-cliquer successivement sur les composants [Label], [Button] et [TextBox] [5] : les trois composants sont sur le formulaire Pour aligner et dimensionner correctement les composants, on peut utiliser les lments de la barre d'outils :

Le principe du formatage est le suivant : 1. slectionnez les diffrents composants formater ensemble (touche Ctrl appuye pendant les diffrents clics slectionnant les composants). 2. slectionnez le type de formatage dsir : les options Align permettent d'aligner des composants par le haut, le bas, le ct gauche ou droit, le milieu. les options Make Same Size permettent que des composants aient la mme hauteur ou la mme largeur. l'option Horizontal Spacing permet d'aligner horizontalement des composants avec des intervalles entre eux de mme largeur. Idem pour l'option Vertical Spacing pour aligner verticalement.

Page 22/66

OFPPT

Module 10 Programmation Evnementielle


l'option Center permet de centrer un composant horizontalement (Horizontally) ou verticalement (Vertically) dans la fentre

Une fois placs les composants nous fixons leurs proprits. Pour cela, cliquer droit sur le composant et prendre l'option Properties :

[1] : slectionner le composant pour avoir sa fentre de proprits. Dans celle-ci, modifier les proprits suivantes : name : labelSaisie, text : Saisie [2] : procder de mme : name : textBoxSaisie, text : ne rien mettre [3] : name : buttonAfficher, text : Afficher [4] : la fentre elle-mme : name : frmSaisiesBoutons, text : Saisies et boutons - 1 [5] : excuter (Ctrl-F5) le projet pour avoir un premier aperu de la fentre en action. Ce qui a t fait en mode [conception] a t traduit dans le code de [Form1.Designer.cs] :

Page 23/66

OFPPT

Module 10 Programmation Evnementielle

lignes 53-55 : les trois composants ont donn naissance trois champs privs de la classe [Form1]. On notera que les noms de ces champs sont les noms donns aux composants en mode [conception]. C'est le cas galement du formulaire. ligne 2 qui est la classe elle-mme. lignes 7-9 : les trois objets de type [Label], [TextBox] et [Button] sont crs. C'est travers eux que les composants visuels sont grs. lignes 14-19 : configuration du label labelSaisie lignes 23-29 : configuration du bouton buttonAfficher lignes 33-36 : configuration du champ de saisie textBoxSaisie lignes 40-47 : configuration du formulaire frmSaisiesBoutons. On notera, lignes 43-45, la faon d'ajouter des composants au formulaire.

Ce code est comprhensible. Il est ainsi possible de construire des formulaires par code sans utiliser le mode [conception]. De nombreux exemples de ceci sont donns dans la documentation MSDN de Visual Studio. Matriser ce code permet de crer des formulaires en cours d'excution : par exemple, crer la vole un formulaire permettant la mise jour d'une table de base de donnes, la structure de cette table n'tant dcouverte qu' l'excution.

Page 24/66

OFPPT

Module 10 Programmation Evnementielle


Il nous reste crire la procdure de gestion d'un clic sur le bouton Afficher. Slectionner le bouton pour avoir accs sa fentre de proprits. Celle-ci a plusieurs onglets :

[1] : liste des proprits par ordre alphabtique [2] : vnements lis au contrle Les proprits et vnements d'un contrle sont accessibles par catgories ou par ordre alphabtique : [3] : Proprits ou vnements par catgorie [4] : Proprits ou vnements par ordre alphabtique L'onglet Events en mode Catgories pour le bouton buttonAfficher est le suivant :

[1] : la colonne de gauche de la fentre liste les vnements possibles sur le bouton. Un clic sur un bouton correspond l'vnement Click. [2] : la colonne de droite contient le nom de la procdure appele lorsque l'vnement correspondant se produit. [3] : si on double-clique sur la cellule de l'vnement Click, on passe alors automatiquement dans la fentre de code pour crire le gestionnaire de l'vnement Click sur le bouton buttonAfficher :

Page 25/66

OFPPT

Module 10 Programmation Evnementielle

Lignes 10-12 : le squelette du gestionnaire de l'vnement Click sur le bouton nomm buttonAfficher. On notera les points suivants : la mthode est nomme selon le schma nomDuComposant_NomEvenement la mthode est prive. Elle reoit deux paramtres : sender : est l'objet qui a provoqu l'vnement. Si la procdure est excute la suite d'un clic sur le bouton buttonAfficher, sender sera gal buttonAfficher. On peut imaginer que la procdure buttonAfficher_Click soit excute partir d'une autre procdure. Celle-ci aurait alors tout loisir de mettre comme premier paramtre, l'objet senderde son choix. EventArgs : un objet qui contient des informations sur l'vnement. Pour un vnement Click, il ne contient rien.

Pour un vnement ayant trait aux dplacements de la souris, on y trouvera les coordonnes (X,Y) de la souris. Nous n'utiliserons aucun de ces paramtres ici. Ecrire un gestionnaire d'vnement consiste complter le squelette de code prcdent. Ici, nous voulons prsenter une bote de dialogue avec dedans, le contenu du champ textBoxSaisie s'il est non vide [1], un message d'erreur sinon [2] :

Page 26/66

OFPPT

Module 10 Programmation Evnementielle


Le code ralisant cela pourrait-tre le suivant :

La classe MessageBox sert afficher des messages dans une fentre. Nous avons utilis ici la mthode Show suivante :

Avec :

Le paramtre buttons peut prendre ses valeurs parmi les constantes suivantes (prfixes par MessageBoxButtons comme montr ligne 7) ci-dessus :

Page 27/66

OFPPT

Module 10 Programmation Evnementielle

Page 28/66

OFPPT

Module 10 Programmation Evnementielle

Le paramtre icon peut prendre ses valeurs parmi les constantes suivantes (prfixes par MessageBoxIcon comme montr ligne 7) ci-dessus :

Page 29/66

OFPPT

Module 10 Programmation Evnementielle

La mthode Show est une mthode statique qui rend [System.Windows.Forms.DialogResult] qui est une numration :

un

rsultat

de

type

Pour savoir sur quel bouton a appuy l'utilisateur pour fermer la fentre de type MessageBox on crira :

C. Les composants de base


Nous prsentons courants afin de application, nous des gestionnaires maintenant diverses applications mettant en jeu les composants les plus dcouvrir les principales mthodes et proprits de ceux-ci. Pour chaque prsentons l'interface graphique et le code intressant, principalement celui d'vnements.

1. Les proprits communes des objets


Celles hrites de la Classe Control' quil faut connatre:

a) Name
Il sagit du nom de lobjet tel quil est gr par lapplication. Par dfaut, C# baptise tous les objets que vous crez de noms gnriques, comme Form1, Form2, Form3 pour les fentres, List1, List2 pour les listes... Il est vivement conseill, avant toute autre chose, de rebaptiser les objets que vous venez de crer afin de donner des noms plus vocateurs. Le bouton sur lequel est crit OK sera nomm BoutonOK. La liste qui affiche les utilisateurs sera nomme ListUtilisateurs. Il est conseill de dbuter le nom de lobjet par un mot voquant sa nature: BoutonOk ou BtOk ou ButtonOk, btnOk cest comme vous voulez. Microsoft conseille: Btn : pour les Boutons

Page 30/66

OFPPT

Module 10 Programmation Evnementielle


Lst : pour les ListBox chk : pour les CheckBox cbo : pour les combos dlg : pour les DialogBox frm : pour les Form lbl : pour les labels txt : pour les Textbox tb : pour les Toolsbar rb : pour les radiobutton mm : pour les menus tmr : pour les timers

b) Text
Il sagit du texte qui est associ lobjet. Dans le cas dune fentre cest le texte qui apparat dans la barre de titre en haut. Pour un TextBox ou un Label cest videment le texte qui est affich. On peut modifier cette proprit en mode conception ou dans le code Exemple : Avec du code comment faire pour que le bouton ButtonOk porte linscription Ok ButtonOk.Text = "OK";

c) Enabled
Accessible, Indique si un contrle peut rpondre une interaction utilisateur. La proprit Enabled permet l'activation ou la dsactivation des contrles au moment de l'excution. Exemple : dsactiver le ButtonOk ButtonOk.Enabled = false;

d) Visible
Indique si un contrle est visible ou non. ButtonOk.Visible=False ; fait disparatre le bouton. Attention pour rendre visible une fentre on utilise la mthode .Show.

e) Font
Permet le choix de la police de caractres affiche dans lobjet. Exemple : ButtonOk.Font = new Font("Arial", 14);

f) BackColor ForeColor
Couleur du fond, Couleur de lavant plan Pour un bouton Forecolor co rrespond au cadre et aux caractres. Exemple : ButtonOk.BackColor = Color.Blue; ButtonOk.ForeColor = Color.White;

Page 31/66

OFPPT

Module 10 Programmation Evnementielle


2. Formulaire Form
Nous commenons par prsenter le composant indispensable, le formulaire sur lequel on dpose des composants. Nous avons dj prsent quelques-unes de ses proprits de base. Une fentre possde des proprits qui peuvent tre modifies en mode design dans la fentre 'Proprits' droite ou par du code :

a) Name
Nom du formulaire. Donner un nom explicite. FrmDemarrage Ds quune fentre est cre on modifie immdiatement ses proprits en mode conception pour lui donner laspect que lon dsire.

b) Text
Cest le texte qui apparatra dans la barre de titre en haut. Text peut tre modifi par le code : Form1.text= "Fentre" ;

c) Icon
Proprit qui permet dassocier la Form un fichier icne. Cette icne saffiche dans la barre de titre, tout en haut gauche. Si la Form est la Form par dfaut du projet, cest galement cette icne qui Symbolisera votre application dans Windows.

d) WindowState
Donne ltat de la fentre : Plein cran : FormWindowState.Maximized Normale : FormWindowState.Normal Dans la barre de tache : FormWindowState.Minimized Exemple : mettre une fentre en plein cran avec du code this.WindowState = FormWindowState.Maximized ;

e) ControlBox
Si cette proprit comme valeur False, les boutons de contrle situs droite de la barre de la fentre napparaissent pas.

f) MaximizeBox
Si cette proprit comme valeur False, le boutons de contrle Plein cran situs droite de la barre de la fentre napparat pas.

g) MinimizeBox
Si cette proprit comme valeur False, le boutons de contrle Minimize situs droite de la barre de la fentre napparat pas.

h) FormBorderStyle
Permet de choisir le type des bords de la fentre : sans bord (None), bord simple (FixedSingle) ne permettant pas lutilisateur de modifier la taille de la fentre, bord permettant la modification de la taille de la fentre (Sizable). Exemple :

Page 32/66

OFPPT

Module 10 Programmation Evnementielle


this.FormBorderStyle = FormBorderStyle.FixedSingle;

i) StartPosition
Permet de choisir la position de la fentre lors de son ouverture. Fentre au centre de lcran ? La position qui existait lors de la conception ...? Exemple : Form f1 = new Form(); f1.Text = "titre"; f1.StartPosition = FormStartPosition.CenterScreen ; f1.Show();

j) Opacity
Allant de 0% (0) 100% (1), permet de crer un formulaire plus ou moins transparent. Pour 0 il est transparent, pour 1 il est totalement opaque (normal) Exemple : this.Opacity = 0.75;

k) Les dialogues modale et non modale


Au niveau des interfaces utilisateur on distingue deux types de dialogues : Les dialogues de type modal Les dialogues de type non modal Une boite de dialogue est dite modale lorsquelle permet daccder dautres composants graphiques de notre solution logicielle tandis quelle est encore affiche lcran. A linverse la boite de dialogue non modale bloque tout accs dautres formulaires de la solution jusqu ce quelle soit ferme. Pour une boite de dialogue modale utiliser la mthode Show() et ShowDialog() pour une boite de dialogue non modale. Example: Form f1 = new Form(); f1.Text = "Fentre 1"; f1.Show(); Form f2 = new Form(); f2.Text = "Fentre 2"; f2.ShowDialog();

l) Formulaire d'avant plan


Pour dfinir au moment de la conception un formulaire en tant que formulaire d'avant-plan d'une application. l Dans la fentre Proprits, attribuez la proprit TopMost la valeur true. Pour dfinir par code un formulaire en tant que formulaire d'avant-plan d'une application. Dans une procdure, attribuez la proprit TopMost la valeur true : this.TopMost=true;

m) Les vnements
Nous nous attardons ici sur quelques vnements importants d'un formulaire.

Page 33/66

OFPPT

Module 10 Programmation Evnementielle


L'vnement Load se produit avant mme que le formulaire ne soit affich. L'vnement Closing se produit lorsque le formulaire est en cours de fermeture. On peut encore arrter cette fermeture par programmation. Nous construisons un formulaire de nom Form1 sans composant :

[1] : le formulaire [2] : les trois vnements traits Le code de [Form1.cs] est le suivant :

Page 34/66

OFPPT

Module 10 Programmation Evnementielle


Nous utilisons la fonction MessageBox pour tre averti des diffrents vnements. Ligne 10 : L'vnement Load va se produire au dmarrage de l'application avant mme que le formulaire ne s'affiche :

Ligne 15 : L'vnement FormClosing va se produire lorsque l'utilisateur ferme la fentre.

Ligne 19 : Nous lui demandons alors s'il veut vraiment quitter l'application :

Ligne 20 : S'il rpond Non, nous fixons la proprit Cancel de l'vnement CancelEventArgs e que la mthode a reu en paramtre. Si nous mettons cette proprit False, la fermeture de la fentre est abandonne, sinon elle se poursuit L'vnement FormClosed va alors se produire :

3. Etiquettes Label et boites de saisie TextBox


Nous avons dj rencontr ces deux composants. Label est un composant texte et TextBox un composant champ de saisie. Leur proprit principale est Text qui dsigne soit le contenu du champ de saisie soit le texte du libell. Cette proprit est en lecture/criture. L'vnement habituellement utilis pour TextBox est TextChanged qui signale que l'utilisateur modifi le champ de saisie. Voici un exemple qui utilise l'vnement TextChanged pour suivre les volutions d'un champ de saisie :

Page 35/66

OFPPT

Module 10 Programmation Evnementielle

Le code de cette application est le suivant :

Page 36/66

OFPPT

Module 10 Programmation Evnementielle


ligne 24 : l'vnement [Form].Shown a lieu lorsque le formulaire est affich ligne 26 : on met alors le focus (pour une saisie) sur le composant textBoxSaisie. ligne 9 : l'vnement [TextBox].TextChanged se produit chaque fois que le contenu d'un composant TextBox change ligne 11 : on recopie le contenu du composant [TextBox] dans le composant [Label] ligne 14 : gre le clic sur le bouton [Effacer] ligne 16 : on met la chane vide dans le composant [TextBox] ligne 19 : gre le clic sur le bouton [Quitter] ligne 21 : pour arrter l'application en cours d'excution. On se rappelle que l'objet Application sert lancer l'application dans la mthode [Main] de [Form1.cs] :

L'exemple suivant utilise un TextBox multilignes :

La liste des contrles est la suivante :

Pour qu'un TextBox devienne multilignes on positionne les proprits suivantes du contrle :

Page 37/66

OFPPT

Module 10 Programmation Evnementielle


L'application permet de taper des lignes directement dans [1] ou d'en ajouter via [2] et [3]. Le code de l'application est le suivant :

ligne 18 : lorsque le formulaire est affich (vt Shown), on met le focus sur le champ de saisie textBoxLigne ligne 10 : gre le clic sur le bouton [Ajouter] ligne 12 : le texte du champ de saisie textBoxLigne est ajout au texte du champ de saisie textBoxLignes suivi d'un saut de ligne. ligne 13 : le champ de saisie textBoxLigne est effac

Parmi multiples proprits du contrle TextBox on peut signaler : PaswordChar : crypte le texte entr sous forme dtoiles. Exemple : textBox1.PasswordChar = '*'; MaxLength : limite le nombre de caractres quil est possible de saisir Exemple : textBox1.MaxLength = 3; // Limite la saisie 3 caractres textBox1.MaxLength = 0; // Ne limite pas la saisie TextLength : donne la longueur du texte Exemple : MessageBox.Show(textBox1.TextLength.ToString()); AppendText : cette mthode permet ajouter du texte au texte dj prsent dans le TextBox Exemple : textBox1.AppendText(textBox2.Text); textBox1.AppendText("mon texte"); sitant aussi quelques vnements lis au contrle TextBox : KeyDown : survient quand on appuie sur lA touche. KeyPress : quand la touche est enfonce. KeyUp : quand on relche la touche. Ils surviennent dans cet ordre. KeyPress permet de rcuprer la touche tape dans e.KeyChar (mais pas F1, F2..) Exemple : rcuprer la touche tape private void textBox1_KeyPress(object sender, KeyPressEventArgs e) { MessageBox.Show(e.KeyChar.ToString()); }

Page 38/66

OFPPT

Module 10 Programmation Evnementielle

Exemple : Ne permettre de saisir que des chiffres private void textBox1_KeyPress(object sender, KeyPressEventArgs e) { int i=0; if (int.TryParse(e.KeyChar.ToString(), out i)) { e.Handled = false; // Handled Obtient ou dfinit si l'vnement // d'exception a t gr } else { e.Handled = true ; } } Exemple : Compter le nombre de caracrtre espace switch (e.KeyChar) { case (char)(Keys.Space): n += 1; break; ... }

4. Listes deroulantes ComboBox


Nous crons le formulaire suivant :

Un composant ComboBox est une liste droulante double d'une zone de saisie : l'utilisateur peut soit choisir un lment dans (2) soit taper du texte dans (1). Il existe trois sortes de ComboBox fixes par la proprit DropDownStyle :

Page 39/66

OFPPT

Module 10 Programmation Evnementielle

Par dfaut, le type d'un ComboBox est DropDown. La classe ComboBox a un seul constructeur :

Les lments du ComboBox sont disponibles dans la proprit Items : C'est une proprit indexe, Items[i] dsignant l'lment i du Combo. Elle est en lecture seule. Soit C un combo et C.Items sa liste d'lments. On a les proprits suivantes :

On peut s'tonner qu'un combo puisse contenir des objets alors que visuellement il affiche des chanes de caractres. Si un ComboBox contient un objet obj, il affiche la chane obj.ToString(). On se rappelle que tout objet a une mthode ToString hrite de la classe object et qui rend une chane de caractres "reprsentative" de l'objet. L'lment Item slectionn dans le combo C est C.SelectedItem ou C.Items[C.SelectedIndex] o C.SelectedIndex est le n de l'lment slectionn, ce n partant de zro pour le premier lment. Le texte slectionn peut tre obtenu de diverses faons : C.SelectedItem.Text, C.Text. Lors du choix d'un lment dans la liste droulante se produit l'vnement SelectedIndexChanged qui peut tre alors utilis pour tre averti du changement de slection dans le combo. Dans l'application suivante, nous utilisons cet vnement pour afficher l'lment qui a t slectionn dans la liste.

Page 40/66

OFPPT

Module 10 Programmation Evnementielle

Le code de l'application est le suivant :

ligne 5 : previousSelectedIndex mmorise le dernier index slectionn dans le combo ligne 10 : remplissage du combo avec un tableau de chanes de caractres ligne 12 : le 1er lment est slectionn ligne 15 : la mthode excute chaque fois que l'utilisateur slectionne un lment du combo. Contrairement ce que pourrait laisser croire le nom de l'vnement, celui-ci a lieu mme si l'lment slectionn est le mme que le prcdent. ligne 16 : on note l'index de l'lment slectionn ligne 17 : s'il est diffrent du prcdent ligne 19 : on affiche le n et le texte de l'lment slectionn ligne 21 : on note le nouvel index

Page 41/66

OFPPT

Module 10 Programmation Evnementielle


5. Composant ListBox
On se propose de construire l'interface suivante :

Les composants de cette fentre sont les suivants :

Les composants ListBox ont un mode de slection de leurs lments qui est dfini par leur proprit SelectionMode :

Page 42/66

OFPPT

Module 10 Programmation Evnementielle


Fonctionnement de l'application L'utilisateur tape du texte dans le champ 1. Il l'ajoute la liste 1 avec le bouton Ajouter (2). Le champ de saisie (1) est alors vid et l'utilisateur peut ajouter un nouvel lment. Il peut transfrer des lments d'une liste l'autre en slectionnant l'lment transfrer dans l'une des listes et en choississant le bouton de transfert adquat 5 ou 6. L'lment transfr est ajout la fin de la liste de destination et enlev de la liste source. Il peut double-cliquer sur un lment de la liste 1. Cet lment est alors transfr dans la bote de saisie pour modification et enlev de la liste 1. Les boutons sont allums ou teints selon les rgles suivantes : le bouton Ajouter n'est allum que s'il y a un texte non vide dans le champ de saisie le bouton [5] de transfert de la liste 1 vers la liste 2 n'est allum que s'il y a un lment slectionn dans la liste 1 le bouton [6] de transfert de la liste 2 vers la liste 1 n'est allum que s'il y a un lment slectionn dans la liste 2 les boutons [7] et [8] d'effacement des listes 1 et 2 ne sont allums que si la liste effacer contient des lments. Dans les conditions prcdentes, tous les boutons doivent tre teints lors du dmarrage de l'application. C'est la proprit Enabled des boutons qu'il faut alors positionner false. On peut le faire au moment de la conception ce qui aura pour effet de gnrer le code correspondant dans la mthode InitializeComponent ou le faire nous-mmes dans le constructeur comme cidessous :

L'tat du bouton Ajouter est contrl par le contenu du champ de saisie. C'est l'vnement TextChanged qui nous permet de suivre les changements de ce contenu :

L'tat des boutons de transfert dpend du fait qu'un lment a t slectionn ou non dans la liste qu'ils contrlent :

Page 43/66

OFPPT

Module 10 Programmation Evnementielle

Le code associ au clic sur le bouton Ajouter est le suivant :

On notera la mthode Focus qui permet de mettre le "focus" sur un contrle du formulaire. Le code associ au clic sur les boutons Effacer :

Le code de transfert des lments slectionns d'une liste vers l'autre :

Les deux mthodes ci-dessus dlguent le transfert des lments slectionns d'une liste l'autre une mme mthode prive appele transfert :

Page 44/66

OFPPT

Module 10 Programmation Evnementielle

Ligne b : la mthode transfert reoit six paramtres : une rfrence sur la liste contenant les lments slectionns appele ici l1. Lors de l'excution de l'application, l1 est soit listBox1 soit listBox2. On voit des exemples d'appel, lignes 3 et 8 des procdures de transfert buttonXversY_Click. une rfrence sur le bouton de transfert li la liste l1. Par exemple si l1 est listBox2, ce sera button2vers1( cf appel ligne 8) une rfrence sur le bouton d'effacement de la liste l1. Par exemple si l1 est listBox1, ce sera buttonEffacer1( cf appel ligne 3) les trois autres rfrences sont analogues mais font rfrence la liste l2. Ligne d : la collection [ListBox].SelectedIndices reprsente les indices des lments slectionns dans le composant [ListBox]. C'est une collection : [ListBox].SelectedIndices.Count est le nombre d'lment de cette collection [ListBox].SelectedIndices[i] est l'lment n i de cette collection On parcourt la collection en sens inverse : on commence par la fin de la collection pour terminer par le dbut. Nous expliquerons pourquoi. Ligne f : indice d'un lment slectionn de la liste l1 Ligne h : cet lment est ajout dans la liste l2 Ligne j : et supprim de la liste l1. Parce qu'il est supprim, il n'est plus slectionn. La collection l1.SelectedIndices de la ligne d va tre recalcule. Elle va perdre l'lment qui vient d'tre supprim. Tous les lments qui sont aprs celui-ci vont voir leur n passer de n n-1. si la boucle de la ligne (d) est croissante et qu'elle vient de traiter l'lment n 0, elle va ensuite traiter l'lment n 1. Or l'lment qui portait le n 1 avant la suppression de l'lment n 0, va ensuite porter le n 0. Il sera alors oubli par la boucle. si la boucle de la ligne (d) est dcroissante et qu'elle vient de traiter l'lment n n, elle va ensuite traiter l'lment n n-1. Aprs suppression de l'lment n n, l'lment n n1 ne change pas de n. Il est donc trait au tour de boucle suivant.

Page 45/66

OFPPT

Module 10 Programmation Evnementielle


Lignes m-n : l'tat des boutons [Effacer] dpend de la prsence ou non d'lments dans les listes associes Ligne p : la liste l2 n'a plus d'lments slectionns : on teint son bouton de transfert.

6. Cases a cocher CheckBox, boutons radio ButtonRadio

Les composants de la fentre sont les suivants :

L'vnement qui nous intresse pour ces six contrles est l'vnement CheckChanged indiquant que l'tat de la case cocher ou du bouton radio a chang. Cet tat est reprsent dans les deux cas par la proprit boolenne Checked qui vrai signifie que le contrle est coch. Nous n'utiliserons ici qu'une seule mthode pour traiter les six vnements CheckChanged, la mthode affiche. Pour faire en sorte que les six vnements CheckChanged soient grs par la mme mthode affiche, on pourra procder comme suit : Slectionnons le composant radioButton1 et cliquons droit dessus pour avoir accs ses proprits :

Page 46/66

OFPPT

Module 10 Programmation Evnementielle

Dans l'onglet vnements [1], on associe la mthode affiche [2] l'vnement CheckChanged. Cela signifie que l'on souhaite que le clic sur l'option A1 soit traite par une mthode appele affiche. Visual studio gnre automatiquement la mthode affiche dans la fentre de code :

La mthode affiche est une mthode de type EventHandler. Pour les cinq autres composants, on procde de mme. Slectionnons par exemple l'option CheckBox1 et ses vnements [3]. En face de l'vnement Click, on a une liste droulante [4] dans laquelle sont prsentes les mthodes existantes pouvant traiter cet vnement. Ici on n'a que la mthode affiche. On la slectionne. On rpte ce processus pour tous les autres composants. Dans la mthode InitializeComponent du code a t gnr. La mthode affiche a t dclare comme gestionnaire des six vnements CheckedChanged de la faon suivante :

La mthode affiche est complte comme suit :

Page 47/66

OFPPT

Module 10 Programmation Evnementielle

La syntaxe

Permet de vrifier que l'objet sender est de type CheckBox. Cela nous permet ensuite de faire un transtypage vers le type exact de sender. La mthode affiche crit dans la liste listBoxValeurs le nom du composant l'origine de l'vnement et la valeur de sa proprit Checked. A l'excution [7], on voit qu'un clic sur un bouton radio provoque deux vnements CheckChanged : l'un sur l'ancien bouton coch qui passe "non coch" et l'autre sur le nouveau bouton qui passe "coch".

7. Variateurs ScrollBar
Il existe plusieurs types de variateur : le variateur horizontal (HScrollBar), le variateur vertical (VScrollBar), l'incrmenteur (NumericUpDown).

Ralisons l'application suivante :

Page 48/66

OFPPT

Module 10 Programmation Evnementielle

Un variateur ScrollBar permet l'utilisateur de choisir une valeur dans une plage de valeurs entires symbolise par la "bande" du variateur sur laquelle se dplace un curseur. La valeur du variateur est disponible dans sa proprit Value. Pour un variateur horizontal, l'extrmit gauche reprsente la valeur minimale de la plage, l'extrmit droite la valeur maximale, le curseur la valeur actuelle choisie. Pour un variateur vertical, le minimum est reprsent par l'extrmit haute, le maximum par l'extrmit basse. Ces valeurs sont reprsentes par les proprits Minimum et Maximum et valent par dfaut 0 et 100. Un clic sur les extrmits du variateur fait varier la valeur d'un incrment (positif ou ngatif) selon l'extrmit clique appele SmallChange qui vaut par dfaut 1. Un clic de part et d'autre du curseur fait varier la valeur d'un incrment (positif ou ngatif) selon l'extrmit clique appele LargeChange qui vaut par dfaut 10. Lorsqu'on clique sur l'extrmit suprieure d'un variateur vertical, sa valeur diminue. Cela peut surprendre l'utilisateur moyen qui s'attend normalement voir la valeur "monter". On rgle ce problme en donnant une valeur ngative aux proprits SmallChange et LargeChange Ces cinq proprits (Value, Minimum, Maximum, SmallChange, LargeChange) sont accessibles en lecture et criture. L'vnement principal du variateur est celui qui signale un changement de valeur : l'vnement Scroll.

Un composant NumericUpDown est proche du variateur : il a lui aussi les proprits Minimum, Maximum et Value, par dfaut 0, 100, 0. Mais ici, la proprit Value est affiche dans une bote de saisie faisant partie intgrante du contrle. L'utilisateur peut lui mme modifier cette valeur sauf si on a mis la proprit ReadOnly du contrle vrai. La valeur de l'incrment est fixe par la proprit Increment, par dfaut 1. L'vnement principal du composant NumericUpDown est celui qui signale un changement de valeur : l'vnement ValueChanged Le code de l'application est le suivant :

Page 49/66

OFPPT

Module 10 Programmation Evnementielle

8. vnements souris
Lorsqu'on dessine dans un conteneur, il est important de connatre la position de la souris pour, par exemple, afficher un point lors d'un clic. Les dplacements de la souris provoquent des vnements dans le conteneur dans lequel elle se dplace.

[1] : les vnements survenant lors d'un dplacement de la souris sur le formulaire ou sur un contrle [2] : les vnements survenant lors d'un glisser / lcher (Drag'nDrop)

Page 50/66

OFPPT

Module 10 Programmation Evnementielle

Voici une application permettant de mieux apprhender quels moments se produisent les diffrents vnements souris :

Pour suivre les dplacements de la souris sur les trois contrles, on n'crit qu'un seul gestionnaire, le gestionnaire affiche :

Page 51/66

OFPPT

Module 10 Programmation Evnementielle

Le code de la procdure affiche est le suivant :

A chaque fois que la souris entre dans le domaine d'un contrle son systme de coordonnes change. Son origine (0,0) est le coin suprieur gauche du contrle sur lequel elle se trouve. Ainsi l'excution, lorsqu'on passe la souris du formulaire au bouton, on voit clairement le changement de coordonnes. Afin de mieux voir ces changements de domaine de la souris, on peut utiliser la proprit Cursor [1] des contrles :

Cette proprit permet de fixer la forme du curseur de souris lorsque celle-ci entre dans le domaine du contrle. Ainsi dans notre exemple, nous avons fix le curseur Default pour le formulaire lui-mme [2], Hand pour la liste 2 [3] et Cross pour le bouton 3 [4]. Par ailleurs, pour dtecter les entres et sorties de la souris sur la liste 2, nous traitons les vnements MouseEnter et MouseLeave de cette mme liste :

Pour traiter les clics sur le formulaire, nous traitons les vnements MouseDown et MouseUp :

Page 52/66

OFPPT

Module 10 Programmation Evnementielle

Lignes 3 et 8 : les messages sont placs en 1re position dans le ListBox afin que les vnements les plus rcents soient les premiers dans la liste.

Enfin, le code du gestionnaire de clic sur le bouton Effacer :

9. Crer une fentre avec menu


Voyons maintenant comment crer une fentre avec menu. Nous allons crer la fentre suivante :

Pour crer un menu, on choisit le composant " MenuStrip" dans la barre "Menus & Tollbars" :

Page 53/66

OFPPT

Module 10 Programmation Evnementielle

[1] : choix du composant [MenuStrip] [2] : on a alors un menu qui s'installe sur le formulaire avec des cases vides intitules "Type Here". Il suffit d'y indiquer les diffrentes options du menu. [3] : le libell "Options A" a t tap. On passe au libell [4]. [5] : les libells des options A ont t saisis. On passe au libell [6]

[6] : les premires options B [7] : sous B1, on met un sparateur. Celui-ci est disponible dans un combo associ au texte "Type Here" [8] : pour faire un sous-menu, utiliser la flche [8] et taper le sous-menu dans [9] Il reste nommer les diffrents composants du formulaire :

Page 54/66

OFPPT

Module 10 Programmation Evnementielle

Les options de menu sont des contrles comme les autres composants visuels et ont des proprits et vnements. Par exemple les proprits de l'option de menu A1 sont les suivantes :

Deux proprits sont utilises dans notre exemple :

Dans la structure du menu, slectionnons l'option A1 et cliquons droit pour avoir accs aux proprits du contrle :

Page 55/66

OFPPT

Module 10 Programmation Evnementielle


Dans l'onglet vnements [1], on associe la mthode affiche [2] l'vnement Click. Cela signifie que l'on souhaite que le clic sur l'option A1 soit traite par une mthode appele affiche. Visual studio gnre automatiquement la mthode affiche dans la fentre de code :

Dans cette mthode, nous nous contenterons d'afficher dans le label labelStatut la proprit Text de l'option de menu qui a t clique :

La source de l'vnement sender est de type object. Les options de menu sont elle de type ToolStripMenuItem, aussi est-on oblig de faire un transtypage de object vers ToolStripMenuItem. Pour toutes les options de menu, on fixe le gestionnaire du clic la mthode affiche [3,4]. Excutons l'application et slectionnons un lment de menu :

10.

Composants non visuels

Nous nous intressons maintenant un certain nombre de composants non visuels : on les utilise lors de la conception mais on ne les voit pas lors de l'excution.

a) Boites de dialogue OpenFileDialog et SaveFileDialog


Nous allons construire l'application suivante :

Page 56/66

OFPPT

Module 10 Programmation Evnementielle


Les contrles sont les suivants :

Le code associ au bouton Effacer est simple :

Nous utiliserons les proprits et mthodes suivantes de la classe SaveFileDialog :

La mthode ShowDialog affiche une bote de dialogue analogue la suivante :

Page 57/66

OFPPT

Module 10 Programmation Evnementielle

La procdure de sauvegarde peut s'crire ainsi :

Page 58/66

OFPPT

Module 10 Programmation Evnementielle

ligne 4 : on fixe le dossier initial ( InitialDirectory) au dossier (Application.ExecutablePath) qui contient l'excutable de l'application. ligne 5 : on fixe les types de fichiers prsenter. On notera la syntaxe des filtres : filtre1|filtre2|..|filtren avec filtrei= Texte| modle de fichier. Ici l'utilisateur aura le choix entre les fichiers *.txt et *.*. ligne 6 : on fixe le type de fichier prsenter en premier l'utilisateur. Ici l'index 0 dsigne les fichiers *.txt. ligne 8 : la bote de dialogue est affiche et son rsultat rcupr. Pendant que la bote de dialogue est affiche, l'utilisateur n'a plus accs au formulaire principal (bote de dialogue dite modale). L'utilisateur fixe le nom du fichier sauvegarder et quitte la bote soit par le bouton Enregistrer, soit par le bouton Annuler, soit en fermant la bote. Le rsultat de la mthode ShowDialog est DialogResult.OK uniquement si l'utilisateur a utilis le bouton Enregistrer pour quitter la bote de dialogue. Ceci fait, le nom du fichier crer est maintenant dans la proprit FileName de l'objet saveFileDialog1. On est alors ramen la cration classique d'un fichier texte. On y crit le contenu du TextBox : textBoxLignes.Text tout en grant les exceptions qui peuvent se produire.

La classe OpenFileDialog est trs proche de la classe SaveFileDialog. On utilisera les mmes mthodes et proprits que prcdemment. La mthode ShowDialog affiche une bote de dialogue analogue la suivante :

La procdure de chargement du fichier texte peut s'crire ainsi :

Page 59/66

OFPPT

Module 10 Programmation Evnementielle

ligne 4 : on fixe le dossier initial ( InitialDirectory) au dossier (Application.ExecutablePath) qui contient l'excutable de l'application. ligne 5 : on fixe les types de fichiers prsenter. On notera la syntaxe des filtres : filtre1|filtre2|..|filtren avec filtrei= Texte| modle de fichier. Ici l'utilisateur aura le choix entre les fichiers *.txt et *.*. ligne 6 : on fixe le type de fichier prsenter en premier l'utilisateur. Ici l'index 0 dsigne les fichiers *.txt. ligne 8 : la bote de dialogue est affiche et son rsultat rcupr. Pendant que la bote de dialogue est affiche, l'utilisateur n'a plus accs au formulaire principal (bote de dialogue dite modale). L'utilisateur fixe le nom du fichier sauvegarder et quitte la bote soit par le bouton Ouvrir, soit par le bouton Annuler, soit en fermant la bote. Le rsultat de la mthode ShowDialog est DialogResult.OK uniquement si l'utilisateur a utilis le bouton Enregistrer pour quitter la bote de dialogue. Ceci fait, le nom du fichier crer est maintenant dans la proprit FileName de l'objet openFileDialog1. On est alors ramen la lecture classique d'un fichier texte. On notera, ligne 16, la mthode qui permet de lire la totalit d'un fichier.

b) Boites de dialogue FontColor et ColorDialog


Nous continuons l'exemple prcdent en y ajoutant deux nouveaux boutons et deux nouveaux contrles non visuels :

Page 60/66

OFPPT

Module 10 Programmation Evnementielle

Les classes FontDialog et ColorDialog ont une mthode ShowDialog analogue la mthode ShowDialog des classes OpenFileDialog et SaveFileDialog. La mthode ShowDialog de la classe ColorDialog permet de choisir une couleur [1]. Celle de la classe FontDialog permet de choisir une police de caractres [2] :

[1] : si l'utilisateur quitte la bote de dialogue avec le bouton OK, ShowDialog est DialogResult.OK et la couleur choisie est dans la ColorDialog utilis. [2] : si l'utilisateur quitte la bote de dialogue avec le bouton OK, ShowDialog est DialogResult.OK et la police choisie est dans la FontDialog utilis.

le rsultat de la mthode proprit Color de l'objet le rsultat de la mthode proprit Font de l'objet

Nous avons dsormais les lments pour traiter les clics sur les boutons Couleur et Police :

Page 61/66

OFPPT

Module 10 Programmation Evnementielle

ligne [4] : la proprit [ForeColor] d'un composant TextBox dsigne la couleur de type [Color] des caractres du TextBox. Ici cette couleur est celle choisie par l'utilisateur dans la bote de dialogue de type [ColorDialog]. ligne [12] : la proprit [Font] d'un composant TextBox dsigne la police de caractres de type [Font] des caractres du TextBox. Ici cette police est celle choisie par l'utilisateur dans la bote de dialogue de type [FontDialog]

11.

Timer

Nous nous proposons ici d'crire l'application suivante :

En [4], nous voyons le chronomtre en marche, en [5] le chronomtre arrt. Pour changer toutes les secondes le contenu du Label LabelChrono, il nous faut un composant qui gnre un vnement toutes les secondes, vnement qu'on pourra intercepter pour mettre jour l'affichage du chronomtre. Ce composant c'est le Timer [1] disponible dans la bote outils Components [2] :

Page 62/66

OFPPT

Module 10 Programmation Evnementielle

Les proprits du composant Timer utilises ici seront les suivantes :

Dans notre exemple le timer s'appelle timer1 et timer1.Interval est mis 1000 ms (1s). L'vnement Tick se produira donc toutes les secondes. Le clic sur le bouton Arrt/Marche est trait par la procdure buttonArretMarche_Click suivante :

Page 63/66

OFPPT

Module 10 Programmation Evnementielle

ligne 13 : la procdure qui traite le clic sur le bouton Arrt/Marche. ligne 15 : le libell du bouton Arrt/Marche est soit "Arrt" soit "Marche". On est donc oblig de faire un test sur ce libell pour savoir quoi faire. ligne 17 : dans le cas de "Marche", on note l'heure de dbut dans une variable dbut qui est une variable globale (ligne 11) de l'objet formulaire ligne 19 : initialise le contenu du label LabelChrono ligne 21 : le timer est lanc (Enabled=true) ligne 23 : libell du bouton passe "Arrt". ligne 27 : dans le cas de "Arrt" ligne 29 : on arrte le timer (Enabled=false) ligne 31 : on passe le libell du bouton "Marche". Il nous reste traiter l'vnement Tick sur l'objet timer1, vnement qui se produit toutes les secondes :

Page 64/66

OFPPT

Module 10 Programmation Evnementielle


ligne 3 : on note l'heure du moment ligne 4 : on calcule le temps coul depuis l'heure de lancement du chronomtre. On obtient un objet de type TimeSpan qui reprsente une dure dans le temps. ligne 6 : celle-ci doit tre affiche dans le chronomtre sous la forme hh:mm:ss. Pour cela nous utilisons les proprits Hours, Minutes, Seconds de l'objet TimeSPan qui reprsentent respectivement les heures, minutes, secondes de la dure que nous affichons au format ToString("d2") pour avoir un affichage sur 2 chiffres.

12.

Regroupement de contrles

On peut regrouper des contrles dans : Les GroupBox. Les Panels. Les PictureBox. Les TabControl.

a) GroupBox et Panel
Il est possible de regrouper des contrles dans un container, on peut par exemple regrouper plusieurs RadioButton. Le container peut tre un GroupBox ou un Panel.

Pour l'utilisateur, le fait que toutes les options soient regroupes dans un panneau est un indice visuel logique (Tous les RadioButton permettrons un choix dans une mme catgorie de donnes). Au moment de la conception, tous les contrles peuvent tre dplacs facilement ; si vous dplacez le contrle GroupBox ou Panel, tous les contrles qu'il contient sont galement dplacs.

b) PictureBox
Le contrle PictureBox peut afficher une image mais peu aussi servir de conteneur d'autres contrles. Retenons la notion de conteneur qui est le contrle parent.

c) TabControl
Ce contrle permet de crer des onglets comme dans un classeur, onglets entirement grs par C#. Chaque page peut contenir d'autres contrles. En mode conception, en passant par la proprit TabPages, on ajoute des onglets dont la proprit Text contient le texte afficher en haut (Ici: Page 1..). il suffit ensuite de cliquer sur chaque onglet et d'y ajouter les contrles.

Page 65/66

OFPPT

Module 10 Programmation Evnementielle

Page 66/66

OFPPT

Vous aimerez peut-être aussi