Webapps d’initiation : Ajax : Afficher le contenu d’un fichier texte sélectionné à l’aide d’un w2sidebar

Les webapps sont devenues une partie intégrante de notre vie quotidienne. Elles nous permettent d’accéder à des informations et des services en ligne, et de les utiliser de manière intuitive et efficace. L’utilisation d’Ajax pour afficher le contenu d’un fichier texte sélectionné à l’aide d’un w2sidebar est une excellente façon d’initier les développeurs à la création de webapps. Dans cet article, nous allons examiner en détail comment utiliser Ajax pour afficher le contenu d’un fichier texte sélectionné à l’aide d’un w2sidebar.

Webapps d’initiation : Ajax : Afficher le contenu d’un fichier texte sélectionné à l’aide d’un w2sidebar

1. Présentation

Dans cette webapp d’initiation utilisant jQuery UI, voyons comment ouvrir un fichier daté à partir d’un Datepicker par réponse Ajax

2. Structure type de la webapp

Comme cela est présenté dans les tutos dédiés, je rappelle que la structure type de la webapp est la suivante :

un seul répertoire incluant :
- librairies utilisées
- la page html de la webapp
- le code serveur Pyduino opérationnel incluant la fonction d’envoi de réponse Ajax
la page HTML de la webapp incluant :
- la définition des éléments graphique au niveau du body
- l’inclusion des librairies utilisées
- le code Javascript actif de la page incluant la fonction de gestion de la réponse Ajax

3. Ressources utiles

L’objet w2sidebar de la librairie Javascript w2UI : http://w2ui.com/web/demo/sidebar

4. Pré-requis

4.1 Créer une série de fichiers datés de test

A des fins de test, on pourra créer une série de fichiers datés du mois courant avec le code Pyduino suivant :

filenameList=list() # crée list de fichier
for jour in range(1,31):
if jour<10 : filename=« data_ »+year()+« _ »+month()+« _0 »+str(jour)+« .txt »
else: filename =« data_ »+year()+« _ »+month()+« _ »+str(jour)+« .txt »

print filename
filenameList.append(filename) # ajoute le fichier à la list

print filenameList

dirname=mainPath()+dataPath(TEXT)
print dirname

for filename in filenameList:
print filename
myFile=open(dirname+filename,‘w’) # crée le fichier
myFile.write(« contenu du fichier « + filename[5:-4]) # ecrit la date dans le fichier
myFile.close()

[$[Get Code]]

4.2 Créer une série de fichiers datés de test contenant des séries de données horodatées

Encore mieux, on pourra créer une série de fichiers datés contenant chacun une série de 1440 données horodatées aléatoires de test :

#!/usr/bin/python
# -*- coding: utf-8 -*-

import datetime as dt
from pyduino_light import *

# variables horaires utiles
hh=str(hour())
mm=str(minute())

# datetime de référence = date courante
refTime=dt.datetime(int(year()), int(month()), int(day())) # date a utiliser – heure 00:00:00 si pas precise
print refTime

dirname=mainPath()+dataPath(TEXT)
print dirname

# création d’une list de nom de fichiers
filenameList=list() # crée list de fichier
for jour in range(1,31):
if jour<10 : filename=« data_ »+year()+« _ »+month()+« _0 »+str(jour)+« .txt »
else: filename =« data_ »+year()+« _ »+month()+« _ »+str(jour)+« .txt »

print filename
filenameList.append(filename) # ajoute le fichier à la list

# datetime de référence = date courante
refTime=dt.datetime(int(year()), int(month()), jour) # date a utiliser – heure 00:00:00 si pas precise
print refTime

#for filename in filenameList:
print « Création du fichier « + filename
myFile=open(dirname+filename,‘w’) # crée le fichier

# écriture des 1440 valeurs randomisées dans le fichier
for t in range(1440) : # defile 1440 minutes theoriques
dataValue=str(random(0,1023)) # genere une valeur aleatoire entiere

dataTime=refTime+dt.timedelta(0, t*60) # jours, secondes – ici toutes les minutes

# format de donnees utilise : JJ-MM-YYYY hh:mm:ss , val \n
dataLine=str(dataTime)+« , »+dataValue+« \n« # format datetime automatique JJ-MM-AAAA hh:mm:ss
#print dataLine – debug
myFile.write(dataLine) # ecrit la ligne dans le fichier

myFile.close()

#print filenameList

[$[Get Code]]

5. Body HTML : définition des éléments graphiques de la page

[$[Get Code]]

6. Head : Inclusion des librairies utilisées

[$[Get Code]]

7. Head : Code Javascript de la page

$(document).ready(function(){

$(‘#sidebarDiv’).w2sidebar({ // integre le sidebar dans le div dedie + parametrage du sidebar
name: ‘sidebard’,
img: null,
nodes: [
{ id: ‘level-1’, text: ‘Liste des Fichiers :’, img: ‘icon-folder’, expanded: true, group: true,
nodes: [
{ id: ‘data_2014_09_01.txt’, text: ‘data_2014_09_01.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_02.txt’, text: ‘data_2014_09_02.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_03.txt’, text: ‘data_2014_09_03.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_04.txt’, text: ‘data_2014_09_04.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_05.txt’, text: ‘data_2014_09_05.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_06.txt’, text: ‘data_2014_09_06.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_07.txt’, text: ‘data_2014_09_07.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_08.txt’, text: ‘data_2014_09_08.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_09.txt’, text: ‘data_2014_09_09.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_10.txt’, text: ‘data_2014_09_10.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_11.txt’, text: ‘data_2014_09_11.txt’, img: ‘icon-page’ }
]
}
], // fin nodes

onClick: function (event) {
//alert(‘id: ‘ + event.target);
//$(« #textarea »).val(event.target);

param=« file(« +event.target+« ) »
//$(« #textarea »).val(param); // debug
$.get(« ajax/ »+param, manageReponseAjaxServeur); // envoi d’une requete AJAX

} // fin onclick

}); // w2sidebar

}); // fin function + fin ready + fin $

[$[Get Code]]

8. Ajax : Code Python « côté serveur » : Envoi de la réponse Ajax

def reponseAJAX(paramIn):

print « paramIn= »+paramIn # debug

#filepath=mainPath()+dataPath(TEXT)+paramIn+ ».txt »
filepath=serverDir+paramIn
print filepath

try:
dataFile=open(filepath,‘r’) # ouvre fichier
data=dataFile.read()
dataFile.close() # ferme fichier
except:
data=« Pas de fichier pour cette date »

# la reponse
reponseAjax=( # debutreponse AJAX
data
) # fin reponse AJAX

return reponseAjax

[$[Get Code]]

9. Ajax : Code Javascript « côté client » : Gestion de la réponse Ajax

function manageReponseAjaxServeur(dataIn){

//dataIn=parseInt(dataIn);
//$(« #textarea »).append(« ajax : « + dataIn+ »\n »);
$(« #textarea »).val(« ajax : « + dataIn+« \n« );
$(« #textarea »).get(0).setSelectionRange($(« #textarea »).get(0).selectionEnd–1,$(« #textarea »).get(0).selectionEnd–1); // se place en derniere ligne -1 pour avant saut de ligne