Share
I denne artikkelen diskuterer vi hvordan du lager dine egne mobilmoduler for Appcelerators Titanium ved hjelp av bare JavaScript og litt av CommonJS-kunnskap. Modulen vi skal opprette, vil være en for Picasa, Googles bildetjeneste, og lar brukerne se på album og bilder fra Picasa uten å vite noe om selve Picasa API. Når vi har testet modulen vår, vil vi også kjøre gjennom emballasje for både iOS og Android!
Hvorfor pakke inn i en modul i det hele tatt? Koden vi oppretter er likevel JavaScript. Vi kunne bare kopiere og lime inn våre kodefiler til et Appcelerator Titanium-prosjekt for å kunne bruke dem. Det er imidlertid mange gode grunner til å gjøre dette som en modul.
Nå som vi har "hvorfor" ute av veien, la oss gå videre til "hvordan" og lage vår modul!
Den enkleste måten å sette opp et nytt mobilmodulprosjekt er via Titanium Studio, så det er det vi skal gjøre. Open Titanium Studio og fra Fil menyen, velg Nytt> Mobilt modulprosjekt. Du vil bli presentert med en skjerm som den nedenfor. Jeg ringer til modulen vår "Picasa"og gir den en modul ID for"com.boydlee.picasa". Legg merke til hva din modul ID er, bør du bestemme deg for å bruke en annen identifikator. Dette vil være svært viktig når vi lager våre JavaScript-filer senere!
Opprette et nytt mobilmodulprosjekt i Titanium Studio Du vil sikkert merke på dette stadiet at du bare kan opprette modulen din for iOS ELLER Android. Dette skyldes at modulene er samlet separat for hver plattform. Jeg skal velge og bruke iOS for modulen vår akkurat nå. Det er mye raskere å bygge og teste enn Android er. Vi bygger vår Android-modul med samme kode på slutten av opplæringen. Slå den Bli ferdig knapp og Titanium Studio bør opprette modulprosjektet og vise det i App Explorer-ruten. La oss starte kodingen!
Det første vi må gjøre er å opprette JavaScript-filen for modulen, som vil gå inn i /eiendeler katalogen. Den må bli navngitt på en bestemt måte, som må være: your.module.id.js. Som jeg har kalt min modul com.boydlee.picasa, JavaScript-filen jeg trenger å lage må bli kalt com.boydlee.picasa.js. Din App Explorer-ruten skal da se ut som bildet.
App Explorer-panelet i Titanium Studio Titanium ser automatisk etter inngangspunktfilen når den laster inn modulen din, og den inngangspunktfilen må ha samme navn som modulens identifikator. La oss begynne å bygge vår CommonJS-modul, som starter med shell-koden, som lager vår Picasa-funksjon, legger til en "Tilgangsnivåer"motsette seg det for enkelhets skyld å bruke prototype, og deretter eksportere funksjonen via CommonJS.
/ * * Vår Picasa CommonJS-modul * / funksjon Picasa () this._username = "; this._accessLevel = 'public';; Picasa.prototype.ACCESS_LEVELS = OFFENTLIG: 'offentlig', PRIVAT: 'privat'; // endelig, eksporter modulen // du må eksportere den på denne måten, ikke bruk methods.export =! exportss.Picasa = Picasa;
Nå som vi har vårt grunnleggende modulskall gjort, er det på tide å fylle det ut med noen funksjoner ved hjelp av prototype. Vi skal holde denne modulen ganske enkel, så den skal bare ha to hovedmål: Søk etter og returner en liste over brukerens album, og returner en liste over alle fotografier for et album. La oss først lage noen offentlige getters og setters slik at vi kan sette brukernavn og tilgangsnivåer.
/ * Getters og setters for våre private funksjoner * / Picasa.prototype.setUsername = function (value) this._username = value; ; Picasa.prototype.getUsername = function () returner dette._navnet; ; Picasa.prototype.setAccessLevel = funksjon (verdi) this._accessLevel = verdi; ; Picasa.prototype.getAccessLevel = funksjon () return this._accessLevel; ;
Vi skal også ha en funksjon som kan utføre HTTP-forespørsler. I stedet for å lage flere forespørsler for både album og fotoanrop til Picasa, kan vi opprette en forespørselsfunksjon som kan gjenbrukes. La oss gjøre det nå.
Accentsconagua
/ * * Vår xhr-funksjon aksepterer en URL og 2 tilbakeringingsfunksjoner * / Picasa.prototype.xhr = funksjon (URL, suksess, feil) var client = Ti.Network.createHTTPClient (// funksjon kalt når svardata er tilgjengelig onload: funksjon (e) Ti.API.info ("Mottatt JSON Tekst:" + this.responseText); var json = JSON.parse (this.responseText); suksess (json);; // funksjon kalt når en Feil oppstår, inkludert en timeout onerror: funksjon (e) Ti.API.debug (e.error); feil (e.error);, timeout: 5000 // i millisekunder); client.open ("GET", url); // Forbered forbindelsen. client.send (); // Send forespørselen. ; La oss utvide vår Picasa-funksjon med noen funksjoner som vil ta brukernavn og tilgangsnivå og returnere gyldige nettadresser for Picasa-fototjenesten. Vi bruker disse nettadressene senere når vi bygger våre HttpRequests.
funksjon Picasa () this._username = "; this._accessLevel = 'public'; var _this = dette; this.albumnsEndpoint = funksjon (brukernavn, accessLevel) brukernavn = (brukernavn === undefined)? _this._username: brukernavn ; accessLevel = (accessLevel === undefined)? _this._accessLevel: accessLevel; return 'https://picasaweb.google.com/data/feed/api/user/' + brukernavn + '? kind = album & access =' + accessLevel + '& alt = json';; this.albumPhotosEndpoint = funksjon (albumId, brukernavn, accessLevel) if (albumId === undefined) Ti.API.error ('Denne metoden krever et album ID!'); brukernavn = (brukernavn === undefined)? _tis._username: brukernavn; accessLevel = (accessLevel === undefined)? _this._accessLevel: accessLevel; return 'https://picasaweb.google.com/data/entry/api / bruker / '+ brukernavn +' / albumid / '+ albumId +'? alt = json ';;; Nå som grunnstrukturen til modulen vår er der, kan vi begynne å bygge mot Picasa API og legge til ekte funksjonalitet og nytte for modulen vår. Det første vi skal gjøre er å opprette en funksjon som gjør det mulig for brukeren å hente tilbake en liste over deres Picasa-album. JSON-informasjonen Picasa returnerer for denne samtalen er ekstremt kompleks, så vi vil også forenkle den til et fint, pent utvalg av objekter som du lett kan forstå ved første øyekast. Gå videre og opprett følgende funksjon i CommonJS-modulen din.
/ * * Denne funksjonen henter albumets url, analyserer JSON-responsen og forenkler før * sender den til vår tilbakeringingsfunksjon * / Picasa.prototype.getAlbums = funksjon (tilbakeringing) if (this._username! == undefined) var albumsUrl = this.albumnsEndpoint (this._username); this.xhr (albumsUrl, function (response) var album = []; for (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); ); ; ;
Nå som vi har tilgang til albumdataene, må vi bruke Picasas bildeendpunkter for å hente en liste over bilder for et bestemt album. Dette kan gjøres på to måter. Du kan bruke album-ID og bygge opp et URL-endepunkt for bilder, eller du kan ganske enkelt bruke nettadressen som returneres tilbake i albumets HTTP-forespørsel. Vi lager begge funksjonene bare for brukens skyld, og en tredje funksjon kalt createPhotosArray som vil ta inn et JSON-responsobjekt og returnere en forenklet rekke bilder. I din CommonJS-modul lager du følgende funksjoner.
/ * * Tar inn et bilde URL-svar JSON-objekt og returnerer bare * den viktige informasjonen (et arrayfotobjekt) * / Picasa.prototype.createPhotosArray = funksjon (respons) var photos = []; for (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); ); ;
Det handler om det så langt som vår CommonJS-modul går! Vi kan nå angi brukernavn og tilgangsnivåer via offentlige eiendomsfunksjoner, hente tilbake en liste over album og bruke den informasjonen til å hente tilbake en tilsvarende liste med bilder for hver album-ID / album-URL. Fortsett til neste avsnitt, hvor vi snakker om å pakke inn modulen vår til bruk i en ekte Titanium Mobile-applikasjon!
Emballasje av modulen kan ikke være enklere når du bruker Titanium Studio. Først klikker du på "Pakke"ikonet i App Explorer-panelet. Pakkeikonet ser ut som en lukket boks. Deretter klikker du på undermenyalternativet"Pakke - iOS-modul". Det vises et nytt popup-vindu som ser ut som det nedenfor, med tre forskjellige emballasjemuligheter.
Titanium Mobile Module Packaging Options Vi skal fortsette og velge det første alternativet, lage pakken, og lagre den i vår Titanium SDK-mappe. Velg det og trykk på "Bli ferdig"Nå bare lene deg tilbake og vent litt. Titanium Studio vil bygge din nye modul, og når den er ferdig, vil du se en gul varslingsmelding vises nederst til høyre på skjermen.!
Modulpakke suksess! Nå som vår modul er pakket, bør vi sannsynligvis teste det ut, ikke sant? La oss lage et nytt mobilprosjekt. Velg Titanium Classic fra maler-menyen, og deretter Standardprosjekt. Vi skal lage vårt eksempelprosjekt i veldig enkel, "klassisk" titankode. Dette skyldes at når det virker, vil vi kopiere testkoden til example.js fil av modulen vår for andre å bruke som referanse. Jeg ringer til min test-app Picasa-TestApp med en app ID av com.boydlee.picasatestapp, men du kan ringe deg hva du vil.
Opprette et nytt Titanium Mobile "Classic" -prosjekt Denne grunnleggende mal består av en TabGroup og to vinduer, alle definert i din app.js fil. Vi skal forenkle koden slik at vi bare har den ene kategorien og det ene vinduet. Vi legger til en tabellvisning som vi vil fylle ut med albumdataene våre, men før vi gjør det, må vi legge til vår nye modul i vårt testprosjekt. Åpne tiapp.xml fil, klikk på "+"-knappen ved siden av listen over appmoduler, og velg deretter Picasa-modulen vi pakket opp i forrige seksjon.
Legge til Picasa-modulen i vårt testprosjekt La oss nå legge til testkoden i app.js, som vil returnere en liste over album til brukeren vår og vise dem i en tabellvisning. Vi gjør også en krever og opprett et nytt Picasa-objekt via modulen vår.
// krever modulen vår og opprett en ny forekomst av det var PicasaModule = krever ('com.boydlee.picasa'); var picasa = ny PicasaModule.Picasa (); // angi brukernavnet picasa.setUsername ('boydlee'); // angi tilgangsnivået med vårt offentlige "CONSTANTS" -objekt picasa.setAccessLevel (picasa.ACCESS_LEVELS.PUBLIC); // dette setter bakgrunnsfargen til master UIView (når det ikke er noen vinduer / fanegrupper på den) Titanium.UI.setBackgroundColor ('# 000'); // lage kategorien gruppe var tabGroup = Titanium.UI.createTabGroup (); // // lage grunnleggende brukergrensesnitt og rotvindu // varwin = Titanium.UI.createWindow (title: 'Picasa Albums', backgroundColor: '# 000'); var tab1 = Titanium.UI.createTab (ikon: 'KS_nav_views.png', tittel: 'Album', vindu: vinn); // få albumene for denne brukeren og tilgangsnivå picasa.getAlbums (funksjon (svar) //openAlbumPhotosView(response.feed.entry[0].gphoto$name.$t, response.feed.entry [0] .link [0] .href); var tabell = Ti.UI.createTableView (bredde: Ti.UI.FILL, høyde: Ti.UI.FILL, topp: 0, venstre: 0); table.addEventListener ('klikk' , funksjon (e) openAlbumPhotosView (e.row.data.title, e.row.data.url);); var rader = []; 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(); Legg merke til at jeg har angitt tilgangen til offentlig og brukernavnet til boydlee, som vil få tilgang til bildene på min Picasa-konto. Når det er gjort, kan du prøve å starte appen din i simulatoren.
Standardvinduet vårt med en liste over Picasa-album som vises i en tabellvisning Til slutt må vi legge til en funksjon som heter openAlbumPhotosView, som skal godta en albumtittel og URL, åpner et nytt vindu i den nåværende kategorien, og deretter trekker du tilbake og viser alle bildene for det aktuelle albumet i en ScrollableView.
funksjon openAlbumPhotosView (title, url) Ti.API.info ('Få bilder for album:' + tittel); var detaljerWin = Ti.UI.createWindow (title: title, backgroundColor: '# 000', høyde: Ti.UI.FILL, bredde: Ti.UI.FILL); picasa.getPhotosByUrl (url, funksjon (respons) Ti.API.info (respons); 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); Kjør koden i simulatoren for en siste gang. Du bør nå kunne hente tilbake en liste over album, velge en fra TableView, og deretter se et Scrollbart lysbildefremvisning av bildene for det aktuelle albumet. Ryddig!
ScrollableView viser alle bildene fra vårt valgte Picasa Album. Alt som er igjen å gjøre nå, er pakken Picasa-modulen for iOS og Android. Først kopierer du all koden fra testen din app.js fil og lim det inn i modulprosjektet /example/app.js. Vi vil ha denne koden som et eksempel for andre som ønsker å bruke modulen vår. Når det er gjort, bare trykk på Pakke knappen, og du kan velge å eksportere modulen din via en plassering, akkurat som vi forklarte tilbake i Emballasje og testing av den nye modulen seksjon. For Android er prosessen den samme, men vi må lage et eget modulprosjekt for det ved å lage et nytt Mobile Module-prosjekt for Android denne gangen. Kopier og lim inn Eksempel / app.js og com.boydlee.picasa.js kodefiler som vi allerede har opprettet på de riktige stedene i Android-mobilmodulen din. Du kan da bygge og distribuere til Android akkurat som vi gjorde i iOS!
Tips: Du må kanskje installere JDT før du kan lage moduler for Android. En enkel trinnvis veileder er tilgjengelig på appcelerator.com
Forhåpentligvis har du funnet denne opplæringen nyttig. Neste gang du vurderer å bygge ut Titanium-funksjonalitet som du vil dele, eller bruke blant flere prosjekter, vil du trolig vurdere å pakke den inn i en CommonJS-modul!
