Browsed by
Month: November 2011

MessageBox avancée

MessageBox avancée

Pour mon dernier développement (MyEncyclopedia), je souhaitais afficher une boite de dialogue quand un utilisateur clique sur un lien pour lui indiquer qu’il allait sortir de l’application. J’ai donc pour cela utilisé le contrôle MessageBox de la façon suivante :

if (MessageBox.Show(Resources.OpenInBrowserMsg,
Resources.OpenInBrowser, MessageBoxButton.OKCancel)
==MessageBoxResult.OK)

 

Bip, bip, bip…

La boite d’alerte s’affiche bien, j’ai bien les deux boutons que je souhaite : “ok” et “cancel”, mais un lors de l’affichage de celle-ci, un bip retentit et/ou le téléphone vibre, ce qui peut être très gênant au bout d’un moment.

 

Comment modifier le comportement de la messagebox ?

Si on regarde un peu la msdn, on remarque que la messagebox silverlight est très peu configurable, on ne peut que modifier les deux textes afficher et masquer ou non le bouton cancel, aucune autre possibilité. On ne peut donc ni supprimer le bip, ni changer le texte des boutons, etc…

 

Solution

On pourrait envisager de réimplémenter la messagebox, c’est une possibilité, mais que nous n’allons pas retenir aujourd’hui car il est possible d’accéder aux fonctionnalités avancés des MessageBox par un moyen détourné et ce, grâce à notre ami XNA !

Si on regarde l’assembly Microsoft.Xna.Framework.GameServices, on remarque que l’objet Guide possède des méthodes assez intéressantes :

Une méthode nous intéresse tout particulièrement ici : BeginShowMessageBox.

Cette méthode permet d’afficher une messagebox native, de façon asynchrone, avec en paramètres :

  • title : Titre de la boîte de message
  • text : Texte qui sera affiché par la boîte de message
  • buttons : Légendes associées aux boutons de la boîte de message. Le nombre maximum de boutons est de 2 sur Windows Phone.
  • focusButton : Index de base 0 définissant le bouton mis en évidence.
  • icon : Type d’icône affichée dans la boîte de message.
  • callback : Méthode à appeler une fois que l’opération asynchrone est terminée.
  • state : Objet unique créé par l’utilisateur qui identifie cette requête.
On retrouve Title et Text qui correspondent mutuellement aux paramètres “caption” et “messageboxtext” du mode Silverlight. Une seule différence, le texte ne peut dépasser 256 caractères, sinon une exception est lancée.
Buttons est ici beaucoup plus évolué que notre MessageBox Silverlight, nous avons la possibilité de spécifier les textes des boutons, par exemple, on peut afficher :
Voici le code associé :
Microsoft.Xna.Framework.GamerServices.Guide.BeginShowMessageBox(
"Aimez vous Fuse ?",
"Avez vous acheté la super application Fuse ?",
new string[] { "évidemment !", "c'est quoi ?" },
0,
Microsoft.Xna.Framework.GamerServices.MessageBoxIcon.Alert,
null,
null);

Ceci nous offre donc énormément de nouvelles possibilités !

Attention toutefois à localiser vos boutons !

Mais le bip, comment je le supprime ?

Pour supprimer le bip ou la vibration, il suffit de changer l’icône… Ok je sais c’est pas super logique, mais c’est comme cela. En fait il faut bien comprendre que XNA est une plateforme commune entre Windows, XBox et Windows Phone. Dans le monde windows, nous avons l’habitude d’afficher des icônes ‘warning’, ‘alert’, etc.. à gauche de la boite de dialogue, ce qui n’est pas super top pour un affichage mobile ou la largeur de l’écran est déjà contraignante. La distinction entre une boite de dialogue normale et une boite de dialogue warning/alert, se fait donc au son/vibration. Pour supprimer le son, il suffit donc de ne pas typer la messagebox :

 

Microsoft.Xna.Framework.GamerServices.Guide.BeginShowMessageBox(
"Aimez vous Fuse ?",
"Avez vous acheté la super application Fuse ?",
new string[] { "évidemment !", "c'est quoi ?" },
0,
Microsoft.Xna.Framework.GamerServices.MessageBoxIcon.None,
null,
null);

Et voila, plus aucun bip o/

Comment rendre ma boite de dialogue synchrone ?

Pouvoir disposer d’une boite de dialogue asynchrone est plutôt cool, mais dans la majorité des cas, on attendra d’elle qu’elle soit synchrone. Pour cela il suffit de récupérer le résultat de l’appel asynchrone et d’attendre la fin de son exécution.

IAsyncResult result = Microsoft.Xna.Framework.GamerServices.Guide.BeginShowMessageBox(
"Aimez vous Fuse ?",
"Avez vous acheté la super application Fuse ?",
new string[] { "évidemment !", "c'est quoi ?" },
0,
Microsoft.Xna.Framework.GamerServices.MessageBoxIcon.None,
null,
null);

result.AsyncWaitHandle.WaitOne();

et nous voilà donc avec une message box native, synchrone et customisable !

Tester le résultat de la boite de dialogue

Dernier point, si vous souhaitez tester le résultat de votre boite de dialogue (savoir sur quel bouton l’utilisateur à cliquer), il suffit de d’appeler la méthode EndShowMessageBox après le et de récupérer le résultat :


int? choice = Microsoft.Xna.Framework.GamerServices.Guide.EndShowMessageBox(result);
if(choice.HasValue)
{
if(choice.Value==0)
{
//l'utilisateur a cliqué sur le premier bouton
}
}

Et c’est fini pour aujourd’hui !

Récapitulatif

  • Ajouter la référence Microsoft.Xna.Framework.GameServices
  • Ecrire le code suivant :
IAsyncResult result = Microsoft.Xna.Framework.GamerServices.Guide.BeginShowMessageBox(
"Aimez vous Fuse ?",
"Avez vous acheté la super application Fuse ?",
new string[] { "évidemment !", "c'est quoi ?" },
0,
Microsoft.Xna.Framework.GamerServices.MessageBoxIcon.None,
null,
null);

result.AsyncWaitHandle.WaitOne();

int? choice = Microsoft.Xna.Framework.GamerServices.Guide.EndShowMessageBox(result);
if(choice.HasValue)
{
if(choice.Value==0)
{
//l'utilisateur a cliqué sur le premier bouton
}
}
  •  Penser à localiser vos boutons
Comment justifier du texte sous Windows Phone

Comment justifier du texte sous Windows Phone

Suite à une demande sur le forum MSDN Windows Phone, voici un court article pour montrer comment justifier du texte sous Windows Phone.

TextBlock ?

L’élément TextBlock dispose bien une propriété TextAlignment mais ne permettant que trois valeurs : Left (gauche), Center(centré), Right (droite).

Visuellement, cela donne :

TextAlignment : Left, Center, Right

 Or nous souhaitons à la fois aligner le texte à gauche et à droite en jouant sur la largeur des espaces, ce qui nous est pas possible avec le contrôle TextBlock

Solution : RichTextBlock

Depuis Mango et le passage à Silverlight 4, nous pouvons maintenant utiliser un nouvel élément nommé RichTextBlock. Cet élément permet tout comme le TextBlock d’afficher du texte, mais celui-ci à beaucoup plus de possibilité de mise en forme, si on devait comparer, RichTextBlock serait au TextBlock ce que Word serait au Bloc Note.

Si nous regardons la propriété TextAlignment de RichTextBlock, nous pouvons voir qu’il dispose de l’alignement justifié (Justify)

Grâce à cet élément nous pouvons donc afficher du texte justifié maintenant.

<RichTextBox TextAlignment="Justify">
<Paragraph>
<Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non lectus urna, id commodo metus. Integer id metus augue, non facilisis lectus. Fusce massa purus, varius ut auctor ac, sagittis a massa. Sed sed justo velit, at molestie orci. Nullam malesuada nibh et massa hendrerit mattis. Nunc id laoreet nisl. Sed vulputate lobortis mi nec mollis."/>
</Paragraph>
</RichTextBox>

et voici le rendu :

Astuce Blend

Pour modifier le texte du RichTextBlock contrairement au TextBlock, vous allez devoir faire clic droit sur l’élément et sélectionner “Edit Text”

 

Pour aller encore plus vite, vous pouvez utiliser la touche F2 qui permet d’éditer le texte de n’importe quel contrôle de type texte !
 

 

 

 

Windows Phone Design Day

Windows Phone Design Day

Demain aura lieu au microsoft Campus un évènement très intéressant pour tous les développeurs et concepteurs Windows Phone : Windows Phone Design Day.

De la naissance de métro jusqu’à la perception de performance, plusieurs sessions vont vous permettre de mieux prendre en main la plateforme mobile de Microsoft mais aussi de vous guider dans les bonnes pratiques.

 Le programme

10h00 : Bienvenue
10h15 : Metro – the foundation
·         comprendre Metro
·         agencement, typographie et animation
·         l’expérience utilisateur sur un téléphone
11h00 : pause
11h15 : Think – sketch, wireframe, prototype
·         brainstorming créatif
·         techniques de sketching et de wireframing
·         explorer de potentiels prototypes
12h00 : Design – visual, interaction, motion
·         langage visuel et inspiration
·         Contrôles, design d’interaction, et patterns d’application
·         ajout  d’animation pour mettre en valeur
12h45 : déjeuner
14h00 : Refine – best practices
·         bonnes pratiques de design d’application
·         améliorer les performances perçues
·         profiter de Metro (vignettes, cartes)
14h45 : Build – make it XAML
·         importer du contenu dans Expression Blend
·         agencement, texte et animation
·         contrôles, Data binding et développement
15h30 : Pause
15h45 – 17h45 : Workshop
·         démarrer votre première application
·         ou venez avec vos projets pour vous faire conseiller
 

L’inscription

Pour vous inscrire, il suffit de se rendre sur ce lien :

https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032496878&Culture=fr-FR

Et si je ne peux pas venir

Si comme moi, vous avez des impératifs professionnels impossible à déplacer ou encore si vous aussi la SNCF de se mettre en grève le jour de l’évènement, ne vous inquiétez pas, la majorité des sessions sont déjà webcastées sur channel9, voici donc le programme (les vidéos datant de 2010, quelques informations ont évoluées depuis) :

Ana and Miles, the Windows Phone personas (  Tracey Lovejoy, 3:33 )
The Metro Design Language, the inspiration  ( Jeff Fong, 29:48)
Deconstructing a Windows Phone application part 1: Controls  (  Rhon Manlapaz,  Ryan Bickel, 17:40)
Deconstructing a Windows Phone application part2: Animation ( Jeff Arnold,  34:22 )
Deconstructing a Windows Phone application, part 3: Target Sizes (  Tirthankar Sengupta,  13:39 )
Deconstructing a Windows Phone application, part 4: Globalization (Ayman Raslan, Franklin Yow : 37:45 )
Deconstructing a Windows Phone application, part 6: Perceived performance  (19:45 )
Designer insights into Panorama and Pivot ( Chad Roberts, Amy Alberts, 32:18)
Making Audio Sing on Windows Phone (Matthew Bennett, 34:26 )
Windows Phone Voice ( Karen Kesler, 32:00 )
Designer Resources: Expression Blend Overview and Roadmap ( Celso Gomes, Peter Blois, 41:20 )
Designer Resources:  Windows Phone Documentation ( Chris Kilbourn, 11:18 )
Designer Resources: Windows Phone Design Templates ( Chad Roberts, 04:01 )

 

Bon visionnage !

Jouons avec le presse papier

Jouons avec le presse papier

Depuis Mango, il est possible d’accéder directement au presse-papier.

Cette fonctionnalité a été ajouté à Silverlight 4 et suite au portage de ce dernier sous windows phone 7.5, nous y avons maintenant accès, mais… avec quelques restrictions.

Présentation

Le presse papier est accessible par l’objet statique Clipboard, ce dernier expose trois méthodes : ContainsText, SetText et GetText et c’est tout ! Nous voyons d’ores et déjà une première limite : on ne peut gérer que du texte (unicode), pas d’images ou de données binaires contrairement à la version WPF qui elle peut gérer de l’audio, des images, des fichiers ou des données binaires.

Pour un usage Silverlight, cette restriction est de toute façon peu gênante (n’oublions pas qu’une application silverlight doit être portable et non restreinte à un système d’exploitation).

Limitation sous Windows Phone

L’accès aux fonctions GetText et SetText sont très restreinte en Silverlight Web/Desktop, par défaut, elle demande l’autorisation à l’utilisateur s’il veut bien que l’application modifie le presse-papier, de plus il est obligatoire que l’appel à ces fonctions résultent d’une interaction (OnClick, etc…). Si l’on ne souhaite pas avoir ces restrictions, il faut passer en mode Trusted Application et cette limitation disparaît.

Sous windows phone, le comportement est différent. Déjà nous avons accès à n’importe quel moment et sans restriction à ClipBoard.SetText afin de modifier le presse-papier, l’utilisateur n’étant pas notifié du changement de presse papier.

Il pourrait donc être possible pour une application malveillante de mettre de la pub dans le presse-papier, j’espère ne pas vous avoir donné de mauvaises idées !

Pour lire le presse papier, cela se corse, car cela est strictement interdit, dès que vous appelez la méthode GetText, une security exception est levée : “Clipboard access is not allowed”. On pourrait donc se demander pourquoi exposer une méthode qui retourne toujours une exception : tout simplement pour être cohérent entre Silverlight Web/Desktop et Windows Phone 😉

Pourquoi cette limitation

Il faut imaginer que la classe ClipBoard a été conçu dans un premier temps pour un usage Silverlight Web/Desktop, pas pour un usage mobile comme sous windows phone.

Sous windows phone, dès que l’on sélectionne un textbox, une icône “coller” s’affiche si une donnée est disponible, cela revient en fait à autoriser l’utilisateur à accéder au presse-papier et ceci étant très simple d’utilisation (contrairement à un ctrl+c ctrl+v du monde PC) on peut comprendre aisément la restriction sur la méthode GetText