Share
Ce didacticiel présente le développement de SQLite et de la base de données avec Titanium Mobile. Plus précisément, vous apprendrez à créer une application permettant de gérer des produits avec une base de données au lieu du système de fichiers..
Cela n’a aucun sens logique de devoir gérer un fichier individuel pour un produit. Surtout quand il y a un grand catalogue de produits à maintenir. Voici un exemple.
Les dossiers et les fichiers à gauche sont la présentation de notre projet à la fin. Juste quelques fichiers dans un dossier et un fichier de base de données. Sur la droite se trouve un répertoire déconcertant et déconcertant. Je pense que cette image devrait être une motivation suffisante. L'un des autres avantages sera la réduction de l'empreinte de l'application..
Nous aurons besoin de Titanium Mobile, d'un bon éditeur de texte (toute personne avec laquelle vous serez à l'aise travaillera) et d'un gestionnaire de base de données SQLite. Voici les deux gestionnaires SQLite que j'utilise:
Ce sont deux excellentes options. J'aime beaucoup SQLite Manager, mais personnellement, je n'aime pas que cela fonctionne comme un plugin Firefox plutôt que comme une application autonome. SQLite Database Browser ne semble pas aussi poli, mais il peut être exécuté en tant qu'application autonome. Pour cette raison, j'ai tendance à utiliser SQLite Database Browser.
Ouvrez Titanium Developer et créez un nouveau projet. Choisir Mobile et remplissez toutes les informations requises. Le développeur Titanium détecte automatiquement si le SDK iPhone et le SDK Android sont correctement installés. Puis clique Créer un projet.
Ouvrez le programme de votre choix et cliquez sur Nouvelle base de données. Nommez la base de données "products.sqlite". Les noms d'application, de base de données et de fichier importent peu. Rappelez-vous juste ce que vous utilisez. Enregistrez le fichier dans le dossier Ressources créé par Titanium Developer. Remplissez la base de données avec les informations sur votre produit. Assurez-vous de cliquer sur Enregistrer.
Ouvrez le fichier Resources / app.js de l'application (si vous n'avez pas encore travaillé avec Titanium Developer, "app.js" est le fichier principal de votre application)..
Supprimer tout le code existant.
Dans un souci de simplicité, je souhaite conserver tous les fichiers de produits dans un seul dossier. Allons dans le dossier Ressources et créons un dossier nommé "produits". Nous allons sauvegarder nos autres fichiers ici.
De retour dans app.js, nous souhaitons créer un groupe d'onglets, car cela facilitera l'ajout ultérieur d'onglets et de contenu. Définissez l’étiquette de la fenêtre, ouvrez cette dernière dans notre fichier de produits et ajoutez-la à notre vue actuelle. Vous aurez besoin d'une image pour l'image de l'onglet. J'ai copié une image à partir des onglets de l'application KitchenSink, qui est le projet de démonstration de démonstration fourni par Appcelerator pour présenter toutes leurs fonctionnalités..
// crée un groupe d'onglets var tabGroup = Ti.UI.createTabGroup (); // crée la fenêtre principale var main = Ti.UI.createWindow (title: 'Catégories de produits', url: 'products / product_category.js'); // onglet principal de craete var tab = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', titre: 'Products', fenêtre: main); // ajoute l'onglet au groupe d'onglets tabGroup.addTab (tab); // ouvre le groupe d'onglets tabGroup.open ();
Nous n'aurons plus besoin de toucher le code dans app.js, vous pouvez donc le fermer si vous le souhaitez..
Créez un nouveau fichier JavaScript dans notre dossier de produits nommé product_category.js. Ce qu'il est important de garder à l'esprit avec cette page est qu'elle sera la première à être chargée lors du lancement initial de notre application. Cela signifie que nous allons avoir la majeure partie de notre code dans ce fichier. La grande chose est que ce code sera réutilisé pour notre prochain fichier, avec seulement quelques modifications.
Avant de coder cette page, nous devrions réfléchir à ce qui doit se passer. La page doit ouvrir une base de données, lire la colonne de catégorie et afficher les résultats dans une vue sous forme de tableau. Pour attacher les résultats de la base de données à la table, nous devons créer un tableau et y transférer les données. La meilleure façon de faire est de créer une fonction. De cette façon, il n'est pas nécessaire de savoir à l'avance combien de lignes de la base de données doivent être lues. Nous laisserons simplement la fonction parcourir la base de données jusqu'à ce qu'elle lit toutes les lignes actives.
Nous devons également créer un EventListener lorsque vous cliquez sur l’une des lignes. Commençons par rassembler tout sauf la fonction et EventListener.
Accentsconagua
// crée une variable pour la variable currentWindow var currentWin = Ti.UI.currentWindow; // définit les données de la base de données sur la fonction de tableau setData () ** FUNCTION HERE **; // crée la vue table var tableview = Ti.UI.createTableView (); tableview.addEventListener ('click', fonction (e) ** EVENTLISTENER ICI **); // ajoute le tableView à la fenêtre en cours currentWin.add (tableview); // appelle la fonction setData pour attacher les résultats de la base de données au tableau setData (); Tout cela est assez simple. Maintenant, la fonction setData (). Commencez par vous connecter à la base de données et interrogez-la pour la catégorie. Pour supprimer les doublons et ne renvoyer qu'une ligne pour chaque catégorie, nous allons utiliser la commande DISTINCT SQL.
var db = Ti.Database.install ('… /products.sqlite','products '); var rows = db.execute ('SELECT DISTINCT category FROM produits'); Créez le tableau et utilisez un tandis que instruction pour parcourir la base de données. Interrogez la base de données sur le nom du champ "catégorie" et définissez-le sur le titre de la ligne. (Titanium Developer utilise "fieldByName" pour lire la colonne définie dans une base de données. Elle est utilisée conjointement avec notre requête pour sélectionner notre contenu.) Spécifiez qu'il existe un élément enfant et définissez le chemin d'accès au fichier suivant..
var dataArray = []; while (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('category') +", hasChild: true, chemin: '… /products/products.js'); rows.next (); ; Enfin, attachez le tableau à notre tableView.
tableview.setData (dataArray);
Maintenant, nous devons créer EventListener pour ouvrir la page suivante. Une chose à faire ici est également de passer les variables au fichier suivant. Ceci sera utilisé pour construire la prochaine requête SQL et définir le titre de la fenêtre. Nous allons également définir le rappel de l'écouteur sur le chemin du fichier suivant, même s'il est statique.
tableview.addEventListener ('click', fonction (e) if (e.rowData.path) var win = Ti.UI.createWindow (url: e.rowData.path, titre: e.rowData.title); var prodCat = e.rowData.title; win.prodCat = prodCat; Ti.UI.currentTab.open (win);); L'écouteur capte le clic, puis crée une nouvelle fenêtre. Cette nouvelle fenêtre ouvre le fichier suivant et définit le titre de la nouvelle fenêtre sur le contenu de la ligne. Dans notre cas, c'est la catégorie du produit. Nous créons ensuite une variable à partir du contenu de la ligne et la passons dans la nouvelle fenêtre, en nommant la var. Enfin, l'écouteur ouvre le nouveau groupe d'onglets, qui correspond à la page suivante..
Voici ce que montre le fichier "product_category.js":
Sélectionnez tout le code dans le fichier "product_category.js" et cliquez sur copier. Créez un nouveau fichier JavaScript nommé "products.js" et collez le code. Il suffit de faire quelques modifications et d’ajouter la variable que nous avons passée pour que cette page fonctionne.
Dans notre fonction, sous notre appel à l’ouverture de la base de données, ajoutez le code suivant, détectant les variables passées..
var prodCat = Ti.UI.currentWindow.prodCat;
Nous devons maintenant changer notre requête dans la base de données et utiliser notre nouvelle variable. Nous voulons maintenant lire les noms de produits de notre catégorie précédemment sélectionnée et les afficher..
var rows = db.execute ('SELECT * FROM produits WHERE category = "' + prodCat + '' '); Remplacez fieldByName dans la ligne "category" par "name" et le chemin du fichier suivant.
dataArray.push (title: "+ rows.fieldByName ('name') +", hasChild: true, chemin: '… /products/product_specs.js'); La dernière chose à faire pour compléter cette page est de changer la variable passée dans EventListener. Changez-le pour passer le nom du produit et utilisez un nom de var qui a du sens..
var prodName = e.rowData.title; win.prodName = prodName;
Terminé. Voici à quoi ressemble "products.js":
Ceci est le dernier fichier que nous devons créer pour ce tutoriel. L'objectif de cette page sera d'afficher le contenu de la ligne pour le produit individuel. Regardons tout le code, puis décomposez-le.
// crée une variable pour la variable currentWindow var currentWin = Ti.UI.currentWindow; var db = Ti.Database.install ('… /products.sqlite','productSpecs '); var prodName = Ti.UI.currentWindow.prodName; var rows = db.execute ('SELECT * FROM produits WHERE name = "' + prodName + '"'); var data = [title: "+ rows.fieldByName ('width') +", en-tête: 'Width', title: "+ rows.fieldByName ('height') +", en-tête: 'Height', title: "+ rows.fieldByName ('color') +", en-tête: 'Couleur', title: "+ rows.fieldByName ('qty') +", en-tête: 'Quantité']; var tableview = Ti.UI.createTableView (data: data); currentWin.add (tableview); Ce qui se passe ci-dessus est identique à ce que nous avons fait dans les pages précédentes: nous n'écoutons tout simplement pas une action et nous alimentons le tableau nous-mêmes, plutôt que d'utiliser une fonction. De cette façon, nous pouvons étiqueter les informations avec un en-tête de ligne et ordonner le contenu comme nous le souhaitons..
Tout ce qui restait à faire était de créer une ligne individuelle dans le tableau en utilisant nos noms de colonne de base de données..
Cela semble beaucoup de travail au début, mais le résultat en vaut la peine. La meilleure partie est qu'une fois que le code est complet dans les deux premiers fichiers de produit, il n'aura jamais besoin d'être touché. La fonction setData () évolue sans aide. Le même code fonctionnera indépendamment du fait que la base de données comporte une ligne ou cinquante-trois!
