blog ntic de revolunet

Le point sur ExtJs 4

Ca fait deja quelques années qu’ExtJS fait le bonheur des développeurs d’applications web complexes. Depuis sa premiere version ce framework javascript a su tirer le meilleur de nos browsers web, permettant à ses utilisateurs le développement d’interfaces riches, robustes et évolutives. Pour ceux qui ne connaissent pas encore cette technologie, je vous invite à aller jeter un oeil au site de Sencha qui présente parfaitement les différents produits réalisés par cette companie.

Aujourd’hui la version 4 d’ExtJS est disponible, stable et remplie de nouveautés faisant toute la différence avec la version 3 qui était deja tres appréciées des codeurs de webapps.

Chez REVOLUNET ça fait deja quelques mois que nous utilisons cette version et il est temps pour nous de vous faire un petit retour d’expérience.

SO WHAT’S NEW ?

Les nouveautés implémentées dans ExtJS 4 sont nombreuses, nous n’allons pas les lister ici mais simplement parler de ce qui nous parait comme une avancée notable par rapport aux versions précédentes.

1) The MVC model
Le but d’architecturer sont code selon le modèle MVC est une avancée importante. Auparavant le code métier (controlleurs) etait souvent mélangé avec la description de l’interface et des données (views and models), les actions concernant les éléments du design étant déclarées au meme niveau que les attributs influants sur l’affichage.

Exemple avec ExtJS 3 : un bouton et sa fonction s’exécutant lors du clic.

Bien sûr cette facon de déclarer un bouton dans ExtJS 4 est encore valide mais lors du développement d’interfaces complexes cette méthode peut s’avérer assez inefficace. Imaginons que notre bouton soit perdu au milieu de l’imbrication de plusieurs widgets et que le clic sur ce dernier doit déclencher différentes actions un peu partout dans l’application. Et bien notre seule facon de faire les choses proprement était de déclencher des évenement personnalisés et de les relayer “à la main” (bubble, cascade, relayEvent…) pour qu’ils soient pris en compte dans les autres éléments de l’interface.

Désormais ExtJS 4 nous propose une alternative à cette architecture que nous avions l’habitude d’avoir avec ExtJS 3. Il suffit pour cela de séparer les deux codes, la déclaration de notre bouton dans une “vue” et les actions le concernant dans un “controlleur”.

Exemple avec ExtJS 4 :

myView.js

myControlleur.js

Dans cet exemple on peut voir l’utilisation du nouveau concept de “ComponentQuery” qui a la maniere des selecteurs CSS permet d’obtenir une référence à n’importe quel composant de notre interface. Ici ‘viewport button[action=submit_a_form]‘ signifie “le bouton du viewport qui comporte un attribut action égal à submit_a_form”.
Il suffit ensuite d’associer les évènements a notre bouton sans ce soucier des son imbrication dans les widgets de notre application. Cerise sur le gateau grace à cette technique, les évènement peuvent etre déclarés avant que les widgets (ici notre bouton) n’aient été “render”.
Si un nouveau bouton faisant parti de notre viewport et ayant un attribut action égal à submit_a_form est créé il repondra au meme fonctionnement, meme s’il n’est pas rendu au load initial de l’application.

Dans cet exemple on peut aussi apprécier l’utilisation de Ext.create qui évite d’avoir un code truffé de “new Ext.Button” qui étaient interprétés au run time. Cela a pour effet d’accélérer grandement le chargement de l’application.

2) Ext.loader

Ce n’est pas à proprement dit une nouveauté d’ExtJS 4 car cette fonctionnalité existait deja en partie dans la version 3 du framework. Disons simplement que le load dynamique des ressources de votre application est désormais induite pour peu qu’on en ai envie.

Si nous reprenons les projets que nous avons développer chez REVOLUNET avec ExtJS 3, on peut voir des fichiers “index.html” démesurément grands car ils comportent toutes les inclusions des differents scripts necessaires au bon fonctionnement de l’application, meme si ces resources ne sont pas utilisées au load de la page.

Aujourd’hui la donne a changée, ExtJS se chargeant d’aller chercher les ressources nécessaires au fur et a mesure de leur utilisation. Ceci comporte deux avantages a nos yeux, le premier etant de ne plus se soucier de savoir si les bons fichiers sont inclus dans l’index, le deuxième est que cette technique nous force a organiser notre projet d’un facon bien spécifique afin qu’ExtJS soit en mesure de trouver le code qu’il souhaite charger quand il le juge necessaire.

Afin de bien comprendre le fonctionnement du chargement dynamique de vos scripts nous vous invitons à lire cet article: http://www.sencha.com/blog/using-ext-loader-for-your-application

SO WHAT’S THE POINT ?

Il aurait beaucoup de choses a dire sur la nouvelle version d’ExtJS 4, la gestion des données, la configuration des objets complexes comme les grids ou les forms, les améliorations de performances… les avancées apportées par le nouvelles version de ce framework sont nombreuses.

En ce qui nous concerne il est évident qu’ExtJS a fait un réel bon en avant avec la sortie de la version 4. Concrètement notre point de vue de développeurs spécialisés dans les applications web est qu’ExtJS 4 va nous faire gagner un temps precieux lors du développement de nos nouveaux projets. Et ca, ca vaut de l’or

De plus, de nombreuses améliorations ont également été portées dans Sencha Touch 2 (gestion des classes, loader…), ce qui nous permet de capitaliser en compétence sur les projets basés sur les frameworks Sencha, que ce soit pour les applis Desktop, ou mobiles.

N’hésitez pas à nous consulter pour vos besoins en développement d’applications web riches.

Django internationalisation made easy with i18n

Ok so now you have your new django based killer app you’d like to translate it into several languages. Here’s a quick memo to get all this running quickly.

Django provides all the tools you need to do this effectively. You can use simple string translations or create more advanced rules with various plurals forms, variable interpolations…

First, be sure to use UTF-8 encode anywhere in your project :

• Save your file as UTF-8 (check your text editor)
• Declare python files encoding with this at the top of each python file (see PEP 263) :
  # -*- encoding: UTF-8 -*-
• Define your strings as unicode if needed
• Be warned : mixing encodings and charsets in a project can cause hasardous/mystical issues then massive headaches

Django provides several builtin tools to help you internationalise :

• makemessages command : scan your code to extract definition and create a .po file
• compilemessages command : compile your translations in the .po files to .mo
• django.middleware.locale.LocaleMiddleWare : Autodetect user language (from browser) or use session defined language (or fallback to project default)
• django.core.context_processors.i18n: add LANGUAGE_CODE and LANGUAGES variables to your templates
• django.conf.urls.i18n : a view that accepts a language POST parameter to change session language
• django.views.i18n.javascript_catalog : provides a javascript array with the translations and helpers functions gettext…

So lets internationalise our project :

Django make it easier to work with app level localisations and not project-global files.
So you must create a ‘locale’ subfolder for each app you want to localize.
Create a ‘fr’ and ‘en’ folder inside each ‘locale’ folder. (or more if needed)
Try first to translate a first app in a second language before going on.

Activate django.middleware.locale.LocaleMiddleWare and tweak your settings.py :

# -*- encoding: UTF-8 -*-

TIME_ZONE = 'Europe/Paris'
LANGUAGE_CODE = 'fr-FR'
USE_I18N = True

# see http://code.djangoproject.com/browser/django/trunk/django/conf/global_settings.py
gettext = lambda s: s
LANGUAGES = (
('fr', gettext(u'French')),
('en', gettext('English')),
)

MIDDLEWARE_CLASSES = (
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.locale.LocaleMiddleware',
'django.middleware.common.CommonMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
)

TEMPLATE_CONTEXT_PROCESSORS = (
"django.core.context_processors.auth",
"django.core.context_processors.debug",
"django.core.context_processors.i18n",
"django.core.context_processors.media",
"django.core.context_processors.debug",
)

Add a lang toolbar to your template and connect to the django.conf.urls.i18n view :

Add a simple lang bar to your base template :

   {% load i18n %}
    <div id='langbar' style='text-align:right;padding-top:5px;'>
        <form name='langform' style='margin:0px;display:inline;width:200px' action='/i18n/setlang/' method='POST'>
            {% for LANG in LANGUAGES  %}
                <img src='{{ MEDIA_URL }}img/flags/{{ LANG.0 }}.png' title="{% trans LANG.1 %}" style='margin:5px;cursor:pointer' onclick="document.langform.language.value='{{ LANG.0 }}';document.langform.submit();">
            {% endfor %}
            <input name='language' type=hidden value="{{ LANGUAGE_CODE }}">
            current LANG : {{ LANGUAGE_CODE }}
        </form>
    </div>

As you can see, when you enable i18n context processor, your templates can acces new variables like LANGUAGE_CODE or LANGUAGES

Now add the /i18n/setlang/ view in your urls.py.
This view accepts language POST parameter then redirect user to REFERER page (or one designed with ?next GET parameter). Selected language is then kept in session.

urlpatterns += patterns('',
    (r'^i18n/', include('django.conf.urls.i18n')),
)

Now, check if when you submit the form, the selected language is kept in session. If not check your database (need the session table), restart your dev server or enable settings.DEBUG

If you can submit your lang and LANGUAGE_CODE is kept in session, bravo, your django is multilingual ready.

Internationalise your code

In your templates : just load i18n then replace every string with a trans tag

{% load i18n %}
<div class="main">{% trans "Welcome to our new website" %}></div>
{% block contents %}<img src="/img/intro-{{ LANGUAGE_CODE }}"/>{% trans "This is the intro" %}{% block %}

In your views : just import django.utils.translation.gettext then replace every string with gettext(thestring)

from django.utils.translation import gettext as _ # just a shortcut
def view(request):
    hello = _('Hello, World')
    return HttpResponse('<b>%s</b>' % hello)

Now each time you run the makemessages command for this app, it will detect these string and update this app django.po files accordingly.

Generate the .po, traduct then compile to .mo

1. From this app folder, run

   python ../manage.py makemessages --all

   This will scan this app .py and .html files for gettext/trans calls and generate or update a django.po file for each lang.

2. Now you can edit (manually) this old-fashionned-style .po file with your favorite  text editor.
   If your site default is English, edit app/locale/fr/LC_MESSAGES/django.po (and djangojs.po if needed)
3. Once all your strings are translated, run

   python ../manage.py compilemessages

   from the app root. This will generate .mo files from the .po

Now your templates and views should be automagically translated.

run makemessages/compilemessages commands to update the .po and .mo when you change some code. restart the web server.

Javascript internationalisation

Now your templates and views are correctly translated, you may also need to internationalise jour javascript files.

Django provide a simple solution that you can use in your projects

• the makemessages command takes a -d djangojs parameter to parse .js files and create a djangojs.po
• The django.views.i18n.javascript_catalog provides a way to acces the .po files from javascript
• This view serves a javascript file containing a ‘catalog’ array with translations and utilities functions such as gettext

Activate the view in your urls.py :

I tweaked the official rule a bit.

# urls.py
def jsi18n(request, packages = None, domain = None):
    if not domain:
        domain = 'djangojs'
    from django.views.i18n import javascript_catalog
    return javascript_catalog(request, domain, packages)

urlpatterns += patterns('',
    (r'^jsi18n/?(?P<packages>[^/]+)?/?(?P<domain>[^/]+)?/?$', jsi18n ),                                          # serves the javascript data
)

Add a javascript include in your template ( be sure to include it before any other javascript localised file) :

	<script type="text/javascript" src="/jsi18n/main/djangojs"></script>

This url will serves you a javascript file from project/main/locale/fr/LC_MESSAGES/djangojs.po (if user lang is fr)

By default, this language definition returns the user LANGUAGE_CODE but you can override using ?language GET parameter

Now you just need to replace each string in your javascript files with a call to gettext.

alert( gettext("Ready to start ?") );

Maintain

When you add new code, always use calls to gettext instead of strings.
run makemessages to update the .po definitions
translate new strings in the .po files
run compilemessages to update

Voila Now your app can speak any UTF-8 lang, which is more than 600 languages

These are just the basics, check out for the full story http://docs.djangoproject.com/en/dev/topics/i18n/internationalization/

Notes/Gotchas :

• Using builtin dev server, you need to restart after a compilemessages
• Use famfamfam flag icons
• You must add your app to settings.INSTALLED_APPS if you want to use jsi18n view for this app
• Double check middlewares order, and session tables

Mise à jour de VLCcontrols

VLCcontrols est une librairie Javascript qui vous permet d’intégrer le fameux lecteur VLC dans vos pages web et de profiter de toute sa puissance. De nouvelles fonctions ont été ajoutées : possibilité d’intégrer des sous titres (locaux ou distants), de transcoder/streamer ou enregistrer le flux en cours de lecture sur votre disque dur, tout cela depuis une page web.

VLCcontrols is javascript library that allows you to embed the powerful VLC plugin in any webpage; New features have beed added today : you can now embed subtitles (local or remote), transcode and save or stream your contents as if you were in VLC, but from your webpage.

VLCcontrols home : http://code.revolunet.com/VLCcontrols

VLCcontrols advanced features demo : http://code.revolunet.com/VLCcontrols/VLCcontrols/advanced.html

VLCobject, VLC dans votre page web

Je viens de publier une petite librairie javascript largement inspirée de swfobject et qui vous permet d’intégrer facilement le  plugin VLC dans vos pages WEB. Le plugin est chargé en pur javascript et si l’utilisateur n’a pas de plugin VLC installé, un message lui indiquant un lien de téléchargement lui est indiqué.

Ca s’appelle VLCobject et c’est dispo ici : http://code.revolunet.com/VLCobject/FR

Pour ajouter les boutons Play, Pause, Stop, Volume, Seekbar… regardez du coté de la librairie VLCcontrols

Insérez VLC dans vos pages WEB !

Tout le monde connait la puissance de VLC, le célebre lecteur multimédia développé à l’origine grâce à un projet de l’école Centrale, puis offert au monde open-source et qui permet de lire pratiquement tous les formats videos. Aujourdhui, VLC est devenu un projet international, qui rassemble une grosse communauté et est supporté par de nombreuses entreprises dont Free qui a basé beaucoup de ses services sur ce petit bijou et a aussi largement contribué à son développement.

Mais VLC, plus qu’un ’simple’ lecteur, est aussi une véritable plate forme multimédia de réencodage et de diffusion, qui permet de transformer et de diffuser des flux audios ou videos de multiples facons. Par exemple, grace à VLC, vous pouvez capturer le flux de votre webcam ou de votre tuner TV et le diffuser sur Internet, en format MPEG2 par exemple, ou meme h264 ou Flash (FLV) si votre processeur (et porte monnaie) le permet. Vous pouvez également ajouter des filtres, sous titres et appliquer si vous le souhaitez des transformations aux images…

Depuis peu, il est également possible d’intégrer directement le player VLC dans des pages web, à l’instar d’autres players comme WindowsMediaPlayer par exemple, ce grâce à l’équipe de VLC, qui a travaillé dur pour créer un ActiveX (pour Internet Explorer) et un plugin pour Mozilla, lesquels disposent desormais d’une nouvelles API unifiée, qui permet de les controler facilement en Javascript. Nous allons maintenant pouvoir intégrer le player VLC directement dans des pages web, et exploiter toutes ces possibilités : lecture haute definition, mais aussi sous titrage, réencodage, enregistrement, diffusion…

Pour profiter de ces possibilités, vous devez installer au moins un des deux plugins pour votre navigateur. Pour ce faire, il suffit de cocher ces options pendant l’installation de VLC.

Je viens de développer une petite librairie Javascript qui permet à n’importe quel webmaster d’insérer facilement le lecteur VLC dans ses pages web, en ajoutant en plus quelques boutons de controle : play, stop, volume, seekbar… vous pouvez trouver cette lib sur http://code.revolunet.com 

autre exemple plus complet : http://vlc.revolunet.com

J’espere que cela permettra une diffusion plus large de ce merveilleux plugin !

Attention, installez plutot la verison 0.8.6d (derniere stable) plutot que la 0.8.6c qui souffre d’une serieuse vulnérabilité au niveau sécurité !

Le site de VLC : http://www.videolan.org

Le forum : http://forum.videolan.org

et le wiki de plus en plus complet : http://wiki.videolan.org

J’attends vos feedbacks, merci

EDIT : Cette a été remplacée par VLCcontrols : http://code.revolunet.com/VLCcontrols

gcomment.com, le widget gratuit pour la gestion de commentaires.

Découvrez le nouveau service lancé par l’equipe de revolunet en version béta !

gcomment.com permet d’insérer une zone de commentaires customisable sur les pages de votre site sans taper la moindre ligne de code.

Echangez avec vos visiteurs ou donnez leur la possibilité de laisser un avis !

Le service est 100% gratuit et l’inscription ouverte à tous. Nous attendons avec impatience vos commentaires et suggestions pour en faire un service ultime !!

check it out ! http://www.gcomment.com

PHPdiapo : diaporama PHP/Javascript

J’ai crée un petit script PHP pour générer des diaporamas facilement dans une page.

Le script scanne un dossier et genere le javascript necessaire au diaporama. On peut en placer plusieurs par page et il suffit d’une seule ligne de code pour générer le diaporama :

infos et sources sur https://github.com/revolunet/PHPdiapo, commentaires bienvenus ici même.

enjoy

YouOS, premier OS en AJAX

Voila, un premier soit-disant système d’exploitation 100% AJAX est sorti; il s’agit de YouOS

On accède à un bureau des plus classiques, avec menu démarrer et on ouvre ses ‘applications’ dans des calques séparés, comme des fenetres windows. Par défaut il y a pas mal d’applications : un “Rich Text Editor”, une gestion des notes, un browser, un lecteur de RSS, un chat…

L’avantage est que l’on peut ajouter pratiquement n’importe quelle application web à ce menu démarrer et même développer des programmes en Javascrit qui s’ajouteront à notre ‘OS’. Par exemple Google SpreadSheets ou d’autres programmes pourraient être intégré à l’appli.

Il y a même un pseudo shell dans lequel on va retrouver nos fichiers crées et pouvoir taper des commandes classiques : copier/deplacer/supprimer… et aussi un ‘kill’ pour tuer une de nos fenetres.

C’est bien fait, déjà bien avancé… et impressionnant car le javascript assez bien optimisé.

bien joué les geeks !

Librairie AJAX Yahoo

Yahoo surprend tout le monde Open Source aujourd’hui en publiant des biblioethèque de Ajavscript destinées à faire de l’AJAX.

Il s’agit de fonctions cross-browsers pour gérer la fonction XmlHttpRequest, les animations de calques, le drag & drop, et egalement de quelques UI items : Calendrier, Slider, Treeview.

Tout ca releasé sous une license très permissive : la BSD licence ! (peut etre réutilisé dans toutes application même payante en mentionnant le copyright)

IE7 : support natif de XMLHTTP (AJAX)

Bonne nouvelle pour les web-developpeurs : IE7 intégrera de facon native une version standard de l’objet XMLHTTP.

Alors qu’il fallait jusqu’a présent utiliser un appel différent en fonction du navigateur, on pourra maintenant se contenter d’un appel unique, ce qui va faciliter à terme le developpement d’applis en AJAX.

Bien heureusement, les appels à l’ancien code ActiveX seront toujours supportés

JsJaC : JavaScript Jabber Client Library

Voici une petite librairie pour utiliser Jabber depuis le Javascript ! Ca marche en coordination avec un serveur Jabber qui gère le HTTP-Polling.

C’est compatible IE 5+, Gecko, Netscape 6+… donc très compatible !

voici un petit exemple pour m’envoyer un message :

on peut envoyer, recevoir, gérer les présences…

Attention : si le domaine ou est la page web n’est pas le meme que celui ou est le http polling, il faudra prevoir une modif de le conf d’Apache (mod_proxy + mod_rewrite) pour rewriter le domaine et contourner la restriction javascript.

Quick Lookup : Références rapides

Voici un exemple concret et utile en AJAX : C’est une simple page web sur laquelle vous pouvez chercher les definitions de fonctions PHP, MySQL, Javascript, ou de propriétés CSS.

• Placez vous sur l’onglet du langage sur lequel vous voulez faire la recherche
• Tapez un mot clé -> Apparaissent alors instantannément les termes approchants
• Cliquez sur un des termes trouvé et vous avez la définition de la fonction : arguments, exemples et liens vers des infos plus complètes

Très pratique quand on est pas sur d’une syntaxe ou qu’on a un petit doute…

–> Quick Lookup : http://ql.aonic.net/

Encore plus pratique : mettez l’URL dans une sidebar FireFox

Ressources AJAX : ‘AJAX Patterns’

Voici un wiki qui regroupe des ressources utiles aux developpeurs AJAX :

• Présentation de différentes techniques et effets
• Exemples
• Toolkits
• Outils de developpement
• Liens utiles

http://ajaxpatterns.org/wiki/index.php?title=Main_Page

Correspondance des propriétés Javascript et CSS

Voici une reference utile pour la correspondance des propriétés CSS en Javascript.

Avec cela, vous pouvez modifier à la volée les propriétés CSS de vos élements via Javascript.

–> Reference Javascript/CSS sur CodePunk

Menu DHTML vertical type ‘explorer’

Voici un script pour un menu de navigation verticale en DHTML.

Il est simple et efficace, en Javascript + CSS, et surtout il gère des niveaux de profondeur illimités, ce qui est parfois bien utile pour naviguer dans un gros site… (et evidemment, il est cross-browser).

vous pouvez l’adapter très facilement à votre convenance.

ca s’appelle PDE (pureDOMexplorer) et c’est ici

Menu DHTML vertical et horizontal

voici un script tout pret pour faire votre menu DHTML+Javascript+CSS en vertical ou horizontal

il est simple et fonctionne très bien, mais par contre, on ne peut avoir qu’un seul niveau de profondeur, c’est à dire rubrique principale + sous-rubrique, pas plus loin…

Yet Another Dynamic Menu

Contourner les restrictions de XmlHttpRequest

Sous la plupart des browsers, l’appel à la fonction XmlHtppRequest est limitée au domaine d’ou est executée la requete.

C’est bien embetant car très souvent on fait appel à des services exterieurs pour récupérer ses infos .

L’article suivant (en Anglais) propose quelques ruses effiacaces pour contourner le probleme :

• une page PHP qui fait office de proxy pour récupérer les infos sur votre domaine
• un proxy via APACHE
• une ruse en javascript qui convertir le xml en une string (bidouille)

http://www.xml.com/pub/a/2005/11/09/fixing-ajax-xmlhttprequest-considered-harmful.html

librairie pour effets visuels javascript

Je vous présente Moo.Fx, une mini librairie Javascript pour faire des effets graphiques :

Apparitions/Disparitions, Fades-in/Fades-out, Redimensionnements…

Petits effets mignons, légers et faciles à utiliser..

Moo.Fx

Drag & Drop Sortable Lists with JavaScript and CSS

Voici un exemple très sympa de drag&drop 100% pur Javascript

C’est propre et ca permet de faire du web + ergonomique…

Drag & Drop Sortable Lists with JavaScript and CSS