Share
Bienvenue dans la troisième partie de notre série sur le développement Titanium Mobile basé sur les bases de données. Ce tutoriel continuera de s’appuyer sur les principes introduits dans les publications précédentes, mais nous modifierons la conception de notre application de manière très significative. Au lieu d'utiliser un objet TableView pour afficher une interface personnalisée, nous allons passer à l'utilisation d'un objet WebView. La raison en est que l'objet WebView nous permettra de contrôler notre interface à l'aide de CSS et HTML, et que TableView ne le fera pas. Pour ceux d'entre vous qui viennent du monde du développement Web, vous devriez vous sentir comme à la maison avec cette approche..
La première partie de cette série a jeté les bases d'une application basée sur une base de données. La deuxième partie a étendu la fonctionnalité en créant la possibilité de lire une base de données distante et d’insérer des valeurs dans nos tables. Ce tutoriel utilisera le code source des deux premières parties de cette série..
Ouvrez Titanium Developer et créez un nouveau projet. Choisir Mobile et remplissez toutes les informations requises. Puis clique Créer un projet. Copier le des produits dossier de votre application précédente et la produits.sqlite base de données dans le nouveau répertoire de ressources. Téléchargez jQuery et placez-le également dans le répertoire des ressources. Créez également un nouveau dossier et nommez-le. images. Maintenant, vous devriez être prêt à partir.
Nous allons supprimer le fichier app.js pour des raisons de simplicité. Supprimer tout sauf l'endroit où nous avons créé le groupe de tabulations. Ouvrez l'onglet tabGroup et créez notre premier et unique onglet. C'est ici:
var tabGroup = Ti.UI.createTabGroup (); var main = Ti.UI.createWindow (title: 'Catégories de produits', url: 'products / product_category.js'); var tab = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', titre: 'Products', fenêtre: main); tabGroup.addTab (tab); tabGroup.open ();
Si vous lancez l'application, cela devrait vous paraître familier:
REMARQUE: Si vous avez copié votre base de données à partir de la partie 2 de cette série, vous vous demandez peut-être pourquoi aucune valeur ajoutée supplémentaire (celle ajoutée à l'intérieur de l'application) ne s'y trouve pas. En effet, la base de données locale active est installée sur le périphérique. Notre fichier local reste intact. Si vous supprimez la précédente application du simulateur et que vous la réinstallez, votre base de données retrouvera également son état d'origine..
Le premier fichier chargé par notre application est "product_category.js". Nous allons laisser ce dossier complètement seul. La prochaine chose que nous pouvons faire pour garder les choses en ordre est de supprimer le fichier "product_specs.js". Nous allons utiliser une vue Web pour remplacer la fonction de ce fichier. Ouvrez "products.js" et passons au piratage informatique. En dehors de eventListener, il n’ya qu’une chose à changer dans ce fichier. Retirer le chemin d'où nous construisons notre tableau:
Accentsconagua
var dataArray = []; while (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('name') +", hasChild: true); rows.next (); ;… Si nous exécutons notre application à ce stade, elle échouera probablement à cause de la suppression de fichiers et de la modification des informations ci-dessus. Cependant, voici à quoi cela ressemblerait:
Notre eventListener est maintenant complètement responsable du résultat de l'événement click. La première chose que nous devons changer est notre déclaration if. Auparavant, nous vérifiions s'il y avait un chemin. Depuis que nous avons supprimé le chemin, nous devons attacher quelque chose d'autre à vérifier. Nous devons également l'utiliser pour déterminer quel élément a été sélectionné. Utilisez "titre". C’est la seule valeur dont nous disposons qui soit un identifiant unique. Assurez-vous de changer cette valeur lorsque nous créons également la fenêtre.
tableview.addEventListener ('click', fonction (e) if (e.rowData.title) var win = Ti.UI.createWindow (titre: e.rowData.title, backgroundColor: "# 000");… Réfléchissons aux prochaines étapes. Nous devons créer une WebView et définir son chemin, interroger la base de données sur la ligne sélectionnée (nous devons le faire ici parce que Ti.Database n'est pas accessible à partir d'une WebView), créer nos variables à partir de notre requête de base de données, puis les transmettre. à la WebView. Une chose à garder à l'esprit est que nous ne pouvons rien transmettre à la WebView tant qu'elle n'a pas été créée. Nous allons utiliser une fonction setTimeout pour retarder le passage des variables. Voici comment le code finit par regarder:
var web = Ti.UI.createWebView (url: 'productsWebview.html'); var db2 = Ti.Database.install ('… /products.sqlite', 'produits'); var specs = db2.execute ('SELECT * FROM Produits WHERE name = "' + e.rowData.title + '"'); var name = specs.fieldByName ('name'); var pwidth = specs.fieldByName ('pwidth'); var pheight = specs.fieldByName ('pheight'); var pcolor = specs.fieldByName ('pcolor'); var qty = specs.fieldByName ('qty'); var stripName = removeSpaces (specs.fieldByName ('nom')); function removeSpaces (strip) return strip.split ("). join ("); ; // Ajoute la webView à la fenêtre win.add (web); // Création d'un délai d'attente - nous voulons que la fenêtre soit prête avant le déclenchement de l'événement setTimeout (function () Ti.App.fireEvent ("webPageReady", nom: nom, pwidth: pwidth, pheight: pheight, pcolor) : pcolor, qty: qty, stripName: stripName);, 500); Ti.UI.currentTab.open (win, animated: true);… Nous avons créé une deuxième instance de la base de données (en tant que variable locale dans la fonction. Nous utilisons ici la portée pour nous assurer de ne rien gâcher.) Et avons créé notre requête avec les données de la valeur de titre de ligne sélectionnée. Nous avons créé nos variables individuelles pour les données de colonne de la base de données et créé une deuxième variable utilisant le nom du produit, en supprimant uniquement les espaces dotés d'une fonction "removeSpaces". Cela nous permet de créer un chemin vers une image en utilisant le nom du produit dans notre WebView..
Nous ajoutons ensuite notre WebView aux fenêtres actuelles. Nos variables sont transmises à la vue Web et nommées "webPageReady" par TI.App.fireEvent. Cela se déclenche une fois le délai spécifié écoulé depuis la fonction setTimeout. Dans notre cas, il s’agit de 500 millisecondes, soit une demi-seconde..
Si nous devions créer notre WebView maintenant, tout fonctionnerait bien. Cependant, il y aurait quelque chose qui n'a tout simplement pas ressentir droit à l'utilisateur. La vue Web et le jeu de données seraient créés, mais il y aurait une seconde environ de temps où la page était vide ou des éléments manquants. Il semblerait que quelque chose est cassé. Les utilisateurs se sont habitués à toujours savoir que quelque chose se passe. Pour les utilisateurs Windows, il y a ce joli petit sablier, les utilisateurs d’OS X ont la roue chromatique en rotation, etc..
Les utilisateurs se sont habitués à toujours savoir que quelque chose se passe.
Pour notre indicateur d'activité, nous devons créer une nouvelle fenêtre, créer l'indicateur d'activité, définir la durée d'affichage, puis masquer la fenêtre. Nous devons également veiller à ajouter l'indicateur d'activité à la nouvelle fenêtre et la nouvelle fenêtre à la vue actuelle.
var actWin = Ti.UI.createWindow (backgroundColor: '# 000', opacité: 0.8); var actInd = Ti.UI.createActivityIndicator (style: Ti.UI.iPhone.ActivityIndicatorStyle.PLAIN); actWin.add (actInd); if (Ti.Platform.name == 'iPhone OS') actInd.show (); actInd.color = '#FFF'; actInd.message = 'Chargement…'; setTimeout (function () actInd.hide ();, 1500); ; setTimeout (function () actWin.hide ();, 1500); // Ajoute la webView à la fenêtre win.add (web, actWin);…
Lorsque nous créons l'indicateur, nous définissons le style pour qu'il ressemble à l'indicateur iPhone standard. Nous voulons aussi que cela ressemble à originaire de que possible et laissez l'utilisateur savoir ce qui se passe. Nous utilisons une instruction if, en la définissant pour vérifier le type de plate-forme, ajouter un message et définir la durée avant de masquer la fenêtre..
Ce délai est à l'intérieur de l'instruction if, nous devons donc créer une autre fonction de délai pour masquer la fenêtre. Dans les deux cas, nous fixons l'heure à 1500 millisecondes. En repensant à la dernière étape, nous avons alloué 500 millisecondes avant que nos données ne soient transmises. Cela laissera une seconde de plus pour que les données soient effectivement chargées dans WebView..
Créez un nouveau fichier html avec le nom et l'emplacement que nous avons définis ci-dessus lors de la création de notre WebView. Il n'est pas nécessaire d'ajouter tous les la norme Informations d'en-tête HTML. J'aime déclarer mon doctype et ajouter le
Mots clés. Nous aurons besoin de cela car nous devons utiliser des scripts.Tout d'abord, créez le contenu du corps. À l'aide d'une table, ajoutez le nombre requis de lignes et de colonnes. Pour ce tutoriel, nous avons besoin de quatre lignes et deux colonnes. L'étiquette sera dans la colonne de gauche et la spécification dans la droite. Utilisez un espace insécable () dans la cellule de spécification. Voici à quoi ressemble notre table:
Largeur la taille Couleur Quantité
C'est également une bonne idée d'ajouter une feuille de style afin que nous puissions personnaliser l'affichage de notre page. Directement sous la div "content", nous voulons créer une forme de notre propre en-tête. Je pense que c'est une bonne idée d'afficher le nom du produit et d'afficher une image. La chose la plus importante à faire lors de la construction de notre table est d’ajouter un "id" à la cellule qui contiendra nos spécifications. Par souci de style, nous devrions également ajouter une classe aux cellules similaires.
Dans les tutoriels précédents, nous avons créé une variable sur une page et l'avons attachée à la nouvelle fenêtre. L'accès à cette variable a été effectué à l'aide de Ti.UI.currentWindow.varName, puis globalement accessible pour la page. Comme il s’agit d’une WebView, nous ne pouvons pas le faire. Ce que nous devons faire est d’ajouter un EventListener et d’attraper les variables passées.
La console de Titanium Developer enregistre les variables et les valeurs transmises. Cela peut être très pratique pour le débogage.
Dans EventListener, nous spécifions l'événement que nous écoutons (webPageReady) et déclarons nos variables à l'aide de notre rappel..
Maintenant que nous avons déclaré nos variables, nous devons trouver comment les utiliser dans notre page. Nous ne pouvons pas les renvoyer à partir de la fonction et ensuite utiliser les variables de notre tableau, nous devons donc faire preuve de créativité. Chargez jQuery sur votre page et placez le programme EventListener actuel dans une fonction document.ready..
Ensuite, utilisez l'ID pour chaque cellule définie à l'étape précédente et remplacez l'élément à l'aide de jQuery et de la variable correcte..
Le dernier élément que nous remplaçons dans le code ci-dessus est notre variable d'image de produit. Utilisez la variable du nom du produit dont nous avons supprimé les espaces pour créer le lien vers l'image. Assurez-vous également de créer le répertoire et les images pour chaque produit. Par souci de style, il est judicieux de faire en sorte que toutes les images du produit aient la même taille. Quelque chose comme 150px par 150px est une bonne taille pour la plupart des écrans.
Enfin, nous devrions avoir une application fonctionnelle avec tout le code complété. Voici à quoi ressemblera la WebView:
Une fois que nos images sont créées pour tous les produits, il est très facile d’utiliser des feuilles de style CSS standard dans notre feuille de style et de donner à nos pages de produits une apparence exacte. Si les informations que nous affichons et utilisons dans notre application sont mises à jour fréquemment, une base de données distante peut s'avérer utile..
