Salut tout le monde ! Aujourd’hui nous allons voir comment créer un formulaire tout simple sur Titanium et envoyer le contenu de ce formulaire sur une autre page ! Rapellons très rapidement que Titanium est un framework de développement d’applications mobiles cross-plateform. Il est possible en effet grâce à Titanium de développer une application native iPhone et Android, à partir d’un seul projet.

Ici nous allons faire simple, en créant un simple formulaire, histoire de voir comment un mecanisme d’authentification peut être implémenter avec Titanium

Rien de bien compliqué en somme, voyons d’abord comment faire un login/mot de passe avec bouton d’envoi !

 

Premièrement on crée notre window et notre vue dans un fichier form.js :

form.js
1 2 3 
var win = Titanium.UI.createWindow();   var view_form = Titanium.UI.createView();

 

On crée ensuite nos 2 Textfields, un pour le login et un pour le mot de passe !

 

form.js – textfields
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 
//textfield pour le login   var login = Titanium.UI.createTextField({   hintText:"Login" // permet d'indiquer à quel valeur correspond le champ de textte à l'utilisateur, ici au login borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED, // on applique un style au bordure du textfield width:200, // taille horizontal du textfield top:180 // on place le textfield à 180 pixels du haut de la fenêtre   });   //textfield pour le mot de passe   var password = Titanium.UI.createTextField({   hintText:"Password", //on indique que la valeur à entrer est le mot de passe borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED, width:200, top:250, passwordMask:true //on masque les caractères qui seront tapés ( comme les mots de passe en génréral )   });   //bouton d'envoi   var button = Titanium.UI.createButton({   title:'Se connecter', // le nom du bouton top:340, height:'auto' // on lui attribue une taille automatique   });

 

Voila pour le formulaire, maintenant il faut pouvoir gérer le passage de variables vers une autre page:

Il faut créer un évènement qui s’active au clic de la souris sur le bouton d’envoi du formulaire, pour cela on fait :

 

button.addEventListener(‘click’,function(){

 

On récupère ensuite les valeurs des textfields dans des variables :

var loginUser = login.value ; //on attribue le login entré par l’utilisateur à cette variable

var passwordUser = password.value ; // on attribue le mot de passe entré par l’utilisateur à cette variable

 

Cela se passe comme ceci, on crée un array, ici myArray

var myArray = [value1,value2 ]; // avec value1 et value2 les variables qu’on souhaite faire passer

Dans notre cas, cela donne :

var myArray = [loginUser,passwordUser];

 

On crée ensuite la window à laquelle nous allons envoyer les variables :

Passage de variables
1 2 3 4 5 6 7 8 
var win_confirmation = Titanium.UI.createWindow({   url:'confirmation.js', //on précise la page vers laquelle on va être redirigé myarray:myArray // on passe en paramètre myArray, l'autre page devrait être en mesure de récupérer les données !   });   win_confirmation.open(); // on ouvre ensuite la fenêtre.

 

Et voilà on en a donc fini pour l’envoi de paramètres !!! Voilà le code global de la page form.js :

form.js – Code complet
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 
var view_form = Titanium.UI.createView();

var win = Titanium.UI.createWindow();
  //textfield pour le login   var login = Titanium.UI.createTextField({   hintText:"Login" // permet d'indiquer à quel valeur correspond le champ de textte à l'utilisateur, ici au login borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED, // on applique un style au bordure du textfield width:200, // taille horizontal du textfield top:180 // on place le textfield à 180 pixels du haut de la fenêtre   });   //textfield pour le mot de passe   var password = Titanium.UI.createTextField({   hintText:"Password", //on indique que la valeur à entrer est le mot de passe borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED, width:200, top:250, passwordMask:true //on masque les caractères qui seront tapés ( comme les mots de passe en génréral )   });   //bouton d'envoi   var button = Titanium.UI.createButton({   title:'Se connecter', // le nom du bouton top:340, height:'auto' // on lui attribue une taille automatique   });   button.addEventListener('click',function(){   var loginUser = login.value ; //on attribue le login entré par l'utilisateur à cette variable   var passwordUser = password.value ; // on attribue le mot de passe entré par l'utilisateur à cette variable   var myArray = [loginUser,passwordUser];   var win_confirmation = Titanium.UI.createWindow({   url:'confirmation.js', //on précise la page vers laquelle on va être redirigé myarray:myArray // on passe en paramètre myArray, l'autre page devrait être en mesure de récupérer les données !   });   win_confirmation.open(); // on ouvre ensuite la fenêtre.   });   //on oublie pas d'ajouter le tout à la vue !   view_form.add(login);   view_form.add(password);   view_form.add(button);   // ... et la vue à la window !   win.add(view_form);   win.open(); // on ouvre la fenêtre

 

Il nous reste maintenant à faire la page où les données seront récupérés, ne vous inquiétez pas, c’est loin d’être le plus compliqué ! 😀

1 2 3 4 5 6 7 8 
var win = Titanium.UI.currentWindow;   //On récupère les paramètres de notre variable myArray var data = win.myarray; //on attribue l'array qu'on récupère à la variable data   var login = data[0]; // data[0] correspond au login, on l'attribue à une variable   var password = data[1]; // data[1] correspond au mot de passe, on l'attribue à une variable également

 

Maintenant il faut afficher le tout 😉

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 
//on crée une vue   var view = Titanium.UI.createView();   //on affiche le login var message_login = Titanium.UI.createLabel({   text:login, //la valeur du texte est égale à login top:100, color:'black', textAlign:'center', font:{fontSize:20,fontStyle:'bold'},   });   //on affiche le mot de passe var message_password = Titanium.UI.createLabel({   text:password, //on affiche le mot de passe top:150, color:'black', textAlign:'center', font:{fontSize:20,fontStyle:'bold'},   });

 

Ce qui donne au final ce code là 😀

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 
var win = Titanium.UI.currentWindow;   //On récupère les paramètres de notre variable myArray var data = win.myarray; //on attribue l'array qu'on récupère à la variable data   var login = data[0]; // data[0] correspond au login, on l'attribue à une variable   var password = data[1]; // data[1] correspond au mot de passe, on l'attribue à une variable également   //on affiche le login var message_login = Titanium.UI.createLabel({   text:login, //la valeur du texte est égale à login top:100, color:'black', textAlign:'center', font:{fontSize:20,fontStyle:'bold'},   });   //on affiche le mot de passe var message_password = Titanium.UI.createLabel({   text:password, //on affiche le mot de passe top:150, color:'black', textAlign:'center', font:{fontSize:20,fontStyle:'bold'},   });   view.add(message_login);   view.add(message_password);   win.add(view);   win.open();

 

Et voilà ainsi s’achève ce tuto sur comment envoyer des données d’un formulaire ( ou les données en général ) vers une autre page sur Titanium !!! Néanmoins, vous remarquerez que dans ce tuto, nous n’avons pas vraiment insisté sur la sécurité, le but étant avant tout de montrer comment ça marche 😛

Je vous dis donc à la prochaine pour unnouveau tuto sur Titanium chers mobinautes !

var view_form = Titanium.UI.createView();

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.