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

Contrat CDI, salaire en fonction des compétences et embauche dès que possible.

Transmettez nous votre CV par email : contact@revolunet.com

Car la donne a changé depuis l’arrivée de l’iPhone et des mobiles sous Android : aujourd’hui, le logiciel du téléphone, et surtout les applications que l’on peut installer, comptent tout autant que le le mobile lui-même. A quoi sert un matériel très évolué si le logiciel interne ne l’est pas ou est trop fermé ? En arrivant sur un marché ou déjà deux géants s’affrontent déjà depuis plusieurs années, avec 100000 applications dans l’AppStore et près de 50000 dans l’android market, et un android qui s’impose chez tous les fabricants, comment pourra faire Nokia pour lutter ?

Nokia fait d’excellents téléphones (6230, N900…), mais Symbian, qui équipe la plupart de leur gamme, n’est pas à la hauteur et aura beaucoup de mal a conquérir les développeurs. Je ne vois plus qu’une alliance Google-Nokia pour sauver cette marque et lui offrir enfin un OS digne de ce nom.

Contrairement à d’autres frameworks web, Django n’est pas orienté CMS ou HTML. Vous pouvez tout autant créer un site HTML/Ajax, une API RESTFUL http ou une application en ligne de commande.

Django permet de coder toute la partie serveur de votre application, mais pour la partie ‘client’, c.a.d. le HTML par exemple, vous devrez vous débrouiller tout seul ou utiliser un autre framework, jQuery par exemple, ou ExtJs.

Pourquoi Django ?

Open Source
Portable
Langage Python
Prototypage rapide
Evolutivité
Abstration ORM
Supporté par Google AppEngine (avec restrictions)
Excellente documentation

Fonctionnalités principales :

• ORM : permet une abstraction de la base de données et du SQL, ce qui fait que vos applications peuvent tourner sur : SQLlite, MySQL, SQLserver, Oracle, PostGres…
• Admin automatique : une fois vos modèles définis, ils sont de suite accessible dans l’interface d’admin automatique, et vous pouvez toute de suite créer objets
• Templates : une gestion des templates très poussée, avec gestion des héritages, des filtres et ‘customs tags’.
• Shell intégré : Tout votre code est également accessible directement depuis un shell intégré
• Gestion des utilisateurs : Toute la partie utilisateurs, comptes, login, sécurité et permissions est déjà disponible sans efforts

Inconvénients :

• Peu d’hébergeurs mais cela évolue : http://code.djangoproject.com/wiki/DjangoFriendlyWebHosts
• C’est surtout  un avantage, mais le projet évoluant très vite, vous devrez coder avec et pour une version spécifique de Django. Et vous ne mettrez à jour django pour tel projet seulement après avoir consulté cette page : http://code.djangoproject.com/wiki/BackwardsIncompatibleChanges

A noter que Django est une librairie python, vous pouvez n’utiliser que les fonctions dont vous avez besoin, même en ’standalone’  (hors du web).  Et vous pouvez tout modifier, étendre et améliorer à souhait.

La première chose à faire avant de se lancer dans Django est déjà de connaitre un minimum le langage python et sa ‘magie’. Le livre ‘Think like a computer scientist‘ est à lire, Instant Python pour les préssés, et “A byte of python” (en francais).

C’est parti

Installez python (2.5 ou 2.6) sur votre machine, et récupérez la dernière version de Django. Le repertoire ‘django’ de cette archive doit se trouver dans le dossier ‘lib/site-packages’ de votre installation de Python. Si vous souhaitez utiliser MySQL comme serveur, installez python-mysqldb. Sinon, SQLlite fera très bien l’affaire pour démarrer !

Pour tester si votre installation de python/django est correcte :

Si vous avez une erreur lors de l’import, alors votre dossier ‘django’ n’est pas dans votre dossier python\lib\site-packages, vérifiez.

Si l’install est correcte, alors vous pouvez créer votre premier projet django.

Exemple sur windows :

Ouvrez un shell, et placez vous dans votre dossier de travail, puis lancez la commande django-admin.py startproject

Un dossier ‘projet1′ a été crée et contient les fichier de base :

• settings.py : configuration du projt, base de données, emails…
• urls.py : la configuration des urls de votre projet
• manage.py : la commande qui permet de lancer le serveur, mettre a jour les bases et effectuer des opérations de maintenance.
• __init__.py : ce fichier permet simplement à Python d’interpréter le dossier en tant que ‘module’

Pour développer un projet Django, utilisez le ’serveur de dev’ intégré (commande manage.py runserver), mais pour la production, vous devrez mettre en place Apache+WSGI, Nginx ou un autre serveur.

Lancez le serveur pour vérifier que votre projet est bien crée :

Maintenant vous pouvez ouvrir votre browser à cette adresse : http://127.0.0.1:8000/

Modifiez le fichier settings.py, puis suivez le premier tutorial pour commencer à faire joujou.

Je reviens prochainement  pour la suite.

Sanyo Xacti CA9

Si vous êtes à la recherche d’un camescope pratique, économique et performant, alors le nouveau Xacti CA9 est peut etre fait pour vous. Principal point fort de cette gamme : la simplicité d’utilisation, la polyvalence et la robustesse. Le nouveau Xacti CA9 de Sanyo conserve le mode ‘torche’ propre à la série des Xacti et apporte son lot de nouveautés :

• Films en HD 720p, MP4, AVC, h264  (jusqu’a 9mbit/s)
• Photos en 9MP
• Etanche jusqu’à 1.5m !
• Simplicité d’utilisation
• Cartes SD ou SDHC jusqu’a 32Go
• Zoom optique 5x
• Prises de photos possible pendant que l’on filme
• Flash pour les photos (uniquement)
• Stabilisateur (assez décevant)
• Détection des visages

Camescope idéal pour les geeks et autres bloggers, il enregistre directement en MP4/h264, ce qui permet de produire des films directement  lisibles dans un player Flash comme FlowPlayer sans aucun conversion. Récupérez la carte SD, transférez sur votre FTP et la vidéo sera directement lisible par vos amis sur Internet.

L’utilisation est simple et intuitive, très peu de boutons et un petit joystick permettent d’accéder à toutes les fonctions et réglages, notamment le montage, découpage et assemblage de scènes si besoin. L’appareil est petit et léger, robuste et étanche, ce qui permet de l’emmener à la plage sans se soucier des grains de sable ! La qualité de la finition et des materiaux est excellente, il faudra simplement faire attention à l’écran rotatif qui est le seul point fragile.

La qualité des images est bonne sans être exceptionnelle et vous n’avez le choix pour la vidéo qu’entre 3 résolutions : 640×480 en 30 ou 60 images/seconde et 1280×720 en 30 img/secondes. Différents modes et filtres vous permettront d’adapter votre prise de vue à la scene si besoin.

Enfin, à 450€ environ, cet appareil bien pensé rassemble toutes les qualités d’un bon camescope de base, avec en plus l’érgonomie et la solidité des Xacti. Seul point noir, l’autonomie, d’environ 70 minutes, qui vous obligera à investir dans une batterie supplémentaire au cas ou. (40 € environ). Si vous avez besoin d’une qualité d’image plus professionnelle ou d’un zoom plus puissant, les modèles Xacti supérieurs comme le HD1010 ou le HD2000 vous l’offriront pour un peu plus cher.

Vous pouvez voir une vidéo de test ici en cliquant ici (HD 720p, dans FlowPlayer)

Et quelques photos : le chat, la macro, un paysage, une cascade. (non je ne donnerai pas l’adresse de ceslieux magiques)

En plus d’enrichir les actionnaires plutôt que les consommateurs, fermer un marché freine la stimulation économique et le développement de nouveaux services, toujours au détriment du consommateur.

Depuis des années, Free se bat pour enfin obtenir une licence de téléphonie mobile 3G, dont l’obtention est retardée, refusée, et re-retardée maintes fois. Or Free s’est engagé à faire économiser jusqu’a 30% de leur facture annuelle de téléphone mobile à 40 Millions d’utilisateurs Francais.

Et on a vu ce que Free a réussi dans l’ADSL en France : développer un marché extraordinaire en un temps record, innover, apporter de nouveaux services et usages, démocratiser internet et stimuler la concurrence. On peut se demander ce que serait aujourdhui  l’Internet en France sans Free ? 

Il est donc plus que nécessaire pour le consommateur que Free obtienne enfin cette licence pour enfin rendre le téléphone mobile plus accessible, faire baisser les couts, notamment ceux, scandaleux, des SMS.

D’après Numerama, le dossier de l’attribution des licences pourrait trainer jusqu’en Juin 2010, date à partir de laquelle le cout de déploiement technique triplera, car les 3 opérateurs actuels n’auraient alors plus à céder une partie de leurs fréquences au nouvel entrant : http://www.numerama.com/magazine/12970_3-4eme-licence-3G-le-dossier-Free-bientot-enterre.html

Suivez bien ce dossier !

La série de disques durs seagate utilisés, des ‘Barracuda’, a posé de nombreux problèmes, à Seagate, qui a changé non-stop de firmware mais aussi aux fabricant de NAS comme QNAP. J’ai du attendre presque 2 mois pour qu’un firmware compatible soit enfin releasé mais cela a finalement été fait et bien fait grâce au support technique très réactif  de QNAP. Une fois ces problèmes materiels résolus, la création du RAID5 a duré près de 30h, entre le formatage et la synchronisation. Il faut dire que le CPU de ce QNAP est assez misérable (500Mhz) ce qui vous pénalisera si vous avez par exemple de gros rsync a faire.

L’interface web de gestion du QNAP est claire et efficace, on yretrouve toutes les fonctions de configuration, mais aussi une section “Download Station” qui permet de lancer directement sur le NAS des téléchargements http/ftp/BT. Le boitier est également compatible DLNA pour ceux qui ont des consoles XBOX 360 ou PS3 et souhaitent partager les fichiers. Les principaux protocoles de partage de fichier son supportés : Samba/AFS/NFS/FTP… D’autres fonctions sont interessantes : réplication entre plusieurs NAS à distance, serveur Web et MySQL intégrés, bouton “hotcopy” pour copier rapidement le contenu d’un disque USB externe sur le NAS, gestion imprimantes USB (comme la freebox), Corbeille réseau, iTunes station… 

Au niveau des performances, le bilan est assez mitigé :

• Transfert avec rsync du port USB du QNAP d’un disque en NTFS vers le RAID5 : 2.5mb/s (cpu a fond)
• Transfert avec cp du port USB du QNAP d’un disque en NTFS vers le RAID5 : 6.5mb/s
• Transfert avec rsync entre un linux et le QNAP via ssh : 2.5mb/s (cpu a fond)
• Transfert avec rsync entre un linux et le QNAP via NFS : 7.5mb/s
• Transfert entre un explorateur windows et le QNAP via samba : 6mb/s

Points positifs :

• Configuration facile et rapide
• Fonctionnalités multiples
• Linux

Point négatifs :

• Pas de support du ReiserFS
• CPU trop lent
• seulement 256 de RAM

Conclusion : Le QNAP reste un bon NAS, accessible et fonctionnel. Idéal pour le stockage sécurisé, les sauvegardes et le partage réseau.

CF comparatif des NAS 2009 sur clubic : http://www.clubic.com/article-151126-17-stockage-reseau-nas.html avec tests complets et comparatif des performances. On voit que le TS509, nouveau modele avec un CPU plus puissant et 1Go de RAM est largement devant. donc si vous avez les moyens, foncez sur le TS-509 Pro (environ 800€ TTC sans les disques).

• Le téléphone est inutilisable, il se désactive régulièrement, il faut carrément RESET la box pour le relancer
• Impossible d’envoyer/recevoir des fax, la ligne est totalement instable. retour a l’envoi manuel à la Poste :/
• Le débit est minable, même en download
• Impossible d’avoir une IP fixe avec neuf, même pas en option !
• Les conseillers au téléphone font des RESET à distance sur la box, sans même vous prévenir, et en effacant votre configuration, obligé de tout reconfigurer…

Dire que j’avais souscrit à leur offre ‘Pros’

Bref, fuyez Neuf (SFR) pour un opérateur plus fiable, FREE par exemple voir Orange si vous êtes pret à payer le prix fort.

Resil et migration en vue pour moi.

EDIT: Suite à plusieurs appels à la hotline, Neuf a décidé de brider la ligne en question à 5mbits/s. Et depuis c’est vrai, le telephone est plus stable et le fax marche en envoi/reception. (uptime 24h). Mais 5mb/s en plein Paris c’est bien décevant pour un service vendu comme du “Très haut débit”. Vivement la fibre.

Cette décision, surtout politique, va obliger tous ceux qui ont migré sur jabber à changer de client (pour un client multi-protocoles) ou à s’inscrire sur une autre passerelle.

Si comme moi vous êtes un fan de PSI , vous pouvez tout de même utiliser d’autres passerelles, comme par exemple celle de jabber.gnubox.net tout en gardant votre compte jabber actuel. 

La passerelle MSN aura en tous cas rendu de bons et loyaux services pendant plusieurs années, meme s’il fallait la relancer 1 à 2 fois par semaine, ce qui est tout de meme toujours mieux que de faire tourner Live Messenger.

AMEN