Blog Jaune

    C'est Steve Jobs qui le dit: (à propos des applications web2.0 et ajax) "c'est une manière très moderne d'établir des applications".
Il a aussi ajouté "et nous pensons qu'elle va être impressionnante sur l'iPhone".
Steve Jobs étant assimilé à Dieu ou à l'utilisateur root, sa parole ne peut être remise en cause.

    Plus sérieusement, il est intéressant de remarquer que de plus en plus de grandes entreprises de l'informatique s'intéresse à ce nouveau mode de développement. Les Rich Internet Application sont donc à la mode, et tant mieux. Du moment que le framework est opensource, que l'application est valide, compatible avec la plupart des navigateurs; le portage d'un système à un autre est le dernier des soucis du développeur.
 
    On y gagne aussi les avantages de la centralisation des données, indispensable pour le contrôle de l'information. Mais c'est une autre histoire

    Diapoo, est une librairie javascript qui permet de réaliser rapidement un diaporama javascript web2.0. C'est simple, accessible, rapide, et facilement personnalisable. La présentation se fait avec les css, et le diaporama est visualisable lorsque le javascript est désactivé. Vous pouvez donc adapter Diapoo à n'importe quel design, dans n'importe quel cas. Utiliser la puissance du css, combiné à la facilité du xhtml c'est Révolutionnaire !

Pour vous convaincre, voici un diaporama en javascript réalisé avec diapoo.

Comment utiliser Diapoo ?

    Pour utiliser Diapoo, il faut commencer par télécharger l'application. Diapoo utilisant les librairies prototype et scriptaculous. Vous devez aussi les télécharger. Les icônes qui viennent du thème Tango sont fournies avec.

    Pour créer un diaporama, il faut commencer par avoir un block (une div par exemple) qui contiendra les diapositives. Il est important de pouvoir identifier facilement ce block. Dans le cas général, un identifiant (id) est très bien. Pour chaque diapositive, il faudra créer un block ayant pour class diapo. C'est dans ce block que sera contenu la diapositive.

    À ce stade, les diapositives sont normalement alignés verticalement, sans aucune présentation. C'est le moment de travailler le css, ceux qui n'auront pas le javascript activé verrons le diaporama sous cette forme.

    Après avoir terminé sont magnifique travail artistique, le javascript arrive (on peut aussi penser que c'est de l'art). Le diaporama doit être initialiser une fois les librairies et les diapositives chargées. un window.onload est très bien pour ça.
new Diaporama(block_diapositives, {réglages});
block_diapositives est le block qui contient les diapositives (comme son nom l'indique si bien). Pour une div ayant un id 'diaporama', block_diapositives vaudra 'diaporama', et pas autre chose pour embêter. Le deuxième paramètre est un JSON qui contient les réglages, et les options.

Quels sont les options et les réglages disponibles ?

• nom_diaporama: string
• • Permet au script de s'auto-identifier, obligatoire lorsqu'il y a plusieurs diaporamas sur la même page. Pour chaque diaporama, le nom devra être différent.
• delai_actions: int
• • Règle le délai en mini-secondes (secondes *1000) avant que la barre des actions se masque.
• temps_diapo: int
• • Délai en mini-secondes avant que la diapositive passe à la suivante.
• depart_auto: boolean
• • Si true, le diaporama commence automatiquement.
• duree_transition: float
• • Durée de la transition (en secondes) entre chaque diapositive.
• chemin_boutons: string
• • Contient le chemin des boutons, par exemple lorsque les boutons ne sont pas dans le même dossier que la page.
    

Pour changer les transitions, il faut modifier la librairie. Liste des transitions possibles avec scriptaculous.

Comment personnaliser le bouton de lancement du diaporama ?

    Pour avoir un bouton de lancement personnalisé, il faut créer un élément qui devra être identifié (là aussi, un id devrait faire l'affaire). Il doit être masqué (display:none;) pour les navigateurs n'ayant pas javascript. Si le diaporama fonctionne, il sera automatiquement affiché. Cet élément sera évidemment le bouton.

Comment personnaliser les diapositives, si le javascript est activé ?

    Lorsque le diaporama fonctionne, un attribut class est rajouté à block_diapositives. Il s'agit de diaporama_js.

Comment personnaliser les actions ?

Les actions, qui ont un attribut class actions ont par exemple le code xhtml suivant:

<div style="opacity: 0.999999;" class="actions" id="diaporama_actions" >
    <a style="display: none;" href="#" id="diaporama_bouton_revenir" >
         <img src="../boutons_diapoo/revenir.png" alt="Revenir au début du diaporama">
    </a><a style="display: none;" href="#" id="diaporama_bouton_precedente" >
         <img src="../boutons_diapoo/precedente.png" alt="Diapositive précédente">
    </a><a style="" href="#" id="diaporama_bouton_demarrer" >
         <img src="../boutons_diapoo/demarrer.png" alt="Démarrer le diaporama">
    </a><a style="display: none;" href="#" id="diaporama_bouton_pause" >
         <img src="../boutons_diapoo/pause.png" alt="Mettre en pause le diaporama">
    </a><a style="" href="#" id="diaporama_bouton_stop" >
         <img src="../boutons_diapoo/stop.png" alt="Stopper le diaporama">
    </a><a style="" href="#" id="diaporama_bouton_suivante" >
         <img src="../boutons_diapoo/suivante.png" alt="Diapositive suivante">
    </a>
</div>


Comment télécharger diapoo ?

    Version 1.1

• diapoo.zip (1.1 mo)

Quel est la license ?

    Diapoo est distribué sous license MIT.

Copyright (c) 2007 Antoine Pultier (http://www.blogjaune.fr/)

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Créer une application ruby on rails en plusieurs langues avec gettext

    Gettext est une bibliothèque qui permet de réaliser une application en plusieurs langues, facilement, et en facilitant la traduction.

    Dans le jargon RubyOnRails, l'internationalisation (ou l'internationalization en anglais), est le fait de créer une application en plusieurs langues, gettext est justement recommandé pour cela.
    Gettext a pour avantages, le fait qu'il ne soit pas limité à ruby on rails, qu'il soit très utilisé, qu'il existe des interfaces graphiques pour la traduction, qu'il ne nécessite pas de base de données, qu'il soit léger, sous licence gnu, etc…

    Pour utiliser gettext avec ruby, il existe Ruby-GetText-Package. Il est complet, et propose un bon support pour aller avec ruby on rails.

Pour l'installation, on peut utiliser les gems:
gem install gettext
Il faut ensuite charger gettext dans votre application ruby on rails.
Pour cela, il faut ajouter dans le fichier config/environment.rb les lignes suivantes:

$KCODE = 'u'
require 'jcode'
require 'gettext/rails'
LANG = 'fr'

    La constante LANG est importante, c'est elle qui définie qu'elle sera la langue par défaut de votre application.
Il est important de noter que l'application doit maintenant être en utf-8, en lisant la documentation, vous pouvez adapter les réglages pour d'autres encodages, mais l'unicode est recommandé pour ce genre d'utilisation.

    Il faut maintenant rajouter les méthodes rake pour la gestion des langues, ceci n'étant pas automatique. Pour cela, il faut créer un nouveau fichier lib/tasks/gettext.rake, contenant:

desc "Update pot/po files."
task :updatepo do
  require 'gettext/utils'
  GetText.update_pofiles("nom_de_votre_application", Dir.glob( "{app,lib,bin}/**/*.{rb,rhtml,rxml}"), "nom_de_votre_application")
end

desc "Create mo-files"
task :makemo do
  require 'gettext/utils'
  GetText.create_mofiles(true, "po", "locale")
end

N'hésitez pas à remplacer le nom de votre application
Je ne détaillerais pas, mais en lisant la documentation, on peut facilement modifier ce fichier pour l'adapter à ses besoins.

Il faut maintenant initialiser gettext.
À placer sans le fichier app/controllers/application.rb:
init_gettext "nom_de_votre_application"

Évidemment, il s'agit du même nom que celui définie plus haut.

    L'application va contenir deux nouveaux dossiers.
Un dossier po qui contiendra les traductions en langage humain (des fichiers en .po).
Un dossier locale qui contiendra les traductions en langage machine (des fichiers en .mo).
Dans chacun de ces dossiers, il y aura un dossier par traduction (fr, en, fr_FR, en_US, etc…).
    Le dossier po contient aussi à sa racine un fichier qui sert de base pour commencer de nouvelles traductions, il ne sert jamais à l'application (il a pour extension .pot).

Pour créer l'arborescence des fichiers en langage humain, il faut donc utiliser la commande:

rake updatepo


    Un dossier équivaut à une traduction (fr, en, de, it, es, ja…).
Ces dossiers contiennent chacun une copie du fichier en .pot renommé en .po
Vous pouvez maintenant commencer à intégrer les traductions dans votre application.

    À chaque fois qu'il y a du texte à utiliser en plusieurs langues, il faut lui donner un texte d'identification (aussi appelé clé), et utiliser la fonction _()
<h1>Connexion </h1> #devient:
<h1><%= _('titre_connexion') %></h1> Une fois les textes remplacés, la commande rake updatepo permet d'insérer ces références automatiquement des les fichiers du dossier po.

On trouvera par exemple:
#: app/views/user/login.rhtml:17
msgid "titre_connexion"
msgstr ""
Il suffit maintenant de mettre le texte traduit pour chaque langue, ce qui donne pour la version japonaise (contenu dans le dossier po/ja/):
#: app/views/user/login.rhtml:17
msgid "titre_connexion"
msgstr " 関係"

    Lorsque vous affichez la page, <h1>titre_connexion</h1>, est affiché. Pour que la traduction soit prise en compte, il faut générer les fichiers en langage machine pour que le texte traduit soit affiché.
rake makemo


Pour la version japonaise, ça donne:
<h1>関係</h1>

    À chaque nouveau texte à traduire, après l'avoir identifié, il faudra mettre à jour les fichiers .po (rake updatepo).
À chaque modification d'un fichier .po, pour que les modifications soient affichées, il faudra régénérer les fichiers .mo (rake makemo).

Tout ça,est très pratique, mais il manque le principal: le choix de la langue.
before_init_gettext :set_languages
init_gettext "alternc"

def set_languages
        #Règlage la langue
        if !params[:lang].nil?
                 #Si il y a un paramètre pour changer la langue, vérification de l'existence de la langue
                 if File.exist?(RAILS_ROOT+ '/po/'+params[ :lang]) || File.exist?(RAILS_ROOT+ '/po/'+params[ :lang]+'_'+params[:lang].upcase)
                        session[ :lang] = params[:lang]
                 else
                        session[ :lang] = nil
                 end
        end
        begin
                 #Si la langue choisie n'existe pas, ou si c'est la première visite
                 if session[:lang].nil?
                         break
                 end
                 #Si non, on règle simplement la langue
                set_locale session[:lang]
        rescue
                 #Si le navigateur envoi des informations sur la langue
                 if !@request.env['HTTP_ACCEPT_LANGUAGE'].nil?
                         #recherche de la langue du client
                        langs = @request.env['HTTP_ACCEPT_LANGUAGE']. gsub(/;q=[0-1]\.[0-9]/, '').split( ',')
                        langs.each do |i|
                                 #si elle n'existe pas, les langues secondaires sont étudiés
                                 if File.exist?(RAILS_ROOT+ '/po/'+i) || File.exist?(RAILS_ROOT+ '/po/'+i+ '_'+i.upcase)
                                        session[ :lang] = i
                                         break
                                 end
                         end
                 end
                 #Si il n'en existe toujours pas, la langue est celle utilisée par default, dans la configuration de l'application
                 if session[:lang].nil?
                        session[ :lang] = LANG
                 end
                 #Réglage final de la langue
                set_locale session[:lang]
        end
end
    Cette méthode, à placer dans app/controllers/application.rb détecte la langue du navigateur, et celles subsidiaires. Si il y en a aucune de traduite, c'est celle définie par la constante LANG qui est choisie. Cette méthode permet aussi de sauvegarder la langue d'une page à l'autre. Pour changer la langue manuellement, il faut donner un paramètre get lang. Par exemple ?lang=en

    Parfois, on a aussi besoin d'inclure des variables dans un texte à traduire, comme le nom du serveur.
#: app/controllers/user_controller.rb:3
msgid "user_login_page_title"
msgstr "Se connecter au serveur: %{SERVER_NAME}"
@page_title = _('user_login_page_title')% {:SERVER_NAME =>"yellowimac"}
Ce qui donne:
"Se connecter au serveur: yellowimac"

    Ceci grâce à la méthode % qui a pour paramètre un hashage. C'est une extension de la class String, c'est à dire que vous pouvez aussi utiliser cette méthode sur un texte qu'y n'a rien à voir avec gettext.
"La page a pour titre %{titre}, elle sur le serveur %{serveur}"% {:titre => "Accueil", :serveur => "yellowimac"}
    Voilà, maintenant vous êtes près à créer des applications parfaitement multilingues, rapidement et facilement.

Pour aller plus loin:

• Voir la définition de gettext sur wikipedia
• Internationalisation de logiciel sur wikipedia
• HOWTO for Ruby on Rails - Ruby-GetText-Package
• Translating Rails Apps - Manuel de RubyOnRails

    Dans la série des méthodes des vues pratiques avec Ruby On Rails, il y a pluralize.
Elle permet de mettre au pluriel un mot en fonction de la valeur donnée.
Voici quelques exemples:
pluralize(1, 'lapin')  => '1 lapin'
pluralize(2, 'lapin')  => '2 lapins'
pluralize(3, 'journal', 'journaux')  => '3 journaux'
Le problème vient lorsque l'on a une valeur qui vaut zéro.
pluralize(0, 'lapin')  => '0 lapins'En français, on ne met pas au pluriel.

Comme le framework est libre, on a accès au sources, et donc à la méthode pluralize.
def pluralize(count, singular, plural = nil)
         "#{count} " + if count == 1 || count == '1'
                singular
        elsif plural
                plural
        elsif Object.const_defined?( "Inflector")
                Inflector.pluralize(singular)
        else
                singular + "s"
        end end
Après une légère modification de la méthode:
def pluralize(count, singular, plural = nil)
         "#{count} " + if count.to_i <= 1
                singular
        elsif plural
                plural
        elsif Object.const_defined?( "Inflector")
                Inflector.pluralize(singular)
        else
                singular + "s"
        end end
Il faut la placer dans /app/helpers/application_helper.rb
Et tout fonctionne correctement.
pluralize(0, 'lapin')  => '0 lapin'