Windows Phone | Episode 2

Par sokitaa - Aout, 20 2013

Hola Amigos !! Ah  si seulement vous saviez à quel point vous m’avez manqué. Et vous savez quoi, un jour j’ai assisté à une petite discussion avec des amis et chacun d’eux  demandait l’ horoscope de l’autre:

le premier dit : “Moi mon horoscope c’est lion”

le deuxième dit en souriant : “Moi c’est poisson”

et le troisième (tout en hésitant ) et puis il se lâche et dit: “Mon horoscope c’est Poulet !!”  o_o

La morale à retenir ici est qu’il faut jamais se prononcer  sur quelque chose qu’on ne connaît pas ou qu’on ne maîtrise pas assez.  

Et c’est ce qui risque de nous arriver si le “stand by” continue encore car il y a beaucoup de choses à dire sur Windows Phone,  mais bon maintenant je suis là et je ne me ferai plus rare promis .

De plus  j’ai choisi de devenir une geekette et pas une femme au foyer alors j’assume. ;-) #NeverGiveUp !!

Ainsi revenons à nos moutons, l’article Windows Phone| Episode 1 a cartonné, les lecteurs étaient impatients de connaître  la suite enfin nous y sommes.  

Et devinez quoi ??!! Nous allons pouvoir développer des applications pour Windows Phone grâce à notre langage préféré, le C#. Bonne nouvelle non ? Mais il faut bien noter que c’est possible de le faire  avec les langages comme Visual Basic, C++, etc. Donc pas de panique tout le monde s’y retrouve ;-).  

Dans ce tutoriel  nous allons débuter par un « Hello Word !! » sur Windows Phone 8.0, comme le recommande le rituel des geeks, mais tout d’abord présentons notre environnement de développement : Microsoft Visual Studio Express 2012 pour Windows Phone.  

Alors guys on peut commencer le tutoriel « Hello Word »??  Let’s Go !!!  

Notre IDE (Integrated development environment) n’est rien d’autre que le Visual Studio 2012 Express pour Windows Phone et on peut le télécharger gratuitement sur ce lien  (choisir le SDK 8.0)   

Le Windows Phone SDK 8.0 vous permet de développer des applications pour Windows Phone 8 et 7.5.  

Nous allons donc créer un nouveau projet en cliquant sur le lien (comme indiqué sur la capture d’écran), ou de manière plus classique par le menu Fichier > Nouveau projet.

À ce moment-là, Visual Studio nous ouvre sa page de choix du modèle du projet :

Nous allons choisir de créer une Application Windows Phone. Remarquons que le choix du langage est possible entre Visual Basic, Visual C# et Visual C++. Nous choisissons évidemment le C# car c’est le langage que nous maîtrisons. J’en profite pour nommer mon projet « HelloWorld »… (Ici, personne ne se doute quel type d’application nous allons faire).

Enfin, après avoir validé la création du projet, il nous demande la version à cibler et là on choisit 8.0 :

Et voilà !! C’est tellement simple notre projet vient d’être créé.   

A la création du projet « HelloWord » cette nouvelle page composée de 4 onglets s’affiche, nous allons les décrire un à un :

1. La boite à outils : Elle affiche les icônes des contrôles et des autres éléments que vous pouvez ajouter aux projets Visual Studio par exemple “ZoomBar” pour gestion automatique du zoom, “Copyright” pour conserver les droits d’auteur etc.

2. L’aperçu au moment de la conception : c’est une fonctionnalité qui permet de visualiser le design lors de la phase de conception.

3. Fichier Xaml : il affiche le code Xaml correspondant à l’onglet numéro 2  (ci-dessous). En effet le langage XAML (Extensible Application Markup Language) est un langage déclaratif. Il permet d’initialiser des objets, de définir des propriétés d’objets et la création d’une interface utilisateur.  

4. L’explorateur de solutions :  Il nous  offre une vue organisée de vos projets et de leurs fichiers, ainsi qu’un accès aux commandes qui s’y rapportent (par exemple ajouter,modifier, supprimer ou déplacer,etc.)

5. 

Maintenant on se positionne sur le numéro 2 c’est-à-dire sur le fichier Xaml. Dans ce fichier nous avons déjà du code existant si vous vous rappelez bien lors de la création du projet on a choisi un thème « Application Windows Phone » d’où l’existence de ce code.  

Alors on cherche dans le fichier xaml la balise :

 <StackPanel>     </StackPanel>  

Juste avant la balise </StackPanel>   (car il se peut que dans cette balise qu’il ait du code) on met ce code ci-dessous:

1. La 1ière ligne de code : Nous demandons d’ajouter dans la page le contrôle TextBlock et de positionner sa propriété Text à la chaine de caractères “Saisir votre nom”. Ce contrôle sera aligné au centre

2. La 2ième ligne de code correspond à un champ de texte pour saisir un nom.  

3. La 3ième  ligne de code  correspond à un bouton pour valider les données saisies.

4. Et enfin la 4ième  ligne de code est un bloc texte  qui n’a pas de valeur pour le moment  on donne juste le nom et la couleur du texte avec le « Foreground »

Et voici le résultat obtenu :

                                                                                     

Maintenant nous avons fini avec le fichier MainPage.xaml on passe au code C# (j’ai hâte moi !!).  On modifie le fichier MainPage.xaml.cs.  Dès qu’on double clic sur le bouton « valider » on nous mène vers le fichier MainPage.xaml.cs, le curseur se pointe exactement sur le corps de la méthode « Button_Click » :

On ajoute cette ligne de code « resultat.Text = ‘’Bonjour ‘’ +nom.text » sur la méthode « Button_Click » :

Je m’explique dans le fichier xaml nous avions ajouté une balise <TextBlock x:Name=”resultat” Foreground=”Red” />, on utilise ce textBlock « resultat » pour modifier la valeur de l’attribut « resultat.Text » en ajoutant  la chaîne de caractère «Bonjour », ensuite  « + » pour concaténer les deux chaînes de caractères et enfin « nom.Texte » qui récupère  la valeur que l’utilisateur a saisi dans le <TextBox x:Name=”nom”  /> .

Sur 5 lignes de code on a  implémenté notre interface graphique et contrôler l’évènement sur un clic sur le bouton  (Waouh c’est génial non ?!!)  

Maintenant on exécute la solution et voici le résultat obtenu :

A bientôt pour d’autres tutos !! Muchas Gracias !!