Créer une application all-in-one en javascript
Introduction
Dans ce petit tutoriel, je décrirai les bases d'un modèle de script Javascript que je propose, c'est à dire les applications All-In-One. Il trouve son inspiration dans les fichiers .exe des systèmes Windows. À l'intérieur se trouve toutes les ressources nécessaires à au programme : les images et tout. Il s'agit de reprendre le même concept pour Javascript. Je vais prendre l'exemple de mon script JDMath. Il est construit de cette façon :
css
--jdmath.css
img
--blank.png
--arc.png
--arrow.gif
--arrow_refresh.png
--calculator.png
--crochetbas.png
--cursor.png
--disk.png
--find_fact.png
--folder.png
--font.png
--help.png
--link_break.png
--omega.png
--parenthese.png
--preview.png
--tag.png
--text_align_center.png
--text_align_left.png
--text_align_right.png
--text_bold.png
--text_italic.png
--text_replace.png
--text_subscript.png
--text_superscript.png
--text_underline.png
--undo.gif
--wand.png
--world.png
--wrench.png
plugin
-- pluginLoader.js
scripts
--JDMath-api.js
index.html
J'ai ici supprimé les fichiers changelog.txt ainsi que le dossier codeEditor pour simplifier ce tutoriel, mais il aurait possible de l'ajouter. Cette application web côté client est composé des 4 fichiers typiques suivants : HTML, Javascript, CSS et des images. Le but de ce tutoriel est de transformer le contenu du ZIP en celui-ci :
all in one (JDMath-api.js )
index.html
index.html pourrait être supprimé car JDMath-api.js peut fonctionner sans le fichier HTML mais on le laisse pour exemple.
Pourquoi faire cette gigantesque "compression" : afin de simplifier le travail du webmestre qui souhaiterait l'installer sur son site. Dites-vous que la plupart du monde qui téléchargeront votre code ne regarderont même pas la source. Ce que je vous propose : dans vos ZIP, mettez une version "normale" et une version "All-In-One", qui signifie, vous le comprenez, Tout en un, c'est-à-dire tout l'application dans un fichier JS. Mais vous devinez que tous ces fichiers ne disparaissent pas, au non ! Votre fichier JS serait énormément plus gros, car il contiendrait tous les fichiers. Mais comment fait-il pour les contenir ? C'est ce que nous allons voir dans ce tutoriel !
Fichiers JS
Commençons par le plus simple. Comment faire tenir le fichier pluginLoader.js dans JDMath-api.js. C'est enfantin ! Il suffit de copier et de coller le contenu du fichier dans le principal. C'est tout ? Presque. Pour cela il vous faudra définir l'ordre de lancement de chacun des fichiers. Ainsi, si pluginLoader.js est supposé être lancé avant JDMath-api.js, il faudra le mettre avant. Sinon après. Sans cela, vous pourriez rencontrer des erreurs de code. Pour cela, il n'existe pas de méthode magique pour le savoir sauf dans ce cas-ci très fréquent où les fichiers JS sont déclarés dans la page HTML :
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="moncode.js"></script>
Dans ce cas, il faudra mettre jquery.js avant moncode.js. Il faut respecter l'ordre de déclaration des balises SCRIPT. S'ils sont appelés via votre fichier JS directement, il faudra plus de logique.
Fichiers Image
Comment rajouter des images dans du Javascript ? Réfléchissez quelques secondes... Oui, vous me voyez venir avec CANVAS et les autres nouvelles technologies d'HTML5 ? Et bien, vous avez tort. Nous allons utiliser une technologie merveilleuse malheureusement peu utilisé du nom anglais d'URI data scheme. Peut-être que cela vous dit quelque chose, sinon je vais vous expliquer. Il consiste à donner dans une URL, donc dans l'attribut SRC de l'image le code brut de l'image au format BASE64. Cela fonctionne selon ce schéma :
data:<MIMEType>;base64,
MIMEType est le type MIME du format que l'on souhaite ajouter. Comme par exemple :
- image/gif : Image GIF
- image/jpeg : Image JPEG
- image/png : Image PNG
Il est possible de tous les trouver sur Internet. Le résultat est que votre image est contenue dans le fichier JS. Un exemple :
Ligne 991 de JDMath-api.js :
ty=ty+"...<input class='button_basse_upbar' type=image src="+this.path+"img/wand.png onclick=\"JDMath.wand()\" title=\""+yn[10 * +"\">...";
Deviendrait ceci :
ty=ty+"...<input class='button_basse_upbar' type=image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHMSURBVDjLlZLBSyJhGMa/UxTUIWJ0ZVmlwxLLEiEhurCoKeqCOtZN7J4ZRZdd9rSG6NFbSOegDp5aqWWI3UGm6KBUxsq2LLj+CzV9jDOH8NlvJtqLjuXhBy/z8Xvel4chAMhTKGfOMeVsbqXf2wBp3s5Yf5hno8rp24YxS9PTVHq18mTAgzj3k4mCIs0cqZeLUCTHJ1q13VKRSz0v4PRNVr1KQfu9Aa31BZ2LKKg42aHfJ8ZNA9i5L9hWUZFeQ73kof3N42SPR6OyjFZ1FZ36AuQfo5CPyc7gDiRHttNYwsl+Apqmodvt4uJrCur1GmSB/GI4TAOo9JKjVasQi8VQr9ehqiqazSaqu1Fofz5C/kYow9M3gJVkp+JUJZFIIJ1Oo1gsolwu42hngcmfdfmecS4fki3TC3ieN2SPx4NAIIB4PA7lPIo70YY7YQJyhdhNS3yU3W43/H4/LBaLvnWbbbxnvGNyQz4gmb4ByWQShULBkH0+HziOg/6die+ZKOjzzQEZYXzoCYhEIsjn8z3yI0wKmf7KwWAQuVwOLpcLXq+3Rx4EyWQyaLfbcDqdCIVCQ8n/A2q1GkqlklHYMLIREA6HN/WzrVbr0LLOP1AMs7UPAa92AAAAAElFTkSuQmCC" onclick=\"JDMath.wand()\" title=\""+yn[10 * +"\">...";
Ça semble si compliqué ! Il y a plein de chiffres, de lettres et de symboles ! Détrompez-vous, les apparences sont trompeuses. À la mitaine, ce serait long à faire, mais à l'heure du Web 2.0, vous devinez que j'ai un outil pour vous :
http://codes-sources.commentcamarche.net/source/53446-convertisseur-d-image-base-64
http://www.kawa.net/works/js/data-scheme/base64-e.html
Pour trouver l'adresse à copier dans l'attribut SRC de la balise IMG, faites charger l'image à transformer, puis copier/coller ce code dans la zone d'adresse :
javascript:prompt('Copier-coller le code ci-dessous :',document.getElementById('image_here').src);
Seulement, il y a des restrictions, tout n'est pas parfait. IE6-7 ne le supporte pas. Quant à IE8, il y a une limite de 32KiB pour chaque image. C'est beaucoup quant même, si ce ne sont que des icônes. À voir, si le support d'IE6-7 est nécessaire pour vous, ou vous préférez forcer l'utilisateur à mettre à jour son navigateur pour accéder au contenu.
Sinon, si vous vous voulez utiliser les deux méthodes, je vous offre cette astuce trouver sur Internet mais qui nécessite PHP. Sur votre site créer une page PHP contenant ce code :
<?php
/**
* an example URL for viewing a base64-encoded image:
* [http://example.com/decode.php?image/png;base64,iVBORw0KGgoAAAANS...]
*/
$data = split(";", $_SERVER["QUERY_STRING" * );
$type = $data[0 * ;
$data = split(",", $data[1 * );
header("Content-type: ".$type);
echo base64_decode($data[1 * );
?>
Pour, dans le script, vous pouvez appeler votre page via quelque chose comme :
http://example.com/decode.php?image/png;base64,iVBORw0KGgoAAAANS...
Vous remarquerez l'absence de data: .
Il y aura dans ce cas un mini-lien de dépendance entre le site contenant le script et votre site. À voir par vous même...
Fichiers HTML
Ça aussi c'est pour le moins simple. Il existe de multiple façon d'ajouter du code HTML via Javascript. Je ne vais pas toutes les décrire, elles sont trop nombreuses mais je le ferai pour quelques-unes.
document.write() ou document.writeIn()
La classique, ultra connue, fonction qui permet d'ajouter du code HTML à l'endroit où la fonction est appelée dans le code. Je ne le recommande pas, car si après le chargement la fonction est appelée, toute la page sera effacée sauf le code.
document.write("hello <span style='font-weight:bold;'>world</span>");
Node.innerHTML
Aussi connue, ma méthode préférée, qui consiste à modifier le code HTML d'un élément HTML. Elle peut aussi être utiliser pour le récupérer.
document.body.innerHTML+="<br>Texte ajouté";
Node.innerText et Node.textContent
Beaucoup moins connues, ces deux méthodes permettent de récupérer ou modifier le texte d'un élément.
try{
document.body.innerText="Voici du texte "
}
catch(e){
try{
document.body.textContent="Voici du texte "
}
catch(e){}
}
document.createElement()
Crée un élément HTML théorique (donc ne paraissant pas sur la page) qui peut être modifié et, si souhaité, peut être ajouté au contenu de la page via plusieurs méthodes comme insertBefore, appendChild, replaceChild...
element=document.createElement("div");
element.style.border="1px solid black";
element.innerHTML="Contenu";
document.body.appendChild(element);
Il en existe plusieurs autres, et comme ici l'intérêt n'est pas tellement les manières d'ajouter du code HTML à la page, je ne les listerai pas tous. Seulement, vous comprenez un peu le concept et notez que celles notées sont les plus populaires ou celles présentant le plus grand intérêt. N'oubliez de supprimer les sauts de lignes dans les codes HTML à insérer ou ajouter d'un \ devant.
document.body.innerHTML="Bonjour, <br>\
Je suis JDMCreator";
Fichiers CSS
Nous voilà donc au CSS. On peut utiliser la même manière que d'insérer du code HTML :
document.getElementsByTagName("head")[0 * .innerHTML+="<style media='all' type='text/css'>.maclasse{color:red;}</style>";
C'est la méthode la plus simple. N'oubliez de supprimer les sauts de lignes dans les codes CSS à insérer ou d'ajouter un \ devant. Pour faire cela tout simplement, vous pouvez utiliser le compresseur de code HTML & CSS. Seulement, saviez-vous qu'il existe une manière de gérer les codes CSS ? Il s'agit de l'objet document.styleSheets. Seulement, celle-ci ne permet pas d'ajouter une feuille de style.
Conclusion
(Vous l'avez sûrement deviné via le titre). Je n'ai pas montré en détail ce que j'ai fait à JDMath, mais vous devinez que je pourrais arriver à mon objectif... si je prenais le temps de le faire. Car, il faut l'avouer, cela prend du temps, il n'y a pas de logiciel miracle qui va tout compacter dans un fichier JS pour vous. C'est un des désavantages avec l'incompatibilité des images pour IE6-7. Seulement, des avantages, il y en a. Une installation beaucoup plus simple pour le webmestre, et surtout des mises à jour plus simples. Pas besoin de supprimer plein de fichier, d'en ajouter d'autres... il suffit de remplacer le fichier JS. À voir si vous êtes pour ou contre, moi je suis pour.
Vous avez des commentaires, mon article comporte des erreurs, possède des imprécisions ? Vous voulez plus d'exemples ? Postez un commentaire et je me ferai un plaisir de vous répondre.
- Créer une application windows
- Application javascript - Meilleures réponses
- Exemple application javascript - Meilleures réponses
- Créer interface application - Conseils pratiques -Graphisme
- Comment créer une application android - Forum VB.NET
- Creer application webradio - Forum VB.NET
- Comment creer une application de geolocalisation ✓ - Forum Java
- Tuto créer une application android - Conseils pratiques -Java