Spellify est un correcteur orthographique pour vos formulaires Web présentant l’immense avantage de fonctionner avec pas mal de langues, dont le français. Si vous téléchargez les sources, vous constaterez qu’il s’agit en fait d’un simple Javascript (utilisant Script.aculo.us), de quelques images et d’un fichier PHP. Il y a du PHP car Spellify utilise Google pour faire la correction.
Je vous propose de voir comment utiliser Spellify dans une application bivouac.
Avant tout, il faut remplacer le PHP par du Ruby. Si vous éditez le fichier PHP, vous remarquerez qu’il utilise la Google Toolbar Spell Check API. Dans le principe il s’agit simplement de faire une requête de type POST à l’adresse https://www.google.com/tbproxy/spell en passant en paramètre la langue et dans le corps de la requête un morceau de XML de la forme suivante :
<?xml version="1.0" encoding="utf-8" ?>
<spellrequest textalreadyclipped="0" ignoredups="0" ignoredigits="1" ignoreallcaps="1">
<text>WORD</text>
</spellrequest>
Remplacez le WORD par le mot à corriger et admirez. En retour vous recevrez un bout de XML contenant les corrections proposées par Google.
Dans le principe, quand nous saisissons un texte dans un formulaire, le texte est capturé et envoyé, via la méthode makeRequest de spellify.js au script PHP qui renvoie le XML à Google. La réponse reçue via le PHP est ensuite récupérée via la méthode GetResponse de spellify.js qui se charge d’afficher les orthographes possibles et de faire la substitution dans le texte saisi :
Question ! Pourquoi donc passer par le PHP ? Tout simplement parce que XMLHttpRequest ne permet pas d’envoyer des requêtes sur un autre serveur que celui de la page sur laquelle se trouve l’utilisateur.
La première chose que nous allons donc faire est d’écrire le code permettant d’invoquer le correcteur Google. Remplacer le PHP en fait.
-
require ‘net/https’
-
require ‘uri’
-
-
module Demo::Controllers
-
class Spell < R ‘/spell’
-
def get
-
render :spell
-
end
-
-
def post
-
word = input["<?xml version"].gsub( /.*<text>([^<]*)<\/text>.*/, ‘\1‘ )
-
lang = input["lang"]
-
-
results = nil
-
word = word.downcase
-
word = word.gsub("&", "&")
-
word = word.gsub("<", "<")
-
word = word.gsub(">", ">")
-
words = ‘<spellrequest textalreadyclipped="0" ignoredups="1" ignoredigits="1" ignoreallcaps="0"><text>’ + word + ‘</text></spellrequest>’
-
-
http = Net::HTTP.new(‘www.google.com’, 443)
-
http.use_ssl = true
-
http.verify_mode = OpenSSL::SSL::VERIFY_NONE
-
response = http.start {|net|
-
net.request_post("/tbproxy/spell?lang=#{lang}", words) {|response|
-
results = response.body
-
}
-
}
-
@r = results
-
-
render :spell_r
-
end
-
end
-
end
Nous n’avons ni plus ni moins qu’un controlleur classique. Les requêtes de type GET afficheront la page via la vue spell et les requêtes de types POST (provenant de spellify.js) se chargerons de faire la requête Google et de renvoyer le résultat via la vue spell_r.
La seule chose remarquable dans le code ci-dessus est cette ligne :
-
word = input["<?xml version"].gsub( /.*<text>([^<]*)<\/text>.*/, ‘\1‘ )
En effet, je l’ai signalé plus haut, mais spellify fait une requête de type post en passant le contenu XML à envoyer à Google dans le corps de la requête. Malheureusement, ce cas est mal géré (pour le moment) par camping. Et nous recevons cela comme un paramètre. En fait la chaîne XML
<?xml version="1.0" encoding="utf-8" ?>
<spellrequest textalreadyclipped="0" ignoredups="0" ignoredigits="1" ignoreallcaps="1">
<text>WORD</text>
</spellrequest>
est reçu comme cela :
input[‘<?xml version’]
# => "\"1.0\" encoding=\"utf-8\" ?> <spellrequest textalreadyclipped=\"0\" ignoredups=\"0\" ignoredigits=\"1\" ignoreallcaps=\"1\"><text>WORD</text></spellrequest>"
Ile ne reste plus qu’a mettre en place les vues. Pour spell_r, nous allons renvoyer directement le contenu de la réponse stocké dans @r :
module Demo::Views
def spell_r
text @r
end
end
Pour la vue spell nous allons mettre en place un formulaire avec trois champs :
module Demo::Views
def spell
html do
head do
title "Test Spellify with Bivouac"
stylesheet_link_tag "spellify"
javascript_include_tag "prototype", "scriptaculous", "spellify"
end
body do
div do
h1 "Spellify Demo"; br
form( :name => "demo", :id => "demo", :method => "post", :action => "" ) do
span "Text Field"; br
input :type => "text", :name => "textfield1", :id => "textfield1"
br; br; br
span "Text Area"; br
textarea( :name => "textarea1", :id => "textarea1", :cols => "50", :rows => "4" ) {}
br; br; br; br; br; br
span "Text Field (ignored)"; br
input :type => "text", :name => "textfieldignore", :id => "textfieldignore", :class => "spellify_ignore"
end
end
#<!– Spellify BEGIN –>
div( :id => "spellify" ) do
div( :id => "correctionsContainer", :style => "position: absolute; z-index: 1000; display: none; background-color: transparent;" ) do
ul do
li( :id => "arrowItem" ) { span( :id => "arrow" ) { image_tag "arrw.png", :width => "12", :height => "6", :alt => "" } }
li { div( :id => "correctionsBody" ) {} }
li {
div( :id => "correctionsFooter" ) {
link_to( image_tag( "tagline.png", :alt => "Spellify - www.spellify.com", :title => "Spellify - www.spellify.com", :width => "45", :height => "15" ), "http://www.spellify.com", :popup => true )
}
}
end
end
div( :id => "loaderDiv", :style => "position: absolute; z-index: 1000; display: none;" ) do
image_tag "ldr.gif", :alt => ""
end
end
end
end
end
end
Les deux premiers champs sont respectivement de type text et textarea, le dernier, de type text, sera ignoré par le correcteur. Ceci est fait en lui appliquant la classe CSS spellify_ignore.
Pour terminer il faut placer le script spellify.js dans le répertoire public/javascript de l’application et les fichiers images (arrw.png, ldr.gif et tagline.png) dans public/images. L’ensemble de ces fichiers se trouve dans les sources de spellify.
Puisque Spellify utilise par défaut le script PHP spellify.php, il faut modifier le fichier spellify.js de la façon suivante :
-
var optionalLeftOffset = 35; //optional left position offset for loader div
-
var optionalTopOffset = 0; //optional top position offset for corrections div
-
/**************DO NOT CHANGE BELOW*******************/
-
var defUrl = ’spellify/spellify.php’;
-
var ignoreClassName = ’spellify_ignore’
-
var http_request;
-
var http_response;
Malgré le DO NOT CHANGE BELOW il faut modifier la ligne 47 de la façon suivante :
That’s all folks !
