Share
Dans cet article, nous discuterons de la création de vos propres modules mobiles pour Appcelerator's Titanium en utilisant uniquement JavaScript et quelques connaissances de CommonJS. Le module que nous allons créer sera celui de Picasa, le service d'imagerie de Google, et permettra à nos utilisateurs d'afficher des albums et des photos à partir de Picasa sans connaître les détails de l'API Picasa. Une fois que nous avons testé notre module, nous allons également le conditionner pour iOS et Android.!
Pourquoi intégrer un module? Le code que nous créons est JavaScript après tout. Nous pourrions simplement copier et coller nos fichiers de code dans n’importe quel projet Appcelerator Titanium afin de les utiliser. Il y a un certain nombre de très bonnes raisons de faire cela en tant que module, cependant.
Maintenant que nous avons le "pourquoi", passons au "comment" et créons notre module!
Le moyen le plus simple de configurer un nouveau projet de module mobile consiste à utiliser Titanium Studio. C'est ce que nous allons faire. Ouvrez Titanium Studio et à partir du Fichier menu, sélectionnez Nouveau> Projet de module mobile. Vous serez présenté avec un écran comme celui ci-dessous. J'appelle notre module "Picasa"et lui donner un ID de module de"com.boydlee.picasa". Notez l’identifiant de votre module si vous décidez d’utiliser un identifiant différent. Cela sera très important lors de la création ultérieure de nos fichiers JavaScript.!
Création d'un nouveau projet de module mobile dans Titanium Studio Vous remarquerez probablement à ce stade que vous ne pouvez créer votre module que pour iOS. OU Android. En effet, les modules sont compilés séparément pour chaque plate-forme. Je vais sélectionner et utiliser iOS pour notre module dès maintenant. Il est beaucoup plus rapide de construire et de tester qu'Android. Nous construirons notre module Android en utilisant le même code à la fin du tutoriel. Frappé le terminer bouton et Titanium Studio doivent créer votre projet de module et l’afficher dans le volet App Explorer. Commençons à coder!
La première chose à faire est de créer le fichier d’entrée JavaScript de notre module, qui ira dans la /les atouts annuaire. Il doit être nommé d'une manière particulière, qui doit être: votre.module.id.js. Comme j'ai nommé mon module com.boydlee.picasa, le fichier JavaScript que je dois créer doit être appelé com.boydlee.picasa.js. Votre volet d’explorateur d’applications devrait ressembler à la photo..
Le volet Explorateur d'applications dans Titanium Studio Titanium recherche automatiquement le fichier de point d'entrée lors du chargement de votre module, et ce fichier doit avoir le même nom que l'identificateur de votre module. Commençons par construire notre module CommonJS, en commençant par le code shell, qui créera notre fonction Picasa, ajoutons un "Niveaux d'accès"objectez-vous pour plus de commodité en utilisant prototype, puis exportez la fonction via CommonJS.
/ * * Notre module Picasa CommonJS * / function Picasa () this._username = "; this._accessLevel = 'public';; Picasa.prototype.ACCESS_LEVELS = PUBLIC: 'public', PRIVATE: 'private'; // Enfin, exportez le module // vous DEVEZ l'exporter de cette manière, sans utiliser methods.export =! exports.Picasa = Picasa;
Maintenant que notre shell de module de base est terminé, il est temps de le compléter avec quelques fonctions utilisant prototype. Ce module sera relativement simple. Il ne vise donc que deux objectifs principaux: rechercher et renvoyer une liste des albums de l'utilisateur et renvoyer une liste de toutes les photos d'un album. Commençons par créer quelques getters et setters publics afin de pouvoir définir le nom d'utilisateur et les niveaux d'accès..
/ * Getters et setters pour nos fonctions privées * / Picasa.prototype.setUsername = function (valeur) this._username = valeur; ; Picasa.prototype.getUsername = function () return this._username; ; Picasa.prototype.setAccessLevel = fonction (valeur) this._accessLevel = valeur; ; Picasa.prototype.getAccessLevel = function () return this._accessLevel; ;
Nous allons également avoir besoin d’une fonction capable d’exécuter des requêtes HTTP. Plutôt que de créer plusieurs requêtes pour les albums et les appels photo vers Picasa, nous pouvons créer une fonction de requête réutilisable. Faisons-le maintenant.
Accentsconagua
/ * * Notre fonction xhr accepte une URL et 2 fonctions de rappel * / Picasa.prototype.xhr = fonction (url, succès, erreur) var client = Ti.Network.createHTTPClient (// fonction appelée lorsque les données de réponse sont disponibles onload: function (e) Ti.API.info ("Texte JSON reçu:" + this.responseText); var json = JSON.parse (this.responseText); success (json);, // fonction appelée lorsqu’un une erreur survient, y compris une erreur de temporisation: fonction (e) Ti.API.debug (e.error); erreur (e.error);, expiration du délai: 5000 // en millisecondes); client.open ("GET", url); // prépare la connexion. client.send (); // Envoyer la demande. ; Développons notre fonction Picasa avec certaines fonctions qui prennent le nom d'utilisateur et le niveau d'accès et renvoient des URL valides pour le service photo Picasa. Nous utiliserons ces URL plus tard lorsque nous construirons notre HttpRequests.
function Picasa () this._username = "; this._accessLevel = 'public'; var _this = this; this.albumnsEndpoint = function (nom d'utilisateur, accessLevel) nom d'utilisateur = (nomutilisateur === non défini)? ; accessLevel = (accessLevel === non défini)? _this._accessLevel: accessLevel; return 'https://picasaweb.google.com/data/feed/api/user/'? username + '? kind = album & access =' + accessLevel + '& alt = json';; this.albumPhotosEndpoint = function (albumId, nom d'utilisateur, accessLevel) if (albumId === non défini) Ti.API.error ('Cette méthode nécessite un ID d'album!'); nom_utilisateur = (nom_utilisateur === non défini)? _ _ce nom_utilisateur: nomutilisateur; accessLevel = (accessLevel === undefined)? _this._accessLevel: accessLevel; return 'https://picasaweb.google.com/data/entry/api / user / '+ username +' / albumid / '+ albumId +'? alt = json ';;; Maintenant que la structure de base de notre module existe, nous pouvons commencer à utiliser l’API de Picasa et à ajouter des fonctionnalités et une utilité réelles à notre module. La première chose à faire est de créer une fonction qui permettra à nos utilisateurs de récupérer une liste de leurs albums Picasa. Les informations JSON renvoyées par Picasa pour cet appel sont extrêmement complexes. Par conséquent, nous allons également le simplifier pour en faire un joli tableau d'objets que vous pouvez facilement comprendre à première vue. Allez-y et créez la fonction suivante dans votre module CommonJS.
/ * * Cette fonction récupérera l'URL des albums, analysera la réponse JSON et simplifiera avant de * la transmettre à notre fonction de rappel * / Picasa.prototype.getAlbums = fonction (rappel) if (this._username! == undefined) var albumsUrl = this.albumnsEndpoint (this._username); this.xhr (albumsUrl, fonction (réponse) var albums = []; pour (var i = 0; i < response.feed.entry.length; i++) var album = title: response.feed.entry[i].title.$t, thumbnail: response.feed.entry[i].media$group.media$thumbnail[0].url, thumbnailWidth: response.feed.entry[i].media$group.media$thumbnail[0].width, url: response.feed.entry[i].link[0].href ; albums.push(album); callback(albums); , function(failure) callback(failure); ); ; ;
Maintenant que nous sommes en mesure d'accéder aux données de l'album, nous devons utiliser les points de terminaison photo de Picasa pour récupérer la liste des photos d'un album particulier. Cela peut être fait de deux manières. Vous pouvez utiliser l'ID d'album pour créer un point de terminaison URL de photos ou simplement utiliser l'URL renvoyée dans la demande HTTP de l'album. Nous allons créer les deux fonctions juste pour des raisons d’utilité, et une troisième fonction appelée créerPhotosArray cela prendra dans un objet de réponse JSON et retournera un tableau simplifié d'images. Dans votre module CommonJS, créez les fonctions suivantes.
/ * * Prend un objet JSON de réponse à une adresse URL pour les photos et ne renvoie que * les informations importantes (objets de tableau en tableau) * / Picasa.prototype.createPhotosArray = fonction (réponse) var photos = []; pour (var i = 0; i < response.feed.entry.length; i++) var photo = title: response.feed.entry[i].title.$t, url: response.feed.entry[i].content.src ; photos.push(photo); return photos; ; /* * */ Picasa.prototype.getPhotosByUrl = function(url, callback) var _this = this; this.xhr( url, function(response) callback(_this.createPhotosArray(response)); , function(failure) callback(failure); ); ; /* * */ Picasa.prototype.getPhotosByAlbumId = function(albumId, callback) var _this = this; if(this._username !== undefined && albumId !== undefined) var photosUrl = this.albumPhotosEndpoint(albumId, this._username); this.xhr( photosUrl, function(response) callback(_this.createPhotosArray(response)); , function(failure) callback(failure); ); ;
C'est à peu près tout ce que dit notre module CommonJS! Nous pouvons maintenant définir notre nom d'utilisateur et nos niveaux d'accès via des fonctions de propriété publique, récupérer une liste d'albums et utiliser ces informations pour récupérer une liste de photos correspondante pour chaque ID d'album / URL d'album. Passons à la section suivante, où nous parlerons de l’emballage de notre module pour une utilisation dans une véritable application Titanium Mobile.!
Emballer votre module ne pourrait être plus simple avec Titanium Studio. D'abord, cliquez sur le "Paquet"Icône dans le volet Explorateur d'applications. L'icône Package ressemble à une boîte fermée. Cliquez ensuite sur l'option de sous-menu"Package - Module iOS". Une nouvelle fenêtre apparaîtra, semblable à celle ci-dessous, avec trois options de conditionnement différentes..
Options d'emballage du module mobile Titanium Nous allons choisir la première option, créer le package et le stocker dans notre dossier Titanium SDK. Sélectionnez cela et appuyez sur "terminer". Maintenant, asseyez-vous et attendez une minute. Titanium Studio construira votre nouveau module et, une fois terminé, un message de notification jaune apparaîtra en bas à droite de l'écran. Succès!
Module de réussite! Maintenant que notre module est packagé, nous devrions probablement le tester, non? Créons un nouveau projet mobile. Choisissez Titanium Classic dans le menu Modèles, puis Projet par défaut. Nous allons créer notre exemple de projet dans un code Titanium très "classique". En effet, une fois que cela fonctionnera, nous voudrons copier notre code de test dans le exemple.js fichier de notre module pour que d'autres personnes l'utilisent comme référence. J'appelle mon application de test Picasa-TestApp avec un identifiant d'application de com.boydlee.picasatestapp, mais tu peux appeler le tien comme tu veux.
Création d'un nouveau projet "classique" Titanium Mobile Ce modèle de base se compose d’un groupe de onglets et de deux fenêtres, toutes définies dans votre app.js fichier. Nous allons simplifier le code pour qu'il ne reste qu'un seul onglet et une seule fenêtre. Nous allons ajouter une TableView que nous allons renseigner avec les données de nos albums, mais avant cela, nous devons ajouter notre nouveau module à notre projet de test. Ouvrez le tiapp.xml fichier, cliquez sur le "+"bouton situé à côté de la liste des modules d'application, puis choisissez le module Picasa que nous avons fourni dans la section précédente..
Ajout du module Picasa à notre projet de test Ajoutons maintenant le code de test dans app.js, ce qui renverra une liste d’albums à notre utilisateur et les montrera dans une TableView. Nous ferons aussi une exiger et créez un nouvel objet Picasa via notre module.
// requiert notre module et en crée une nouvelle instance var PicasaModule = require ('com.boydlee.picasa'); var picasa = new PicasaModule.Picasa (); // définit le nom d'utilisateur picasa.setUsername ('boydlee'); // définit le niveau d'accès à l'aide de notre objet public 'CONSTANTS' picasa.setAccessLevel (picasa.ACCESS_LEVELS.PUBLIC); // ceci définit la couleur d'arrière-plan de l'UIView maître (lorsqu'il n'y a pas de groupes de fenêtres / onglets dessus) Titanium.UI.setBackgroundColor ('# 000'); // crée un groupe d'onglets var tabGroup = Titanium.UI.createTabGroup (); // // crée l'onglet de base de l'interface utilisateur et la fenêtre racine // var win = Titanium.UI.createWindow (title: 'Picasa Albums', backgroundColor: '# 000'); var tab1 = Titanium.UI.createTab (icon: 'KS_nav_views.png', titre: 'Albums', window: win); // récupère les albums de cet utilisateur et son niveau d'accès picasa.getAlbums (function (response) //openAlbumPhotosView(response.feed.entry[0HERGphoto$name.$t, response.feed.entry [0] .link [0] .href); var table = Ti.UI.createTableView (width: Ti.UI.FILL, hauteur: Ti.UI.FILL, haut: 0, gauche: 0); table.addEventListener ('click' , fonction (e) openAlbumPhotosView (e.row.data.title, e.row.data.url);); var lignes = []; pour (var i = 0; i < response.length; i++) var img = Ti.UI.createImageView( width: 60, height: 60, highres: true, image: response[i].thumbnail, left: 5, top: 5 ); var label = Ti.UI.createLabel( text: response[i].title, height: 60, font: fontSize: 20, fontWeight: 'bold' , top: 5, left: 80, width: Ti.UI.SIZE ); var row = Ti.UI.createTableViewRow( className: 'albumRow', height: 70, data: response[i] ); row.add(img); row.add(label); rows.push(row); table.setData(rows); win.add(table); ); // add tab tabGroup.addTab(tab1); // open tab group tabGroup.open(); Notez que j'ai défini l'accès au public et le nom d'utilisateur à Boydlee, qui accédera aux photos sur mon compte Picasa. Une fois que cela est fait, essayez de lancer votre application dans le simulateur.
Notre fenêtre par défaut avec une liste des albums Picasa affichés dans un tableau Enfin, nous devons ajouter une fonction appelée openAlbumPhotosView, qui va accepter un titre d’album et une URL, ouvre une nouvelle fenêtre dans l’onglet actuel, puis retire et affiche toutes les photos de cet album dans un ScrollableView.
function openAlbumPhotosView (titre, URL) Ti.API.info ('Obtention de photos pour un album:' + titre); var detailsWin = Ti.UI.createWindow (titre: titre, backgroundColor: '# 000', hauteur: Ti.UI.FILL, largeur: Ti.UI.FILL); picasa.getPhotosByUrl (url, fonction (réponse) Ti.API.info (réponse); var imageViews = []; pour (var i = 0; i < response.length; i++) var img = Ti.UI.createImageView( image: response[i].url, title: response[i].title ); imageViews.push(img); var scrollableView = Ti.UI.createScrollableView( height: Ti.UI.FILL, width: Ti.UI.FILL , views: imageViews ); detailsWin.add(scrollableView); ); tab1.open(detailsWin); Exécutez votre code dans le simulateur pour une dernière fois. Vous devriez maintenant pouvoir récupérer une liste d'albums, en sélectionner un dans TableView, puis afficher un diaporama à défilement des photos de cet album. Soigné!
ScrollableView montrant toutes les photos de notre album Picasa sélectionné. Il ne reste plus qu'à emballer le module Picasa pour iOS et Android. Tout d’abord, copiez tout le code de votre test app.js déposer et coller dans le projet de module /example/app.js. Nous voulons que ce code soit un exemple pour les autres personnes souhaitant utiliser notre module. Une fois que cela est fait, appuyez simplement sur le Paquet bouton et vous pouvez choisir d’exporter votre module via un Emplacement, tout comme nous l'avons expliqué dans le Emballage et test de votre nouveau module section. Pour Android, le processus est le même, mais nous devons créer un projet de module distinct à cet effet en créant un nouveau projet de module mobile pour Android cette fois-ci. Copier et coller le exemple / app.js et com.boydlee.picasa.js Les fichiers de code que nous avons déjà créés aux bons emplacements dans votre projet de module mobile Android. Vous pouvez ensuite créer et distribuer pour Android comme nous le faisions dans iOS!
Pointe: Vous devrez peut-être installer JDT avant de pouvoir créer des modules pour Android. Un guide facile, étape par étape, est disponible sur appcelerator.com
J'espère que vous avez trouvé ce tutoriel utile. La prochaine fois que vous envisagerez de créer la fonctionnalité Titanium que vous souhaitez partager ou d'utiliser entre plusieurs projets, vous envisagerez probablement de l'intégrer dans un module CommonJS.!
