Blog - HTML5 Web-Apps

Microsoft Windows 9 for Connected Objects

2014-09-24T06:30:00.000-04:00

With the new version of its operating system Windows 9, Microsoft wants to attack the connected objects market and more generally IoT (Internet of Things). They will release a free of charge version of Windows specially for this market.

It's official. Microsoft has indeed launch an assault on the connected devices market. Bernard Ourghanlian, CTO at Microsoft France confirms the rumors. The next OS Windows 9, that will be presented the September 30th 2014 to enterprises and developers, will be optimized for all kind of devices. "A version will propose for connected objects" said Bernard Ourghanlian "It will use very little memory and can run on as little as Intel processors Quark." And this will be free of charge. " as is already the case for Windows 8.1 in April 2014 to all terminals equipped a screen less than 9 inches" said Nicolas Petit, director of marketing and operations.

So Microsoft attacks directly Google and his system Android Wear, which launched in March 2014 a version of its Android OS dedicated to connected objects. The battle of the OS in the connected objects will therefor intensify.

Glassware - Media Gallery v0.3

2014-04-27T11:28:00.002-04:00

Google released a new version for the Google Glass : XE16 and XE16.1. This release is a big gap, now Google Glass are based on KITKAT.

Google changed also the API, the last version of Media Gallery v0.2 is not compatible with XE16.

Now, if you want to use a unlisted voice command to launch the application, you need to add this permission :

<uses-permission android:name="com.google.android.glass.permission.DEVELOPMENT" />

But to publish an application in MyGlass you need to use a listed voice command... It's really restricted, because you need to apply to ask your own command via this form : Voice command form. Google needs to approve you request and after... wait a new release...

I try to publish my app in MyGlass because I would like to implement the Authentication in GDK but to test, you need to upload in MyGlass so apply to the process review.

04/27/2014 - I applied to create a new voice command. I will keep you in touch about the process. Also I started the process to publish my app in MyGlass without voice command...

http://fablanglet.github.io/MediaGallery/

You can download the latest version : Media Gallery v0.3

Glassware - MediaGallery v0.2

2014-03-29T22:28:00.000-04:00

I released a new version of my glassware : MediaGallery.

I included some optimizations, and the possibility to pause and resume a video. Also I display the current time and total duration of the video and a seek bar to see where you are in video.

I created a new GitHub Page specially for this application.

http://fablanglet.github.io/MediaGallery/

You can download the latest version : Media Gallery v0.2

1 Invitation Glass Explorer

2014-03-04T17:10:00.000-05:00

Hi,

I have 1 invitation for a potential Glass Explorer, if you are interested add a comment, follow me on Google+ or Twitter, click on the ads and Get a chance to be a Glass Explorer.
I will contact the better clicker to get his email and send him the invitation :)

The invitation is still available during the next 7 days....

Google Glass Apps Directory

2014-03-04T16:09:00.000-05:00

Hi,

I would like to share with you a very cool initiative : Google Glass Directory Website

On this website, you can find a lot of different useful Glassware :

Glass Music Player

Mp3 player
Link

VideoBlack

Record video with the screen off
Link

WeMoGlassu

Application for controlling Belkin WeMo devices trough Google Glass
Link

It is a non-exhaustive list of the Glassware available on the repository...

Thanks to the Iwan to add my Glassware in the directory : Media Manager.

If you want to contribute in this initiative : http://igg.me/at/glass-apps

SEO - Single Page Websites

2014-02-19T17:29:00.001-05:00

In this article, we will see how to optimized the ranking of your single page application. Today, the single page website development is really common. It exists a lot of frameworks to create single page website like AngularJS, BackboneJS...

But the problem when you try to index your website in Google or Bing, just the html page will be index. That means just 1 entry with only 1 title and description. It is not really good if your website is composed of many pages.

Adapt your webapp

Google provides a solution to crawl the dynamically created content :

Don't use only the # as Hash fragment, replace it by #!

Google will replace the hash fragment with exclamation mark by _escaped_fragment_
http://www.exemple.com/#toto => http://www.example.com/#!toto
Url GoogleBot : http://www.example.com/?_escaped_fragment_=toto

Add a trigger to the head of the HTML of a page

<meta name="fragment" content="!">

Now Google or Bing will be able to crawl all the page of your website. The next step is to return the html page or content for the good hash fragment.

Adapt your Backend

If you use NodeJs to host you webapp my suggestion is to read this good post : Easily index your SPA thanks to PhantomJS

In my case, I could not use this trick because my single page app is hosted on Apache and I can not install external tools...

So my solution is to use the .htaccess to create a redirection on pre-render pages. To pre-render a page you can use PhantomJS or an other tools to create a html file for each page.

You can create an automatic script to generate these pages. Also you can modify the title and the description meta tag for each page.
After create a folder seo/ on your server, hosted all your html pages on it.

.htaccess

Create the .htaccess file in your root folder, with this following content :

RewriteEngine On

RewriteCond %{QUERY_STRING} ^_escaped_fragment_=(.*)$

RewriteRule ^(.*)$ seo/%1.html [NC,L]

</IfModule>

This code means if the url contains _escaped_fragment_=, we redirect the call to the prerender html page.

The html must have the same name of your hash fragment toto.html in my previous example.

You can test your rule with the "Fetch as Google" in Crawl menu on Google Webmaster Tool.

Now Google, Bing and the other can index all the pages of your single page application!!!

Sources : Google specification Ajax Crawling

Glassware - Media Gallery v0.1

2014-02-13T13:18:00.003-05:00

In this topic, I propose a Glassware to manage your photos and video.

You can view, play and delete your photos and video directly with this app with swipe,swipe and swipe in your Timeline. And you can not find the picture or the video you want in the middle of your notifications.

It's a beta version, but I publish it because I read a lot of comments on the glass-community forum that it is not easy to manage the picture on the timeline.

I agree with all these comments, that's why I decided to develop this Glassware during my free-time.

Actual features :

Display pictures/ videos
Play/Stop video
Delete pictures/videos
Swipe back/forward to navigate
Tap to show the menu

The next features I want to add are :

Look & Feel : Add icon to know if it's photo or video
Feature :

Add informations about the media itself
Send a picture by email

You can download the application here : Media Gallery 0.1

To install, you need to have the ADT Bundle installed on your computer. More informations available here.

And run the command : adb install GalleryPicture.0.1.apk
adb tool is available on sdk/platform_tools/

Let me know if you need other features, or if you have any comments or concerns about this Glassware.

Screenshot

Enjoy it!

MyGlass for iOS available on App Store

2013-12-19T19:47:00.001-05:00

MyGlass app for iOS is now available on the App Store after a brief appearance a few days ago. MyGlass on iOS required that your glass are in the XE12 version.

To update your Glass, go to Settings (swipe back) > Device Info Card > Tap > Update Device.

The MyGlass app lets you set up, configure, and mange your Google Glass on the go. You can also use it to get directions and more.

MyGlass on App Store

Google Glass XE12 Release

2013-12-18T10:01:00.001-05:00

Hi all,

XE12 Release

During thanksgiving, I got my Google Glass Wear. It's a really interesting and exciting new device, you can see them as an extension of your smartphone. But you can do really more : Face Detection (even if Google don't want... ), Voice Control. You can imagine a lot of new usages and business.

At the beginning, just an Android Apps was available MyGlass, if you would to use the GPS or Send a message, you needed a Android phone.

Now, you can do almost the same with an iPhone, MyGlass will be available this week on the App Store : Read this post

All information about the new release: XE12 Release Note

UPDATE 12-18-2013 : Cool feature, you can wink to take a picture. You just need to calibrate the Google Glass in the Setting Menu.

My First Project : Face Detection

Just after to receive my new Glass, my first idea has been to create an Face Dectection App. I can not publish this application in the Glass Store because it's not authorize by Google.

At the beginning, I tried to use the API : Camera.FaceDetectionListener but It sounds like is not available on the Google Glass.

So I use Camera.setPreviewCallbackWithBuffer(), and Face :

1.   public void onPreviewFrame(byte[] data, Camera camera) {

2.   Log.d(TAG, "onPreviewFrame");

3.   // face detection: first convert the image from NV21 to RGB_565

4.   YuvImage yuv = new YuvImage(data, ImageFormat.NV21,

                         i.   mWorkBitmap.getWidth(), mWorkBitmap.getHeight(), null);

5.   // TODO: make rect a member and use it for width and height values above

6.   Rect rect = new Rect(0, 0, mWorkBitmap.getWidth(), mWorkBitmap.getHeight());

7.   // TODO: use a threaded option or a circular buffer for converting streams?

8.   //see http://ostermiller.org/convert_java_outputstream_inputstream.html

9.   ByteArrayOutputStream baout = new ByteArrayOutputStream();

10.  if (!yuv.compressToJpeg(rect, 100, baout)) {

11.        Log.e(TAG, "compressToJpeg failed");

12.  }

13.  BitmapFactory.Options bfo = new BitmapFactory.Options();

14.  bfo.inPreferredConfig = Bitmap.Config.RGB_565;

15.  mWorkBitmap = BitmapFactory.decodeStream(

16.           new ByteArrayInputStream(baout.toByteArray()), null, bfo);

17.  Arrays.fill(mFaces, null);        // use arraycopy instead?

18.  Arrays.fill(eyesMidPts, null);        // use arraycopy instead?

19.  mFaceDetector.findFaces(mWorkBitmap, mFaces);

20.  Log.d(TAG, ""+ mFaces.length);

21.  for (int i = 0; i < mFaces.length; i++)

22.  {

23.      face = mFaces[i];

24.       try {

25.           PointF eyesMP = new PointF();

26.           face.getMidPoint(eyesMP);

27.           eyesDistance[i] = face.eyesDistance();

28.           eyesMidPts[i] = eyesMP;

29.           Log.i("Face",

30.               i +  " " + face.confidence() + " " + face.eyesDistance() + " "

31.               + "Pose: ("+ face.pose(FaceDetector.Face.EULER_X) + ","

32.               + face.pose(FaceDetector.Face.EULER_Y) + ","

33.               + face.pose(FaceDetector.Face.EULER_Z) + ")"

34.               + "Eyes Midpoint: ("+eyesMidPts[i].x + "," + eyesMidPts[i].y +")"

35.               );

36.       }

37.       catch (Exception e)

38.       {

39.               if (true) Log.e("Face", i + " is null");

40.       }

41.  }

42.     invalidate(); // use a dirty Rect?

43.     // Requeue the buffer so we get called again

44.     mCamera.addCallbackBuffer(data);

45.  }

I posted my Google Glass app on my GitHub:

https://github.com/fablanglet/FaceDetectionDemo

Currently I think the code is not compatible with the new release XE12 but yes with XE11.

I'm gonna modified the code after having updated my Glass in XE12.

Siriproxy - XFinity Remote Plugin

2013-09-12T10:22:00.002-04:00

Hi everybody,

Just for fun!! I just created a plugin for Siriproxy to control your XFinity TV. If you can change channels with the XFinity Remote TV App : XFinity App on ITunes, you can use my plugin. Cool!

I discovered that the application use web services to change channels. With a little bit of reverse engineering, I able to create this plugin.

How it's work

Log in to XFinity Web Server
GET Profil Informations

Profil Token
Device Key

GET a token to change channels
POST the channel

Install XFinityRemote plugin

First of all, you need to install Siriproxy on Linux, MAC OS, Windows or Raspberry Pi.

If it's already done, just follow the Siriproxy's tutorial on this website : https://github.com/plamoni/SiriProxy

Add the plugin

After that install my plugin it's available on my GitHub repository : https://github.com/fablanglet/SiriProxy-XFinityRemote

To configure XFinityRemote plugin, it's very simple.You just need to add your Comcast Login/Password. It's required to connect to the web server.

Login
Password

In the config.xml file, available in ~/.siriproxy/ folder, add this configuration :







 

  
  - name: 'XFinityRemote'

    git: 'github.com/fablanglet/SiriProxy-XFinityRemote.git'

    login: 'XfinityLogin' 

    password: 'XFinityPassword'

Don't forget to launch this command : rvmsudo siriproxy bundle

How to use

With my XfinityRemote plugin, you can change channels with the channel number or with the channel name. It's available for Siri in English and in French :)

Just say to Siri : 'Channel number [Number]' or 'Channel [Name]'

Demo

See my video on YouTube : http://html5webapp.blogspot.com/2013/09/siriproxy-siriproxy-xfinityremote.html

IOS7 - Safari User-Agent

2013-09-11T10:48:00.000-04:00

The IOS7 Gold Master version is out yesterday, after the keynote. Just for you know, the user-agent of safari on this version is :

Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53

Provided by IPhone 4S, IOS7 GM

SiriProxy - XFinityRemote

2013-09-04T16:05:00.003-04:00

Just a trailer, I'm creating a siriproxy plugin able to change channel of your XFinity TV.
Watch my video :

Soon i post an article where i explain how you can get and install my siriproxy plugin. To be continued...

Safari IOS7 & HTML5

2013-06-13T08:19:00.000-04:00

I'm just installing IOS7 Beta 1 on my iphone. So directly, let's go to html5test.com to compare IOS7 Score vs IOS6 score.

The score for IOS7 is 404 points and 9 Bonus points and the score for IOS6 (6.0.1) is 386 points and 9 Bonus points.

What are the differences?

Add Subtitle support in Video
Removal input type=datetime
Add progress
Add Seamless iframe
Add XmlHttpRequest level 2
Add Page visibility
Canvas

context.setLineDash()
context.getLineDash()

Sources : html5test.com

Patterns Agiles avec Visual Studio 2012 et TFS 2012

2013-03-20T05:47:00.000-04:00

La vidéo de la session Patterns Agile avec Visual Studio 2012 et TFS 2012 que j'ai co-présenté ,avec Olivier Conq et Michel Perfetti lors des derniers tech-days 2013 à Paris, est maintenant disponible sur le site de microsoft :

Les slides de la présentation sont disponibles ici : Slides

Exam 70-480 : Programming in HTML5 with JavaScript and CSS3

2013-02-11T09:28:00.001-05:00

Microsoft propose des formations et des certifications autour d'HTML5.

Un examen semble très intéressant : "Developing in HTML5 with JavaScript and CSS3". Il fait partie des certifications MCSD Windows Store Apps et Web Applications.

La formation comporte plusieurs partie :

Implémenter et manipuler le DOM
Implémenter une application. (Syntaxe Javascript, Event, Callback, Web Worker... )
Accès et sécurité des données
CSS3

Pour préparer cet examen, il existe

Un programme de formation de 5j (Programming in HTML5 with Javascript and CSS3).
Des vidéos en ligne de formations : "Developing in HTML5 with Javascript and CSS3 Jump Start" réalisé par Jeremy Foster et Michael Palermo (Microsoft Techincal Evangelists).
Un livre : "Exam Ref 70-480: Programming in HTML5 with JavaScript and CSS3".

Je suis actuellement en pleine préparation pour passer cet examen.

Liens

Exam Détails 70-480 : Programming in HTML5 with JavaScript and CSS3

Vidéo en ligne : Developing in HTML5 with JavaScript and CSS3 Jump Start

Patterns Agiles avec Visual Studio 2012 et TFS 2012

2013-02-05T04:27:00.003-05:00

Pour les Tech Days 2013, je participe en tant que speaker à la session : "Patterns Agiles avec Visual Studio 2012 et TFS 2012" le Mercredi 13 Février de 14h30 à 15h30.

Présentation de la session :
Visual Studio 2012 et TFS 2012 sont résolument tournés vers l'agilité. Kanban, taskboard, revue de code... toutes ces techniques agiles sont maintenant directement disponible dans les outils de développements. Lors de cette session vous retrouverez tous ces patterns de développement agile et vous verrez l'avantage de leur intégration avec Visual Studio 2012 et TFS 2012. Retour d'expérience Mediapost sur un développement d'une application Mobile HTML5 en 7 semaines en SCRUM.

Plus d'informations : Programme Tech Days 2013

IOS 6.1 - Correction du bug javascript de getCurrentPosition en Web App

2013-01-28T14:59:00.000-05:00

Je viens d'installer la nouvelle version d'iOS, 6.1. Je l'attendais avec impatience pour la correction des bugs javascript.

J'avais constaté un bug dans la version antérieur, 6.0.1, lorsqu'une Web App était ajoutée à l'écran d'accueil via la balise suivante :

<meta name="apple-mobile-web-app-capable" content="yes" />

La fonction navigator.geolocation.getCurrentPosition() ne retournait jamais la fonction de callback :

navigator.geolocation.getCurrentPosition(getPosition,getPositionError);

Ce bug semble corrigé dans cette nouvelle version. Je viens de tester, reste à tester la fonction watchPosition() :)

Internet Mobile - Novembre 2012

2013-01-11T08:27:00.005-05:00

En Novembre 2012, 43,7% des personnes qui se sont connectées à un site ou une application mobile sont des femmes. Cela représente 1 million de plus qu’il y a un an.
La parts des femmes progressent également plus vite que la moyenne des mobinautes : +13% en un an contre +9% pour l’ensemble des mobinautes.

Cette forte progression est dû à une importante croissance de l’équipement en smartphones des femmes : au 3ème trimestre 2012, près de la moitié des femmes (49,4%) utilisatrices d’un téléphone mobile en est équipée contre 39,5% au 1er trimestre 2012.

Elles privilégient le système d’exploitation Android pour 47% d’entre elles contre 45% au total. Concernant le téléphone lui-même, Samsung et Nokia sont leurs 2 premières marques de prédilection.

La répartition des accès à l’Internet mobile entre sites et applications est stable : plus de 9 mobinautes sur 10 (92,7%) ont visité au moins un site sur mobile et plus de 7 sur 10 (73,8%) au moins une application.

Source : L'audience de l'internet mobile en France en novembre 2012

1 foyer sur 10 possède une tablette tactile en France

2012-12-17T06:17:00.000-05:00

Selon la dernière étude de Mediametrie en date du 11/12/2012, 1 foyer sur 10 en France est équipé d'une tablette tactile.

800 000 primo-accédant en 6 mois

Au 3 ème trimestre 2012, près de 3 millions de foyers possèdent une tablette tactile en France. Ce chiffre est en très forte augmentation puisqu'on compte 1/3 de foyer équipés en plus en 6 mois ce qui représente 800 000 primo-accédant en 6 mois.

Les familles urbaines bien équipées

La tablette est un équipement urbain : 14% des foyers parisiens en possèdent une. Elle concerne également les foyers relativement jeunes mais dotés d'un certain pouvoir d'achat : 17,5% des foyers dont "le chef de famille" est âgé de 35 à 49 ans.

Source : Mediametrie - Intégralité des résultats

window.matchMedia, MediaQuery en Javascript

2012-12-17T05:28:00.000-05:00

Résumé

Retourne un objet MediaQueryList représentant le résultat du pattern MediaQuery passé en paramètre.

Syntaxe

mql = window.matchMedia(mediaQueryString)

Exemple

if

(window.matchMedia("(min-width:
  400px)").matches) {

   /* the view port is at
  least 400 pixels wide */

} else {

   /* the view port is less
  than 400 pixels wide */

}

Il est possible aussi d'ajouter dans le pattern Media Query, l'orientation : (orientation: portrait).

On peut aussi ajouter un observer implémantant l'interface MediaQueryListListener, pour être notifier du changement d'orientation par exemple comme ci-dessous :

var mql = window.matchMedia("(orientation:portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql);
function handleOrientationChange(mql) {
if (mql.matches) {
/*The device is currently in portrait orientation */
} else {
/*The device is currently in landscape orientation */
}
}

Cette fonction peut être très utile lorsque l'on gère directement le design en javascript. Car l'étude du User-Agent n'est quelque fois pas suffisant pour déterminer le style d'affichage notamment sur les tablettes 7''.
En paysage, on affichera plutôt le design dédié au tablette alors qu'en portrait on aura tendance à afficher le design Smartphone.

ASP.NET Forms Authentication Safari/Chrome sur IOS

2012-12-13T05:20:00.004-05:00

Contexte

Je développe actuellement une Webapp HTML5 communiquant avec des services WCF. Pour les sécuriser, j'ai implémenté l'authentification ASP.NET par formulaire.
Certaines fois, sur iOS 6, l'appel au webservice sécurisé était refusé. Sur ipad, je l'ai généralement rencontré en Webview, quand on ajoute la webapp sur le Homescreen.

Lors de la connexion de l'utilisateur à la Web App, on réalise le code ci-dessous :

FormsAuthentication.SetAuthCookie(userName, true /*createPersistentCookie*/);

La configuration de Web.config est la suivante :

<authentication mode="Forms" >
<forms loginUrl="../Login.html" timeout="2880" />
</authentication>

Solution

En analysant la réponse du serveur je me suis aperçu que finalement je n'étais pas authentifié. Alors que le web service d'authentification l'avait bien confirmé.
Certaines fois le cookie d'authentification n'est pas bien obtenu par le navigateur, notamment sur Safari et Chrome. Après beaucoup de recherches, j'ai finalement trouvé une solution.

Plusieurs étapes sont à réaliser :

Dans le Web.config, il faut ajouter la clé suivante, qui permet de forcer l'utilisation des cookies par le navigateur. Par défaut c'est UseDefault :

<authentication mode="Forms" >
<forms loginUrl="../Login.html" timeout="2880" cookieless="UseCookies" />
</authentication>

Ensuite il peut aussi être utile de rajouter une MachineKey dans le Web.Config, pour éviter un problème dans le cryptage/décryptage du cookie d'authentification.

<system.web>
<machineKey validationKey='myKey' decryptionKey='myDecryptKey' validation='SHA1'/>
</system.web>

Pour générer une machineKey, vous pouvez aller directement sur ce site : Générateur de machineKey

Source : http://www.bloggersworld.com/index.php/2012/08/19/asp-net-forms-authentication-iphone-cookies/

HTML5 et les développeurs - Etude Appcelerator

2012-12-10T05:48:00.001-05:00

Selon une étude réalisée par Appcelerator, éditeur de l’outil de développement d’applications mobiles Titanium, et le cabinet d’analystes IDC, HTML5 n’aurait pas encore convaincu les développeurs mobiles. Pire, les fonctionnalités proposées pour l’heure par le futur standard, ne satisferaient pas les développeurs.

Selon les résultats de l’étude, les développeurs montrent une attitude de « neutre » à « insatisfait » pour les applications développées en HTML5 :

62 % l’expérience utilisateur
72,4% les performances
83,4% la monétisation
75,4% la fragmentation
60,3% le contrôle de la distribution
67,9% l’intemporalité des nouvelles mises à jour
81,8% la sécurité.

En revanche, 58% développeurs sondés se disent pleinement satisfaits concernant les possibilités de développement cross plate-forme du langage, et un peu moins de 50% se positionnent de même pour les mises à jour.

Autre enseignement de cette étude : la baisse de popularité d’Android chez les développeurs se poursuit. Dans cette édition, seulement 66% des développeurs interrogés affirment être très intéressés par les développements pour les tablettes Android et 76% par les smartphones. Une baisse légère, note l’étude – de 2 et 3 points respectivement – mais qui s’inscrit dans la durée. La plate-forme Apple reste encore la cible préférée des développeurs.

Source : http://www.lemagit.fr/technologie/architectures-logicielles-soa/langages/2012/11/23/html-5-ne-ravit-pas-les-developpeurs/

Rapport complet de l'étude : Appcelerator Report Q3 2012

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

2012-12-10T04:07:00.001-05:00

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 :

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

2012-11-23T11:39:00.000-05:00

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.

Router = Backbone.Router.extend({
routes: {
"Page1": "maPage1", // http://monsite/#Page1
"*actions" : "defaultRoute" //http://monsite/
},
maPage1 : function(){
var view = new MaView({model : monModel, viewContainer : monContainer})
}
});

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.

render : function (){
this.collection.each(function (item){
myContainterListe.append($(template(item.toJSON())));
}
}

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.

ListView = Backbone.View.extend({
renderItem: function(model){
var itemView = new ItemView({model : model});
itemView.render();
},
render : function() {
this.collection.each(this.renderItem);
}
});

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 :

events :
{
"click .classname" : "mafonction"
}

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

2012-11-16T05:55:00.001-05:00

(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 :

CollectionModel.fetch({
beforeSend:function ()
{ $.mobile.loading('show');
},
complete: function () {
$.mobile.loading('hide');
},
success: callback
});

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 :

$(function() {});

Récapitulatif

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

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

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

$(function() {});