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 :
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()
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 :
# -*- 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
5. Body HTML : définition des éléments graphiques de la page
<br>
<textarea rows=« 10 » cols=« 50 » placeholder=« Sélectionner un fichier » id=« textarea »></textarea>
6. Head : Inclusion des librairies utilisées
<link href=« static/w2ui/w2ui.min.css » rel=« stylesheet » type=« text/css » />
<script src=« static/w2ui/w2ui.min.js » type=« text/javascript » ></script>
7. Head : Code Javascript de la page
$(‘#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 $
8. Ajax : Code Python « côté serveur » : Envoi de la réponse Ajax
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
9. Ajax : Code Javascript « côté client » : Gestion de la réponse Ajax
//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
} // fin fonction de gestion de la reponse AJAX
10. La webapp complète :
L’archive complète de la webapp est , incluant :
- La page HTML complète
- Le serveur Pyduino opérationnel
- Les librairies utilisées
Remarque : le serveur pyduino suppose que la librairie Pyduino et ses dépendances soient installées.
