Share
In questo articolo discuteremo come creare i propri moduli mobili per Appcelerator's Titanium usando solo JavaScript e un po 'di conoscenza CommonJS. Il modulo che creeremo sarà uno per Picasa, il servizio di immagini di Google e consentirà ai nostri utenti di visualizzare album e foto da Picasa senza conoscere alcun dettaglio sull'API Picasa stessa. Una volta testato il nostro modulo, eseguiremo anche il packaging sia per iOS che per Android!
Perché inserire un modulo? Dopo tutto, il codice che stiamo creando è JavaScript. Potremmo semplicemente copiare e incollare i nostri file di codice in qualsiasi progetto Appcelerator Titanium per poterli utilizzare. Tuttavia, ci sono una serie di ottime ragioni per farlo come modulo.
Ora che abbiamo il "perché" di mezzo, passiamo al "come" e creiamo il nostro modulo!
Il modo più semplice per impostare un nuovo progetto di modulo mobile è tramite Titanium Studio, quindi è quello che faremo. Apri Titanium Studio e dal File menu, selezionare Nuovo> Progetto modulo mobile. Ti verrà presentata una schermata come quella qui sotto. Sto chiamando il nostro modulo "Picasa"e dandogli un ID modulo di"com.boydlee.picasa"Prendi nota di quale sia l'ID del tuo modulo se decidi di utilizzare un identificatore diverso. Questo sarà molto importante quando creeremo i nostri file JavaScript in un secondo momento!
Creazione di un nuovo progetto per modulo mobile in Titanium Studio Probabilmente, in questa fase ti ricorderai che puoi creare il tuo modulo solo per iOS O Android. Questo perché i moduli sono compilati separatamente per ogni piattaforma. Ho intenzione di selezionare e utilizzare iOS per il nostro modulo in questo momento. È molto più veloce da costruire e testare di quanto lo sia Android. Costruiremo il nostro modulo Android utilizzando lo stesso codice alla fine del tutorial. Colpire il finire pulsante e Titanium Studio dovrebbero creare il progetto del modulo e visualizzarlo nel riquadro App Explorer. Iniziamo la codifica!
La prima cosa che dobbiamo fare è creare il file di inserimento JavaScript per il nostro modulo, che andrà nel /risorse directory. esso dovere essere nominato in un modo particolare, che deve essere: your.module.id.js. Come ho chiamato il mio modulo com.boydlee.picasa, il file JavaScript che ho bisogno di creare deve essere chiamato com.boydlee.picasa.js. Il pannello Esplora app dovrebbe quindi somigliare alla foto.
Il pannello Esploratore app in Titanium Studio Titanium cerca automaticamente il file del punto di ingresso quando carica il modulo e il file del punto di ingresso deve avere lo stesso nome dell'identificatore del modulo. Iniziamo a costruire il nostro modulo CommonJS, iniziando con il codice shell, che creerà la nostra funzione Picasa, aggiungendo un "Livelli di accesso"oggetto di esso per comodità usando prototipo, e quindi esportare la funzione tramite CommonJS.
/ * * Il nostro modulo Picasa CommonJS * / function Picasa () this._username = "; this._accessLevel = 'public';; Picasa.prototype.ACCESS_LEVELS = PUBLIC: 'public', PRIVATE: 'private'; // infine, esporta il modulo // DEVI esportarlo in questo modo, non usando methods.export =! exports.Picasa = Picasa;
Ora che abbiamo fatto la nostra shell di base, è ora di riempirlo con alcune funzioni usando il prototipo. Manterremo questo modulo abbastanza semplice, quindi avrà solo due obiettivi principali: cercare e restituire un elenco degli album dell'utente e restituire un elenco di tutte le fotografie di un album. Innanzitutto, creiamo alcuni getter e setter pubblici in modo che possiamo impostare il nome utente e i livelli di accesso.
/ * Getter e setter per le nostre funzioni private * / Picasa.prototype.setUsername = function (value) this._username = value; ; Picasa.prototype.getUsername = function () return this._username; ; Picasa.prototype.setAccessLevel = function (value) this._accessLevel = value; ; Picasa.prototype.getAccessLevel = function () return this._accessLevel; ;
Avremo anche bisogno di una funzione in grado di eseguire richieste HTTP. Anziché creare più richieste per gli album e le chiamate fotografiche su Picasa, possiamo creare una funzione di richiesta che è riutilizzabile. Facciamolo ora.
Accentsconagua
/ * * La nostra funzione xhr accetta un URL e 2 funzioni di callback * / Picasa.prototype.xhr = function (url, success, error) var client = Ti.Network.createHTTPClient (Funzione // chiamata quando i dati di risposta sono disponibili onload: function (e) Ti.API.info ("Testo JSON ricevuto:" + this.responseText); var json = JSON.parse (this.responseText); success (json);, // funzione chiamata quando un si verifica un errore, incluso un timeout onerror: function (e) Ti.API.debug (e.error); error (e.error);, timeout: 5000 // in millisecondi); client.open ("GET", url); // Prepara la connessione. client.send (); // Invia la richiesta. ; Espandiamo la nostra funzione di Picasa con alcune funzioni che prenderanno il nome utente e il livello di accesso e restituiranno gli URL validi per il servizio fotografico di Picasa. Utilizzeremo questi URL in seguito quando costruiremo HttpRequests.
funzione Picasa () this._username = "; this._accessLevel = 'public'; var _this = this; this.albumnsEndpoint = function (username, accessLevel) username = (nome utente === undefined)? _this._username: username ; accessLevel = (accessLevel === undefined)? _this._accessLevel: accessLevel; return 'https://picasaweb.google.com/data/feed/api/user/' + username + '? kind = album & access =' + accessLevel + '& alt = json';; this.albumPhotosEndpoint = function (albumId, username, accessLevel) if (albumId === undefined) Ti.API.error ('Questo metodo richiede un ID album!'); return; username = (username === undefined)? _this._username: username; accessLevel = (accessLevel === undefined)? _this._accessLevel: accessLevel; return 'https://picasaweb.google.com/data/entry/api / user / '+ username +' / albumid / '+ albumId +'? alt = json ';;; Ora che la struttura di base del nostro modulo è lì, possiamo iniziare a costruire contro l'API di Picasa e aggiungere funzionalità e utilità reali al nostro modulo. La prima cosa che faremo è creare una funzione che consenta al nostro utente di recuperare un elenco dei propri album Picasa. Le informazioni JSON restituite da Picasa per questa chiamata sono estremamente complesse, quindi la semplificheremo anche in una bella serie di oggetti che puoi facilmente capire a prima vista. Vai avanti e crea la seguente funzione nel tuo modulo CommonJS.
/ * * Questa funzione recupera l'url degli album, analizza la risposta JSON e semplifica prima * il passaggio alla nostra funzione di callback * / Picasa.prototype.getAlbums = function (callback) if (this._username! == undefined) var albumsUrl = this.albumnsEndpoint (this._username); this.xhr (albumsUrl, function (response) var albums = []; per (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); ); ; ;
Ora che siamo in grado di accedere ai dati dell'album, dobbiamo utilizzare gli endpoint fotografici di Picasa per recuperare un elenco di foto per un determinato album. Questo può essere fatto in due modi. Puoi utilizzare l'ID dell'album e creare un endpoint URL di foto o semplicemente utilizzare l'URL restituito nella richiesta HTTP dell'album. Creeremo entrambe le funzioni solo per motivi di utilità e una terza funzione chiamata createPhotosArray che accoglierà un oggetto di risposta JSON e restituirà una serie semplificata di immagini. Nel tuo modulo CommonJS, crea le seguenti funzioni.
/ * * Acquisisce un oggetto JSON di risposta all'URL delle foto e restituisce * le informazioni importanti (un oggetto di foto array) * / Picasa.prototype.createPhotosArray = function (response) var photos = []; per (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); ); ;
Questo è tutto per quanto riguarda il nostro modulo CommonJS! Ora siamo in grado di impostare il nome utente e i livelli di accesso tramite funzioni di proprietà pubbliche, recuperare un elenco di album e utilizzare tali informazioni per recuperare un elenco di foto corrispondente per ciascun ID di album / URL di album. Passiamo alla prossima sezione, dove parleremo di come impacchettare il nostro modulo per l'uso in una vera applicazione Titanium Mobile!
Imballare il modulo non potrebbe essere più semplice quando si utilizza Titanium Studio. Innanzitutto, fai clic su "Pacchetto"icona nel pannello App Explorer L'icona del pacchetto appare come una casella chiusa, quindi fai clic sull'opzione di sottomenu"Pacchetto - Modulo iOSUna nuova finestra pop-up apparirà come quella qui sotto, con tre diverse opzioni di packaging.
Opzioni di imballaggio del modulo mobile in titanio Stiamo andando avanti e scegliere la prima opzione, creare il pacchetto e archiviarlo nella nostra cartella SDK Titanium. Seleziona quello e premi "finire"Ora sedetevi e aspettate un minuto: Titanium Studio costruirà il vostro nuovo modulo e quando sarà completato vedrete apparire un messaggio di notifica giallo in basso a destra dello schermo.!
Successo del pacchetto di moduli! Ora che il nostro modulo è impacchettato dovremmo probabilmente testarlo, giusto? Creiamo un nuovo progetto mobile. Scegli Titanium Classic dal menu dei modelli, quindi Progetto predefinito. Creeremo il nostro progetto di esempio in un codice di titanio "classico" molto semplice. Questo perché una volta funzionante, vorremmo copiare il nostro codice di test nel example.js file del nostro modulo per altre persone da utilizzare come riferimento. Sto chiamando la mia app di prova Picasa-TestApp con un ID app di com.boydlee.picasatestapp, ma puoi chiamare il tuo qualunque cosa desideri.
Creazione di un nuovo progetto "classico" di Titanium Mobile Questo modello base è costituito da un Gruppo Tab e da due finestre, tutte definite all'interno del tuo app.js file. Stiamo semplificando il codice in modo da avere solo la scheda e l'unica finestra. Aggiungeremo un TableView che verrà compilato con i dati dei nostri album, ma prima di farlo, dobbiamo aggiungere il nostro nuovo modulo al nostro progetto di test. Apri il tiapp.xml file, fare clic su "+"accanto all'elenco dei moduli dell'app, quindi scegli il modulo Picasa che abbiamo inserito nella sezione precedente.
Aggiunta del modulo Picasa al nostro progetto di test Ora aggiungiamo il codice di test in app.js, che restituirà un elenco di album al nostro utente e li mostrerà in un TableView. Faremo anche a richiedere e crea un nuovo oggetto Picasa tramite il nostro modulo.
// richiede il nostro Modulo e crea una nuova istanza di esso var PicasaModule = require ('com.boydlee.picasa'); var picasa = new PicasaModule.Picasa (); // imposta lo username picasa.setUsername ('boydlee'); // imposta il livello di accesso usando il nostro oggetto pubblico "CONSTANTS" picasa.setAccessLevel (picasa.ACCESS_LEVELS.PUBLIC); // questo imposta il colore di sfondo del master UIView (quando non ci sono gruppi di finestre / tab su di esso) Titanium.UI.setBackgroundColor ('# 000'); // crea il gruppo di schede var tabGroup = Titanium.UI.createTabGroup (); // // crea la scheda dell'interfaccia utente di base e la finestra radice // var win = Titanium.UI.createWindow (title: 'Picasa Albums', backgroundColor: '# 000'); var tab1 = Titanium.UI.createTab (icona: 'KS_nav_views.png', titolo: 'Albums, finestra: win); // ottieni gli album per questo utente e il livello di accesso picasa.getAlbums (function (response) //openAlbumPhotosView(response.feed.entry[0].gphoto$name.$t, response.feed.entry [0] .link [0] .href); var table = Ti.UI.createTableView (width: Ti.UI.FILL, height: Ti.UI.FILL, top: 0, left: 0); table.addEventListener ('click' , function (e) openAlbumPhotosView (e.row.data.title, e.row.data.url);); var rows = []; for (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(); Tieni presente che ho impostato l'accesso al pubblico e il nome utente a boydlee, che accederà alle foto sul mio account Picasa. Una volta fatto, prova ad avviare la tua app nel simulatore.
La nostra finestra predefinita con un elenco di album Picasa visualizzati in un TableView Infine, dobbiamo aggiungere una funzione chiamata openAlbumPhotosView, che accetterà un titolo e un URL dell'album, aprirà una nuova finestra nella scheda corrente e quindi ritirerà e visualizzerà tutte le foto per quell'album in uno ScrollableView.
function openAlbumPhotosView (title, url) Ti.API.info ('Ottenere foto per album:' + titolo); var detailsWin = Ti.UI.createWindow (title: title, backgroundColor: '# 000', height: Ti.UI.FILL, width: Ti.UI.FILL); picasa.getPhotosByUrl (url, function (response) Ti.API.info (response); var imageViews = []; for (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); Esegui il codice nel simulatore per l'ultima volta. Ora dovresti essere in grado di recuperare un elenco di album, selezionarne uno da TableView e quindi visualizzare una presentazione scorrevole delle foto per quell'album. pulito!
ScrollableView mostra tutte le foto del nostro album Picasa selezionato. Tutto ciò che resta da fare ora è il pacchetto del modulo Picasa per iOS e Android. Innanzitutto, copia tutto il codice dal test app.js archiviarlo e incollarlo nel progetto del modulo /example/app.js. Vogliamo questo codice come esempio per le altre persone che vogliono usare il nostro modulo. Una volta fatto, basta premere il tasto Pacchetto pulsante e puoi scegliere di esportare il tuo modulo tramite a Posizione, proprio come abbiamo spiegato nel Imballaggio e test del tuo nuovo modulo sezione. Per Android, il processo è lo stesso, ma dobbiamo creare un progetto di modulo separato per questo creando un nuovo progetto Mobile Module per Android questa volta. Copia e incolla il Esempio / app.js e com.boydlee.picasa.js file di codice che abbiamo già creato nelle giuste posizioni nel tuo progetto di modulo mobile Android. È quindi possibile creare e distribuire per Android proprio come abbiamo fatto in iOS!
Mancia: Potrebbe essere necessario installare JDT prima di poter creare moduli per Android. Una semplice guida passo passo è disponibile su appcelerator.com
Spero che tu abbia trovato utile questo tutorial. La prossima volta che considererai la creazione di funzionalità di Titanium che desideri condividere, o l'utilizzo tra più progetti, probabilmente prenderai in considerazione l'idea di avvolgerlo in un modulo CommonJS!
