Share
In dit artikel bespreken we hoe je je eigen mobiele modules voor Appcelerator's Titanium kunt maken met alleen JavaScript en een beetje CommonJS-kennis. De module die we gaan maken, is er één voor Picasa, de afbeeldingservice van Google, en onze gebruikers kunnen albums en foto's bekijken vanuit Picasa zonder details over de Picasa-API zelf te kennen. Zodra we onze module hebben getest, zullen we deze ook doorlopen voor zowel iOS als Android!
Waarom helemaal in een module verpakken? De code die we maken, is tenslotte JavaScript. We kunnen onze codebestanden gewoon kopiëren en plakken in elk Appcelerator Titanium-project om ze te gebruiken. Er zijn echter een aantal zeer goede redenen om dit als module te doen.
Nu we het "waarom" uit de weg hebben geruimd, gaan we verder met het "hoe" en maken we onze module!
De eenvoudigste manier om een nieuw mobiel moduleproject op te zetten is via Titanium Studio, dus dat is wat we gaan doen. Open Titanium Studio en vanuit de het dossier menu, selecteer Nieuw> Mobile Module Project. Je krijgt een scherm zoals hieronder. Ik bel onze module "Picasa"en geeft het een module-ID van"com.boydlee.picasa"Maak een aantekening van wat uw module-ID is, mocht u besluiten een andere identifier te gebruiken. Dit zal zeer belangrijk zijn wanneer we onze JavaScript-bestanden later maken op!
Een nieuw mobiel moduleproject maken in Titanium Studio U zult waarschijnlijk in deze fase opmerken dat u alleen uw module voor iOS kunt maken OF Android. Dit komt omdat modules voor elk platform apart worden samengesteld. Ik ga nu iOS selecteren en gebruiken voor onze module. Het is veel sneller om te bouwen en te testen dan Android. We zullen onze Android-module bouwen met dezelfde code aan het einde van de tutorial. Druk op de Af hebben knop en Titanium Studio moet uw moduleproject maken en weergeven in het App Explorer-venster. Laten we beginnen met coderen!
Het eerste wat we moeten doen is het JavaScript-invoerbestand maken voor onze module, die in de .module zal gaan /middelen directory. Het moet op een bepaalde manier worden genoemd, wat moet zijn: your.module.id.js. Zoals ik mijn module heb genoemd com.boydlee.picasa, het JavaScript-bestand dat ik moet maken, moet worden gebeld com.boydlee.picasa.js. Uw App Explorer-venster ziet er dan ongeveer zo uit als de foto.
Het App Explorer-venster in Titanium Studio Titanium zoekt automatisch naar het toegangspuntbestand wanneer het uw module laadt, en dat toegangspuntbestand moet dezelfde naam hebben als de identificatie van uw module. Laten we beginnen met het bouwen van onze CommonJS-module, te beginnen met de shell-code, die onze Picasa-functie zal maken, een "Toegangsniveaus"er bezwaar tegen hebben voor het gemak met prototype, en exporteer de functie vervolgens via CommonJS.
/ * * Onze Picasa CommonJS-module * / function Picasa () this._username = "; this._accessLevel = 'public';; Picasa.prototype.ACCESS_LEVELS = PUBLIC: 'public', PRIVATE: 'private'; // ten slotte exporteert u de module // u MOET deze op deze manier exporteren, niet met methods.export =! exports.Picasa = Picasa;
Nu we onze basismoduleschaal klaar hebben, is het tijd om het in te vullen met een aantal functies met behulp van een prototype. We zullen deze module vrij eenvoudig houden, dus het heeft maar twee hoofddoelen: zoeken naar en retourneren van een lijst met de albums van de gebruiker en een lijst terugsturen van alle foto's voor een album. Laten we eerst een paar openbare getters en setters maken, zodat we de gebruikersnaam en toegangsniveaus kunnen instellen.
/ * Getters en setters voor onze privé-functies * / Picasa.prototype.setUsername = function (value) this._username = value; ; Picasa.prototype.getUsername = function () return this._gebruikersnaam; ; Picasa.prototype.setAccessLevel = function (value) this._accessLevel = value; ; Picasa.prototype.getAccessLevel = function () return this._accessLevel; ;
We hebben ook een functie nodig die HTTP-aanvragen kan uitvoeren. In plaats van meerdere verzoeken voor zowel albums als foto-oproepen naar Picasa te maken, kunnen we één verzoekfunctie maken die herbruikbaar is. Laten we dat nu doen.
Accentsconagua
/ * * Onze xhr-functie accepteert een URL en 2 callback-functies * / Picasa.prototype.xhr = function (url, succes, fout) var client = Ti.Network.createHTTPClient (// -functie genoemd wanneer de antwoordgegevens beschikbaar zijn onload: functie (e) Ti.API.info ("Received JSON Text:" + this.responseText); var json = JSON.parse (this.responseText); success (json);, // function called when an fout optreedt, inclusief een time-out onerror: functie (e) Ti.API.debug (e.error); error (e.error);, time-out: 5000 // in milliseconden); client.open ("GET", url); // Bereid de verbinding voor. client.send (); // Stuur het verzoek. ; Laten we onze Picasa-functie uitbreiden met enkele functies die de gebruikersnaam en het toegangsniveau nemen en geldige URL's retourneren voor de Picasa-fotodienst. We zullen deze URL's later gebruiken wanneer we onze HttpRequests bouwen.
function Picasa () this._username = "; this._accessLevel = 'public'; var _this = this; this.albumnsEndpoint = function (gebruikersnaam, accessLevel) gebruikersnaam = (gebruikersnaam === undefined)? _this._username: gebruikersnaam ; accessLevel = (accessLevel === undefined)? _this._accessLevel: accessLevel; retourneer 'https://picasaweb.google.com/data/feed/api/user/' + gebruikersnaam + '? kind = album & access =' + accessLevel + '& alt = json';; this.albumPhotosEndpoint = function (albumId, gebruikersnaam, accessLevel) if (albumId === undefined) Ti.API.error ('Deze methode vereist een album-ID!'); return; gebruikersnaam = (gebruikersnaam === niet gedefinieerd)? _this._username: gebruikersnaam; accessLevel = (accessLevel === undefined)? _this._accessLevel: accessLevel; return 'https://picasaweb.google.com/data/entry/api / user / '+ gebruikersnaam +' / albumid / '+ albumId +'? alt = json ';;; Nu de basisstructuur van onze module er is, kunnen we beginnen met het bouwen van de Picasa API en het toevoegen van echte functionaliteit en bruikbaarheid aan onze module. Het eerste dat we doen, is een functie maken waarmee onze gebruiker een lijst met hun Picasa-albums kan ophalen. De JSON-informatie dat Picasa terugkeert voor deze oproep is buitengewoon complex, dus we zullen het ook vereenvoudigen tot een mooie nette verzameling van objecten die u op het eerste gezicht gemakkelijk kunt begrijpen. Ga je gang en maak de volgende functie aan in je CommonJS-module.
/ * * Deze functie haalt de URL van de albums op, parseert de JSON-respons en vereenvoudigt voordat * deze doorgeeft aan onze callback-functie * / Picasa.prototype.getAlbums = function (callback) if (this._username! == undefined) var albumsUrl = this.albumnsEndpoint (this._username); this.xhr (albumsUrl, functie (respons) var albums = []; 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); ); ; ;
Nu we toegang hebben tot de albumgegevens, moeten we de eindpunten van Picasa gebruiken om een lijst met foto's voor een bepaald album op te halen. Dit kan op twee manieren worden gedaan. U kunt de album-ID gebruiken en een eindpunt van de Foto's-URL opbouwen, of u kunt eenvoudig de URL gebruiken die is teruggezonden in de HTTP-aanvraag van het album. We zullen beide functies maken, alleen omwille van het nut, en een derde functie genaamd createPhotosArray die een JSON-antwoordobject opneemt en een vereenvoudigde reeks afbeeldingen retourneert. Maak in uw CommonJS-module de volgende functies.
/ * * Neemt een JSON-object op met het URL-antwoord van een foto en retourneert * de belangrijke informatie (een arrayfoto-object) * / Picasa.prototype.createPhotosArray = function (response) 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); ); ;
Dat is het zo ongeveer als onze CommonJS-module gaat! We zijn nu in staat om onze gebruikersnaam en toegangsniveaus in te stellen via openbare eigenschappen, een lijst met albums terug te halen en die informatie te gebruiken om vervolgens een bijbehorende lijst met foto's terug te halen voor elke Album-ID / Album-URL. Verderop in de volgende sectie, waar we het hebben over het verpakken van onze module voor gebruik in een echte Titanium Mobile-applicatie!
Het verpakken van uw module kan niet eenvoudiger zijn wanneer u Titanium Studio gebruikt. Klik eerst op de "Pakket"pictogram in het App Explorer-venster Het pakketpictogram ziet eruit als een gesloten kader en klik vervolgens op de optie in het submenu"Pakket - iOS-moduleEr verschijnt een nieuw pop-upvenster dat er als volgt uitziet, met drie verschillende verpakkingsopties.
Titanium Mobiele Module Verpakkingsopties We gaan door en kiezen de eerste optie, maken het pakket en slaan het op in onze Titanium SDK-map. Selecteer dat en druk op "Af hebbenNu hoeft u alleen maar achterover te leunen en een minuut te wachten. Titanium Studio zal uw nieuwe module bouwen en wanneer deze voltooid is, ziet u rechtsonder in het scherm een geel bericht verschijnen.!
Modulepakket succes! Nu onze module is verpakt, moeten we hem waarschijnlijk uittesten, toch? Laten we een nieuw mobiel project maken. Kies Titanium Classic in het sjablonenmenu en vervolgens Standaard project. We gaan ons voorbeeldproject maken in heel eenvoudige, "klassieke" Titanium-code. Dit komt omdat zodra deze werkt, we onze testcode in de example.js bestand van onze module voor andere mensen om te gebruiken als een referentie. Ik bel mijn test-app Picasa-testapp met een app-ID van com.boydlee.picasatestapp, maar je kunt de jouwe noemen wat je maar wilt.
Een nieuw 'klassiek' project van Titanium Mobile maken Deze basissjabloon bestaat uit een TabGroup en twee vensters, allemaal gedefinieerd in uw app.js het dossier. We gaan de code vereenvoudigen, zodat we slechts één tabblad en één venster hebben. We zullen een TableView toevoegen die we zullen invullen met onze albums, maar voordat we dat doen, moeten we onze nieuwe module aan ons testproject toevoegen. Open de tiapp.xml bestand, klik op de "+"knop naast de lijst met app-modules en kies vervolgens de Picasa-module die we in het vorige gedeelte hebben ingepakt.
De Picasa-module toevoegen aan ons testproject Laten we nu de testcode toevoegen app.js, die een lijst met albums aan onze gebruiker retourneert en deze in een TableView toont. We doen ook een vereisen en maak een nieuw Picasa-object via onze module.
// onze module vereisen en er een nieuw exemplaar van maken var PicasaModule = require ('com.boydlee.picasa'); var picasa = new PicasaModule.Picasa (); // stel de gebruikersnaam picasa.setUsername ('boydlee'); // stel het toegangsniveau in met behulp van ons openbare 'CONSTANTS'-object picasa.setAccessLevel (picasa.ACCESS_LEVELS.PUBLIC); // hiermee wordt de achtergrondkleur van de hoofd-UIView ingesteld (als er geen vensters / tabgroepen op staan) Titanium.UI.setBackgroundColor ('# 000'); // maak tabgroep var tabGroup = Titanium.UI.createTabGroup (); // // maak basis UI-tabblad en root-venster // var win = Titanium.UI.createWindow (title: 'Picasa Albums', backgroundColor: '# 000'); var tab1 = Titanium.UI.createTab (icon: 'KS_nav_views.png', titel: 'Albums', venster: win); // haal de albums voor deze gebruiker en toegangsniveau picasa.getAlbums op (function (response) //openAlbumPhotosView(response.feed.entry[0].gphoto$name.$t, response.feed.entry [0] .link [0] .href); var tabel = Ti.UI.createTableView (width: Ti.UI.FILL, height: Ti.UI.FILL, top: 0, left: 0); table.addEventListener ('klik') , functie (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(); Merk op dat ik de toegang tot het publiek en de gebruikersnaam heb ingesteld boydlee, die toegang heeft tot de foto's op mijn Picasa-account. Zodra dat is gebeurd, probeert u uw app in de simulator te starten.
Ons standaardvenster met een lijst met Picasa-albums die wordt weergegeven in een TableView Ten slotte moeten we een functie toevoegen met de naam openAlbumPhotosView, die een albumtitel en URL gaat accepteren, een nieuw venster opent in het huidige tabblad en vervolgens terugtrekt en alle foto's voor dat album weergeeft in een ScrollableView.
function openAlbumPhotosView (titel, url) Ti.API.info ('Foto's ophalen voor album:' + titel); var detailsWin = Ti.UI.createWindow (title: title, backgroundColor: '# 000', height: Ti.UI.FILL, width: Ti.UI.FILL); picasa.getPhotosByUrl (url, functie (antwoord) 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); Voer je code nog een laatste keer uit in de simulator. U zou nu een lijst met albums terug moeten kunnen halen, er een uit de TableView kunnen selecteren en vervolgens een Schuifbare diavoorstelling van de foto's voor dat album kunnen bekijken. Netjes!
ScrollableView toont alle foto's uit ons geselecteerde Picasa-album. Nu hoeft alleen nog de Picasa-module voor iOS en Android te worden verpakt. Kopieer eerst alle code uit uw test app.js bestand en plak het in de module project /example/app.js. We willen deze code als een voorbeeld voor andere mensen die onze module willen gebruiken. Zodra dat is gebeurd, klikt u gewoon op Pakket knop en u kunt ervoor kiezen om uw module te exporteren via een Plaats, net zoals we hebben uitgelegd in de Verpakking en testen van uw nieuwe module sectie. Voor Android is het proces hetzelfde, maar we moeten hiervoor een afzonderlijk moduleproject maken door deze keer een nieuw Mobile Module-project voor Android te maken. Kopieer en plak de example / app.js en com.boydlee.picasa.js codebestanden die we al hebben gemaakt op de juiste locaties in uw Android mobiele moduleproject. U kunt vervolgens Android bouwen en distribueren, net als in iOS!
Tip: Mogelijk moet u JDT installeren voordat u modules voor Android kunt maken. Een eenvoudige stap-voor-stap handleiding is beschikbaar op appcelerator.com
Hopelijk heb je deze tutorial nuttig gevonden. De volgende keer dat u nadenkt over het uitbouwen van Titanium-functionaliteit die u wilt delen, of gebruik wilt maken van meerdere projecten, overweegt u waarschijnlijk om het in een CommonJS-module te verpakken.!
