Sélectionner une page

Création d’une liste de type select/option

Table des matières

Liste avec données fixes #

Pour remplir une liste avec des données fixes, il suffit d’utiliser une structure HTML select/option classique. La fonction populate() n’intervient pas sur les select qui utilisent uniquement les mots-clef du html.

Pour sélectionner une option par défaut avec selected, il convient d’écrire <option value="..." selected="selected">...</option> et non <option value="..." selected>...</option> . Les syntaxes simplifiées sont donc à éviter, car les fichiers html sont scrutés par des processeurs XML. En XML, chaque attribut doit avoir une valeur.

Recommandation concernant la valeur sélectionnée par défaut #

Pour simplifier la sélection d’une ligne par défaut, il est possible (et préférable dans 80% des cas) d’utiliser l’attribut data-value dans l’élément select comme ceci :

<p>Veuillez choisir votre langue :</p> 
<select id="appLanguage" data-value="FR">
  <option value="EN">Anglais</option>
  <option value="SP">Espagnol</option>
  <option value="FR">Français</option>
  <option value="IT">Italien</option>
</select>

Grâce à l’attribut data-value, la fonction populate() se chargera de sélectionner l’option correspondante dans la liste (dans notre exemple, la troisième ligne sera sélectionnée par défaut).

Il est également possible d’utiliser une donnée se trouvant dans l’ilot XML, en utilisant la syntaxe habituelle :

<select id="language" data-value="{config.applicationLanguages.value}">

En cas d’utilisation de JavaScript ou de jQuery, il faut penser à rafraîchir la zone en réexécutant populate() sur la zone à repeupler (en donnant l’id de la zone en argument) :

document.getElementById("language").setAttribute("data-value",variable);
populate("appLanguage");

ou JQuery :

$("#language").attr("data-value",variable);
populate("appLanguage");

Liste remplie par une source de données #

Lorsque les lignes de la liste sont à remplir à partir d’une source de données, cette source est à placer dans l’ilot XML.

Le code de l’ilot XML #

Voici un exemple de bloc contenant 3 collections de langues (pour 3 listes différentes) :

<config>
  <applicationLanguages value="FR">
    <language value="EN" label="Anglais"><language>
    <language value="SP" label="Espagnol"><language>
    <language value="FR" label="Français"><language>
    <language value="IT" label="Italien"><language>
    <language value="PL" label="Polonais"><language>
  </applicationLanguages>
  <notificationsLanguages value="EN">
    <language value="EN" label="Anglais"><language>
    <language value="SP" label="Espagnol"><language>
    <language value="FR" label="Français"><language>
  </notificationsLanguages>
  <questionnairesLanguages value="EN">
    <language value="EN" label="Anglais"><language>
    <language value="SP" label="Espagnol"><language>
    <language value="FR" label="Français"><language>
  </questionnairesLanguages >
</config>

Dans cet exemple, le bloc config contient :

  • La collection des langues disponibles pour utiliser l’application
  • La collection des langues disponibles pour recevoir les notifications
  • La collection des langues dans lesquelles les questionnaires sont rédigés

Le code HTML #

Pour remplir une liste de type select/option qui puise ses informations dans l’ilot XML, on utilise 3 attributs :

  • data-src : pour définir le bloc qui contient la collection des données (dans notre exemple : config)
  • data-iteration : pour définir les données à itérer (dans notre exemple, les éléments <langage> qui se trouvent dans <applicationLanguages>
  • data-value : pour sélectionner une ligne par défaut
<p>Veuillez choisir votre langue :</p>
<select id="appLanguage"
    data-src="config"
    data-iteration="applicationLanguages.language()"
    data-value="{applicationLanguages.value}">
      <option value="{value}">{label}</option>
</select>

Dans notre exemple d’ilot XML <applicationLanguages> contient 5 fois <language>). La fonction populate() se chargera de recopier l’élément <option> 5 fois. Au fil de ces copies, les chaines se trouvant entre accolades sont remplacées par les valeurs se trouvant dans chacune des lignes de l’ilot.

Si besoin, data-src peut être placé dans des balises qui englobent le select :

<div data-src="config">
  <p>Veuillez choisir votre langue :</p>
  <select id="appLanguage"
    data-iteration="applicationLanguages.language()"
    data-value="{applicationLanguages.value}">
      <option value="{value}">{label}</option>
  </select>
</div>

Rappel : Dans l’application finale, les informations se trouvant dans l’ilot sont issues de la base de données et injectées dans l’ilot XML. En mode conception côté front, il est possible de tester la page en remplissant l’ilot en dur. La fonction populate() va piocher les données dans l’ilot XML, quelle que soit la façon dont il a été construit. La couche serveur peut donc être développée parallèlement ou après la conception de la page HTML. Il suffit de respecter une structure xml commune.

Pour plus d’informations concernant l’extraction des données au format XML, consultez la rubrique réservée à oXML.fillBlock.

Powered by BetterDocs