Visual Studio.Net. Les Boites de Dialogue. I - Microsoft Visual studio Lycée Gaston Crampe

Transcription

1 Visual Studio.Net Les Boites de Dialogue L'objectif de ce document est de vous présenter brièvement Microsoft Visual Studio 2008 et de créer un projet de type MFC (boîtes de dialogue - IHM). I - Microsoft Visual studio L'environnement Le pack Visual Studio 2008 ou Visual Studio.Net (ou dot net) se compose d'un IDE permettant de développer des applications dans différents langages. Les cibles proposées sont PC et SmartDevice (PDA, Smartphone, Téléphone portable). Les langages sont limités à ceux de Microsoft et se classent en 2 catégories : - les interprétés qui s'appuient sur une couche CLR pour fonctionner : C#, C++, VisualBasic,.. - les non-interprétés : C++ natif La couche CLR est incorporée dans le composant logiciel.net Framework qui est indispensable pour l'exécution des langages interprétés. Il existe principalement 2 versions : -.Net Framework pour les PC (à ce jour la version est 4.0), -.Net Compact Framework (ou.net CF) pour les cibles embarquées (SmartDevice). 2. Les classes de Microsoft Toutes les applications graphiques développées avec Visual s'appuient sur les classes fournies par Microsoft. Ces classes sont les fondations de tout programme, ce sont les Microsoft Foundation Classes (MFC). Elles englobent de nombreux aspects du développement propre à Windows (gestion des IHM Windows, Entrée/Sortie, réseau, ressources partagées, impression, etc.) et il est donc indispensable de les utiliser. Cf Annexe : Tableau des classes MFC 3. Les types de projets Pour chaque type de projet choisi (Win32, CLR, MFC, ATL...), un assistant va générer automatiquement un ensemble de classes, de fichiers sources prédéfinis et les personnalisera en fonction des paramètres que vous aurez précisés. Seul le projet du type MFC sera présenté, il correspond aux applications IHM. 1/19

2 a) Projet MFC - Type d'application Document / Vue Plutôt réservé pour le développement d'applications bureautiques, ce type d'application propose une IHM semblable aux éditeurs de texte (barre de menu, icônes (nouveau document/ouvrir fichier/enregistrer/imprimer...), une zone disponible pour l'affichage). Il se décline en 2 versions : - SDI (Single Document Interface) : une seule vue disponible (ex: bloc note basique), - MDI (Multiple Document Interface) : plusieurs vues disponibles simultanément (ex: wordpad / word). Ce type d'application s'appuie sur l'architecture Document/Vue : il dissocie la partie vue de la partie document. Le Document gère et stocke toutes les données de l'application. La Vue correspond à une fenêtre intérieure et à la gestion de ses évènements L'assistant génère respectivement une classe CVue et une classe CDocument. 2/19

3 b) Projet MFC - Type d'application Boîte de Dialogue Ce type d'application propose une fenêtre vierge sur laquelle vous venez déposer des contrôles à votre convenance (boutons, champs de texte, images, etc.) pour composer votre IHM. - fenêtre à personnaliser Chaque contrôle peut : - disposer d'au moins une méthode (callback) associée à un de ses événements. Ex: méthode OnOK( ) exécutée chaque fois qu'on clique sur le bouton OK. Ces méthodes sont ajoutées automatiquement à votre classe par l'assistant. - être contrôlé depuis le code pour évoluer durant l'exécution de l'application. La classe CDialog est la classe de base pour toutes les boîtes de dialogue. Chaque IHM est donc une classe dérivée de CDialog (MFC) qui porte le suffixe Dlg. - CNomProjetDlg est la classe correspondant à l'ihm (créée par l'assistant) Ainsi, instancier 2 objets d'une classe (IHM) affichera 2 boîtes de dialogues identiques. Sur le même principe, chaque contrôle déposé sur l'ihm est un objet d'une classe héritée d'une classe de base. Par exemple : un bouton est un objet d'une classe héritée de CButton, un champ d'édition de texte est un objet d'une classe héritée de CEdit. - Chaque contrôle de l'ihm est un objet d'une classe héritée d'une classe de base - 3/19

4 II - Mini projet (Boîte de dialogue) 1. Présentation Le mini projet consiste à réaliser une application (IHM) permettant à son utilisateur d'afficher la date et l'heure retournées par un serveur Temps (TCP/IP). Ce serveur est identifié par son adresse IP (le port d'écoute est fixé à 3000). - cas d'utilisation - Pour répondre à ce besoin, les classes suivantes seront développées et/ou mise en œuvre : - Diagramme de classes - Remarques : - Les classes CAsyncSocket, CSocket et CDialog font parties des MFC. - La classe CBoiteDialogDlg sera générée par l'assistant lors de la création du projet MFC du type d'application Boîte de Dialogue, elle évoluera en fonction des contrôles que vous ajouterez. - La classe CClientTCPIP est à développer intégralement. 2. Réalisation a) Création du projet Lancez Visual Studio et Créer un nouveau projet (CTRL+SHIFT+N) : 4/19

5 Choisissez Visual C++, MFC, Application MFC. Renseignez les champs, nommez le projet BoiteDialog et validez par OK. Cliquez Suivant Choisissez type d'application Basée sur des boîtes de dialogue, Décochez Utiliser les bibliothèques Unicode, Cliquez Suivant. 5/19

6 Modifiez éventuellement le titre de la boîte de dialogue, Cliquez Suivant. Cliquez Suivant. Cochez Windows sockets (utilisation de la classe CSocket dans le projet). Cliquez Suivant. 6/19

7 Cette dernière fenêtre résume le code que va générer l'assistant pour votre projet : - CBoiteDialogApp est la classe qui permet de lancer votre IHM au démarrage de l'application. - CBoiteDialogDlg est la classe héritée de CDialog qui correspond à l'ihm vierge. Cliquez Terminer. Lorsque l'assistant a terminé de créer votre projet, vous devez obtenir cette configuration dans votre IDE : : Liste des contrôles disponibles à placer sur la boîte de dialogue. 2 : La boîte de dialogue vierge, à modifier. 3 : Fenêtre Projet qui contient les vues Ressources, Classes et Solutions. 4 : Fenêtre Propriété : affiche les propriétés du contrôle sélectionné (dans l'exemple ci-dessus : la boîte de dialogue). 7/19

8 Si on s'attarde un peu sur la fenêtre Projet (3), on constate qu'elle se compose de trois informations accessibles par des onglets : - Affichage des ressources : Contient toutes les ressources comprises dans votre application : Numéro de version, Chaînes de caractères, Icônes de l'application, IHMs (dans l'exemple, l'assistant a créé 2 IHMs : les boîtes de dialogue «A Propos» et «Boîte de Dialog» ). Un double clic affiche l'ihm pour modification. Affichage de classes Projet BoiteDialog : - Fonctions et variables globales (à ne pas utiliser!) - Classes créées pas l'assistant Méthodes et attributs de la classe sélectionnée dans le cadre supérieur Un double clic sur l'un d'entre eux vous positionne sur le code correspondant. 8/19

9 Explorateur de solutions Tous les fichiers qui composent le projet sont visualisés ici. Un clic droit sur un des dossiers permet d'ajouter vos propres fichiers sources au projet. b) Modification de l'ihm Dans cette première partie, vous allez compléter l'ihm avec les contrôles suivants de manière à obtenir ceci (le bouton Fermer n'est rien d'autre que le bouton OK initial renommé) : Pour chaque contrôle de la feuille sélectionné, vous avez ses propriétés qui apparaissent dans la fenêtre 4. Vous pouvez les modifier à votre convenance. Ainsi, pour renommer le bouton en Interrogation Serveur, procédez ainsi : sélectionnez le bouton en cliquant dessus, modifiez le champs caption de la fenêtre Propriétés. 9/19

10 Renommez l'id en IDC_BOUTON_SERVEUR : l'id est une référence interne utilisée par l'assistant lors de la création de méthodes, d'attributs, de macros, etc. Il est conseillé de renommer l'id des contrôles qu'on souhaitera utiliser par la suite. c) Affectation d'attributs aux contrôles Pour assurer l'interactivité entre l'utilisateur et le programme, il faut affecter des variables aux contrôles. Ces variables seront des attributs de la classe CBoiteDialogDlg (l'assistant se charge de compléter la classe pour vous). On va définir ces les attributs pour les 3 contrôles suivants : Contrôle Attribut IP Address Control m_adresseip Ab Edit Control m_messageserveur Check Box m_checkautocontrol Affectation de m_adresseip : Clic droit sur le contrôle IP Address Control Dans le menu contextuel qui apparaît, sélectionnez Ajoutez une variable... 10/19

11 L'assistant Ajout de variable apparaît : L'assistant vous permet d'accéder à votre contrôle de 2 façons différentes depuis votre code : soit par valeur, soit par contrôle. Il est possible d'exploiter ces 2 choix simultanément. Ce choix correspond au champ Catégorie de la fenêtre ci-dessus : Value : le Nom de la variable permettra d'accéder directement au contenu de votre contrôle. * Ex : un champ d'édition, la variable permettra de lire le texte du champ saisi par l'utilisateur. Control : le Nom de la variable sera un objet avec une suite d'attributs et de méthodes spécifiques au contrôle. * Ex : un bouton, la variable permettra d'activer ou de désactiver l'accès au bouton (grisé). Pour revenir à notre IHM, configurez l'assistant comme ci-dessus, puis validez par Terminer. Nom de la variable : m_adresseip Type de variable : DWORD Catégorie : Value 11/19

12 Interprétation : m_adresseip est un nouvel attribut de la classe CBoiteDialogDlg. Cette variable contiendra l'adresse IP saisie par l'utilisateur dans le champs et son type sera DWORD (ex: sera codé 0xC0A80001). L'assistant a ajouté la variable dans la classe CBoiteDialogDlg. Recommencez la procédure pour les 3 derniers attributs : Contrôles Attribut Catégorie Type de variable Ab Edit Control m_messageserveur Value CString Check Box m_bcheckauto Value BOOL Check Box m_checkautocontrol Control CButton Les 2 derniers attributs sont associés volontairement au même contrôle : m_bcheckauto permettra de connaître la valeur du contrôle : coché (TRUE) ou décoché (FALSE), m_checkautocontrol permettra d'activer ou de désactiver le contrôle à travers la méthode EnableWindow( BOOL ). d) Ajout de la classe CClientTCPIP Le développement d'une classe à intégrer au projet doit se décomposer en 2 fichiers : le fichier d'entête.h qui doit contenir la directive #pragma once, le fichier implémentation.cpp Fichier ClientTCPIP.h #pragma once #include "afxsock.h" // include pour CSocket class CClientTCPIP { public: CClientTCPIP(void); ~CClientTCPIP(void); void Connecter( CString IP, unsigned short usport ); void Recevoir( CString& DateHeure ); void Close( void ); private: CSocket *pserveur; }; Pour ajouter ces 2 fichiers (.cpp et.h) au projet, placez-vous dans la fenêtre 3 et dans l'onglet explorateur de solutions. Clic droit sur le nom du projet BoiteDialog : dans le menu contextuel, cliquez sur Ajouter Element Existant. Indiquez les 2 fichiers et cliquez sur Ajouter. 12/19

13 Les 2 nouveaux fichiers doivent apparaître dans l'explorateur de solutions, et la classe CClientTCPIP sera présente dans Affichage de classes dès qu'elle aura été référencée dans un fichier du projet par un #include. e) Codage e.1) Interception d'un événement Dans notre contexte, un seul événement de l'utilisateur va lancer l'interrogation du serveur et l'affichage de la date : le clic sur le bouton Interrogation Serveur. L'évènement correspondant est BN_CLICKED. La mise en œuvre de l'interception de cet événement est prise en charge par l'assistant : il crée une méthode vierge associée à cet événement lorsque vous double cliquez sur le bouton Interrogation Serveur depuis l'ihm. Cette méthode sera exécutée dès que l'utilisateur cliquera sur le bouton. Vous obtenez la méthode : void CboiteDialogDlg::OnBnClickedBoutonServeur( ); 13/19

14 e.2) Échange de données entre Code et IHM D'un point de vue variable mémoire, l'ihm est totalement dissociée du code. Ainsi, lorsque l'utilisateur saisit des données dans un champ de l'ihm, elles ne sont pas enregistrées dans les attributs associés au champ! Le code doit lui-même mettre à jour le contenu de ses variables associées à l'ihm pour tenir compte des dernières modifications de l'utilisateur. Il faut utiliser la méthode UpdateData pour mettre à jour le contenu des attributs associés aux contrôles de l'ihm. Cette méthode attend 1 paramètre de type BOOL (type booléen de Windows). On distingue 2 mises à jour : IHM vers Code : paramètre vaut TRUE ex : l'utilisateur vient de saisir des données dans un champ de l'ihm, le code doit les lire. Code vers IHM : paramètre vaut FALSE ex : le code modifie le contenu d'un champ, l'ihm doit l'afficher. e.3) Codage de la Version simple Dans cette première version, vous vous contenterez de coder : l'échange avec le serveur, l'affichage de la chaîne retournée par le serveur dans le champ d'édition. void CboiteDialogDlg::OnBnClickedBoutonServeur( ) { // TODO : ajoutez ici le code de votre gestionnaire de notification de contrôle // Mise à jour des attributs depuis les champs de l'ihm UpdateData( TRUE ); // Création d'un Client TCP IP CClientTCPIP Serveur; IN_ADDR IP_Word; // L'adresse IP au format DWORD de l'ihm est placée dans la structure IP_Word.S_un.S_addr = m_adresseip; // Création d'une IP sous forme de chaîne de caractères pour Connecter. CString IP; IP.Format( "%d.%d.%d.%d", IP_Word.S_un.S_un_b.s_b4, IP_Word.S_un.S_un_b.s_b3, IP_Word.S_un.S_un_b.s_b2, IP_Word.S_un.S_un_b.s_b1 ); // Connexion au serveur Serveur.Connecter( IP, 3000 ); // Réception de la chaîne CString Temps( '\0', 100 ); Serveur.Recevoir( Temps ); // Déconnexion Serveur.Close(); // Copie de la chaîne reçue dans attribut du champ d'édition m_messageserveur = Temps; // Mise à jour de l'ihm (SINON NE S'AFFICHE PAS!) UpdateData( FALSE ); } 14/19

15 e.4) Codage de la version "Automatique" Avant de poursuivre, vous allez ajouter la méthode void InterrogerServeur( ) dans la classe CboiteDialogDlg et l'implémenter. Le code correspond à celui de la méthode précédente OnBnClickedBoutonServeur( ). Depuis l'explorateur de solutions (fenêtre 3 de l'ide), modifiez les fichiers BoiteDialogDlg.h et BoiteDialogDlg.cpp en conséquence. Cette "Version Automatique" tient compte de l'état de la coche (m_bcheckauto) pour interroger le serveur lorsque l'évènement clic bouton survient : m_bcheckauto : FALSE (décoché) État interrogation serveur (manuelle) Intitulé bouton : Interroger Serveur Interroge le serveur, affiche le résultat et s'arrête. m_bcheckauto : TRUE (coché) État interrogation serveur automatique toutes les secondes : mise en œuvre d'un timer. Intitulé bouton : Arrêter Désactive CheckAuto grâce à l'objet m_autochekcontrol (méthode EnableWindow( ) ). Toutes les secondes, interroge le serveur et affiche le résultat. L'interrogation automatique est réalisée grâce à un Timer d'une période de 1s (TimeOut). Le diagramme suivant décrit les états du bouton Interrogation Serveur en fonction des 2 évènements clic bouton et TimeOut 1s, et les actions réalisées. - Diagramme d'états du bouton Interrogation Serveur - Le fonctionnement du Timer est géré par Windows qui génère le message WM_TIMER lorsque l'événement de la seconde écoulée se produit (TimeOut). Cette événement est ensuite intercepté : soit directement et déclenche une fonction callback (pas idéal en POO). soit indirectement après avoir été transmis à l'application entière. Il déclenche une méthode callback créée par l'assistant. Le mise en oeuvre du Timer se limite finalement à l'utilisation de 2 méthodes (héritées de CWnd). Pour : - la création : SetTimer qui identifie le nouveau Timer, sa période et le type d'interception de WM_TIMER, - sa destruction (son arrêt) : KillTimer qui prend l'identifiant du timer comme paramètre. 15/19

16 L'évolution du code de la méthode associée au clic du bouton (OnBnClickedBoutonServeur) va se décomposer en 2 parties liées à l'état m_bcheckauto. void CBoiteDialogDlg::OnBnClickedBoutonServeur() { // TODO : ajoutez ici le code de votre gestionnaire de notification de contrôle // Nécessaire pour lire l'état des objets de l'ihm modifiés par l'utilisateur UpdateData( TRUE ); if ( m_bcheckauto == TRUE ) { // Case cochée : Interrogation automatique // Obtient l'intitulé (propriété Caption) du bouton CString TitreBouton; m_boutonserveur.getwindowtexta( TitreBouton ); if ( TitreBouton.Compare( "Arreter" )!= 0 ) { // Caption vaut Interrogation Serveur, on le change en Arrêter. m_boutonserveur.setwindowtexta( "Arreter" ); // Création et démarrage du Timer d'une période de 1s (1000ms) SetTimer( 1, 1000, NULL ); // Désactive l'accès à la coche Automatique m_checkautocontrol.enablewindow( FALSE ); } else { // Caption vaut Arrêter, on le change en Interrogation Serveur (état initial). m_boutonserveur.setwindowtexta( "Interrogation Serveur" ); // Arrête le timer et le détruit KillTimer( 1 ); // Réactive l'accès à la coche Automatique m_checkautocontrol.enablewindow( TRUE ); } } else { // Case décochée : Interrogation manuelle InterrogerServeur( ); } } A ce stade, la méthode de la gestion de l'évènement du clic bouton est terminée. Il reste à implémenter la méthode callback qui sera appelée dès qu'une période du timer sera achevée. e.5) Création d'une méthode callback avec l'assistant Dans notre contexte, on souhaite déclencher l'appel d'une méthode callback lorsque la période est terminée. La création de cette méthode est facilitée par l'assistant : 1- Sélectionnez l'ihm entière pour indiquer à l'assistant qu'on souhaite traiter l'interception de l'évènement du timer depuis CBoiteDialogDlg. 2- Cliquez sur l'icône messages : 3- Dans la liste des messages interceptibles par l'ihm, répérez WM_TIMER et ajoutez le nom de la méthode qui sera créée par l'assistant (OnTimer). Validez, le code de la méthode créée apparaît. 16/19

17 Création et association de la méthode Callback OnTimer au message WM_TIMER - La méthode a été ajoutée à la classe : 17/19

18 La méthode OnTimer sera appelée toutes les secondes dès que le timer sera actif. void CBoiteDialogDlg::OnTimer(UINT_PTR nidevent) { // TODO : ajoutez ici le code de votre gestionnaire de messages et/ou les paramètres par défaut des appels InterrogerServeur( ); // Appel de la méthode OnTimer qui gère les messages WM_TIMER Cdialog::OnTimer(nIDEvent); } e.6) Affichage d'une IHM Les IHM sont des classes héritées de CDialog. La documentation de CDialog nous informe (voir MSDN) que les IHM peuvent avoir 2 comportements : Modal : la fenêtre est affichée et bloque l'accès aux autres fenêtres du programme, Modeless : la fenêtre est affichée et son accès est simultané à la fenêtre appelante. Vous allez faire évoluer la méthode associée au clic du bouton Fermer pour afficher la fenêtre A Propos (CAboutDlg) générée automatiquement par l'assistant lors de la création initiale du projet BoiteDialog. void CBoiteDialogDlg::OnBnClickedOk() { // TODO : ajoutez ici le code de votre gestionnaire de notification de contrôle // Instanciation de la classe correspondant à l'ihm A Propos CAboutDlg Apropos; // Affichage de l'ihm en Modal APropos.DoModal(); // Quitte l'application (en renvoyant un message bien terminé à la méthode appelante) OnOK(); } Remarque : Le bouton Fermer correspond au bouton initial OK (cf. Modification de l'ihm) 3. Conclusion Le type de projet MFC - applications Boîtes de dialogue est idéal pour créer rapidement des IHM. Ce mini projet vous a présenté les bases de Visual pour développer en C++ natif : l'utilisation indispensable de la méthode UpdateData( ) pour assurer la lecture des données provenant de l'ihm mais aussi pour modifier les valeurs affichées sur l'ihm, toute IHM est une classe héritée de la classe de base CDialog (voir MSDN), idem pour ses contrôles. une classe d'ihm dispose de 2 méthodes dont les rôles peuvent sembler similaires : * la méthode constructeur de la classe (CBoiteDialogDlg) * la méthode OnInitDialog( ) Pour éviter une quelconque confusion, comprenez la chronologie d'appel de ces 2 méthodes : Le constructeur est exécutée lors de l'instanciation de l'objet, et bien avant que l'ihm soit dessinée (les contrôles de l'ihm n'existent pas encore à ce moment là). Le dessin de l'ihm fait appel à de nombreuses initialisations et créations d'autres objets. Lorsque les objets des contrôles de l'ihm ont été créés, la méthode OnInitDialog( ) est appelée. Ainsi, il est impossible d'initialiser un attribut d'un contrôle de l'ihm dans le constructeur car il n'existe pas encore à ce moment là! Il devra être initialisé dans la méthode OnInitDialog ( ). 18/19

19 Annexe 19/19