Logo TitaniumNous allons voir aujourd’hui comment créer un tableview dans lequel le clic sur un item déclenche une action ( Event ).

Commençons par le commencement, c’est-à-dire, créons notre window :

var win = Titanium.UI.createWindow();

 

Un tableview affiche des données, il faut donc créer ces données, nous allons créer un array contenant des items pour notre tableview.

 On appellera cet array « data », chaque item aura un titre et une image, ici, j’ai pris une image d’un des héros phare, boule de chewing-gum de Nintendo, Kirby !

var data = [
{ title: « kirby ! », leftImage: « http://bestuff.com/images/images_of_stuff/64x64crop/kirby-2131.jpg?1173012964 » },
{ title: « kirby 2 ! », leftImage: « http://bestuff.com/images/images_of_stuff/64x64crop/kirby-2131.jpg?1173012964 » },
{ title: « kirby 3 ! », leftImage: « http://bestuff.com/images/images_of_stuff/64x64crop/kirby-2131.jpg?1173012964 » },
];

L’attribut leftImage place automatiquement l’image à gauche de l’item, rightImage le place à droite.

Ceci étant fait, on peut maintenant créer notre tableview, mais avant, nous allons créer le header et le footer du tableview, pour que ça soit plus classe 😉

 

Voilà pour le header :

 
var headerLabel = Ti.UI.createLabel({
  color: »black »,
  font:{ fontSize: 16, fontWeight: »bold » }, // le style des caractères, la police
  text: »Kirby en folie ! », // le texte de notre header qui est très philosophique comme vous le constatez 😛
  textAlign: »center », // l’alignement
  height:35, // la hauteur …
  width:320 … et la longueur !
});

 

Maintenant le footer :

 

var footerLabel = Ti.UI.createLabel({
color: »black »,
font:{ fontSize:10 },
text: »[attention ces données sont protégées par copyright !] »,
textAlign: »center »,
height:25,
width:320
});

 

Il ne reste plus qu’à créer le tableview !

 

var table = Ti.UI.createTableView({
backgroundColor: »white »,
data: data,  //les données à afficher, donc data
headerView:headerLabel, //le header …
footerView:footerLabel,   //… et le footer !
top:10,
width:320
});

 

On associe maintnant un EventListener de type click sur note tableview, nous allons créer une alertDialog qui affiche le titre de l’item sur lequel on aura cliqué tout simplement !

 

table.addEventListener(‘click’, function(e))   //l’évènement se déclenchera au clic de l’utilisateur sur l’item

{

var alertDialog = Titanium.UI.createAlertDialog({
title: ‘Titre de l\’item’,
message: e.row.title,   //pour accéder à l’attribut « title » de l’item, on fait e.row.title, pour avoir l’url de l’image on aurait fait e.row.leftImage
buttonNames: [‘Valider’,’Annuler’]
});
alertDialog.show(); //on affiche l’alerte

});

 

De cette manière, on peut par exemple, au clic sur l’item, être renvoyé à une autre page, lire une video, et j’en passe !

 

Et maintenant le « Finish him » !

On ajoute la table ainsi créée à la fenêtre !

win.add(table);
win.open();

 

Quelques screens de ce que vous devriez obtenir à l’écran :

 

 

Et l’alerte !

 

 

 

Ainsi s’achève ce tuto ! J’espère qu’il vous a été utile ^^ A très bientôt, amis mobinautes 😉

 

 

 

 

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.