ReLucBlog

ActiveRecord.js est un projet d'ORM (Object Relational Mapping) pour JavaScript. Elle permet de manipuler des bases de données côté client (Google Gears, AIR, HTML5) mais aussi serveur (SQLite ou MySQL) avec Jaxer.

Je trouvais dommage qu'il n'y ai pas dans la version beta actuelle un connecteur pour manipuler des bases de données SQLite dans Mozilla, via l'API mozStorage. Sachant que par défaut, il y a un ActiveRecord.Adapter pour la manipulation de bases de données SQLite dans Adobe AIR.

J'ai donc créé un ActiveRecord.Adapter pour mozStrorage et ouvert un ticket. Je pense que je vais déjà m'en servir dans mes projets basés sur XulRunner, même si il manque peut être quelque point précis comme la gestion des Dates.

Si ça vous intéresse, testez le, c'est fait pour ça.

Mozilla vient de publier une première beta de la version mobile de Firefox : Fennec.

Cette version n'est pour le moment disponible que pour Maemo, OS des Nokia Internet Tablets N810. Tristant Nitot a extrait des notes de version les évolutions principales :

• Affichage plus rapide
• TraceMonkey est activé par défaut
• Support des plug-ins dont Flash

Ces évolutions devraient permettre aux utilisateurs d'avoir une sensation de navigation sur le Web avec un appareil mobile, très proche de ce qu'ils ont sur ordinateur. Et même si le Flash ne fait pas partie du Web, j'ai pu entendre des critiques à propos de l'iPhone car il n'y a pas de plugin Flash et que le "Web sans Flash ça n'est pas du Web".

Ces évolutions devraient aussi profiter à Firefox et à la plateforme Mozilla comme le compilateur JavaScript Just In Time (JIT), TraceMonkey, activé par défaut et l'affichage plus rapide. En ce qui concerne la rapidité, Taras a publié un article très intéressant sur comment Fennec était devenu plus rapide. Les contraintes avec les appareils mobiles sont qu'il n'y a pas d'accélération graphique matériel et peu de mémoire vive. Le résultat est qu'une mise à jour de l'affichage est au moins 10 fois plus lent que sur un ordinateur. La solution trouvée est de n'afficher que ce qui est nécessaire et de faire un minimum appel au DOM, ce qui pourrait être intéressant pour le SVG.

Autre annonce qui permettra aux utilisateurs de retrouver leur environnement de navigation sur mobile : l'extension Weave pour Fennec. Weave est un projet du Mozilla Labs qui permet entre autre de partager ces onglets et ces marques pages entre différents navigateurs.

Tout ça est encore en développement mais si vous souhaitez apporter votre pierre à l'édifice, tester les! Il existe des versions pour ordianteur Linux, Windows ou Mac.

Plus d'infos :

• Fennec 1.0 Beta 1
• Fennec Beta 1
• Fennec 1.0 Beta 1 - New and notable
• Fenec Beta 1 - Need for speed
• Updated tabs UIfor Weave on Fennec
• Introducing Weave

Alors que Mozilla-Europe est au Pays-Bas, les ingénieurs de Mozilla ont décidé de re-numéroter Shiretoko. La prochaine version de Firefox sera donc estampillé 3.5.

Après la sortie de Firefox 3, Mozilla souhaitait mettre en place 3 axes de développement :

• les mises à jour majeur N.
• les mises à jour mineur N.N
• les mises à jour de sécurité N.N.N

L'objectif était de dynamiser le développement et de fournir plus régulièrement les nouveautés aux utilisateurs. Shiretoko devait être la première version de cette politique. Elle devait juste intégré ce qui n'avait pas pu l'être dans Firefox 3.0. Mais comme les développeurs de Mozilla Firefox sont d'incorruptible créateur de nouveauté, Shiretoko ne sera pas une mise à jour mineur mais une mise à jour semi-majeur!

Si vous souhaitez voir tout cela arrivé le plus vite possible, tester les beta et Shiretoko suivra!

En une semaine les démonstrations de la force du Web Ouvert se sont multiplié, ça commence par Bespin et ça fini par les démonstrations de Paul Rouget.

Bespin est un projet du Mozilla Labs. L'objectif est de démontrer la faisabilité d'un éditeur de code en ligne. L'objectif est de proposer quelque chose de nouveau pour la création de contenu Web, et avec la partie client c'est déjà réussi. Au lieu d'utiliser l'élément textarea ou quelque chose d'autre de compatible avec Internet Explorer, le Mozilla Labs a décidé de s'appuyer sur CANVAS, élément de la norme HTML5, implémenté par la majorité des navigateurs modernes. Daniel Glazman le dit très bien, c'est une innovation perturbatrice, a disruptive innovation!

Ce qui est intéressant avec cette proposition c'est le nombre de réaction, comme celle de Daniel mais aussi et surtout celle de Laurent Jouanneau. Tout comme Daniel, Laurent a été bluffé. Ce qui est intéressant dans cet article c'est la proposition d'un élément standard pour l'édition de code! Et c'est vrai que ça aurait de la gueule. Peut-être que le résultat de Bespin sera la création d'un tel élément.

Je voulais aussi revenir sur la possibilité d'utilisé du SVG pour stylisé des éléments HTML. J'en avais déjà parlé, mais ce qui est nouveau c'est que, dans la prochaine version de Firefox, il sera possible d'utiliser des éléments SVG externes. Ce qui veut dire qu'avec le trio HTML-CSS-SVG, on pourra faire des trucs super sympas, mais n'est ce pas trop ? Pour Daniel c'est même overkill!

Enfin les démos de Paul, où vous pouvez suivre les mouvements de Delphine ou voir Tristan Nitot sur un fond vert! Dans ces démos, Paul a utilisé les éléments CANVAS et VIDEO, DOM Workers et des nouveautés de JavaScript 1.8. Vous pouvez déjà en profiter si vous avez une version beta de Firefox 3.1, ou regarder les screencasts de Chris Blizzard, c'est bluffant!

Pour en savoir plus :

• Bespin and Canvas: Part 1
• Bespin and Canvas: Part 2
• Headless Eclipse, and Smalltalk browsing with Bespin, thanks to Avi Bryant
• The Bespin Think Tank
• Mozilla a rendez-vous avec Eclipse sur un nuage
• Actu Mozilla : Bespin et l'agenda partagé
• canvas love
• Thanks for the Bespin contributions; Eclipse, XWiki, and more
• Actu Mozilla : Paul et Delphine stars du Web !
• Browsers are finally catching up; It isn’t the Future of Web Pages is it
• 11 years after, Mozilla is still exciting

La Foundation Mozilla vient de publier la deuxième version beta de Firefox 3.1, aka Shiretoko. Attention, cette version est une verison de test, donc à ne pas installer sur tous les ordinateurs.

D'un point de vue évolution, cette nouvelle beta apporte :

• TraceMonkey par défaut!!!! Il n'est plus nécessaire d'activer la compilation Just In Time du JavaScript, pour profiter des dernières accélérations du moteur JavaScript de Firefox!
• Web Worker Threads. Cette fonctionnalité que s'appuie sur le travail de normalisation du W3C, permet de faire proprement du multithread en JavaScript que ce soit dans une page Web ou dans une application XUL.
• Amélioration des éléments <audio> et <video>. En plus des OGG l'élément audio supporte les .wav. Pour plus d'info sur ces éléments : using audio and video
• et d'autres encores..

Pour plus d'information :

• Firefox 3.1 Beta 2 now available for download
• Firefox 3.1 beta 2 now available!
• The Quest for Shiretoko
• Mozilla Firefox 3 .1 Beta 2 Released
• Firefox 3.1 Beta 2 - what’s new?

Le Microsoft Live Labs a publié il y a peu Seadragon-Ajax. Cette solution est le portage de la fonction DeepZoom de Silverlight sur le Web Ouvert. Il permet donc à tout ceux qui ne souhaite pas utiliser de technologie fermer dans leur page Web d'exploiter un système de zoom sur des images de hautes résolutions. Côté serveur ça reste du Microsoft, mais côté client c'est du Web ouvert. J'ai d'ailleurs été très surpris lorsque j'ai inspecter la page de présentation du projet avec FireBug:
Seadragon-Ajax s'appuie sur l'élément HTML5 canvas!

Je suis resté sur le cul. D'après tout ce que j'ai pus lire, Microsoft n'a pas prévu d'intégrer cet élément à son prochain navigateur IE8. Alors soit ils vont le faire, soit ils comptent sur d'autres comme Mozilla qui travail à un plugin permettant aux utilisateurs d'IE d'avoir la possibilité de profiter de cet élément. Par contre ce qui est sûr c'est que sur Firefox 3.1 ça doit être performant surtout avec JIT.

Je pense aussi qu'il y a un peu de marketing dans cette publication en montrant que Microsoft ne s'appuie pas que sur Silverlight et Internet Explorer pour conquérir le Web...

Autres articles :

• annonce officielle
• sur Interfaces Riches, La technologie DeepZoom accessible avec Ajax

Je me suis lancé dans cette entreprise afin d'alléger l'utilisation de de XPConnect. L'objectif était de retourner un objet JavaScript au lieu d'un objet XPCOM. L'intérêt est de wrapper un objet C++ en JavaScript sans paser par de nombreux composants XPCOM. Le seul problème de cette technique est que l'on ne conserve pas de référence directe à l'Objet C++.

Récupérer le Context JavaScript

La première chose à faire est de récupérer le Context JavaScript, pour ce faire vous pouvez utiliser cette class créer par Paul :

class NativeJSContext {
  public:
    NativeJSContext() {
      if (!gXPConnect) {
        nsresult rv = CallGetService(nsIXPConnect::GetCID(), &gXPConnect);
        if (NS_FAILED(rv)) {
          NS_ERROR("Failed to get XPConnect!");
          return;
        }
      } else {
        NS_ADDREF(gXPConnect);
      }

      error = gXPConnect->GetCurrentNativeCallContext(&ncc);
      if (NS_FAILED(error))
        return;

      if (!ncc) {
        error = NS_ERROR_FAILURE;
        return;
      }

      ctx = nsnull;

      error = ncc->GetJSContext(&ctx);
      if (NS_FAILED(error))
        return;

      JS_BeginRequest(ctx);

      ncc->GetArgc(&argc);
      ncc->GetArgvPtr(&argv);
    }

    ~NativeJSContext() {
      JS_EndRequest(ctx);
    }

    nsAXPCNativeCallContext *ncc;
    nsresult error;
    JSContext *ctx;
    PRUint32 argc;
    jsval *argv;
};

Que vous exploiter ainsi :

 NativeJSContext js;
 if (NS_SUCCEEDED(js.error)) {
   /* Ici le code de création d'objet Javascript */
 }

Le Context JavaScript est nécessaire à la création de tout objet JavaScript et il est accessible ainsi :

 js.ctx /* tout simplement */

Créer un objet JavaScript

La première méthode consiste à créer un nouvel Objet JavaScript :

 JSObject *nJSObj = JS_NewObject(js.ctx, NULL, NULL, NULL);

Les méthode suivantes permettent de modifier l'objet en définissant ou ajoutant une propriété :

 jsval propval;
 JS_DefineProperty(js.ctx,nJSObj,"NewProp",propval,NULL,NULL,JSPROP_ENUMERATE);
 JS_SetProperty(js.ctx,nJSObj,"NewProp",&propval);

Créer un tableau JavaScript

La première méthode consiste à créer un nouveau tableau JavaScript :

 JSObject *nJSArray = JS_NewArrayObject(js.ctx, 0, NULL);

Les méthodes suivantes permettant d'ajouter un élément à notre tableau :

 jsuint len;
 JS_GetArrayLength(js.ctx, nJSArray, &len);
 jsval eleval;
 JS_SetElement(js.ctx,nJSArray,len,&eleval);

Créer des valeurs JavaScript

Comme vous avez pu le constater il faut créer des valeur JavaScript, jsval, pour pouvoir modifier vos objets JavaScript, objet et tableau.

La première méthode permet de transformer un objet ou un tableau en valeur JavaScript :

 jsval objval = OBJECT_TO_JSVAL(nJSObject);
 jsval arrayval = OBJECT_TO_JSVAL(nJSArray);

La seconde permet de transformer un entier en valeur JavaScript :

 jsval intval = INT_TO_JSVAL(100);

La troisième permet de transformer un nombre, double ou float, en valeur JavaScript :

 jsval numval;
 JS_NewNumberValue(js.ctx,10.50,&numval);

Enfin les méthodes suivantes permettent de transformer des chaines de caractères en valeur JavaScript :

 jsval strval;
 /* Pour un LITERAL ou une chaîne de caractères se finissant par null */
 strval = STRING_TO_JSVAL(JS_NewStringCopyZ(js.ctx,"une string"));
 /* Pour ne copier qu'un certains nombre de caractères */
 strval = STRING_TO_JSVAL(JS_NewStringCopyN(js.ctx,"une string",4));
 /* Pour créer une chaîne de caractères */
 strval = STRING_TO_JSVAL(JS_NewString(js.ctx,"une string",10));

Retourner l'Objet JavaScript créer

Voilà comment finir et faire en sorte que du côté JavaScript vous récupérier le réultat :

 jsval *retvalPtr = nsnull;
 js.ncc->GetRetValPtr(&retvalPtr);

 *retvalPtr = OBJECT_TO_JSVAL(featcol);
 js.ncc->SetReturnValueWasSet(PR_TRUE);

Conclusion

Maintenant vous avez tout ce qu'il faut pour créer vos premiers Objets JavaScript. Bien sûr Mozilla vous permet de faire plus comme créer des Class JavaScript ou des Fonctions JavaScript!

Voici le liste des références :

• JS_NewObject
• JS_DefineProperty
• JS_SetProperty
• JS_NewArrayObject
• JS_SetElement
• OBJECT_TO_JSVAL
• INT_TO_JSVAL
• JS_NewNumberValue
• STRING_TO_JSVAL
• JS_NewStringCopyZ
• JS_NewStringCopyN
• JS_NewString

Il y a 5 ans, Laurent Jouanneau lançait xulfr.org sans prétention. 5 ans plus tard xulfr est une association, l'un de ses membres, paul, est embauché par Mozilla et la communauté ne cesse de grandir. Mais celui qui parle le mieux de cette évènement n'est autre que la personne par qui tout est arrivé.

Je profite de cette anniversaire pour remercier Laurent, Paul et les autres car grâce à eux je travaille tous les jours avec des technologies graves mortelles!

Anniversaire xulfr

Dans le cadre de la réalisation de mon premier composants XPCOM en C++, j'ai dû résoudre le problème suivant : Comment récupérer un buffer pour le manipuler en JavaScript et l'afficher via la définition d'un nouveau protocol ?

Voici mes découvertes :

nsIBinaryOutputStream

L'objet JavaScript suivant permet d'écriture dans un output stream :

Components.classes"@mozilla.org/binaryoutputstream;1"
  .createInstance(Components.interfaces.nsIBinaryOutputStream);

Un tel objet permet de récupérer le buffer générer au sein de mon composant C++ via la méthode writeByteArray qui prend en paramètre le buffer (char *) et la taille de celui-ci. J'ai donc créer une méthode saveToStream qui prend en paramètre un objet implémentant l'interface nsIBinaryOutputStream.
Par exemple pour écrire dans un fichier :

// création d'un fichier local
var aFile = Components.classes"@mozilla.org/file/local;1".createInstance(Components.interfaces.nsILocalFile);
aFile.initWithPath( "/tmp/buffer");
// création du OutputStream associé au fichier
var stream = Components.classes"@mozilla.org/network/file-output-stream;1".createInstance(Components.interfaces.nsIFileOutputStream);
stream.init(aFile, 0x04 | 0x08 | 0x20, 0600, 0);
// création du binary output stream
var bos = Components.classes"@mozilla.org/binaryoutputstream;1".createInstance(Components.interfaces.nsIBinaryOutputStream);
// cette étape va permettre d'écrire dans l'output stream du fichier
bos.setOutputStream(stream);
// écriture du buffer dans l'output stream du fichier
myComponent.saveToStream(bos);
// il n'y a plus qu'à fermer les flux pour finaliser l'écriture du buffer dans le fichier
bos.close();
stream.close();

Grâce au Binary Output Stream je suis capable d'écrire le buffer générer dans mon composant XPCOM dans un fichier.

nsIChannel et nsIPipe

Dans Mozilla, il est possible de définir son propre protocol. La principale étape est de définir la méthode newChannel qui prend en paramètre un objet implémentant l'interface nsIURI et doit retourner un objet implémentant l'interface nsIChannel. Dans mon cas c'est dans cette méthode que j'utilise mon composant et donc que je récupère un objet implémentant l'interface nsIOutputStream. Or un nsIChannel est basé sur un objet implémentant une interface nsIInputStream. Il fallait trouver le moyen d'obtenir le input stream associé à l'output stream.

L'objet JavaScript suivant permet de lié input stream et output stream :

Components.classes"@mozilla.org/pipe;1".createInstance(Components.interfaces.nsIPipe);

Enfin il fallait faire de l'input stream obtenu un objet implémentant l'interface nsIChannel, c'est ce que permet l'objet suivant :

Components.classes"@mozilla.org/network/input-stream-channel;1".createInstance(Components.interfaces.nsIInputStreamChannel);

La méthode newChannel s'implémente ainsi :

myProtocolHandler.prototype.newChannel = function(aURI) {
     // création du pipe
     var pipe = Components.classes"@mozilla.org/pipe;1".createInstance(Components.interfaces.nsIPipe);
     pipe.init(true,true, 0, 0, null);
     // création du binary output stream
     var bos = Components.classes"@mozilla.org/binaryoutputstream;1".createInstance(Components.interfaces.nsIBinaryOutputStream);
     // cette étape va permettre d'écrire dans l'output stream du pipe
     bos.setOutputSTream(pipe.outputStream);
     // écriture du buffer dans l'output stream du pipe
     myComponent.saveToStream(bos);
     // fermeture des output stream
     bos.close();
     pipe.outputStream.close();
     // il reste plus qu'à créer le channel
     var channel = Components.classes"@mozilla.org/network/input-stream-channel;1".createInstance(Components.interfaces.nsIInputStreamChannel);
     channel.setURI(aURI);
     channel.contentStream = pipe.inputStream;
     channel.QueryInterface(Components.interfaces.nsIChannel);
     return channel;
}

C'est bien mais c'est synchone...

nsIPipe et nsIThreadManager

La dernière étape consiste à faire en sorte que la création du buffer et l'écriture soit asynchrone. Ce qu'il faut savoir c'est que le pipe permet d'écrire dans un thread et de lire le résultat dans un autre, de plus tant que rien n'est écrit dans l'output stream du pipe rein n'est lu, enfin lorsque l'output stream est clos le channel et donc la requête qui a été créer à partir de l'input stream du pipe est considéré comme fini.

Il faut d'abord définir un thread d'exécution :

var workingThread = function(pipe, myComponent) {
   this.pipe = pipe;
   this.component = myComponent;
};

workingThread.prototype = {
  run: function() {
    try {
      var bos = Cc"@mozilla.org/binaryoutputstream;1".createInstance(Ci.nsIBinaryOutputStream);
      bos.setOutputStream(this.pipe.outputStream);
      this.component.saveToStream(bos);
      bos.close();
      this.pipe.outputStream.close();
    } catch(err) {
      Components.utils.reportError(err);
    }
  },
  
  QueryInterface: function(iid) {
    if (iid.equals(Ci.nsIRunnable) ||
        iid.equals(Ci.nsISupports)) {
            return this;
    }
    throw Components.results.NS_ERROR_NO_INTERFACE;
  }
};

Ensuite il suffit de déclarer un objet global permettant l'exécution en fond de tâche :

background = Components.classes"@mozilla.org/thread-manager;1".getService().newThread(0);

Il ne reste plus qu'à réécrire la méthode newChannel du protocol handler :

myProtocolHandler.prototype.newChannel = function(aURI) {
     // création du pipe
     var pipe = Components.classes"@mozilla.org/pipe;1".createInstance(Components.interfaces.nsIPipe);
     pipe.init(true,true, 0, 0, null);
     // appel en fond de tâche de la création du buffer et de l'écriture
     background.dispatch(new workingThread(pipe, myComponent), background.DISPATCH_NORMAL);
     // il reste plus qu'à créer le channel
     var channel = Components.classes"@mozilla.org/network/input-stream-channel;1".createInstance(Components.interfaces.nsIInputStreamChannel);
     channel.setURI(aURI);
     channel.contentStream = pipe.inputStream;
     channel.QueryInterface(Components.interfaces.nsIChannel);
     return channel;
}

En espérant que ça puisses vous servir ;-)

C'est pour aujourd'hui, à partir de 19H dixit Tristan Nitot