Share
In diesem Artikel besprechen wir, wie Sie mit JavaScript und etwas CommonJS-Wissen eigene mobile Module für Appcelerator Titanium erstellen. Das Modul, das wir erstellen werden, wird für Picasa, den Image-Service von Google, sein und ermöglicht unseren Benutzern, Alben und Fotos aus Picasa anzuzeigen, ohne Einzelheiten über die Picasa-API selbst zu erfahren. Nachdem wir unser Modul getestet haben, werden wir es auch für iOS und Android packen!
Warum überhaupt in ein Modul packen? Der Code, den wir erstellen, ist schließlich JavaScript. Wir könnten unsere Codedateien einfach kopieren und in jedes Appcelerator Titanium-Projekt einfügen, um sie zu verwenden. Es gibt jedoch eine Reihe sehr guter Gründe, dies als Modul zu tun.
Nun, da wir das "Warum" aus dem Weg haben, gehen wir zum "Wie" über und erstellen unser Modul!
Der einfachste Weg, ein neues Projekt für ein mobiles Modul einzurichten, ist über Titanium Studio. Wir werden das also tun. Öffnen Sie Titanium Studio und aus dem Datei Menü auswählen Neu> Mobilmodul-Projekt. Daraufhin wird ein Bildschirm wie der folgende angezeigt. Ich nenne unser Modul "Picasa"und geben Sie eine Modul-ID von"com.boydlee.picasa". Notieren Sie sich Ihre Modul - ID, falls Sie sich für eine andere Kennung entscheiden. Dies ist sehr wichtig, wenn Sie später unsere JavaScript - Dateien erstellen!
Erstellen eines neuen Mobilmodulprojekts in Titanium Studio Sie werden wahrscheinlich an dieser Stelle feststellen, dass Sie Ihr Modul nur für iOS erstellen können ODER Android. Dies liegt daran, dass Module für jede Plattform separat kompiliert werden. Ich werde jetzt iOS für unser Modul auswählen und verwenden. Es ist viel schneller zu bauen und zu testen als Android. Wir werden unser Android-Modul am Ende des Tutorials mit demselben Code erstellen. Schlagen Sie die Fertig und Titanium Studio sollten Ihr Modulprojekt erstellen und im App Explorer-Fenster anzeigen. Beginnen wir mit der Codierung!
Als erstes müssen wir die JavaScript-Eingabedatei für unser Modul erstellen, die in das Modul aufgenommen wird /Vermögenswerte Verzeichnis. Es Muss auf eine bestimmte Weise benannt werden, die sein muss: Ihre.Module.id.js. Wie ich mein Modul benannt habe com.boydlee.picasa, Die JavaScript-Datei, die ich erstellen muss, muss aufgerufen werden com.boydlee.picasa.js. Ihr App Explorer-Fenster sollte dann ungefähr so aussehen wie das Foto.
Der App Explorer-Bereich in Titanium Studio Titanium sucht beim Laden Ihres Moduls automatisch nach der Einstiegspunktdatei, und diese Einstiegspunktdatei muss denselben Namen wie die Kennung Ihres Moduls haben. Beginnen wir mit dem Aufbau unseres CommonJS-Moduls. Beginnen wir mit dem Shell-Code, der unsere Picasa-Funktion erstellt.Zugriffsebenen"widersetzen sich der Bequemlichkeit wegen Prototyp, und exportieren Sie dann die Funktion über CommonJS.
/ * * Unser Picasa-CommonJS-Modul * / Funktion Picasa () this._username = "; this._accessLevel = 'public';; Picasa.prototype.ACCESS_LEVELS = PUBLIC: 'public', PRIVATE: 'private'; // schließlich das Modul exportieren // MÜSSEN Sie es auf diese Weise exportieren, nicht mit Methods.export =! exports.Picasa = Picasa;
Jetzt, da wir unsere Basismodul-Shell erstellt haben, ist es Zeit, sie mit Prototypen auszufüllen. Wir werden dieses Modul relativ einfach halten. Daher werden nur zwei Hauptziele verfolgt: Suchen und Suchen einer Liste der Alben des Benutzers und Zurückgeben einer Liste aller Fotos für ein Album. Lassen Sie uns zunächst ein paar öffentliche Getter und Setter erstellen, damit wir den Benutzernamen und die Zugriffsebenen festlegen können.
/ * Getter und Setter für unsere privaten Funktionen * / Picasa.prototype.setUsername = Funktion (Wert) this._username = Wert; ; Picasa.prototype.getUsername = function () return this._username; ; Picasa.prototype.setAccessLevel = Funktion (Wert) this._accessLevel = Wert; ; Picasa.prototype.getAccessLevel = function () return this._accessLevel; ;
Wir werden auch eine Funktion benötigen, die HTTP-Anfragen ausführen kann. Anstatt mehrere Anforderungen für Alben und Fotoanrufe an Picasa zu erstellen, können Sie eine Anforderungsfunktion erstellen, die wiederverwendbar ist. Lass uns das jetzt machen.
Accentsconagua
/ * * Unsere xhr-Funktion akzeptiert eine URL und 2 Callback-Funktionen. * / Picasa.prototype.xhr = Funktion (URL, Erfolg, Fehler) var client = Ti.Network.createHTTPClient (// Funktion wird aufgerufen, wenn die Antwortdaten verfügbar sind onload: function (e) Ti.API.info ("Received JSON Text:" + this.responseText); var json = JSON.parse (this.responseText); success (json);, // Funktion wird aufgerufen, wenn eine Ein Fehler tritt auf, einschließlich eines Timeouts. onerror: function (e) Ti.API.debug (e.error); error (e.error);, Timeout: 5000 // in Millisekunden); client.open ("GET", URL); // Bereite die Verbindung vor. client.send (); // Anfrage senden ; Lassen Sie uns unsere Picasa-Funktion um einige Funktionen erweitern, die den Benutzernamen und die Zugriffsebene verwenden und gültige URLs für den Picasa-Fotodienst zurückgeben. Wir werden diese URLs später verwenden, wenn wir unsere HttpRequests erstellen.
function Picasa () this._username = "; this._accessLevel = 'public'; var _this = this; this.albumnsEndpoint = Funktion (Benutzername, AccessLevel) Benutzername = (Benutzername === undefined)? _this._username: Benutzername accessLevel = (accessLevel ===undefined)? _this._accessLevel: accessLevel; geben Sie "https://picasaweb.google.com/data/feed/api/user/ '+ username +'? kind = album & access = '+ accessLevel zurück + '& alt = json'; this.albumPhotosEndpoint = Funktion (albumId, Benutzername, accessLevel) if (albumId === undefined) Ti.API.error ('Diese Methode erfordert eine Album-ID!'); return; username = (username === undefined)? _dieser._Benutzername: username; accessLevel = (accessLevel === undefined)? _this._accessLevel: accessLevel; / user / '+ Benutzername +' / albumid / '+ albumId +'? alt = json ';;; Jetzt, da die grundlegende Struktur unseres Moduls vorhanden ist, können wir mit dem Aufbau der Picasa-API beginnen und unser Modul um echte Funktionalität und Nützlichkeit erweitern. Als Erstes erstellen wir eine Funktion, mit der unsere Benutzer eine Liste ihrer Picasa-Alben abrufen können. Die JSON-Informationen, die Picasa für diesen Aufruf zurückgibt, sind äußerst komplex. Daher vereinfachen wir sie auch in ein übersichtliches Array von Objekten, das Sie auf den ersten Blick leicht verstehen können. Erstellen Sie die folgende Funktion in Ihrem CommonJS-Modul.
/ * * Diese Funktion ruft die Alben-URL ab, analysiert die JSON-Antwort und vereinfacht die * Weitergabe an unsere Rückruffunktion * / Picasa.prototype.getAlbums = Funktion (Rückruf) if (this._username! == undefined) var albumUrl = this.albumnsEndpoint (this._username); this.xhr (AlbenUrl, Funktion (Antwort) var album = []; für (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); ); ; ;
Da wir nun auf die Albumdaten zugreifen können, müssen wir die Fotoendpunkte von Picasa verwenden, um eine Liste der Fotos für ein bestimmtes Album abzurufen. Dies kann auf zwei Arten erfolgen. Sie können die Album-ID verwenden und einen Endpunkt für Fotos-URLs erstellen. Sie können auch einfach die URL verwenden, die in der HTTP-Anforderung des Albums zurückgegeben wird. Wir werden beide Funktionen nur aus Gründen der Nützlichkeit erstellen und eine dritte Funktion aufrufen createPhotosArray Dadurch wird ein JSON-Antwortobjekt aufgenommen und ein vereinfachtes Array von Bildern zurückgegeben. Erstellen Sie in Ihrem CommonJS-Modul die folgenden Funktionen.
/ * * Nimmt ein Foto-URL-Antwort-JSON-Objekt an und gibt nur * die wichtigen Informationen (ein Array-Fotoobjekt) zurück. * / Picasa.prototype.createPhotosArray = Funktion (Antwort) var photos = []; für (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); ); ;
So weit geht es mit unserem CommonJS-Modul! Wir können jetzt unseren Benutzernamen und die Zugriffsebenen über öffentliche Eigenschaftsfunktionen festlegen, eine Liste von Alben abrufen und diese Informationen verwenden, um dann eine entsprechende Liste von Fotos für jede Album-ID / Album-URL abzurufen. Im nächsten Abschnitt erfahren Sie, wie Sie unser Modul für die Verwendung in einer echten Titanium Mobile-Anwendung verpacken!
Die Verpackung Ihres Moduls könnte bei der Verwendung von Titanium Studio nicht einfacher sein. Klicken Sie zuerst auf "Paket"Symbol im App Explorer-Bereich. Das Paketsymbol sieht aus wie ein geschlossenes Kästchen. Klicken Sie dann auf die Untermenüoption"Paket - iOS-ModulEs erscheint ein neues Popup-Fenster mit drei verschiedenen Verpackungsoptionen.
Verpackungsoptionen für Titan-Mobilmodule Wir gehen weiter und wählen die erste Option, erstellen das Paket und speichern es in unserem Titanium SDK-Ordner. Wählen Sie das aus und drücken Sie "FertigJetzt lehnen Sie sich zurück und warten Sie eine Minute. Titanium Studio baut Ihr neues Modul auf, und wenn es fertig ist, wird unten rechts auf dem Bildschirm eine gelbe Benachrichtigung angezeigt. Erfolg!
Modulpaket Erfolg! Jetzt, da unser Modul verpackt ist, sollten wir es wahrscheinlich testen, oder? Lassen Sie uns ein neues mobiles Projekt erstellen. Wählen Sie im Vorlagen-Menü Titanium Classic und dann Standardprojekt. Wir werden unser Beispielprojekt in sehr einfachem "klassischem" Titanium-Code erstellen. Dies liegt daran, dass wir, sobald es funktioniert, unseren Testcode in den kopieren möchten beispiel.js Datei unseres Moduls für andere Personen als Referenz. Ich rufe meine Test-App an Picasa-TestApp mit einer App-ID von com.boydlee.picasatestapp, aber Sie können Ihre anrufen, was Sie möchten.
Erstellen eines neuen "Classic" -Projekts aus Titan Mobile Diese Basisvorlage besteht aus einer TabGroup und zwei Fenstern, die alle in Ihrer definiert sind app.js Datei. Wir werden den Code vereinfachen, so dass wir nur eine Registerkarte und ein Fenster haben. Wir werden eine TableView hinzufügen, die wir mit unseren Albumdaten füllen werden, aber bevor wir dies tun, müssen wir unser neues Modul zu unserem Testprojekt hinzufügen. Öffne das tiapp.xml Datei, klicken Sie auf "+"neben der Liste der App - Module und wählen Sie dann das Picasa - Modul aus, das wir im vorherigen Abschnitt zusammengefasst haben.
Das Picasa-Modul zu unserem Testprojekt hinzufügen Nun fügen wir den Testcode hinzu app.js, Dies gibt eine Liste der Alben an unseren Benutzer zurück und zeigt sie in einer TableView an. Wir machen auch eine benötigen und erstellen Sie ein neues Picasa-Objekt über unser Modul.
// fordern Sie unser Modul an und erstellen Sie eine neue Instanz davon var PicasaModule = requir ('com.boydlee.picasa'); var picasa = new PicasaModule.Picasa (); // setze den Benutzernamen picasa.setUsername ('boydlee'); // Setze die Zugriffsebene mit unserem öffentlichen 'CONSTANTS'-Objekt. picasa.setAccessLevel (picasa.ACCESS_LEVELS.PUBLIC); // Dies legt die Hintergrundfarbe der Master-UIView fest (wenn keine Fenster- / Tab-Gruppen vorhanden sind) Titanium.UI.setBackgroundColor ('# 000'); // Tab-Gruppe erstellen var tabGroup = Titanium.UI.createTabGroup (); // // Basis-UI-Registerkarte und Stammfenster erstellen // var win = Titanium.UI.createWindow (title: 'Picasa-Alben', backgroundColor: '# 000'); var tab1 = Titanium.UI.createTab (icon: 'KS_nav_views.png', Titel: 'Albums', Fenster: win); // Holen Sie sich die Alben für diesen Benutzer und die Zugriffsebene picasa.getAlbums (Funktion (Antwort) //openAlbumPhotosView(response.feed.entry[0) [0] .href); var table = Ti.UI.createTableView (width: Ti.UI.FILL, Höhe: Ti.UI.FILL, oben: 0, links: 0); table.addEventListener ('click' Funktion (e) openAlbumPhotosView (e.row.data.title, e.row.data.url);); var Zeilen = []; für (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(); Beachten Sie, dass ich den Zugriff auf public und den Benutzernamen auf gesetzt habe Boydlee, Damit greifen Sie auf die Fotos in meinem Picasa-Konto zu. Sobald dies erledigt ist, starten Sie Ihre App im Simulator.
Unser Standardfenster mit einer Liste von Picasa-Alben in einer TableView Zum Schluss müssen wir eine Funktion hinzufügen openAlbumPhotosView, Wenn Sie einen Albumtitel und eine URL akzeptieren, öffnen Sie ein neues Fenster auf der aktuellen Registerkarte und ziehen Sie dann alle Fotos für dieses Album in einer ScrollableView zurück.
Funktion openAlbumPhotosView (Titel, URL) Ti.API.info ('Fotos für ein Album bekommen:' + Titel); var detailsWin = Ti.UI.createWindow (title: title, backgroundColor: '# 000', height: Ti.UI.FILL, Breite: Ti.UI.FILL); picasa.getPhotosByUrl (URL, Funktion (Antwort) Ti.API.info (Antwort); var imageViews = []; für (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); Führen Sie Ihren Code ein letztes Mal im Simulator aus. Sie sollten jetzt in der Lage sein, eine Liste von Alben abzurufen, eines aus der TableView auszuwählen und dann eine scrollbare Diashow der Fotos für dieses Album anzuzeigen. Ordentlich!
ScrollableView zeigt alle Fotos aus dem ausgewählten Picasa-Album. Jetzt müssen Sie nur noch das Picasa-Modul für iOS und Android packen. Kopieren Sie zunächst den gesamten Code aus Ihrem Test app.js Datei und fügen Sie es in das Modulprojekt ein /example/app.js. Wir möchten diesen Code als Beispiel für andere Personen, die unser Modul verwenden möchten. Sobald das erledigt ist, drücke einfach die Paket und Sie können wählen, ob Sie Ihr Modul über eine Ort, so wie wir es in der Verpacken und Testen Ihres neuen Moduls Sektion. Für Android ist der Prozess derselbe, aber wir müssen ein separates Modulprojekt dafür erstellen, indem wir diesmal ein neues Mobile Module-Projekt für Android erstellen. Kopieren Sie den beispiel / app.js und com.boydlee.picasa.js Code-Dateien, die wir bereits an den richtigen Stellen in Ihrem Android-Projekt für mobile Module erstellt haben. Sie können dann für Android erstellen und verteilen, genau wie in iOS!
Spitze: Möglicherweise müssen Sie JDT installieren, bevor Sie Module für Android erstellen können. Eine einfache Schritt-für-Schritt-Anleitung ist auf appcelerator.com verfügbar
Hoffentlich fanden Sie dieses Tutorial hilfreich. Wenn Sie das nächste Mal in Betracht ziehen, die Titanium-Funktionalität auszubauen, die Sie gemeinsam nutzen oder für mehrere Projekte verwenden möchten, sollten Sie sie möglicherweise in ein CommonJS-Modul integrieren!
