JSONBonjour tout le monde ! Aujourd’hui encore une fois un tuto sur Titanium ! Nous allons voir Comment parser un fichier json sur notre plateforme adorée 😀 

Le parseur sur Titanium est plus simple à réaliser que le parseur Android, en effet il suffit de quelques fonctions et le tour est joué !

Pour parser un fichier json, la règle de base c’est ….

1. Avoir un fichier json à parser !

Pour ce tutoriel, nous allons utiliser le fichier json suivant :

 

{« Id »: »221″, »Nom »: »video_221″, »Url_miniature »: »http://www.interieurs.fr/hwdvideos/thumbs/remote-1277.jpg », »Url_video »: »http://www.pocketjourney.com/downloads/pj/video/famous.3gp », »Date_publication »: »27/06/11″, »Categorie »: »Relooking »},
{« Id »: »220″, »Nom »: »video_220″, »Url_miniature »: »http://www.interieurs.fr/hwdvideos/thumbs/remote-1277.jpg », »Url_video »: »http://www.pocketjourney.com/downloads/pj/video/famous.3gp », »Date_publication »: »27/06/11″, »Categorie »: »Sortie »}]

 

le fichier json est disponible à cette url : http://www.michaelfabien.com/interieurs/video.json.

Un item de ce fichier json se présente avec les attributs suivants :id, nom, url_miniature, url_video, date_publication.

Pour ce tuto, nous allons utiliser uniquement les attributs nom, url_miniature et date de publication. 

 

Afin de récupérer ces données dans notre appli, il est maintenant temps d’utiliser ….

 

 

2. Le parseur !

Nous allons maintenant attaquer la fonction du parseur json, nous allons procéder comme ceci : la fonction va prendre le fichier json, le parser, puis présenter les données dans un tableview.

Voilà le début de notre code :

 

var win = Titanium.UI.createWindow(); //on crée une fenêtre

 

Voilà la fonction qui va tout faire !

function loadVideos(){

var loader = Titanium.Network.createHTTPClient(); //la méthode createHttpClient() de Titanium qui va nous permettre de faire des requêtes sur le serveur ou est stocké le fichier json.

var rowData = []; //l’array où sera stocké chaque ligne du tableview.

//on indique quel type de requête on va utiliser et l’url de notre fichier json
loader.open(« GET », »http://www.michaelfabien.com/interieurs/video.json »);

 

//une fois le fichier json récupéré, on éxécute une fonction
loader.onload = function()
{

On stocke le fichier json dans une variable, à ce stade le fichier Json est DEJA PARSE !!!

var res = eval(‘(‘+this.responseText+’)’);

 

Maintenant que nous avons notre json parsé dans la variable res, il serait bien de pouvoir récupérer les attributs qui nous intéressent pour chaque video, c’est-à-dire le nom de la video, la miniature et la date de publication,

Pour se faire nous allons utiliser une boucle for !

 

//on fait une boucle afin de récupérer les attributs qu’on veut de chaque item
for (var i = 0; i < res.length; i++)    
{

//on récupère uniquement le attributs qui nous intéressent
var nom_video = res[i].Nom;//on récupère le nom
var url_image = res[i].Url_miniature;//l’url de la miniature
var date = res[i].Date_publication;//on récupère la date de publication

 

Nous avons les variables pour le nom, la miniature et la date de publication de la video, il nous faut maintenant le présenter dans une vue qu’on va appeler post_view,

La miniature se situera à gauche, le nom et la date à sa droite.

Nous ajouterons ensuite le post_view à une variable appelée row.

 

//on crée une row et on définit sa taille sur auto
var row = Titanium.UI.createTableViewRow({height:’auto’});

//on crée une vue qui va contenir le nom et la miniature de la video
var post_view = Titanium.UI.createView({ height:’auto’ });

 

Une fois post_view et row prêt, il nous faut maintenant créer un ImageView pour afficher une miniature de video, créer des labels pour afficher le nom et la date de publication.

 

//on crée une ImageView qui contiendra la miniature de la video 
var video_image = Titanium.UI.createImageView({ 
url:url_image, //url_image, c’est l’attribut qu’on a récupéré plus haut
top:0, 
left:0, 
height:75, 
width:75 
});

//on ajoute video_image à post_view
post_view.add(video_image); 

 

//on crée maintenant le label avec le nom de la video 
var nom_label = Titanium.UI.createLabel({ 
text:nom_video, //nom_video a été récupéré plus haut également
left:100, 
width:120, 
top:5, 
height:’auto’, 
textAlign:’left’, 
color:’black’, 
font:{ 
fontSize:20,fontWeight:’bold’ 

});

post_view.add(nom_label); // on ajoute au postview également

 

//On crée le label pour une date
var date_label = Titanium.UI.createLabel({ 
text: date,//la variable date plus haut 
color:’black’,
left: 100, 
top: 30,  
height: ‘auto’, 
width: 120, 
textAlign: ‘left’, 
color:’black’, 
font:{ fontSize:16 } 
}); 

post_view.add(date_label);

 

Une fois le post_view « complet », on l’ajoute à la row ! Row est ensuite ajouté à rowData à chaque fois que la boucle for tourne !

row.add(post_view);

//on ajoute row dans notre tableau rowData
rowData[i] = row;

 

Ceci marque la fin de notre boucle !

}

Et pour finir !

On crée le tableview qui montrera toutes les lignes stockées dans rowData, il ne restera plus qu’à ajouter le tableview à notre window. Attention le code suivant n’est plus dans la boucle for mais est toujours dans la fonction onload !

 

//On crée le tableview avec comme données celles contenues dans rowData 
var table_video = Titanium.UI.createTableView( { data : rowData });

//On ajoute la tableview à la window 
win.add(table_video);

}

Il ne reste plus qu’à envoyer la requête pour finir la fonction loadVideos !

loader.send();

}

Et surtout ne pas oublier d’appeler la fonction loadVideos à la fin 😉

loadVideos();

Vous devriez maintenant avoir un tableau qui s’affiche avec toutes les données contenues dans rowData de manière assez bien présenté 😀

 

Merci d’avoir suivi ce tuto j’espère qu’il vous a été très utile ! A vous de coder maintenant !

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.