Quelques fonctions de plus : La gestion des URL

La gestion des URL

    Selon le navigateur utilisé, les champs de type File sont interprétés de manières différentes. Ainsi, un navigateur tel Firefox interdira toute inscription manuelle d'adresse, rendant impossible, dans le cas qui nous occupe, la déclaration d'URL en lieu et place de fichiers.

    Afin de remédier à ce problème, une case URL a été placée à coté du champs d'acquisition du chemin (File). Une fois cochée, le champs se transforme en type Text, permettant la saisie manuelle de n'importe quelle adresse...

    Surtout si l'on requiert souvent les mêmes flux, la saisie manuelle des URL peut vite devenir fastidieuse. Ainsi, pour qui voudra, par exemple, regarder les chaînes de Free en Multiposte, il est toujours possible d'éditer la Playlist et de recopier l'URL... Aussi, un Select apparaît permettant de choisir dans une liste de ses flux préférés.

Considérant que :

1°) Tout le monde n'est pas abonné chez Free.

2°) Chacun voudra établir sa liste en fonction de ses propres goûts.

3°) Il serait trop fastidieux d'imposer à l'usager d'aller modifier le code-source.

    ... l'objet comportant la liste se trouve donc placé dans un fichier externe nommé chaines.js. Le code présent sur cette démonstration est celui-ci :

var arr = new Array();
arr[0] = "<select id=\"fbx\" onchange=\"chaines()\;\" style=\"font-weight: bold;text-align: center;background-color: \#ec8d17; width: 98%;\"><option value=\" \">========= Liste des URL générée par \"gene_select.htm\" =========</option><option value=\"URL 1\">Titre 1</option><option value=\"URL 2\">Titre 2</option><option value=\"\">===== Intertitre =====</option><option value=\"URL 3\">Titre 3</option><option value=\"URL n\">Titre n</option></select>"

    Pour ceux qui ont l'habitude du langage HTML, ce code sera familier ; cependant, le fait de recourir à la description d'un objet placé dans un tableau force à placer des caractère d'échappement (\) à certains endroits afin que le script soit interprété comme un objet et non-pas comme du texte. C'est ainsi que chaque " doit être précédé d'un anti-slash \ afin d'indiquer à l'interpréteur qu'il s'agit d'un caractère imprimable et non-pas d'un caractère englobant. Pour le reste, rien que d'habituel : les titres sont placés entre les balises <option> et </option>, la balise <option> possédant une value correspondant à l'adresse. Ces balises <option> et </option> sont elle-même encadrées par les balises <select> et </select> correspondant aux limites de l'objet ; le Select.

    N.B. : L'interface représentée ici est une des interfaces HTML, mais le principe est le même pour la version HTA...

La Création du Select

    Créer ce type de liste manuellement est assez critique car, au vu de ce qui est exposé ci-dessus, il est quasi impossible de réussir à écrire un code cohérent du premier coup... C'est pourquoi vous trouverez ici un générateur de code qui permettra de créer de manière cohérente le fichier chaines.js

    Le générateur ci-dessus est parfaitement opérationnel, mais moins pratique à utiliser que sur une page séparée... Il suffit de rentrer un titre et son URL puis de cliquer sur le pour générer les options. Une fois la liste crée, un clic sur créera le code complet qu'il suffira de coller dans le fichier chaines.js

    N.B. : Le code généré doit rester tel quel sans autre retour à la ligne que celui suivant le ' ; ' après Array() ! Un saut de ligne entre les balises <select> et </select> serait interprété comme une fin de code et engendrerait une erreur...

    N.B. : Le fichier doit impérativement être nommé chaines.js ! Celui-ci sera édité à partir de n'importe quel éditeur de texte. Sous Windows, il est préférable de privilégier un éditeur évolué tel Notepad2 ou Notepad++ qui apportent une coloration syntaxique très utile en cas de débogage...

    N.B. : Les deux champs doivent être remplis pour pouvoir générer le code. Cependant, rien n'empêche de créer des séparatifs, soit sous forme de champs vides, soit sous forme de titre sans valeur associée en plaçant un espace vide dans le champs choisi. Ainsi, ici, la première ligne du sélect est ainsi composée :

<option value=" ">========= Liste des URL générée par "gene_select.htm" =========</option>

où la valeur de l'URL (value) est nulle...