Les webapps sont devenues une partie intégrante de notre vie quotidienne. Elles nous permettent de réaliser des tâches complexes et variées, et leur utilisation est de plus en plus répandue. Dans cet article, nous allons nous intéresser à l’utilisation de w2UI, une webapp d’initiation, pour afficher dans un w2sidebar la liste des fichiers d’un répertoire et le nom du fichier sélectionné dans une zone texte. Nous verrons comment cette webapp peut être utilisée pour faciliter la navigation et la sélection de fichiers.
Webapps d’initiation : w2UI : Afficher dans un w2sidebar la liste des fichiers d’un répertoire et le nom du fichier sélectionné dans une zone texte
1. Présentation
Dans cette webapp d’initiation utilisant w2UI, voyons comment afficher une liste de fichiers dans un panneau graphique et afficher le nom du fichier sélectionné dans une zone texte.
2. Ressources utiles
- L’objet w2sidebar de la librairie Javascript w2UI : http://w2ui.com/web/demo/sidebar
3. 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
- 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
4. 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>
5. 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>
6. 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’ },
{ id: ‘data_2014_09_12.txt’, text: ‘data_2014_09_12.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_13.txt’, text: ‘data_2014_09_13.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_14.txt’, text: ‘data_2014_09_14.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_15.txt’, text: ‘data_2014_09_15.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_16.txt’, text: ‘data_2014_09_16.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_17.txt’, text: ‘data_2014_09_17.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_18.txt’, text: ‘data_2014_09_18.txt’, img: ‘icon-page’ },
{ id: ‘data_2014_09_19.txt’, text: ‘data_2014_09_19.txt’, img: ‘icon-page’ }
]
}
], // fin nodes
onClick: function (event) {
//alert(‘id: ‘ + event.target);
$(« #textarea »).val(event.target);
} // fin onclick
}); // w2sidebar
}); // fin function + fin ready + fin $
7. 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.
