Prise en main : Savoir maîtriser Visual Studio

Applies to Windows and Windows Phone

Savoir maîtriser Microsoft Visual Studio

Revenons au projet MyApp que vous avez créé plus haut et découvrons comment vous y retrouver dans l’environnement de développement intégré (IDE) de Visual Studio.

Les développeurs Xcode reconnaîtront l’affichage par défaut présenté dans la figure qui suit, avec notamment les fichiers sources dans le volet gauche, l’éditeur (soit l’interface utilisateur, soit le code) dans le volet central et les contrôles et leurs propriétés dans le volet droit.

Environnement de développement Xcode

Microsoft Visual Studio est similaire mais, dans l’affichage par défaut, les contrôles apparaissent sur le côté gauche à l’intérieur de la boîte à outils. Les fichiers sources se trouvent dans l’Explorateur de solutions sur le côté droit et les propriétés dans Propriétés sur le côté droit. Cette disposition est illustrée dans la figure suivante.

Environnement de développement Visual Studio

Remarque  Comme vous pouvez le constater, les fichiers répertoriés dans la colonne de droite de l’affichage Explorateur de solutions sont répartis dans trois sections principales : MyApp.Windows, MyApp.WindowsPhone et MyApp.Shared. La présence de ces sections s’explique par le fait qu’il s’agit d’une application Windows universelle. Les fichiers sources peuvent figurer sous MyApp.Shared pour les deux projets ou sous la section propre à la plateforme, selon les besoins.

Visual Studio vous offre la possibilité de réorganiser les volets si vous souhaitez placer les fichiers sources à gauche et les contrôles à droite. Par exemple, pour déplacer la boîte à outils du côté gauche vers le côté droit de l’écran, appuyez longuement sur la barre de titre du volet Boîte à outils, commencez par la déplacer, puis déposez-la à l’emplacement cible situé à l’extrême droite, au milieu de l’écran. Visual Studio dévoile une zone sombre qui vous indique où la boîte à outils est ancrée après que vous l’avez déposée.

Pour que votre environnement de développement intégré apparaisse comme dans la figure précédente, procédez comme suit :

  1. Dans l’Explorateur de solutions, appuyez longuement (ou cliquez avec le bouton droit) sur MainPage.xaml sous MyApp.Windows pour l’ouvrir.
  2. Sur le côté gauche, appuyez sur la Boîte à outils pour afficher celle-ci. Dans la barre de titre du volet Boîte à outils, appuyez ensuite sur l’icône Punaise pour l’épingler conformément à la figure ci-dessous.
Épinglage de la boîte à outils dans Visual Studio

Haut

Ajout de contrôles, définition de leurs propriétés et réponse aux événements

À présent, ajoutons quelques contrôles à votre projet MyApp. Nous allons ensuite changer certaines propriétés des contrôles et écrire un code pour répondre à l’un des événements du contrôle.

Pour ajouter des contrôles dans Xcode, vous devez ouvrir le fichier .xib souhaité, puis ajouter des contrôles (par exemple, un bouton rectangulaire à coins arrondis et un libellé comme dans l’exemple ci-dessous). Dans Visual Studio, les fichiers .xaml sont semblables aux fichiers .xib.

Conception de l’interface utilisateur dans Xcode

Tentons une opération similaire dans Visual Studio. Dans la boîte à outils, appuyez longuement sur le contrôle Button, puis déposez-le dans l’aire de conception du fichier MainPage.xaml. Faites la même chose avec le contrôle TextBlock comme le montre la figure ci-dessous.

Conception de l’interface utilisateur dans Visual Studio

Notez que, contrairement à Xcode, qui stocke les informations de disposition et de liaison dans un fichier .xib file, dans Visual Studio, les fichiers .xaml affichent ces mêmes informations dans un langage déclaratif enrichi et modifiable. Pour plus d’informations sur le langage XAML (Extensible Application Markup Language), voir Vue d’ensemble du langage XAML. Tous les éléments affichés dans le volet de conception sont définis dans le volet XAML. Le volet XAML permet un contrôle plus affiné (si nécessaire) et d’accélérer votre rythme de développement de code à mesure que vous en apprenez davantage. Pour le moment, concentrons-nous simplement sur le volet de conception et les propriétés.

Changeons à présent le contenu et le nom du bouton. Pour changer le contenu du bouton dans Xcode, vous devez modifier la valeur de la zone Title (Titre) comme le précise la figure qui suit.

Fenêtre des propriétés dans Xcode

Dans Visual Studio, vous procédez de manière similaire. Dans le volet de conception, appuyez sur le bouton pour lui donner le focus. Ensuite, pour modifier le contenu du bouton, dans le volet Propriétés, remplacez la valeur de la zone Contenu"Button" par "Press Me". Enfin, pour changer le nom du bouton, modifiez la valeur de la zone Nom de "<Sans nom>" à "myButton", comme dans la figure ci-dessous.

Fenêtre des propriétés du bouton dans Visual Studio.

Écrivons maintenant un code pour changer le contenu du contrôle TextBlock en "Hello, World!" après que l’utilisateur a appuyé sur le bouton.

Dans Xcode, l’association du comportement d’un événement à un contrôle nécessite que vous écriviez un code, puis associiez ce code au contrôle, comme dans le code et la figure qui suivent.


// Objective-C header.

-(IBAction) buttonPressed: (id) sender;


// Objective-C implementation.

-(IBAction) buttonPressed: (id) sender {

}

Connexion d’un bouton avec un événement dans Xcode

Comme le montre la figure ci-dessous, dans Xcode, vous pouvez également associer un événement de code avec un contrôle.

Autre moyen de connecter un bouton avec un événement dans Xcode

Visual Studio est très semblable. En haut à droite de la fenêtre Propriétés se trouve un bouton en forme d’éclair. C’est là que sont répertoriés les événements associés au contrôle sélectionné, comme le montre la figure ci-dessous.

Liste des événements du bouton dans Visual Studio.

Pour ajouter du code à l’événement Click du bouton, dans le volet de conception, commencez par appuyer sur le bouton. Appuyez ensuite sur le bouton identifié par un éclair, puis appuyez longuement sur la zone en regard du libellé Click. Visual Studio ajoute le texte "myButton_Click" à la zone Click, puis ajoute et affiche le gestionnaire d’événements correspondant dans le fichier MainPage.xaml.cs, comme dans le code qui suit.


private void myButton_Click(object sender, RoutedEventArgs e)
{

}

Changeons maintenant le nom du contrôle TextBlock. Dans Xcode, vous écrivez le code suivant et associez le contrôle à sa définition, comme illustré dans la figure suivante.


// Objective-C header.

IBOutlet UILabel *myLabel;

Connexion d’un libellé avec sa définition dans Xcode

Comme le montre la figure ci-dessous, dans Xcode, vous pouvez également associer un code avec sa définition.

Autre moyen de connecter un libellé avec sa définition dans Xcode

Dans Visual Studio, vous devez suivre la procédure décrite dans la figure ci-dessous :

  1. Appuyez sur l’onglet du fichier MainPage.xaml.
  2. Dans le volet de conception, appuyez sur le contrôle TextBlock.
  3. Dans le volet Propriétés, appuyez sur le bouton doté d’une clé à molette pour afficher ses propriétés.
  4. Dans la zone Nom, changez et remplacez "<Sans nom>" par "myLabel".
Fenêtre des propriétés du libellé dans Visual Studio.

Ajoutons maintenant un peu de code à l’événement Click du bouton. Pour cela, appuyez sur le fichier MainPage.xaml.cs et ajoutez le code suivant au gestionnaire d’événements myButton_Click.


private void myButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    myLabel.Text = "Hello, World!";
}

Le code précédent ressemble à ce vous écririez en langage Xcode, soit à ce qui suit.


-(IBAction) buttonPressed: (id) sender {
    myLabel.text = @"Hello, World!";
}

Enfin, pour exécuter l’application, dans Visual Studio, assurez-vous que MyApp.Windows est en gras (ce qui indique qu’il s’agit du projet de démarrage par défaut), puis appuyez successivement sur le menu Déboguer et sur Démarrer le débogage (ou appuyez simplement sur F5). Une fois l’application démarrée, appuyez sur le bouton "Press Me". Le contenu de l’étiquette "TextBlock" est remplacé par "Hello, World!" comme le montre la figure suivante.

Résultats de l’exécution de la première procédure : Hello, World!

Pour quitter l’application, revenez à Visual Studio, appuyez sur le menu Déboguer, puis sur Arrêter le débogage (ou appuyez simplement sur Maj+F5).

Vous pouvez répéter ce processus pour le projet Windows Phone en suivant exactement les mêmes étapes, mais cette fois pour le fichier MainPage.xaml, qui se trouve sous la branche MyApp.WindowsPhone. Il va de soi que si la fonction de votre application se limitait à cela, vous pourriez très bien faire glisser le fichier MainPage.xaml vers la branche MyApp.Shared et supprimer le fichier MainPage.xaml figurant sous la branche MyApp.WindowsPhone. De cette manière, le fichier MainPage.xaml serait partagé entre les deux plateformes et cela vous ferait gagner un peu de temps.

Étape suivante

Prise en main : Contrôles courants

 

 

Afficher:
© 2014 Microsoft