Share
Die Twitter-API bietet eine Vielzahl von Ressourcen, um die Funktionalität mobiler Anwendungen zu erweitern. Wenn Sie mit dieser API arbeiten, können die Ergebnisse entweder im XML- oder JSON-Datenformat bereitgestellt werden. In diesem Lernprogramm wird das JSON-Format verwendet, um eine Twitter-iPhone-Anwendung zu erstellen, in der die neuesten Tweets von Mobiletuts + gelesen werden. Wir werden sehen, wie das Appcelerator SDK die Entwicklung unserer Anwendung zum Kinderspiel macht!
Starten Sie Titanium Developer und erstellen Sie ein neues Projekt. Wählen Sie "Mobile" aus der Dropdown-Liste für den Projekttyp.
Geben Sie Ihrer Anwendung einen Namen und eine App-ID, wählen Sie ein Verzeichnis, in dem Ihr Projekt gespeichert werden soll, und geben Sie eine URL in das Feld Company / Personal URL ein.
Wählen Sie schließlich das neueste Titanium SDK aus und klicken Sie auf "Projekt erstellen".
HINWEIS:
Dieses Tutorial wurde mit dem Titanium SDK Version 1.3.0 erstellt und funktioniert perfekt mit den SDK-Versionen 1.3.0 und darunter. Die Titanium SDK-Version 1.4.0 steht zur Veröffentlichung bereit und kann hier heruntergeladen werden. Diese Anwendung funktioniert möglicherweise nicht mit SDK 1.4.0, da das SDK noch im Beta-Test ist.
Titanium Developer bietet uns beim Erstellen unseres Projekts die folgende Standardanwendung:
Die Standardanwendung besteht aus zwei Registerkarten am unteren Bildschirmrand und einer Navigationsleiste am oberen Rand. Der weiße Bereich in der Mitte wird als Fenster bezeichnet. Jede Registerkarte wird von einer Registerkartengruppe gehalten, und weiter oben in der Ansichtshierarchie ist jeder Registerkarte ein eigenes Fenster zugeordnet, das angezeigt wird, wenn die Registerkarte ausgewählt wird. Die Beschriftungen im Fenster werden als "Kinder" des Fensters betrachtet.
Das Projekt besteht standardmäßig aus mehreren Dateien. Die Datei "app.js" (im Ordner "Resources") ist das Rückgrat unserer Anwendung. Die gesamte Codierung erfolgt in dieser Datei und anderen mit dieser Datei verknüpften Dateien.
Beginnen wir also mit dem Öffnen von app.js. Löschen Sie den Standardcode und erstellen Sie unsere Registerkartengruppe, indem Sie Folgendes eingeben:
// Erstellt eine Registerkartengruppe mit der Titanium.UI-API. var tabGroup = Titanium.UI.createTabGroup (); tabGroup.open ();
Der obige Code erstellt eine Registerkartengruppe namens "tabGroup", die Registerkarten enthält. Die Methode "open ()" öffnet unsere Registerkartengruppe, nachdem die Anwendung geladen wurde.
Hinweis:
Alle Elemente der Benutzeroberfläche in Appcelerator sind Variablen.
Wir erstellen nun die Registerkarte, die unser Twitter-Fenster und den Inhalt enthält. Die Registerkarte ist ein untergeordnetes Element der in Schritt 2 erstellten Registerkartengruppe.
Die Methode zum Erstellen einer Registerkarte erfordert drei Argumente: "Titel", "Symbol" und "Fenster". Die Argumente werden innerhalb von geschweiften Klammern übergeben.
Gehen wir noch einmal auf die einzelnen Argumente ein:
Übernehmen Sie das obige mit dem folgenden Code:
// Erstellen Sie die Registerkarte "mainTab". Var mainTab = Titanium.UI.createTab (title: "Twitter", // Titel der Registerkarte: "Twitter" -Symbol: "KS_nav_mashup.png") // Symbol für die Registerkarte: Enthalten in das Quelldatei-Fenster: mainWin // Wir erstellen das Fenster "mainWin"); // Füge den Tab unserer Tab-Gruppe hinzu tabGroup.addTab (mainTab);
Die Zeilen 2-6 erstellen die Hauptregisterkarte für unsere Anwendung, und Zeile 9 fügt diese Registerkarte unserer TabGruppe hinzu, die auf dem Bildschirm angezeigt werden soll.
Fahren wir fort, indem wir unser Fenster erstellen.
Ein "Fenster" kann als ein UI-Element betrachtet werden, das andere UI-Elemente aufnehmen kann. Ein anderes UI-Element, das dazu in der Lage ist, wird als "Ansicht" bezeichnet. Einer der Hauptunterschiede zwischen Ansichten und Fenstern besteht jedoch darin, dass Ansichten zusätzliche Ansichten in sich einbetten können, während Fenster andere Fenster nicht einbetten können, jedoch in der Lage sind Ansichten einbetten.
Die Methode zum Erstellen eines Fensters ähnelt der zum Erstellen unserer Registerkartengruppe und Registerkarte verwendeten. Die Argumente sind:
Geben Sie Folgendes ein, um das Hauptfenster zu erstellen:
// Das Fenster "mainWin" erstellen var mainWin = Titanium.UI.createWindow (title: "@mobtuts") // Den Titel backgroundColor: "#fff" setzen, // die Hintergrundfarbe auf weiße URL: "Tweets" setzen. js "// Link zu einer Datei, die den Code für das Fenster verarbeitet;
Ihr Code sollte jetzt in app.js so aussehen:
// Erstellt eine Registerkartengruppe mit der Titanium.UI-API. var tabGroup = Titanium.UI.createTabGroup (); // Das Fenster "mainWin" erstellen var mainWin = Titanium.UI.createWindow (title: "@mobtuts") // Den Titel backgroundColor: "#fff" setzen, // die Hintergrundfarbe auf weiße URL: "Tweets" setzen. js "// Link zu einer Datei, die den Code für das Fenster verarbeitet; // Erstellen Sie die Registerkarte "mainTab". Var mainTab = Titanium.UI.createTab (title: "Twitter", // Titel der Registerkarte: "Twitter" -Symbol: "KS_nav_mashup.png") // Symbol für Registerkarte, Inbegriffen das Quelldatei-Fenster: mainWin // Wir erstellen das Fenster "mainWin"); // Füge den Tab unserer Tab-Gruppe hinzu tabGroup.addTab (mainTab); tabGroup.open ();
Vergessen Sie nicht, die Datei "tweets.js" im Ordner Resources zu erstellen. Andernfalls erhalten Sie eine Fehlermeldung, wenn Sie die Anwendung starten. Sie können es vorerst leer lassen.
Starten Sie das Projekt von Titanium Developer. Wenn Sie richtig gefolgt sind, sollten Sie im iPhone-Simulator Folgendes sehen:
Nun sind wir mit dem Programmieren in "app.js." fertig. Der Rest des Tutorials behandelt den für "tweets.js" erforderlichen Code. Mach weiter und öffne es jetzt.
Wir brauchen eine Variable, um das aktuelle Fenster aufzunehmen. Dies geschieht auf folgende Weise:
// Variable "win" erstellen, um auf das aktuelle Fenster zu verweisen var win = Titanium.UI.currentWindow;
Jetzt können wir über die Variable "win" mit dem Fenster kommunizieren, in dem wir uns gerade befinden. Um unseren Code semantisch zu halten, möchten wir eine Funktion erstellen, die dafür verantwortlich ist, dass unsere Tweets abgerufen und in unserer Anwendung angezeigt werden. Erstellen wir eine Funktion namens loadTweets ():
// Funktion loadTweets () Funktion loadTweets ()
Fahren Sie fort, indem Sie ein leeres Array erstellen, das die Daten für unsere Tabellensicht enthält, die wir später in diesem Lernprogramm erstellen werden. Die Daten für jede Zeile werden in einem Paar geschweiften Klammern übergeben:
function loadTweets () // Leeres Array "rowData" für unsere Tabellenansicht var rowData = [];
Die Twitter-API bietet viele Methoden, um Tweets von Twitter zu erhalten. Unter Umständen möchten Sie die offizielle Dokumentation zu Twitter API besuchen, um weitere Informationen zu erhalten. Die Methode, die uns interessiert, ist statuses / user_timeline.
Eine typische Antwort von Twitter auf die Anfrage, die wir machen werden, sieht in JSON wie folgt aus:
"in_reply_to_screen_name": null, "created_at": "Do Mar 18 14:57:04 +0000 2010", "favorited": false, "place": null, "koordinate": null, "source": "Crying Indian "," contributors ": null," in_reply_to_user_id ": null," abgeschnitten ": false," geo ": null," in_reply_to_status_id ": null," user ": " statuses_count ": 17," created_at ":" Mi Mar 03 19:37:35 +0000 2010 "," description ":" "," favourites_count ": 0," profile_sidebar_fill_color ":" DDEEF6 "," screen_name ":" oauth_dancer "," contributors_enabled ": false," folgend ": true, "geo_enabled": false, "time_zone": null, "profile_sidebar_border_color": "C0DEED", "url": "http://bit.ly/oauth-dancer", "Verified": false, "location": "San Francisco, CA", "profile_text_color": "333333", "Benachrichtigungen": false, "profile_background_image_url": "http://a3.twimg.com/profile_background_images/80151733/oauth-dance.png", "protected" : false, "profile_link_color": "0084B4", "followers_count": 9, "name": "OAuth Dancer", "profile_background_tile": "true", "id": 11947 6949, "lang": "de", "utc_offset": null, "friends_count": 11, "profile_background_color": "C0DEED", "profile_image_url": "http://a3.twimg.com/profile_images/730275945/oauth -dancer_normal.jpg "," id ": 10674682220,
Wie Sie vielleicht feststellen werden, sind die Schlüssel, nach denen wir suchen, "screen_name", "text" und "profile_image_url". Sowohl "screen_name" als auch "profile_image_url" befinden sich unter dem Schlüssel "user".
Wir müssen eine HTTP-Anfrage stellen, um die Daten von Twitter zu erhalten. Der Methodentyp für unsere HTTP-Anfrage lautet "GET" und die URL lautet:
http://api.twitter.com/1/statuses/user_timeline.json?screen_name=mobtuts
Wir fragen die Twitter-API nach der Benutzerzeitleiste und nach dem Format, in dem wir unsere Antwort erhalten möchten. Schließlich geben wir den Namen des Benutzers an, von dem wir unsere Tweets erhalten möchten.
Wir werden die von der Titanium API bereitgestellte createHTTPClient () - Methode verwenden, um unsere HTTP-Anfrage an die Twitter-API zu senden. Weitere Informationen zum HTTP-Client erhalten Sie hier in der Titanium-Dokumentation. Lassen Sie uns dies in unserem Code implementieren:
function loadTweets () // Leeres Array "rowData" für unsere Tabellenansicht var rowData = []; // Erstelle unseren HTTP-Client und nenne ihn "loader". Var loader = Titanium.Network.createHTTPClient ();
Wir müssen drei Methoden für unseren HTTP-Client ausführen. Lassen Sie uns die drei Methoden in unserem Code implementieren:
Accentsconagua
// Legt die HTTP-Anforderungsmethode und die URL zum Abrufen der Daten von loader.open fest ("GET", "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=mobtuts"); // Führt die Funktion aus, wenn die Daten zur Verarbeitung bereit sind. Loader.onload = function () // TODO: Implementiere, was zu tun ist, nachdem die Daten empfangen wurden; // Sende die HTTP-Anfrage loader.send (); Die "open ()" - Methoden erfordern zwei durch Komma getrennte Argumente. Das erste Argument ist die Methode der HTTP-Anfrage, die in unserem Fall der Wert "GET" sein wird.
Das zweite Argument ist die URL der API, von der wir unsere Daten erhalten. Die "onload ()" -Methode wird ausgeführt, wenn die Daten empfangen werden, und kann bearbeitet werden. Hier analysieren wir den JSON, den wir erhalten, und zeigen ihn in einer Tabellenansicht an. Wir werden im nächsten Schritt daran arbeiten.
Die Methode "send ()" sendet die HTTP-Anforderung. Ein Vorteil dieser Methode ist, dass ein Aktivitätsindikator in der Statusleiste angezeigt wird, anstatt dass wir dafür kodieren.
Jetzt, da wir unseren HTTP-Client haben, analysieren wir die JSON, die wir erhalten.
Zuerst bewerten wir die JSON, die wir über die Funktion "eval ()" erhalten. Wir übergeben den JSON als String. Javascript erledigt den Rest der Arbeit für uns. Wir speichern den analysierten JSON in einer Variablen namens "Tweets".
loader.onload = function () // JSON auswerten var tweets = eval ('(' + this.responseText + ')'); Nun, da wir unsere geparste JSON in der Variablen haben, möchten wir alle Schlüssel in der Variablen durchgehen und die Schlüssel "user", "text" und "profile_image_url" für jeden Tweet erhalten. Wir werden eine erstellen für Schleife um dies zu tun:
var tweets = eval ('(' + this.responseText + ')'); für (var i = 0; i < tweets.length; i++) var tweet = tweets[i].text; // The tweet message var user = tweets[i].user.screen_name; // The screen name of the user var avatar = tweets[i].user.profile_image_url; // The profile image Nun, da wir den Tweet, den Benutzer und den Avatar haben, lassen Sie uns eine Ansicht erstellen, die die Informationen enthält.
Wir werden diese Ansicht "post_view" nennen. Wir möchten, dass unser post_view links den Avatar, den Namen des Benutzers auf der Seite und den Tweet unter dem Bildschirmnamen anzeigt. Dann fügen wir unser post_view zu einer Zeile hinzu. Wir möchten, dass unsere Reihe ungefähr so aussieht:
Lassen Sie uns dies in unserem Code implementieren:
// Eine Zeile erstellen und ihre Höhe auf auto var einstellen row = Titanium.UI.createTableViewRow (height: 'auto'); // Erstellen Sie die Ansicht, die den Text und den Avatar enthält. Var post_view = Titanium.UI.createView (height: 'auto', Layout: 'vertical', oben: 5, rechts: 5, unten: 5, links: 5 );
Zuerst erstellen wir unsere post_view und Zeile. Wir setzen die Höhe unserer Zeile auf auto, damit sie sich bei Bedarf vergrößern oder verkleinern kann. Wir setzen auch die Höhe unserer Ansicht auf automatisch und das Layout auf vertikal. Die Ansicht positioniert sich 5 Pixel von allen vier Seiten des übergeordneten Elements entfernt.
Nachdem wir nun unsere Postansicht und Zeile für die Bearbeitung vorbereitet haben, erstellen wir eine Bildansicht, die unser Profilbild enthält. In der Bildansicht sind sowohl Höhe als auch Breite auf 48 Pixel eingestellt. Dann fügen wir unsere Bildansicht zur Postansicht hinzu, wie unten gezeigt:
// Bildansicht erstellen, um das Profilbild zu speichern var av_image = Titanium.UI.createImageView (url: avatar, // das Bild für die Bildansicht oben: 0, links: 0, Höhe: 48, Breite: 48); post_view.add (av_image);
Als Nächstes erstellen Sie ein Label, das den Benutzernamen für unsere Postansicht anzeigt:
// Erstellen Sie die Beschriftung für den Bildschirmnamen var user_lbl = Titanium.UI.createLabel (text: user, left: 54, width: 120, top: -48, bottom: 2, height: 16, textAlign: 'left' , Farbe: '# 444444', Schriftart: fontFamily: 'Trebuchet MS', fontSize: 14, fontWeight: 'fett'); post_view.add (user_lbl);
Wir formatieren die Beschriftung mit grauer Textfarbe und richten sie an der linken Seite aus. Wir setzen die Texteigenschaft für unser Label auf variablen Benutzer. Dann fügen wir das Label der Postansicht hinzu.
Jetzt erstellen wir unser abschließendes Element für die Postansicht. Wir erstellen ein Label, das die Tweet-Nachricht enthält, und formatieren Sie es so, dass es in der Postansicht richtig positioniert wird:
// Das Label für die Tweet-Nachricht erstellen var tweet_lbl = Titanium.UI.createLabel (text: tweet, left: 54, top: 0, bottom: 2, height: 'auto', width: 236, textAlign: 'left ', font: fontSize: 14); post_view.add (tweet_lbl);
Zu guter Letzt fügen wir unserer Zeile die vollständige Postansicht hinzu. Außerdem geben wir jeder Zeile einen Klassennamen, da wir uns in Zukunft vielleicht auf sie beziehen möchten. Wir fügen unsere Zeile jedes Mal in das Array "rowData" ein für Schleife es läuft. Dies ist der endgültige Code für unsere für Schleife:
// Füge die Postansicht der Zeile hinzu row.add (post_view); // jeder Zeile einen Klassennamen geben row.className = "item" + i; // Zeile zum rowData-Array hinzufügen rowData [i] = row;
Fahren Sie mit der Erstellung einer Tabellenansicht fort, in der die Zeilen angezeigt werden, die wir im Array "rowData" gespeichert haben. Wir fügen dann die Tabellenansicht zum Fenster hinzu. Der folgende Code geht außerhalb von für Schleife aber in der Funktion "loader.onload":
// Erstellen Sie die Tabellenansicht und setzen Sie ihre Datenquelle auf das Array "rowData". Var tableView = Titanium.UI.createTableView (data: rowData); // Die Tabellenansicht zum Fenster hinzufügen win.add (tableView);
Jetzt müssen wir die loadTweets () - Funktion am Ende unserer Datei "tweets.js" ausführen:
loadTweets ();
Ihre fertige Anwendung sollte ungefähr so aussehen:
In diesem Lernprogramm haben wir Tabellenansichten, Registerkarten erstellt und Remote-Daten abgerufen. Wir haben auch gelernt, JSON zu analysieren und in unserer Anwendung zu verwenden.
Sie können diese zusätzlichen Ressourcen aufrufen, um Ihre Kenntnisse des Appcelerator SDK und der Titanium APIs zu erweitern:
