4ème Meetup Windows Apps: Javascript, HTML5 et .NET

Vous êtes développeur d'applications sous Windows ou souhaitez vous lancer, venez rencontrer d'autres développeurs de la communauté.

Lieu :

IESA multimedia - Campus Opera

5 avenue de l'opera, 75001, Paris 

Programme :

1. Comment prendre soin de vos utilisateurs ?

Par Benjamin Baldacci, consultant .NET chez Wygwam.

• Itinérance des données
• Avertissement des erreurs
• Paramètres

    2. Optimisation d'une application Windows 8 développée avec javascript

Par David Catuhe, Technical Evangelist Lead for Windows Client chez Microsoft et David Rousset, Windows 8 & HTML5 Developer Evangelist chez Microsoft.

    3. Accéder aux Api de camera avec javascript pour Windows 8

Par David Catuhe, Technical Evangelist Lead for Windows Client chez Microsoft et David Rousset, Windows 8 & HTML5 Developer Evangelist chez Microsoft.

    4. Websockets: coder un chat en 10 minutes

Par Jean-Noël Gourdol, Jean-Michel Deruty et Florie Fauché.

Inscription Meetup

Pattern MVC BackboneJs

L'objectif de cet article est de proposer plusieurs modélisation UML d'un projet de WebApplication avec la librairie Javascript BackboneJs.

Router > View > Model

Tout d'abord une modélisation très simple, qui comprend un router, une view et un model. 

Modélisation UML Architecture simple Backbone

Cette modélisation est un bonne solution si on est dans un contexte relativement simple. C'est à dire que l'on a qu'un seul Model, que l'on affichera grâce à le View.

Le router permet d'instancier la view à laquelle il passera le model à afficher.

1. Router = Backbone.Router.extend({
2.   routes: {
3.          "Page1": "maPage1",   // http://monsite/#Page1
4.          "*actions" : "defaultRoute" //http://monsite/
5. },
6. maPage1 : function(){
7.      var view = new MaView({model : monModel, viewContainer : monContainer})
8. }
9. });

Router > Collection Model > View

Maintenant passons à une modélisation un peu plus complexe.

Modélisation UML avec une collection de model

 Cette fois on souhaite afficher une liste de model. Dans cette architecture, la View permet l'affichage d'une collection de Model. 

C'est à dire que dans la fonction Render(), nous allons faire un foreach() pour chaque élément de la liste, et générer directement le code HTML que l'on ajoutera à notre conteneur HTML de la liste.

1. render : function (){
2.      this.collection.each(function (item){
3.              myContainterListe.append($(template(item.toJSON())));
4.      }
5. }

Ce principe n'est pas optimal notamment si l'on souhaite gérer des évènements sur les items de la liste générée par le View. 

Router > Collection > View > Model > View 

L'architecture présentée ci-dessous à une granularité plus fine que celle ci-dessus. 

Modélisation UML avec une view pour la collection et une view par item

On souhaite toujours afficher une liste de Model, mais à la différence le modélisation précédente, on crée une view pour la collection et une view pour les items de la collection.

Cette fois la fonction render() de la View de la collection, va faire appel ,pour chaque item, à la fonction Render() de la view des items.

1. ListView = Backbone.View.extend({
2.         renderItem: function(model){
3.               var itemView = new ItemView({model : model});
4.               itemView.render();
5.         },
6.         render : function() {
7.                this.collection.each(this.renderItem);
8.         }
9. });

On pourra donc ajouter des évènements sur notre view Item, pour ajouter du comportement à nos items.

Pour ajouter des évènements sur une Backbone.View :

1.  events :
2. {
3.      "click .classname" : "mafonction"
4. }

(function ($) { }(jQuery)); vs $(function () {});

(function ($) {  }(jQuery)); vs $(function () {});

Un petit retour d'expérience, après être resté bloquer pendant quelques heures, sur une erreur liée à la librairie JqueryMobile. L'erreur est : $.mobile.loader of 'undefined' .

Contexte de l'erreur

• dans la fonction (function($) {} (jQuery)); je crée un model Backbone, une view Backbone et un routeur Backbone.
• dans cette même fonction j'instancie mon routeur et Backbone.history.start();

Lorsque je charge la page, je réalise un appel Ajax async pour obtenir une collection d'éléments. Pendant cette appel Ajax, j'utilise la "loading bar" de JQuery Mobile comme ci-dessous :

1. CollectionModel.fetch({
2.             beforeSend:function ()
3.             { $.mobile.loading('show');
4.             },
5.             complete: function () {
6.                 $.mobile.loading('hide');
7.             }, 
8.             success: callback
9.         });

Lors de cette appel, la méthode $mobile.loading n'est pas définit car la librairie JQueryMobile n'est pas encore ready.

Solution

Pour résoudre le problème, il faut tout simplement réaliser l'instanciation du Router et lancé Backbone.history.start() n'ont pas dans (function($) {}(jQuery)) mais plutôt dans $(function() {}); car dans ce cas, on est sur que la librairie $.mobile est chargée et disponible.

La fonction anonyme (function($) {}(jQuery) signifie que le DOM JQuery est ready mais il faut bien dissocier le DOM JQuery et le DOM du Document qui est représenté par la fonction suivante : 

1. $(function() {});

Récapitulatif

La déclaration des Models, des Views et des Routers Backbonejs doivent être placée dans la fonction anonyme :

1.  (function($) {} (jQuery)); 

Par contre l’instanciation du router doit être de préférence réalisé dans la fonction :

1. $(function() {}); 

Internet Mobile - Septembre 2012

Audience de l'internet Mobile en France - Sept 2012

L'institut Médiamétrie a publié hier ses statistiques concernant l'internet mobile. On y apprend qu'au 3 ème trimestre 2012, 41,2% des individus vivant en France se sont connectés à l'internet mobile par un site ou une application, 46,6% des Français sont équipés d'un smartphone.

Au niveau des systèmes d'exploitation, Android est en forte augmentation par rapport au même trimestre 2011.

En terme de répartition entre les accès via site ou application est stable : 92.1% des mobinautes ont visités un site sur mobile et 72.1% ont visités au moins une application sur smartphone.

Source :  L'audience de l'internet mobile en France en septembre 2012 - Médiamétrie

Backbone.js

Backone.js

Dans cet article, je vais vous présenter la librairie Backbone.js. L’API est disponible sur le site : http://backbonejs.org/

Backbone permet de mettre en place une architecture MVC en javascript, côté client. Cela va permettre d’avoir un code javascript mieux structuré.

Model

Un modèle est une représentation de vos données sous forme d’objet. Pour créer un modèle backbone, il est nécessaire d’étendre la class : Backbone.Model.extend() ;
  La déclaration d’un model « Personne » :

1. var html5webapp = {};
2. html5webapp.Personne = Backbone.Model.extend({
3.  defaults: {
4.    "Id" :"1",
5.    "Nom" : "Toto",
6.    "Prenom" : "Tata"
7.  },
8.  initialize : function Personne() {
9.   this.bind("error", function(model, error){
10.    console.log( error );
11.   });
12. }});

L’attribut defaults permet de mettre des valeurs par défaut aux propriétés de notre modèle.

Grâce à la console de développement Google Chrome, nous pouvons déclarer une variable pers comme ceci :

   Pour obtenir maintenant la valeur des propriétés :

   Il est aussi possible d’ajouter des méthodes à notre modèle, comme par exemple des accesseurs à nos propriétés :

1. getId : function() {
2.     return this.get('Id');
3. },
4. setId : function(value) {
5.    this.set({ Id : value });
6. },
7. getNom : function() {
8.     return this.get('Nom');
9. },
10. setNom : function(value) {
11.     this.set({ Nom : value });
12. },
13. getPrenom : function() {
14.     return this.get('Prenom');
15. },
16. setPrenom: function(value) {
17.     this.set({Prenom : value });
18. }

Utilisation des accesseurs set /get :

Afficher un modèle

   Pour afficher un modèle, on utilise ici la librairie Underscore.js comme ceci :

1. < script type="text/template" id="personne-template">
2. < ul data-role="listview" id="personne-field" data-inset="true">
3. < li >Id: <%= Id %>< /li>
4.  < li >Nom: <%= Nom %>
5. < li >Prenom: <%= Prenom %></ li>
6. < /ul>
7. < /script>

La déclaration du template « Underscore » est à faire dans une balise script. Puis on y ajoute les propriétés du modèle à afficher.

View

Afin de faire l’interface entre notre modèle et de notre template, on déclare une View. Dans cette view, on lui spécifie la template à utiliser via cette instruction : 

this.template = _.template($('#personne-template').html());

1. html5webapp.PersonneView = Backbone.View.extend({
2.   initialize: function(){
3.      this.template =
4.            _.template($('#personne-template').html());
5.          },
6.     render: function() {
7.     var container = this.options.viewContainer,
8.     personneModel = this.model,
9.     renderedContent = this.template(personneModel.toJSON());
10.     container.html(renderedContent);
11.      container.trigger('create');
12.     return this;
13.      }
14.    });

Puis lorsque la page HTML est prête, nous allons déclarer un conteneur dans lequel on souhaite afficher le modèle. Et enfin instancie la View en lui passant le conteneur et le modèle.

1. $(document).ready(function() {
2.  var personneContainer = $('#Personne').find(":jqmData(role='content')"),
3.          perosnneView;
4.  var persModel = new html5webapp.Personne();
5. personneView = new html5webapp.PersonneView({model : persModel,
6.  viewContainer: personneContainer});
7.    personneView.render();
8. });

La fonction render() va réaliser l’interprétation du template et du modèle.

Affichage du modèle avec les propriétés par défaut.