|
|
Ma première application avec Visual Studio 2005 (partie 1) |
|||||||
|
Partie 1
Partie 2
Et voilà, je viens d'installer la version finale de Visual Studio 2005. Il est tout neuf et je vais créer ma première application mobilité avec. Cette première application se doit d'être simple car il ne faut pas que le développement dure trop longtemps tout de même !
Quitte à utiliser VS2005, je vais créer un projet pour Windows Mobile 5 qui donnera à mon Pocket PC préféré (un Qtek 9100 sous WM5) un bloc note.
Avant toute chose vous devez installer le SDK Windows Mobile 5 pour Pocket PC sur votre machine si ce n'est pas déjà fait. Vous pouvez télécharger ce SDK à l'adresse suivante : http://www.microsoft.com/downloads/details.aspx?FamilyID=83A52AF2-F524-4EC5-9155-717CBE5D25ED&displaylang=en
Ce projet permettra d'aborder les thèmes suivants :
Création d'une interface qui se redessine correctement lorsque le Pocket
PC passe du mode portrait au mode paysage.
Lecture et écriture de fichiers texte.
Utilisation du clipboard pour copier/couper/coller du texte.
Manipulation de la sélection dans un Textbox.
Gestion du menu "éditer" qui activera/désactivera
ses élément dynamiquement suivant l'état de la sélection
de texte.
Utilisation d'un menu contextuel lié au Textbox.
Le but final étant de s'approcher le plus possible du programme notepad fournit avec Windows XP.
| Création du projet |
 |
Pour créer le projet, utilisez le menu "File" puis "New Project" |
 |
Attention : Par défaut VS 2005 va cibler le Compact Framework 2. Si vous souhaitez cibler le Compact Framework 1 vous devez choisir un type de projet avec la mention "(1.0)" Pour le moment je n'ai pu créer de projet pour CF 1.0 que sur des machines sur lesquelles VS 2003 (donc le CF 1.0) installé. Sur des machines où seul VS 2005 est installé, il semble que le SDK CF 1.0 soit manquant (à creuser donc).
|
 |
Le projet est composé à la base d'une fenêtre principale dont le nom est "Form1". "Form1" est par défaut la fenêtre principale de l'application et c'est elle qui est utilisée en premier lorsque l'application est lancée. Une bonne habitude à prendre est de changer le nom de cette fenêtre. Pour cela vous devez selectionner la fenêtre et faire apparaître la toolbox de gestion des propriétés. Avec un Visual Studio configuré pour un développeur Visual Basic, la touche F4 permet de faire apparaître la toolbox des propriétés ou alors utilisez l'icône ci-dessous :
|
 |
Perso j'appelle toujours la fenêtre principale de mes applications "FormMain". Dans la fenêtre de propriétés, il suffit de trouver la propriété "(Name)" et de changer "Form1" par "FormMain" ou le nom que vous voulez donner à cette fenêtre. Il faut maintenant indiquer à Visual Studio qu'il doit démarrer l'application sur "FormMain" et non plus sur "Form1". pour cela faites apparaître le toolbox "Solution Explorer" en cliquant sur l'icône suivante :
|
|
On va profiter de faire apparaître la toolbox "Solution Explorer" pour renommer le fichier "Form1.vb" en "FormMain.vb". Ce fichier contient la classe de la fenêtre que nous venons de renommer. Renommer le fichier n'est pas olbigatoire mais c'est plus logique de le faire. Une fois le fichier renommé il faut double-cliquer sur "My Project" (juste en dessous du nom du projet) pour faire apparaître la fenêtre de gestion des propriétés du projet. |
 |
 |
Dans cette fenêtre vous devez selectionner "FormMain" comme "Startup object". Cette opération va permettre à notre ancienne "Form1" devenue "FormMain" d'être lancée automatiquement lorsque l'application démarre. Pour le moment le projet n'a pas encore été sauvegardé. Pour le faire il suffit de cliquer sur l'icône ci-dessous :
|
|
Par défaut VS donne au projet et à la solution le même nom (ici Notepad5). Si vous projetez de placer dans la solution plusieurs projets je vous recommande de donner à la solution (ensemble de projets) un nom différent. Laissez la coche sur "Create directory for solution" qui permet de créer un dossier pour la solution et un sous dossier pour le projet (les choses sont plus claires ainsi). |
 |
Quand à l'emplacement (location) vous pouvez choisir n'importe quel dossier sur votre PC. Celui qui est proposé par défaut est le dossier "Projects" qui se trouve dans le dossier "Visual Studio" de votre dossier "Mes Documents". Ces dossiers sont créés par VS automatiquement.
Perso je créé encore un niveau de dossier supplémentaire. "PC" pour y placer mes projets pour Windows PC, "Pocket PC" pour mes projets Pocket PC, "Smartphone" pour les projets Smartphone et enfin "WinCE" pour les projects Windows CE.
A partir de là, le projet est créé , physiquement enregistré sur disque et avec une fenêtre principale qui porte un nom plus parlant que "Form1".
| Ce que l'on veut obtenir |
Voici les différents élements de l'écran que nous allons devoir créer :
 |
 |
 |
 |
 |
Nous avons donc besoin :
Tout ce petit monde devra se retailler correctement lorsque l'écran passera du mode portrait au mode paysage et aussi lorsque le clavier virtuel sera déployé (la zone de saisie devra remonter pour permettre la saisie dans toute la zone avec le clavier virtuel, c'est un peu la moindre des choses). Il faut aussi que les sous-menus du menu "Editer" soient activés ou désactivés lorsque l'utilisateur selectionne du texte, ou copie dans le clipboard des infos. Ce qui implique aussi la gestion du clipboard inter-applications. Enfin il faut permettre à l'utilisateur de choisir un fichier à éditer, et aussi de saisir le nom d'un nouveau fichier. Il faut aussi savoir lire et écrire des fichiers texte (là aussi, avec une application de type notepad, c'est la moindre des choses). |
||
Finalement, cette application extrêmement simple d'usage met en oeuvre quelques petites techniques très intéressantes que nous allons détailler tout de suite.
| Création de l'interface de FormMain |
 |
Vous allez sélectionner la fenêtre "FormMain", faire apparaître la toolbox des propriétés et modifier la propriété "Text" (qui correspond au titre de la fenêtre) en lui donnant comme valeur "Notepad WM5"
Vous allez faire apparaître le toolbox qui contient tous les contrôles que l'on peut placer sur une fenêtre. Pour cela cliquez sur l'icône ci-dessous :
La toolbox devrait apparaître.
|
Vous allez prendre un contrôle de type Textbox dans la toolbox et le placer sur "FormMain" comme indiqué. Vous allez donner à ce contrôle le nom "TXT_Texte", placer sa propriété "Multiline" à True et sa propriété "Scrollbars" à "Vertical".
Etape 3
Vous allez ajouter à la fenêtre un contrôle de type StatusBar et lui donner comme nom "SB_Fichier". Ce contrôle va automatiquement se placer en bas de la fenêtre (comme sur l'image).
 |
Par défaut, VS a placé une barre de menu lié à la fenêtre. Ce contrôle apparaît dans une zone spéciale en dessous de la fenêtre. Il est de bon ton de lui changer son nom "mainMenu1" en autre chose. Vous allez le nommer "LeMenu".
Vous allez ajouter un contrôle de type ContextMenu à la fenêtre et lui donner comme nom "CM_Editer". Ce menu contextuel sera ensuite attaché au contrôle "TXT_Texte" et sera affiché lors d'un appui long du stylet sur le contrôle (comme un click droit fait apparaître un menu contextuel sous Windows XP).
Vous allez ajouter un contrôle de type InputPanel qui permettra de travailler en prenant en compte le clavier virtuel (le SIP). Vous allez nomer ce contrôle "LeSIP" |
 |
Etape 7
Vous allez créer tous les menus et sous menus de l'application. Voici l'organisation à adopter :
|
Menu
|
Sous-Menu
|
(name)
|
| Fichier | Nouveau | MEN_Nouveau |
| Ouvrir | MEN_Ouvrir | |
| Enregistrer | MEN_Enregistrer | |
| Enregistrer sous... | MEN_EnregSous | |
| - | Laisser le nom par défaut | |
| Quitter | MEN_Quitter | |
| Editer | Annuler | MEN_Annuler |
| - | Laisser le nom par défaut | |
| Couper | MEN_Couper | |
| Copier | MEN_Copier | |
| Coller | MEN_Coller | |
| - | Laisser le nom par défaut | |
| Supprimer | MEN_Supprimer | |
| Format | Retour à la ligne automatique | MEN_RetourLigneAuto |
| Police | MEN_Police | |
| Sous-menu Police de Format | Petite | MEN_PolicePetite |
| Moyenne | MEN_PoliceMoyenne | |
| Grande | MEN_PoliceGrande | |
| Très grande | MEN_PoliceTresGrande |
Pour créer les différents menus et sous-menus il suffit de saisir élément par élément l'arborescence des menus. Pour chaque élement, il faut saisir dans la fenêtre de propriétés le nom de chacun.
 |
 |
Comme par défaut la police sera de taille moyenne, on coche le sous-menu "Moyenne" du menu "Format/Police" (c'est juste un indicateur pour l'utilisateur).
De la même manière, vous devez créer les élements du menu contextuel :
|
Eléments du menu contextuel
|
(name)
|
|
| Annuler | CMEN_Annuler |
 |
| - | Laisser le nom par défaut | |
| Couper | CMEN_Couper | |
| Copier | CMEN_Copier | |
| Coller | CMEN_Coller | |
| - | Laisser le nom par défaut | |
| Supprimer | CMEN_Supprimer | |
A ce stade tous les élements de l'interface ont été créé. Il ne reste plus qu'à écrire le code qui va les mettre en musique.
| Le Textbox doit être placé correctement suivant plusieurs scénarios |
Pour que les contrôles se comportent correctement il faut lister les différents cas de figure qui peuvent se présenter et y répondre.
La rotation de l'écran
La première chose à prendre en compte est la rotation de l'écran. Depuis Pocket PC 2003 SE l'affichage peut être de 240x320 (portrait, le mode classique des Pocket PC) ou 320x240 (paysage). Nous n'allons pas traiter ici des écrans VGA.
 Portrait |
 Paysage |
Il y a deux manières de répondre à ce changement de comportement. La première consiste à répondre à l'événement "Resize" de chaque fenêtre et de replacer les contrôles suivant la nouvelle taille de la fenêtre. Cette solution était la seule disponible avec le Compact Framework 1 (voir par exemple le logiciel DoWeek ou Afeyre). Cette solution est la plus fastidieuse car il faut tout replacer a chaque changement d'orientation.
La seconde solution, disponible à partir du Compact Framework 2, est de paramétrer correctement les propriétés "Anchor" et/ou "Dock" pour que ce soit le CF 2 lui même qui s'occupe de retailler les contrôles à chaque changement d'orientation. Pour notre premier exemple, c'est cette solution que nous allons utiliser.
Il est possible depuis le designer de form de placer les contrôles. Mais je trouve que le résultat final est parfois un peu approximatif, les marges de gauche et de droite des contrôles sont parfois différentes alors que dans le designer elles semblent identiques. La plupart du temps je pose les contrôles n'importe où dans la fenêtre et je me charge de les placer correctement depuis le code en leur donnant à ce moment là leurs propriétés "Anchor" et/ou "Dock". Cette méthode est bien plus précise.
L'affichage du clavier virtuel (le SIP)
La seconde chose à prendre en compte est le fait que le clavier virtuel peut à tout moment être affiché par l'utilisateur. Lorsque cela arrive il faut aussi retailler et repositionner les contrôles car dans les faits c'est comme si la fenêtre venais de changer de taille. Si cette opération n'est pas effectuée, le SIP s'affiche par dessus la fenêtre active masquant parfois des informations ou des commandes importantes.
Il faut donc savoir quand le SIP est affiché/caché et pour cela, il existe un contrôle qui permet de le manipuler et de savoir, via un événement "Enabled" s'il est affiché ou non. Les propriétés de ce contrôle fournissent des informations sur la taille de la zone SIP. C'est le contrôle "InputPanel" que vous avez placé sur la fenêtre un peu plus tôt.
Maintenant nous avons tout pour réagir correctement aux deux changements qui peuvent venir modifier la taille de la fenêtre principale de notre application, le changement d'orientation de l'écran et l'affichage du SIP.
Nous allons tout de suite taper le code qui va effectuer ces modifications d'interface. Nous allons placer ce code dans une procédure "MyResize" car il va être appellé à plusieurs endroit de l'application.
Procédure MyResize
La procédure "MyResize" est privée à la fenêtre "FormMain". Le principe de cette procédure est simple, suivant l'état du SIP on replace les contrôles de la fenêtre en n'oubliant pas de bien stipuler la propriété "Anchor" qui permet d'ancrer les contrôles et donc de changer automatiquement leur taille suivant le redimensionnement de la fenêtre.
Dans notre cas de figure il n'y a que le contrôle Textbox "TXT_Texte" à ancrer car la zone de statut en bas est automatiquement docké en bas, donc rien à dire à son sujet. A chaque changement de l'état du SIP il suffit de replacer et retailler le contrôle "TXT_Texte" en lui indiquant bien de s'ancrer sur ses 4 coins.
La propriété "Enabled" du contrôle InputPanel indique quel est l'état du SIP. Si elle est égale à True, le SIP est affiché, sinon il ne l'est pas. En modifiant par programme cette propriété, on fait apparaître/disparaître le SIP à volonté.
La propriété "VisibleDesktop" du contrôle InputPanel donne la position et la taille du SIP affiché. On s'en sert donc pour déterminer la zone visible de la fenêtre lorsque le SIP est affiché.
Au final, le résultat sera le suivant :
 |
 |
Comme la zone de statut n'est pas très importante on ne replace que la zone de saisie "TXT_Texte".
Voici le code de "MyResize"
Comme vous pouvez le constater, rien de bien compliqué là dedans.
Ce code doit être appellé lorsque le SIP change d'état, c'est à dire lorsque l'événement "EnabledChanged" du contrôle InputPanel est activé. Il suffit donc d'appeller la procédure "MyResize" en réponse à cet événement.
Il faut aussi appeller "MyResize" en réponse à l'événement "Load" de FormMain pour placer correctement les contrôle lors du chargement de la fenêtre.
Une partie du code est flou car ce sont des éléments qui seront expliqués un peu plus tard dans cet article. Chaque chose en son temps...
C'est terminé pour cette première partie. La seconde partie sera mise en ligne très rapidement.
Dans la seconde partie nous verrons comment sélectionner un fichier et comment lire/écrire un fichier texte.
|
|
