Windows phone 7 VS Android : match retour

Introduction

Il y a un peu moins d’un an, j’écrivais un article nommé Windows phone 7 VS Android : point de vue d’un développeur, où j’exposais mon point de vue sur les deux plateformes, et leurs intérêts pour les développeurs d’applications.

Mais un an après, les choses ont changées, en partie. Il est donc temps de rejouer le match !

One Year After

Que ce soir du côté de Windows Phone 7 ou d’Android, nous avons vu, en l’espace d’un an, paraitre plusieurs événements majeurs.

Côté Microsoft, la mise à jour Mango a été déployée. Elle apporte un lot conséquent de nouveautés, que ce soit pour l’utilisateur ou les développeurs. Je vous conseille cet article de Pierre Cauchois pour en savoir plus. Nokia a également rejoint la bataille il y a quelques mois, et a réellement aidé à diffuser Windows Phone auprès du grand public, avec sa gamme Lumia.

Côté Android, malgré une version 3.0 relativement intéressante, le système n’a pas convaincu, d’autant que la version 4.0 était très attendue. En effet, celle-ci avait pour but de réunir enfin smartphones et tablettes sur la plateforme. Le miracle est arrivé en Octobre dernier. Même si sa présence n’est pas encore grande, cette version 4.0 porte de nombreux espoirs ! D’ailleurs, il suffit de voir la vidéo suivante pour s’en convaincre :

Les outils

Un an après, les outils ont-ils beaucoup évolué ? Oui et non.

Côté Android, on retrouve toujours Eclipse et Netbeans. Néanmoins, l’IDE intelliJ de chez Jetbrains s’est joint à la bataille. Ce dernier est très apprécié de bon nombre de développeurs Java, mais dispose néanmoins d’une intégration à Android moins poussée que ce qu’on peut avoir sur Eclipse (oubliez les interfaces graphiques pour modifier vos ressources par exemple).

Néanmoins, du côté d’Eclipse justement, de nombreuses améliorations ont eu lieu. Ainsi, l’éditeur d’interfaces graphiques est enfin utilisable et pratique, et nous propose, via une nouveauté nommée Android Lint, de petites astuces de performance pour nos interfaces. Peu intrusif et très pratique !

Malgré tout, il reste toujours quelques bugs parfois (le xml qui disparait de l’écran par exemple), et le système DDMS n’a que peu évolué (même s’il était déjà très complet). Côté émulateur, c’est beaucoup plus rapide qu’avant, mais ça reste un peu douloureux, particulièrement pour émuler une tablette.

Du côté de Visual Studio, pas de changements majeurs, mais des nouveautés bienvenues. On note par exemple un outil complémentaire à l’émulateur, et qui permet de simuler une localisation pour le GPS, de jouer avec l’accéléromètre, et de prendre des screenshots facilement. Finie la galère des captures d’écran pour le marketplace !

D’ailleurs, concernant ce dernier, un nouvel outil nommé Marketplace test kitpermet de lancer quelques tests de conformité avant de publier votre application. Au niveau des vérifications, on y trouve la gestion du bouton back, le temps de démarrage, la gestion de la mémoire etc. Il y a également une liste de tests à faire manuellement, pour que vous puissiez être vraiment sûr que votre application est parfaitement conforme. Enfin, vous pouvez maintenant changer le skin de votre émulateur. Vous en rêviez n’est-ce pas ?

Au final, les deux partis ont apporté des améliorations appréciables, mais Visual Studio n’en reste pas moins bien plus pratique que son concurrent open-source !

Parlons design

Commençons par l’essentiel : le design d’interfaces n’a pas changé de façon de faire en un an. Android utilise toujours du xml pour définir les contrôles visuels, et WP7 a conservé le célèbre XAML (qui sera également utilisé dans Windows 8).

Néanmoins, au niveau des outils, des améliorations ont fait leur apparition. Du côté WP7, on trouve plus de maturités et de plus en plus de toolkits sont disponibles, sans parler de celui de base qui est de plus en plus fourni. On disposait déjà d’outils très performants comme Blend, de ce côté-là, difficile de faire mieux.

Côté Android en tout cas, on a vu arriver une véritable révolution : un éditeur visuel ENFIN performant. Un positionnement intuitif, des menus contextuels très bien pensés pour modifier les propriétés, une possibilité très simple de créer des interfaces spécifiques pour les tablettes ou différentes versions d’Android, sans compter Android Lint dont j’ai parlé avant. Sans attendre un niveau de qualité comme celui de Blend, On a enfin un outil utilisable !

Mais il manquait un élément important à la plateforme auparavant : des guidelines pour le design. Et voilà que le 12 Janvier dernier, Google a ouvert un site justement dédié au design pour Ice Cream Sandwich. Bon nombre de règles restent néanmoins applicables aux précédentes versions. Le site est très bien fait et comble un véritable manque pour la plateforme. Allez y faire un tour !

http://developer.android.com/design/index.html

Malgré tout, Android est en train de payer cher sa fragmentation. Bon nombre de propriétés d’animation et de rendu graphique sont apparus avec Android 3.0 (rotation ou alpha par exemple), et ne sont donc pas compatibles sur Android 2.x, vous devrez donc vous arranger autrement. Sur Windows Phone, on dispose depuis le début de nombreuses propriétés d’animation (même si on ne dispose pas des effets de Silverlight comme les ombres ou le blur).

A mon sens, même si Android a pas mal rattrapé son retard, WP7 conserve une bonne longueur d’avance en matière de création d’UI.

Les fonctionnalités

Ici, toujours aussi difficile de faire des comparaisons. En effet, Android nous propose l’accès à à peu près tout le système. Cela nous donne un grand contrôle, mais donne parfois une impression de devoir tout recoder, et ça peut vite devenir long.

Un bon exemple est celui du stockage d’informations. Pour nos applications, on peut passer par un système de préférences, le système de fichier, ou une base de données SQLLite. Certes, on a le choix, mais quid de la facilité d’utilisation ? Montrez la base de données à des débutants, vous allez vite voir le regard qu’ils vont vous jeter.

A contrario, sur Windows Phone 7, on dispose effectivement d’une base de données embarquée, mais nous pouvons tout à fait s’en passer grâce à l’isolated storage, qui est d’utilisation très simple.

De plus, avec l’arrivée de Mango, de très nombreuses fonctionnalités supplémentaires sont apparues. On peut citer les sockets, les tâches de fond, les alarmes et reminders, l’accès aux calendriers et aux contacts, une API pour la caméra… En somme, une liste impressionnante de possibilités qui sont apparues, et qui sont simples d’accès. Ce n’est pas encore Android, certes, mais on s’en approche. Vous voulez une preuve qu’il reste du chemin à faire ? Pas d’accès au Bluetooth sur Windows Phone. Dommage non ?

Au final, même si les fonctionnalités sont parfois difficiles d’accès sur Android, elles restent plus nombreuses (avec les problèmes de sécurité inhérents).

Ecosystème

Avec plus de 10 milliards d’applications téléchargées, et 700 000 Android activés par jour, difficile de faire concurrence avec Windows Phone, qui, même s’il dispose d’une forte progression, et à vraiment commencé à se répandre avec l’arrivée de Nokia sur le marché, il reste encore du chemin à parcourir. De plus, Android est présent sur les tablettes, ce qui n’est pas le cas de son concurrent (même si une fois Windows 8 sorti, il est assez facile de porter ses applications WP7).

Conclusion

En un an, de grosses évolutions ont eu lieu dans les deux camps. Windows Phone 7 reste, à mon sens, plus pratique et agréable pour les développeurs. Néanmoins, Android propose plus de fonctionnalités différentes, et cible surtout bien plus d’utilisateurs (sans compter les tablettes). De plus, il reste encore certaines API manquantes qui interdisent d’office à WP7 d’avoir certains types d’application (Bluetooth par exemple).

Néanmoins, sachez qu’il est possible de porter une partie de son code depuis WP7 vers Android, et inversement (merci la ressemblance entre C# et Java), du moins du côté de la logique. Vous pouvez toujours développer sur ces deux plateformes en même temps non ?

Et quid des technologies web ? Développez pour un webbrowser et l’embarquer dans une application avec une librairie comme PhoneGap ? Hum… Vous voulez parler d’une application qui ne respecterait pas les guidelines de chaque plateforme et offrirait donc une expérience dégradée ? Non, vous pouvez oublier.

Utiliser le Reverse-Geocoding sur Windows Phone 7

Introduction

Dans un contexte où les applications mobiles utilisent de plus en plus la localisation, il peut être très utile de récupérer l’adresse de l’utilisateur à partir de sa position géographique. On peut ainsi le guider, ou lui proposer des services se trouvant à proximité. Cet article a donc pour but de vous montrer comment utiliser cette méthode dite « Reverse-Geocoding ».

Note : Nous n’allons ici récupérer qu’une adresse, et non le nom d’un lieu à proximité. Ce processus-là s’appelle la recherche de POI (points of interest), et dépend d’une autre API. Si vous souhaitez l’utiliser, la documentation se trouve ici : http://msdn.microsoft.com/en-us/library/cc980861.aspx

Ajouter le service Bing

Avant de faire du reverse-geocoding, il faut ajouter une référence au service Bing qui propose cette fonctionnalité. Pour ce faire, il suffit de faire un clic droit sur votre solution, puis « Add a service reference »

L’url du service à rentrer est : http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc

Cela devrait vous ajouter toutes les classes nécessaires au reverse-geocoding.

Appeler le service

Une fois le service ajouté, il va falloir l’ajouter. Pour ce faire, il vous faudra tout d’abord obtenir une clé API Bing Maps, disponible gratuitement sur https://www.bingmapsportal.com/

On va ensuite créer un objet de type ReverserGeocodeRequest, en lui soumettant notre clé d’API et la localisation dont l’on souhaite l’adresse.

ReverseGeocodeRequest reverseGeocodeRequest = new ReverseGeocodeRequest();
reverseGeocodeRequest.Credentials = new Credentials();
reverseGeocodeRequest.Credentials.ApplicationId = "APIKEY";
reverseGeocodeRequest.Location = new Location() { Longitude = lon, Latitude = lat };

Ensuite, il nous faut créer un objet de type GeocodeServiceClient, de préciser le type de binding pour le service, et enfin de lancer, de manière asynchrone, l’appel au service

GeocodeServiceClient geocodeService =
new GeocodeServiceClient("BasicHttpBinding_IGeocodeService");
geocodeService.ReverseGeocodeCompleted += new EventHandler<ReverseGeocodeCompletedEventArgs>(ReverseGeocodeCompleted);
geocodeService.ReverseGeocodeAsync(reverseGeocodeRequest);

Gérer la réponse

Pour gérer la réponse du service, nous allons devoir récupérer les résultats depuis l’objet ReverseGeocodeCompletedEventArgs, qui contient un attribut Result, qui lui-même contient une ObservableCollection de GeocodeResult.

Cet objet GeocodeResult contient nombre d’informations intéressantes. L’adresse bien entendu, mais également des localisations plus précises de l’adresse, les coordonnées à spécifier pour avoir la meilleure vue possible de l’endroit, ainsi qu’un objet Adress qui contient les différents éléments du lieu. Si vous souhaitez simplement utiliser l’adresse au format complet, pour un simple affichage, un attribut nommé DisplayName existe dans ce but.

void ReverseGeocodeCompleted(object sender, ReverseGeocodeCompletedEventArgs e)
{
    MessageBox.Show(e.Result.Results[0].DisplayName);
}

Conclusion

Le reverse-geocoding est une technique simple à utiliser, mais qui pourtant peut apporter un réel intérêt à votre application et ouvre la porte à de nombreux scénarios autour de la localisation.

Faire une capture d’écran in-app et la sauvegarder sur WP7

Introduction

Il arrive parfois que l’on souhaite effectuer une capture d’une partie ou de tout l’écran d’une application Windows Phone 7. Cela peut être pour créer une sorte d’album photos dans un jeu, ou encore proposer un historique visuel pour vos utilisateurs.

Dans le cadre de la création d’un jeu nommé GeoWarfare, il me fallait prendre une capture d’écran d’un contrôle Bing Maps afin de proposer à l’utilisateur de savoir quelle était sa dernière localisation. Le but va donc être de prendre une capture d’un contrôle, la sauvegarder en Isolated Storage (après l’avoir convertie en Jpg), et la récupérer plus tard pour affichage.

Prendre une capture d’écran

Prendre une capture d’écran se révèle être très simple. D’ailleurs, j’en avais déjà parlé dans un précédent article. Il nous faut utiliser la classe WriteableBitmap. Son constructeur propose plusieurs surcharges. L’une d’entre elles nous intéresse particulièrement. Elle prend en paramètre un contrôle à capturer, et un objet Transform.

WriteableBitmap wb = new WriteableBitmap(mapBing, new ScaleTransform());

Lorsque WriteableBitmap a été présenté, dans Silverlight 3, il était dit que la transformation obligatoire était un bug. A priori, ce n’est pas le cas, mais la transformation précisée ici ne sert à rien, malgré son caractère obligatoire.

Convertir en Jpg

Une fois notre WriteableBitmap obtenu, il nous faut le transformer en image. En Silverlight classique, il nous fallait passer par une librairie tierce. Mais sur Windows Phone, il existe une extension qui permet justement de transformer un WriteableBitmap en image Jpg, en passant en paramètre un FileStream de l’isolatedStorage, ainsi qu’une éventuelle orientation et la qualité de l’image. Le code final donne cela :

using (IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication())
 {
       WriteableBitmap wb = new WriteableBitmap(mapBing, new ScaleTransform());

       string fileName = "monImage.jpg";
       if (isoStore.FileExists(fileName))
            isoStore.DeleteFile(fileName);
       IsolatedStorageFileStream fileStream = isoStore.CreateFile(fileName);

       System.Windows.Media.Imaging.Extensions.SaveJpeg(wb, fileStream, wb.PixelWidth, wb.PixelHeight, 0, 85);

       fileStream.Close();
}

Afficher l’image

Pour afficher l’image, rien de plus simple. Il suffit aller chercher le fichier dans l’isolatedStorage, de l’ouvrir, et de mettre le contenu en source d’un objet BitmapImage. Ce même objet peut ensuite être mis en source d’un contrôle Image classique !

BitmapImage bee = new BitmapImage();
string pathImage = "monImage.jpg";

using (IsolatedStorageFile isoStorage = IsolatedStorageFile.GetUserStoreForApplication())
{
      if (isoStorage.FileExists(pathImage))
      {
             using (IsolatedStorageFileStream fileStream = isoStorage.OpenFile(pathImage, FileMode.Open, FileAccess.Read))
             {
                  bee.SetSource(fileStream);
                  monImage.Source = bee;
             }
      }
}

Exemple par l’image

Voici le résultat sur l’application GeoWarfare pour Windows Phone :

Dernier secteur visité dans GeoWarfare

Conclusion

Cette technique relativement simple peut vraiment apporter un énorme plus à votre application. Que ce soit en terme d’ergonomie, d’optimisation ou juste d’expérience utilisateur, n’hésitez pas à vous en servir !

Changer le thème et l’orientation pour Windows Phone dans Blend

Par défaut, Blend pour Windows phone propose un rendu de votre application en thème sombre, en orientation portrait, et avec la couleur bleu en guise d’accent color.

Cependant, il peut arriver que vous souhaitiez modifier un ou plusieurs de ces paramètres. Fort heureusement, Blend vous le propose !

Il vous suffit d’aller dans le menu “Window” (fenêtre en français) puis “Device”

Vous obtenez alors un nouveau panneau qui vous permet de modifier les options de rendu Windows Phone.

Voici un petit comparatif du résultat :

A gauche : portrait, thème sombre, accent color bleu. A droite : paysage, thème clair et accent color orange

Créer un UserControl en XAML

Introduction

Développeurs .NET, Avez-vous déjà eu des milliers de lignes de C# dans le code-behind de vos pages XAML ? Que ce soit en WPF, Silverlight desktop, ou Windows Phone 7 ? N’y-a-t-il donc pas moyen de modulariser son code ? De pouvoir réutiliser des composants, ou simplement pouvoir créer ses propres contrôles ?

Mais si, ce Graal existe ! Les développeurs .NET un peu experimentés le connaissent, mais force est de constater que nombre de débutants vivent dans l’ignorance de cette fonctionnalité très utile nommée UserControl.

Mais enfin c’est quoi un UserControl ?

Un UserControl n’est ni plus ni moins qu’un contrôle personnalisé. Un ensemble donc composé de code XAML et de code-behind. Cela vous permet donc de réutiliser du code, et de séparer la logique des composants. On peut imaginer utiliser ce scénario pour des pages d’une application, des boutons personnalisés, ou un contrôle calendrier customisé par exemple.

Ajouter un UserControl à votre projet

Première étape : créer votre UserControl. Pour cela, faites un clic droit dans l’explorateur de solutions, ajouter un nouvel élément, et sélectionnez UserControl. Si vous êtes sur une application Windows Phone, il s’agira d’un Windows Phone UserControl.

Ajout d'un UserControl

Cela vous créé un fichier XAML et le code-behind associé. A partir de là, vous pouvez customiser votre UserControl comme bon vous semble !

Nous allons ici par exemple ajouter une image et un bouton.

Made In Blend

Utiliser un UserControl

Une fois que notre UserControl est terminé et à notre goût, nous allons pouvoir l’utiliser où nous voulons. Pour cela, nous allons devoir jouer avec les namespaces de notre XAML (si l’on souhaite l’utiliser en XAML) ou juste l’ajouter comme n’importe quel contrôle en code-behind.

Imaginons que notre contrôle se trouve dans le namespace MyApplication.Views (si vous n’êtes pas sûr, le namespace se trouve dans le code-behind de l’UserControl). Vous allez donc devoir importer cet espace de noms dans votre XAML. Pour cela, rendez-vous en haut de votre fichier. Vous devriez avoir plusieurs importations de namespace.

Les namespaces de base d'une page XAML

Nous allons simplement ajouter celui qui correspond à notre UserControl. L’auto-complétion jouant son rôle, cela est relativement simple.

Et au final :

Notez que le nom UC est à votre entière discrétion. Il vous permettra d’utiliser votre UserControl de la manière suivante :

Vous pouvez ainsi modifier son nom, sa taille, et toute autre propriété d’un contrôle, juste via le XAML, ou via le code-behind.

Notez qu’il sera peut-être nécessaire de rebuild votre solution avant de pouvoir utiliser l’auto-complétion.

Conclusion

Créer un UserControl se révèle plutôt simple au final, une fois l’intérêt compris et les namespaces maîtrisés. Cela permet une plus grande réutilisation du code, et évite ces copier-coller honteux que l’on peut retrouver parfois.

Ad Time

Une fois n’est pas coutume, je vous propose d’aller visiter le blog d’un camarade de classe de Supinfo, Florian Rousselet, qui est développeur Junior sur Windows Phone 7. Il n’a pas encore mis beaucoup d’articles en ligne, mais cela ne saurait tarder !

http://blog.florian-rousselet.fr/

Toolbox

Introduction

Dans le monde des applications web, au milieu de HTML 5, du CSS 3, du Javascript et de ses librairies, il est difficile de s’y retrouver. Jusque-là, nous avons vu les différentes technologies client et serveur permettant de réaliser une application complète. Mais il existe quelques outils très pratiques qui peuvent vous aider, avec un simple navigateur, à accélérer votre développement !

Initializr 2

La structure de base d’un projet web se base plus ou moins toujours sur la même chose : JQuery, un coup de Modernizr, une petite config’ serveur, Google analytics peut-être…

Partant de ce constat, Initializr vous propose de créer votre structure de projet basique avec un petit formulaire très simple. Vous pouvez sélectionner un template de base, un template rapidement personnalisée, ou un build totalement à votre sauce. Et de très nombreuses librairies sont proposées ! Vous commencez un projet ? Commencez avec Initializr !

http://www.initializr.com/

W3C validator

Très classique, mais encore inconnu de certains malheureusement (dont des professeurs de web en université, à bon entendeur). Son but est simplement de valider votre code, pour voir s’il correspond aux normes du W3C. Les erreurs sont répertoriées, avec la plupart du temps la solution.

Vous codez en HTML 5 ou en CSS 3 ? Pas de soucis, il est possible de faire une validation avec les drafts de ces normes. Dans le cas de HTML 5, aucun problème. Côté CSS 3 en, revanche, les propriétés propriétaires (type –moz-border-radius) ne passent pas, donc peu de chance que votre CSS soit valide et compatible au maximum.

Une fois votre code validé, vous aurez droit à ce magnifique logo :

http://validator.w3.org/

HTML5 rocks

Plus qu’un véritable outil, HTML Rocks est une véritable mine d’or sur HTML 5. Tutoriaux, samples, et surtout, leur magnifique présentation de HTML 5 (elle-même en HTML 5). Si vous voulez un tour d’horizon de ce qu’il est possible de faire avec ces nouvelles technologies, allez y faire un tour, ça vaut le coup d’œil.

http://www.html5rocks.com/en/

http://slides.html5rocks.com/#landing-slide

Colorzilla

Les utilisateurs de Firefox connaissent sans doute la célèbre extension Colorzilla. Mais l’équipe du module a également créé un outil pour aider à créer des dégradés en CSS 3. Car oui, il est possible de faire de très jolis dégradés. Cependant, il faut le reconnaitre, coder directement à la main ce genre d’effets visuels n’est pas des plus aisés. Heureusement, grâce à cet outil, vous allez pouvoir générer automatiquement un code cross-browser, avec un aperçu visuel bien entendu, et de nombreuses options. Pour les plus feignants, des teintes sont déjà proposées de base.

http://www.colorzilla.com/gradient-editor/

CSS3 Generator

Le CSS 3 propose de très nombreuses possibilités pour les designers. Néanmoins, il peut être long et difficile de créer efficacement les ombres, les dégradés, les transitions…

CSS3 Generator est là pour vous épargner cette longue besogne, grâce à des générateurs très bien faits.

http://css3generator.com/

W3C mobileOK checker

Vous développez mobile ? Félicitations ! Mais votre site est-il compatible ? Est-il aux normes du W3C ? Est-il vraiment optimisé pour les terminaux nomades ? C’est à cette question que le W3C mobileOK checker va vous aider. Au travers de conseils et d’une classification des erreurs par sévérité. Vous avez un site mobile ? N’attendez plus pour valider !

http://validator.w3.org/mobile/

Conclusion

Ainsi se termine ma série d’articles sur la création d’une application web. Vous avez désormais toutes les clés en main pour concevoir, du serveur jusqu’à la version mobile, un site complet et fonctionnel, multiplateformes et utilisant les dernières technologies du web.

N’hésitez pas à tester les différentes technologies et librairies présentées. Ainsi, vous aurez le choix des armes lors de votre prochaine réalisation !

Bubbler : JQuery, JQuery UI, et des bulles !

Introduction

On m’a demandé il y a peu comment pouvait-on réaliser une application permettant de gérer des bulles avec du texte. Oui, vous savez, des bulles, comme dans les bandes dessinées ! Côté client, avec un bout de Javascript, et c’est réglé ! Mais comment faire lorsqu’on débute en Js ? Ce n’est pas des plus faciles. Alors voici un petit tutoriel permettant de réaliser notre application. Vous trouverez un exemple ici :

http://aerilys.fr/SilverCloud/Bubbler/

Note : Le design n’est pas des plus heureux, je m’en excuse. Allez voir Bootstrap si vous voulez vous amuser !

Code HTML

Première étape : le code html qui va nous permettre de structure la page.

Nous allons inclure un petit fichier de style, pour positionner nos éléments. Nous allons également ajouter un fichier de script, pour gérer nos fonctions. Enfin, nous allons utiliser JQuery (1.7) et une version customisée de JQuery-UI. Pour cela, rendez-vous sur http://jqueryui.com/download et sélectionnez uniquement les éléments « UI Core », et l’interaction « Draggable ».

Vous aurez le code suivant :

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Bubbler</title>
   <link href="Style/style.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="Scripts/Bubbler.js"></script>
   <script type="text/javascript" src="Scripts/jquery-1.7.min.js"></script>
   <script type="text/javascript" src="Scripts/jquery-ui-1.8.16.custom.min.js"></script>
</head>

Notre application contiendra deux zones : un menu et une surface de dessin. Dans ce menu, on va insérer un bouton pour ajouter une nouvelle bulle, un textarea pour éditer le texte, un bouton d’update pour mettre à jour notre bulle, un bouton de flip, pour faire une rotation sur notre bulle, et un bouton de suppression de la bulle.

<div id="menu">
   <button onclick="addBubble();">New Bubble</button>
   <div id="menuSelectedBubble">
      Selected Bubble<br/>
      <textarea id="selectedBubbleEditor">
      </textarea><br/>
      <button onclick="updateBubble();">Update</button><br/>
      <button onclick="flip();">Flip</button><br/>
      <button onclick="deleteBubble();">Delete</button>
   </div>
</div>

<div id="content">
   <div id="drawSurface">
   </div>
</div>

Notez que pour pouvoir faire dépasser un peu nos bulles du cadre, la div de dessin, drawSurface, est contenue dans une div content un peu plus grande.

Le style

Pour le style de notre application, nous allons faire au plus simple : le menu à gauche, sur 200 pixels, et une surface de dessin sur la droite.

Elément très important : si l’on souhaite une image de fond pour la surface de dessin (ce qui est généralement le cas), cette image doit être mise en tant que background de la div, ce que nous faisons ici. Idem pour les bulles, puisqu’elles contiendront un texte, qui sera en fait le contenu de la div.

body{padding:5px;}
#menu{width:200px; float:left; background:#CCC; text-align:center;}
#content{margin-left: 15px; float:left;}
#drawSurface{background:url('../gfx/beatles.jpg'); width:350px; height:350px; margin-left:50px; margin-right:50px;}
.bubble{width:150px; height:50px; background:url('../gfx/bubble.png') no-repeat; position:absolute; text-align:center; }
#selectedBubbleEditor {height:100px;}

Le Javascript

Voici la partie la plus intéressante : le Javascript. Nous allons avoir besoin de 5 fonctions : ajouter une bulle, sélectionner une bulle, mettre à jour le texte d’une bulle, supprimer une bulle, et enfin effectuer une rotation. Nous aurons également deux variables globales : l’une pour gérer la bulle actuellement sélectionnée, et une autre pour gérer le nombre de bulles, et générer ainsi un id unique à chaque fois.

var selectedBubble;
var index = 0;

Ajouter une bulle

Ajouter une bulle n’est pas très compliqué. Il suffit d’ajouter un bout de html dans le contenu de la div drawSurface. On génère également un id unique pour la div ainsi créée. On lui ajoute également la classe css bubble, et on y lie la fonction selectBubble (voir juste après).

function addBubble(){
   var id = "bubble"+index;
   $('<div class="bubble" onclick="selectBubble(this);" id="'+id+'"><p>I\'m a new bubble !</p></div>').appendTo('#drawSurface');
   index++;
   $('#'+id).draggable({ snap: true,
   containment: "#content",
   start: function(event, ui) {selectedBubble = ui;}
   });
}

A la fin de la fonction, on ajoute l’appel à la fonction draggable de JQuery UI. On précise que le conteneur est la div content (pour faire dépasser nos bulles du cadre), et qu’à la fin d’un drag and drop, la bulle sélectionnée est celle déplacée.

Une fois ce code ajouté, vous pouvez déjà créer des bulles et les déplacer.

Sélectionner une bulle

Sélectionner une bulle est des plus simples. On récupère l’objet passé en paramètre, et on le stocke dans notre variable globale. On ajoute également son contenu au champ textarea de notre menu.

function selectBubble(bubble){
   selectedBubble = bubble;
   var text = selectedBubble.innerText
   $('#selectedBubbleEditor').val(text);
}

Notez l’utilisation de innerText, qui nous permet de récupérer notre contenu, sans le code HTML autour (les balises p en l’occurrence).

Mettre à jour une bulle

Encore une fois, rien de très compliqué : on récupère le contenu de notre textarea, et on l’insère dans notre bulle sélectionnée, en vérifiant que celle-ci existe toujours.

function updateBubble(){
   if(selectedBubble){
      var text = $('#selectedBubbleEditor').val();
      selectedBubble.innerHTML = "<p>"+text+"</p>";
   }
}

Supprimer une bulle

Pour supprimer une bulle, il va falloir utiliser les fonctions de DOM de Javascript. Il va également falloir vider notre variable selectedBubble, le champ d’édition.

function deleteBubble(){
   if(selectedBubble){
       selectedBubble.parentNode.removeChild(selectedBubble);
       selectedBubble = undefined;
       $('#selectedBubbleEditor').val("");
   }
}

Par DOM, on récupère le parent de la bulle, et on lui demande de supprimer son enfant qui correspond à selectedBubble.

Effectuer une rotation

Si l’on souhaite une compatibilité optimale, effectuer une rotation ne pourra pas s’effectuer via du CSS 3. A la place, nous allons simplement remplacer le background de notre bulle par une version « flippée » de l’image. On va donc vérifier si la bulle est déjà retournée ou non, si ce n’est pas le cas, on effectue l’opération. Sinon, on revient à la normale.

function flip(){
   if(selectedBubble){
      var bg = selectedBubble.style.backgroundImage;
      if(bg.indexOf('flip') == -1)
         bg = '-flip';
      else
         bg = '';
      bg = "url('gfx/bubble"+bg+".png')";
      selectedBubble.style.backgroundImage = bg;
   }
}

Conclusion

Pour les connaisseurs en Javascript, ce code n’a rien de très compliqué, mais il fait appel à pas mal de notions plus ou moins avancées qui peuvent rebuter les débutants. Le mélange JQuery, JQuery UI, DOM et manipulation de style n’est pas des plus évidents de prime abord. Mais le résultat est plutôt sympathique au final.

Life Is Mobile

Introduction

Aujourd’hui, le marché du mobile (pardon, du smartphone), prend de l’ampleur. A tel point qu’il dépassera tôt ou tard celui du pc. Idem pour les tablettes. Ces nouveaux types de périphériques disposent tous d’un navigateur web, plus ou moins performants. La plupart sont basés sur Webkit (Android/IOS/WebOS). D’autres, comme celui de Windows Phone 7, sont basés sur d’autres moteurs. En réalité, développer sur mobile peut rapidement devenir très compliqué. Prendre en compte toutes les résolutions, les navigateurs, les possibilités de chacun, et surtout, leur prise en charge des futurs standards HTML5/CSS 3. Fort heureusement, quelques frameworks existent pour vous faciliter le travail ! Bien entendu, il faut trouver un juste milieu entre prise en charge et fonctionnalités, ce qui n’est pas évident.

JQuery Mobile : puissant mais inabouti

Dans la lignée des frameworks JQuery, il en est un pour le développement mobile, dont l’avenir promet d’être radieux : JQuery mobile. Disposant d’une très large palette de navigateurs compatibles (voir ci-dessous), les fonctionnalités ne sont pas en reste, puisque cela va de la gestion de widgets, à la navigation, les thèmes, les toolbars type IOS, la navigation par ajax, des listes… Bref, un panel impressionant de fonctionnalités.

Une démo interactive est d’ailleurs disponible ici : http://jquerymobile.com/demos/1.0rc2/

Pratique pour voir le rendu sur les différents navigateurs mobiles (et non-mobiles). Néanmoins, il s’agit encore d’une version RC, donc non finie. Même si le développement est très rapide, faites attention si vous décidez de l’utiliser en production. Notez également que le framework a pour but d’être fonctionnel sur tablette.

Rendu sur tablette Android

Le poids est également relativement faible. 24Kb de Javascript et 7Kb de CSS (minifiés). Cela peut paraitre très peu (et ça l’est). Néanmoins, le w3C recommande des documents de moins de 20Kb. On dépasse donc légèrement. Dans la pratique, même un device avec une connexion Edge mettra moins de trois secondes pour télécharger une telle quantité de données. C’est relativement peu.

Score sur le W3C mobile checker : 61%

IWebkit

IWebkit : un design très iphone

IWebkit 5 est un package de fichiers conçu dans le but de créer des web applications mobiles facilement. Difficile ici de parler de framework puisque l’on a principalement du css et du html. Exit donc les fonctionnalités sympas comme les gestures et les animations.

Sa principale force réside dans sa grande simplicité, et le design type IOS donné aux applications réalisées. Quid de la compatibilité sur d’autres types de device ? Elle est bien sûr plus faible que sur iPhone. Sur un navigateur basé sur Webkit, cela passe bien. Sur d’autres moteurs, c’est plus… Compliqué. Il vous faudra modifier le code source (ce qui n’est pas forcément des plus durs).

Un système de thème est également disponible si vous souhaitez personnaliser un peu l’ensemble. Enfin, la License commerciale est payante (19.99€).

Une démo est disponible ici : http://snippetspace.com/iwebkit/demo/

Score sur le W3C mobile checker : 81%

JQTouch

JQTouch est en quelque sorte l’ancêtre de JQuery mobile. Projet des Sencha Labs, ce framework, open-source, a pour but d’accélérer le développement d’applications mobiles pour IOS et Android. Gestion de l’ajax, quelques éléments d’UI, animations, des formulaires… En somme, le support de nombreuses fonctionnalités mobiles.

Avec l’arrivée de JQuery mobile, ce projet semble un peu désuet. Néanmoins, il est plus mature et propose des fonctionnalités très intéressantes.

Une démo est disponible ici : http://snippetspace.com/iwebkit/demo/

Si ça vous plait, faites un fork sur Github : http://github.com/senchalabs/jQTouch

Score sur le W3C mobile checker : 55%

Sencha Touch, Joshfire, PhoneGap and co.

Vous avez entendu parler de Sencha ? L’entreprise qui a créé, entre autres, Ext JS ? Si ce n’est pas le cas, foncez sur leur site web qui propose frameworks et outils pour le web. Parmi eux, Sencha Touch.

Ce framework propose un nombre impressionnant de fonctionnalités. Gestures, gestion des données, utilisation de HTML5 et CSS3, génération de graphiques, animations. Le tout, avec une compatibilité énorme (IOS 3+, Android 2.1+ et Blackberry 6+ selon le site), et un usage totalement gratuit (avec possibilité de payer un support).

Bon alors, où est le piège allez-vous me dire ? En réalité, la compatibilité est plus limitée que sur JQuery mobile. Sur WebOS, il y a de nombreux bugs d’affichage (pourtant le navigateur est basé sur Webkit), et sur Windows Phone 7, la démo ne se lance même pas. Vous êtes donc cantonné à IOS et Android.

L’autre difficulté majeure est la taille du framework. Un peu moins de 120Kb compressé et zippé. Alors oui, ça peut paraitre peu, mais à charger par le device, c’est très lourd. Rajoutez à cela vos images, votre css, vos contenus, et votre site mobile sera plus lourd que la version bureau.

Alors quoi, on jette Sencha ? Non, vous pouvez tout à fait vous en servir pour développer vos applications natives, en technologie web. Je ne suis personnellement pas pour cette solution, mais il faut admettre qu’elle a l’avantage de réduire les coûts. Et en plus, Sencha vous propose une intégration native avec PhoneGap.

Ce dernier est un framework Javascript permettant d’utiliser les capacités natives de votre smartphone (appareil photo, contacts, GPS) depuis votre application web. Parfait donc pour les applications natives en langage web. Cette solution est open-source depuis le rachat de l’entreprise éditrice par Adobe. Comme quoi, le propriétaire de Flash mise aussi sur les standards !

Allez jetez un coup d’œil également du côté de Joshfire. Ce framework-là pousse encore plus loin puisqu’il promet une intégration avec ordinateur,smartphones, tablettes, tv, plan de bus interactifs… De la vraie science-fiction avant l’heure. Il propose également une interaction côté serveur avec Node.js

Score sur le W3C mobile checker (Sencha Touch) : 84%

Et le développement maison alors ?

Bonne idée ça ! Recodez donc JQuery mobile tout seul ou avec votre petite équipe. Vous ferez toujours mieux que ces pros du Javascript qui ont codé JQuery.

Trêve de plaisanteries. Recodez entièrement un framework mobile n’est pas forcément très long (IWebkit propose déjà une bonne base, et a été codé par un étudiant de 19 ans). Il vous juste bien déterminer qui vous visez (IOS et Android semblent déjà une bonne base. Ajoutez Windows Phone 7, on m’a dit que ça avait de l’avenir !), et les fonctionnalités dont vous avez besoin. Un flip sur une page web, vous trouvez ça utile dans une application mobile ? Personnellement non…

N’oubliez pas également que dans le cadre des applications natives, il vaut mieux privilégier les technologies non web. Il suffit de voir le portage médiocre de certaines applications IOS pour s’en rendre compte. Un framework web, même s’il est pratique et multi-plateformes, ne respectera certainement pas les UI guidelines de toutes ces plateformes. Avouez que se passer de Metro sur Windows Phone, ce serait dommage non ?

Allez, la prochaine fois, on parlera de quelques outils pratiques pour vos développements web !

Utiliser les Push Notifications WP7 en Java

Introduction

Si vous êtes un utilisateur de Windows Phone 7, vous avez certainement déjà utilisé les push notifications. Vous savez, ces informations qui arrivent inopinément dans votre barre de statut pour vous informer d’une nouvelle actu, d’un nouveau sms, ou que votre tour est venu dans un jeu en ligne.

Il est possible pour les développeurs d’applications d’utiliser ce mécanisme. En fait, il suffit que le téléphone s’abonne à un channel de notifications. On transmet ensuite l’uri de ce channel à un serveur tiers, qui devra faire des requêtes vers les serveurs de chez MS pour envoyer une notification. Si vous voulez plus de détails sur la question, je vous renvoie à la doc MSDN.

Microsoft nous fournit un sample côté serveur en ASP .NET, mais il est tout à fait possible de réaliser des demandes de notifications depuis tout type de technologie web. Je vous propose donc de voir comment vous pouvez utiliser ce mécanisme depuis votre serveur Java !

Toast Notification sur Windows Phone 7

Le code

public static void PushNotif(String titre, String contenu, String page, String uri)
{

On commence par créer une méthode statique qu’on pourra ainsi appeler n’importe où dans notre code. Titre et contenu correspondent aux informations affichées par la notification. La page, elle, correspond à la page dans votre application vers laquelle l’utilisateur va être redirigé lorsqu’il touchera votre notification. Enfin, l’uri correspond à l’adresse fournie par le serveur de Microsoft lorsque le téléphone s’abonne à un channel. Pour plus d’informations, MSDN est encore votre ami, sur cette page-là.

//On créé un objet URL à partir de l'uri
URL url = new URL(uri);

//On créé une URLConnection pour la requête en POST
URLConnection uc = url.openConnection();

L’objet URLConnection permet de réaliser des requêtes POST vers des serveurs distants. Notez que le fait d’ouvrir la connexion n’envoie pas de suite toutes les informations requises.

uc.setRequestProperty("ContentType", "text/xml");
uc.setRequestProperty("X-WindowsPhone-Target", "toast");
uc.setRequestProperty("X-NotificationClass", "2");

//On indique qu'on va écrire des données (/insérer des paramètres POST)
uc.setDoOutput(true);

La doc MSDN nous dit qu’il faut un certain nombre de propriétés dans le header dans la requête, pour définir une demande de notification. On met ainsi le type (« toast notifications »), et on définit que l’on va envoyer du xml (format demandé pour les informations). On indique ensuite que l’on va placer du contenu dans notre requête (le xml).

String toastMessage = "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
"<wp:Notification xmlns:wp=\"WPNotification\">" +
"<wp:Toast>" +
"<wp:Text1>"+titre+"</wp:Text1>" +
"<wp:Text2>"+contenu+"</wp:Text2>" +
"<wp:Param>"+page+"</wp:Param>" +
"</wp:Toast> " +
"</wp:Notification>";

Il s’agit ici du format xml défini dans la documentation. Rien de spécifique à Java ici.

//On créé un OutputStreamWriter pour écrire dans l'URLConnextion
OutputStreamWriter  writer = new OutputStreamWriter(uc.getOutputStream());

//On envoie le contenu de la requête POST
writer.write(toastMessage);

//On ferme la connexion
writer.flush();
writer.close();

Comme vous le voyez, l’envoi du xml au serveur se fait facilement grâce à l’OutputStreamWriter de l’URLConnection

Conclusion

Le mécanisme de push notifications sur WP7 se révèle très pratique à l’usage, aussi bien côté client que côté serveur, où une simple requête en POST suffit. L’adaptation en PHP est certainement tout aussi facile.