Mise en œuvre de l'application

La page HTML5 est construite sur la base du Bootstrap de Twitter. Un formulaire permet de renseigner les variables du vol comme par exemples, l'aéroport de départ, la piste en service, les fréquences des contrôleurs etc. Les données de ce formulaire vont être utilisées dans les textes. La phrase : Roger, [CAL] va devenir : Roger AEL001. [CAL] étant la donnée saisie dans le champ : Indicatif d'appel.

<script type="text/javascript">
    $(function(){
      $( document ).ready(function(){
        $.ajax({
          type:     "GET",
          url:      "phraseologieIFR.xml",
          dataType: "xml",
          complete: function(data, status){

La page s'appuie sur le document XML appellé par la fonction AJAX.

function recursive(taskList,cible){
	  $(taskList).each(function(){
		// je recherche des call
		var refid       = $(this).attr('refid');
		var tab         = $(this).attr('tab');
		var clas        = $(this).attr('class');
		var spawnTask   = $(moteur).find("[id='"+refid+"']");
		var categorie   = spawnTask.get(0).nodeName;
		var name        = spawnTask.attr('name');
		appendHtm = "<button type='button' class='btn btn-" + clas +"' id='"+refid+"'>"+name+"</button><br/>";
		if (tab) cible = tab;
		$("#"+cible).append(appendHtm);
		$("#"+refid).click(function(e) {
		e.preventDefault();
		if ($(this).parent("#compoundTask div").get(0)) { $("#orTask").html('Option'); }
		$(this).attr( "class", "btn btn-default" );
		$my.dialogue.html('');
		if (categorie == "spawnTask") {
		  //alert("bien une spawnTask"  );
		  dialogue(spawnTask,$.cookie('lang'));
		}
		if (categorie == "orTask") {
		  // affiche un texte qui précède l'option
		  if ($(this).find('para')) { dialogue(spawnTask,$.cookie('lang')); }
		  taskList   = $(moteur).find("[id='"+refid+"'] call");
		  recursive(taskList,"orTask");
		}
		});
	  });
}

L'affichage des tâches utilise une fonction récursive permettant de parcourir tout l'arborescence du document XML

// Mettre en cookies les valeurs modifiées du formulaire
	$('input, text').change(function(){
	  $.cookie(this.id, this.value,{ expires: 30 });
	  positions();
	});
	// Initialiser toutes les variables qui vont vous servir plus d'une fois.
	window.$my = {
	  dialogue : $("#dialog")
	};

Les données du formulaire sont enregistrées dans des cookies.

Partie 1 - Voir le résultat