Share
În acest articol vom discuta cum să vă creați propriile module mobile pentru Titanium-ul Appcelerator folosind doar JavaScript și un pic de cunoștințe CommonJS. Modulul pe care îl vom crea va fi unul pentru Picasa, serviciul de imagine Google și va permite utilizatorilor noștri să vizualizeze albume și fotografii din Picasa fără să știe detalii despre API-ul Picasa. Odată ce am testat modulul nostru, vom rula, de asemenea, prin împachetarea acestuia atât pentru iOS și Android!
De ce pachete într-un modul, la toate? Codul pe care îl creăm este JavaScript la urma urmei. Am putea să copiem și să lipim fișierele noastre de cod în orice proiect Appcelerator Titanium pentru a le folosi. Există o serie de motive foarte bune pentru a face acest lucru ca modul, totuși.
Acum că avem "de ce" din drum, hai să ne mutăm pe "cum" și să creăm modulul nostru!
Cea mai ușoară modalitate de a crea un nou proiect pentru un modul mobil este via Titanium Studio, așa că vom face acest lucru. Deschideți Titanium Studio și de la Fişier meniu, selectați Nou> Proiect Modul mobil. Veți fi prezentat cu un ecran ca cel de mai jos. Sunăm modulul nostru "Picasa"și dându-i un ID modul de"com.boydlee.picasa"Notați modul în care este identificatorul dvs. de modul în cazul în care decideți să utilizați un alt identificator.Acest lucru va fi foarte important atunci când creați fișierele JavaScript mai târziu!
Crearea unui nou proiect Mobile Module în Titanium Studio Veți observa, probabil, în acest stadiu că puteți crea numai modulul dvs. pentru iOS SAU Android. Acest lucru se datorează faptului că modulele sunt compilate separat pentru fiecare platformă. Voi selecta și utiliza iOS pentru modulul nostru chiar acum. Este mult mai rapid să construiți și să testați decât Android. Vom construi modulul nostru Android utilizând același cod la sfârșitul tutorialului. Loveste finalizarea butonul și Titanium Studio trebuie să creeze proiectul dvs. de modul și să îl afișeze în panoul App Explorer. Să începem codarea!
Primul lucru pe care trebuie să-l facem este să creați fișierul de intrare JavaScript pentru modulul nostru, care va intra în / active director. Aceasta trebuie sa să fie numit într-un mod particular, care trebuie să fie: your.module.id.js. După cum am numit modulul meu com.boydlee.picasa, fișierul JavaScript pe care trebuie să-l creez trebuie să fie apelat com.boydlee.picasa.js. Panoul App Explorer ar trebui să arate apoi ca o fotografie.
Panoul App Explorer din Titanium Studio Titanium caută automat fișierul punctului de intrare atunci când încarcă modulul și acel fișier de punct de intrare trebuie să aibă același nume ca și identificatorul modulului. Să începem să construim modulul nostru CommonJS, începând cu codul shell, care va crea funcția noastră Picasa, adăugând un "Niveluri de acces"Obiect pentru aceasta pentru utilizarea comodă prototip, și apoi exportați funcția prin CommonJS.
/ * * Modulul Picasa CommonJS * / funcția Picasa () this._username = "; this._accessLevel = 'public';; Picasa.prototype.ACCESS_LEVELS = PUBLIC: 'public', PRIVATE: 'private'; // în cele din urmă, exportați modulul // TREBUIE să-l exportați în acest mod, fără a utiliza methods.export =! exports.Picasa = Picasa;
Acum, când am realizat shell-ul nostru de bază, este timpul să îl completăm cu câteva funcții folosind prototipul. Vom păstra acest modul destul de simplu, deci vor avea doar două obiective principale: căutarea și returnarea unei liste a albumelor utilizatorului și returnarea unei liste cu toate fotografiile pentru un album. În primul rând, hai să creăm câțiva getters și setteri publici, astfel încât să putem seta numele de utilizator și nivelurile de acces.
/ * Getters și setters pentru funcțiile noastre private * / Picasa.prototype.setUsername = funcție (valoare) this._username = value; ; Picasa.prototype.getUsername = funcție () return this._username; ; Picasa.prototype.setAccessLevel = funcție (valoare) this._accessLevel = value; ; Picasa.prototype.getAccessLevel = funcția () return this._accessLevel; ;
De asemenea, vom avea nevoie de o funcție care să poată efectua solicitări HTTP. În loc să creați mai multe solicitări atât pentru albume, cât și pentru apeluri foto la Picasa, putem crea o funcție de solicitare reutilizabilă. Să facem asta acum.
Accentsconagua
/ * * Funcția noastră xhr acceptă o adresă URL și două funcții callback * / Picasa.prototype.xhr = funcție (url, succes, eroare) var client = Ti.Network.createHTTPClient (// funcția apelată atunci când datele de răspuns sunt disponibile onload: functie (e) Ti.API.info ("Text primit JSON:" + this.responseText); var json = JSON.parse (this.responseText); apare o eroare, inclusiv un timeout onerror: funcția (e) Ti.API.debug (e.error); eroare (e.error); timeout: 5000 // în milisecunde); client.open ("GET", url); // Pregătiți conexiunea. client.send (); // Trimiteți cererea. ; Să extindeți funcția Picasa cu unele funcții care vor lua numele de utilizator și nivelul de acces și vor reveni la adresa URL validă pentru serviciul foto Picasa. Vom folosi aceste URL-uri mai târziu atunci când vom construi HttpRequests.
(username === undefined)? _this._username: numele de utilizator (username = username = username = username = username = username = username = ; accesLevel = (accessLevel === undefined)? _this._accessLevel: accessLevel; retur 'https://picasaweb.google.com/data/feed/api/user/' + username + '? kind = album & access =' + accessLevel + '& alt = json';; this.albumPhotosEndpoint = functie (albumId, username, accessLevel) if (albumId === undefined) Ti.API.error ('Aceasta metoda necesita un ID album! username = (username === undefined)? _this._username: username; accessLevel = (accessLevel === undefined)? _this._accessLevel: accessLevel; return 'https://picasaweb.google.com/data/entry/api / user / '+ nume utilizator +' / albumid / '+ albumId +'? alt = json ';;; Acum că structura de bază a modulului nostru este acolo, putem începe să construim împotriva API-ului Picasa și să adăugăm funcționalitate și utilitate reală modulelor noastre. Primul lucru pe care îl vom face este crearea unei funcții care să permită utilizatorului nostru să preia o listă a albumelor Picasa. Informațiile JSON pe care Picasa le întoarce pentru acest apel este extrem de complexă, așa că o vom simplifica într-o gamă frumoasă de obiecte pe care le puteți înțelege cu ușurință la prima vedere. Mergeți mai departe și creați următoarea funcție în modulul dvs. CommonJS.
/ * * Aceasta functie va prelua url-ul albumelor, va analiza raspunsul JSON si va simplifica inainte de a-l transmite pe functia de retur * / Picasa.prototype.getAlbums = function (callback) if (this._username! == undefined) var albumsUrl = this.albumnsEndpoint (acest nume_utilizator); this.xhr (albumsUrl, funcție (răspuns) var albums = []; pentru (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); ); ; ;
Acum, că putem accesa datele din album, trebuie să folosim punctele finale ale fotografiei Picasa pentru a prelua o listă de fotografii pentru un anumit album. Acest lucru se poate face în două moduri. Puteți utiliza ID-ul albumului și puteți crea un punct final pentru adresele URL pentru fotografii sau puteți pur și simplu să utilizați adresa URL returnată în solicitarea HTTP a albumului. Vom crea ambele funcții doar din motive de utilitate și oa treia funcție numită createPhotosArray care va prelua un obiect de răspuns JSON și va reveni la o gamă simplificată de imagini. În modulul dvs. CommonJS, creați următoarele funcții.
/ * * Efectuează într-o fotografie URL răspuns JSON obiect și doar returnează * informațiile importante (un obiecte foto matrice) * / Picasa.prototype.createPhotosArray = funcție (răspuns) var photos = []; pentru (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); ); ;
Este vorba de modul în care funcționează modulul nostru CommonJS! Acum suntem în măsură să setăm numele de utilizator și nivelurile de acces prin intermediul funcțiilor publice de proprietate, să preluăm o listă de albume și să folosim acele informații pentru a prelua apoi o listă corespunzătoare de fotografii pentru fiecare adresă URL a albumului. Pe următoarea secțiune, unde vom vorbi despre ambalarea modulului nostru pentru a fi utilizate într-o aplicație reală Titanium Mobile!
Ambalarea modulului dvs. nu poate fi mai simplă atunci când utilizați Titanium Studio. Mai întâi, faceți clic pe butonul "Pachet"din panoul App Explorer Pictograma pachet arată ca o casetă închisă, apoi faceți clic pe opțiunea de submeniu"Pachet - modulul iOS"Se va afișa o nouă fereastră pop-up care arată ca cea de mai jos, cu trei opțiuni de ambalare diferite.
Opțiuni mobile de ambalare a modulelor mobile Titanium Vom merge mai departe și vom alege prima opțiune, vom crea pachetul și îl vom păstra în folderul Titanium SDK. Selectați această opțiune și apăsați pe "finalizarea"Acum stai puțin și așteptați un minut Titanium Studio va construi noul modul și după finalizarea acestuia veți vedea un mesaj de notificare galben în partea dreaptă jos a ecranului.!
Succesul pachetului de module! Acum că modulul nostru este ambalat, ar trebui probabil să-l testăm, nu? Să creăm un nou proiect mobil. Alegeți Titanium Classic din meniul template-urilor și apoi Proiect implicit. Vom crea proiectul nostru de exemplu în codul foarte simplu, "clasic" de titan. Acest lucru se datorează faptului că, odată ce funcționează, vom dori să copiem codul nostru de testare în example.js fișierul modulului nostru pentru alți utilizatori ca referință. Apel la aplicația mea de testare Picasa-TestApp cu un ID de aplicație com.boydlee.picasatestapp, dar puteți apela a ta cât vrei.
Crearea unui nou proiect "Classic" pentru Titanium Mobile Acest șablon de bază constă într-un TabGroup și două ferestre, toate definite în cadrul dvs. app.js fişier. Vom simplifica codul, astfel încât să avem doar una și aceeași fereastră. Vom adăuga un TableView pe care îl vom ocupa cu datele din albumele noastre, dar înainte de a face acest lucru, trebuie să adăugăm noul nostru modul la proiectul nostru de testare. Deschide tiapp.xml fișier, faceți clic pe "+"de lângă lista modulelor de aplicații, apoi alegeți modulul Picasa pe care l-am împachetat în secțiunea anterioară.
Adăugarea Modului Picasa în Proiectul nostru de testare Acum, să adăugăm codul de testare în app.js, care va întoarce o listă de albume utilizatorilor noștri și le va afișa într-un TableView. De asemenea, vom face a necesita și să creați un nou obiect Picasa prin modulul nostru.
// solicitați modulul nostru și creați o nouă instanță a lui var PicasaModule = require ('com.boydlee.picasa'); var picasa = noul PicasaModule.Picasa (); // setați numele de utilizator picasa.setUsername ('boydlee'); // setați nivelul de acces folosind obiectul public "CONSTANTS" picasa.setAccessLevel (picasa.ACCESS_LEVELS.PUBLIC); // aceasta seta culoarea de fundal a vederii UIView (atunci când nu există ferestre / grupuri de file pe ea) Titanium.UI.setBackgroundColor ('# 000'); // creați grupul de taburi var tabGroup = Titanium.UI.createTabGroup (); // crează fila UI de bază și fereastra de root // var win = Titanium.UI.createWindow (title: 'Picasa Albums', backgroundColor: '# 000'); var tab1 = Titanium.UI.createTab (icon: 'KS_nav_views.png', titlu: 'Albume', fereastra: win); // a obține albumele pentru acest utilizator și nivelul de acces picasa.getAlbums (funcția (răspunsul) //openAlbumPhotosView(response.feed.entry[0].gphoto$name.$t, answer.feed.entry [0] .link [0] .href); var tab = Ti.UI.createTableView (lățime: Ti.UI.FILL, înălțime: Ti.UI.FILL, top: 0, stânga: 0); table.addEventListener , funcția (e) openAlbumPhotosView (e.row.data.title, e.row.data.url);); var rows = []; pentru (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(); Rețineți că am setat accesul public și numele de utilizator la boydlee, care va accesa fotografiile din contul meu Picasa. După ce sa terminat, încercați să lansați aplicația în simulator.
Fereastra noastră implicită, cu o listă de albume Picasa afișate într-un tabel În cele din urmă, trebuie să adăugăm o funcție numită openAlbumPhotosView, care va accepta un titlu de album și un URL, deschide o fereastră nouă în fila curentă și apoi trage înapoi și afișează toate fotografiile pentru acel album într-un ScrollableView.
funcția openAlbumPhotosView (titlu, url) Ti.API.info ('Obținerea de fotografii pentru album:' + titlu); var detailsWin = Ti.UI.createWindow (title: title, backgroundColor: '# 000', înălțime: Ti.UI.FILL, width: Ti.UI.FILL); picasa.getPhotosByUrl (url, funcție (răspuns)) Ti.API.info (răspuns); var imageViews = []; pentru (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); Rulați codul în simulator pentru ultima oară. Acum ar trebui să puteți prelua o listă de albume, să selectați unul din TableView și apoi să vedeți un slide show Scrollable al fotografiilor pentru acel album. ordinat!
ScrollableView care afișează toate fotografiile din albumul nostru Picasa selectat. Tot ce trebuie să faceți acum este pachetul pentru modulul Picasa pentru iOS și Android. Mai întâi, copiați codul din test app.js fișier și inserați-l în proiectul modulului /example/app.js. Vrem acest cod ca exemplu pentru alte persoane care doresc să folosească modulul nostru. Odată ce sa terminat, loviți-l Pachet și puteți alege să exportați modulul prin intermediul unui Locație, așa cum am explicat înapoi în Ambalarea și testarea noului dvs. modul secțiune. Pentru Android, procesul este același, dar trebuie să creăm un proiect separat pentru modul prin crearea unui nou proiect Mobile Module pentru Android de data aceasta. Copiați și lipiți exemplu / app.js și com.boydlee.picasa.js fișierele de cod pe care le-am creat deja în locațiile potrivite în proiectul dvs. pentru module mobile Android. Puteți apoi să construiți și să distribuiți pentru Android exact așa cum am făcut-o în iOS!
Bacsis: Este posibil să aveți nevoie să instalați JDT înainte de a putea crea module pentru Android. Un ghid simplu pas cu pas este disponibil la appcelerator.com
Sperăm că ați găsit acest tutorial util. Data viitoare când vă gândiți să construiți funcționalitatea Titanium pe care doriți să o partajați sau să o utilizați în cadrul mai multor proiecte, probabil veți considera ambalarea acestuia într-un modul CommonJS!
