Share
In diesem Lernprogramm erfahren Sie, wie Sie die SplitWindow- und Popover-Steuerelemente von Titanium Mobile verwenden, während Sie eine beeindruckende Galerie mit Fotos von Dribbble erstellen. Dabei arbeiten Sie mit Web-Service-Anfragen, Image-Containern und anderen gängigen Titanium Mobile-Komponenten. Lass uns anfangen!
In diesem Lernprogramm wird erläutert, wie Sie mit den beiden iPad-spezifischen Benutzeroberflächenelementen in Titanium Mobile eine App erstellen können. Im Einzelnen handelt es sich bei dieser App um eine Galerie, die die beliebtesten Werke von Dribbble zeigt. Obwohl die meisten Tools und Elemente der Benutzeroberfläche zum Erstellen von Telefon- und Tablet-Apps verwendet werden, gibt es Unterschiede. Der offensichtlichste Unterschied in der Tablet-Entwicklung ist die Bildschirmgröße.
Aufgrund der Bildschirmbeschränkungen eines Telefons müssen Designer Interfaces erstellen, die entweder nur die Navigation oder den Inhalt der App gleichzeitig anzeigen. Dies führt häufig zu einer Benutzeroberfläche, die ein Menü anzeigt, das ausgeblendet wird, wenn der Benutzer den Inhalt betrachtet (mit einer Zurück-Taste, um zum Menü zurückzukehren)..
Wenn Sie jedoch mit einem Tablet arbeiten, haben Sie viel mehr Platz und möchten im Allgemeinen die Navigation und den Inhalt gleichzeitig anzeigen, sodass die Menüelemente verfügbar bleiben, während der Benutzer den Inhalt betrachtet. Sie möchten häufig auch einige Informationen temporär über den Inhalt schichten. Hier kommen die iPad-spezifischen splitView- und Popover-Steuerelemente zum Einsatz.
Beginnen Sie mit der Erstellung eines neuen mobilen Projekts in Titanuim. Geben Sie den gewünschten Projektnamen, die App-ID und die Unternehmens-URL ein. Deaktivieren Sie für die Implementierungsziele alle Optionen außer dem iPad, da sich dieses Lernprogramm speziell auf iPads konzentriert. Klicken Sie anschließend auf Fertig stellen.
Dadurch werden die Dateistruktur und die erforderlichen Dateien für ein mobiles Projekt erstellt. Wir konzentrieren uns auf die Datei "app.js" (im Ressourcenordner), da wir hier unseren Code einfügen. Die Datei „app.js“ enthält eine Standardanwendung, die Sie zum Einstieg bringt. Da wir sie in diesem Lernprogramm jedoch nicht verwenden werden, können Sie den gesamten Standardcode in dieser Datei löschen. Nachdem Sie den Standardcode gelöscht haben, bleibt Ihnen ein sauberer Ausgangspunkt.
Um zu erkunden, wie diese beiden Elemente der Benutzeroberfläche verwendet werden, bauen wir eine Galerie auf, in der die beliebtesten Werke von Dribbble gezeigt werden. Dribbble bietet nicht nur einige bemerkenswert schöne Arbeiten, sondern bietet auch eine einfach zu bedienende API für den Zugriff auf ihre Bilder. Die API ist direkt und benötigt zum Starten keine Autorisierung.
Über diese API können Sie auf verschiedene Arten auf die Bilder in Dribbble zugreifen, z. B. nach Einzelpersonen suchen, die Debüts auflisten und die beliebtesten Bilder auflisten. Für dieses Tutorial werden wir uns die beliebtesten anschauen. Weitere Informationen zur API finden Sie in der offiziellen Dokumentation.
Über diese API sendet Dribbble seine Bilder über ein JSON-Objekt, das folgendermaßen strukturiert ist:
HINWEIS: Das obige Bild wurde direkt von http://dribbble.com/api übernommen
In diesem JSON-Objekt befindet sich ein Array mit dem Namen "Shots", das verschiedene Informationen zum Bild enthält. Die Teile dieser Daten, mit denen wir arbeiten werden, sind Titel, image_url, image_teaser_url, Spielername, twitter_screen_name und Ort.
Um die API von Titanium aufzurufen, erstellen Sie einen HTTP-Client (in diesem Fall "myRequest"):
Accentsconagua
var jsonObject; Var-Aufnahmen; var myRequest = Ti.Network.createHTTPClient (onload: function (e) jsonObject = JSON.parse (this.responseText) shots = jsonObject.shots, onerror: function (e) alert (e.error);, Timeout: 5000); myRequest.open ("GET", "http://api.dribbble.com/shots/popular"); myRequest.send (); In diesem Code rufen wir die URL http://api.dribbble.com/shots/popular auf und fügen die Antwort nach dem Laden in eine Variable namens jsonObject ein. Wir verwenden JSON.parse, um die Zeichenfolge, die von Dribbble gesendet wird, in ein JSON-Objekt umzuwandeln, um die Navigation zu erleichtern. Die Variable „Shots“ enthält ein Array, das die Informationen für die Bilder enthält. Sie können sehen, wie dies aussieht, indem Sie der Ladefunktion "Alarme (Aufnahmen)" hinzufügen.
Der Zweck eines Splitview-Layouts besteht darin, zwei Fenster gleichzeitig anzuzeigen. Das erste Fenster ist die Navigation (die in unserem Fall die Miniaturansichten enthält) und das zweite Fenster enthält den Inhalt (der das größere Bild enthält). Fügen Sie den folgenden Code hinzu:
var nav = Ti.UI.createWindow (backgroundColor: '# efeeea',); var content = Ti.UI.createWindow (backgroundColor: '# e2e1df',); var splitWin = Ti.UI.iPad.createSplitWindow (masterView: nav, detailView: content, showMasterInPortrait: true,); splitWin.open ();
Hier erstellen wir die beiden Fenster, die unser Layout, das Navi- und das Inhaltsfenster bilden. Das Navis hält unsere Miniaturbilder und wird daher beim Erstellen des Teilfensters als MasterView definiert. Das masterView befindet sich auf der linken Seite und enthält traditionell die Navigation. Standardmäßig ist die MasterView eines geteilten Fensters im Hochformat nicht sichtbar. Um dies in Aktion zu sehen, schauen Sie sich den Mail-Client auf dem iPad in Hoch- und Querformat an. Wenn es verschwindet, muss eine alternative Form der Navigation erstellt werden. Der Einfachheit halber halten wir das masterView in beiden Ausrichtungen für diese App sichtbar, indem Sie die showMasterInPortrait -Eigenschaft auf true setzen.
Um die Ausrichtung im iOS-Simulator zu ändern, wählen Sie im Hauptmenü des Simulators Hardware> Nach rechts drehen oder drücken Sie die Befehlstaste →.
Die Dribbble-API sendet Informationen zu 15 Bildern gleichzeitig. Dies sind zu viele, um sie im verfügbaren Bereich anzuzeigen. Wir können eine scrollView mit dem Namen scroll erstellen und dem Navigationsfenster hinzufügen, damit der Benutzer durch die längere Liste scrollen kann.
var scroll = Ti.UI.createScrollView (contentHeight: 'auto', showVerticalScrollIndicator: true,) nav.add (scroll)
Wir haben bereits die Informationen zum Erstellen der Miniaturbilder in die Array-Aufnahmen eingefügt. Wir können jetzt eine Funktion erstellen, die diese Informationen zum Erstellen der Miniaturbilder verwendet.
Funktion loadThumbnails () für (var i = 0; i < shots.length; i++) // loops for each image var thumb = Ti.UI.createImageView( // creates thumb image:shots[i].image_teaser_url, // sets image to smaller version of image largeImage:shots[i].image_url, // remembers URL of full size image for later use player:shots[i].player, // remembers information on user who created image height:150, // sets height top:i*170, // positions from top ) scroll.add(thumb) // adds thumb to scrollview
Gehen wir durch die Funktionen dieser Funktion. Für jedes der Objekte im Shots-Array (d. H. Für jedes Bild, das wir zeigen werden) erstellen wir eine Bildansicht mit dem Namen "Daumen". Die Bildeigenschaft dieser Ansicht wird auf die URL einer kleineren Version des Bildes gesetzt (image_teaser_url). Dies ist eine 150px X 200px-Version des Bildes. Bei dieser Gelegenheit merken wir uns auch die URL für das Bild in voller Größe. Dazu fügen wir eine neue Eigenschaft mit dem Namen largeImage hinzu und setzen sie auf den Wert von shots [i] .image.url. Wir werden dies später verwenden, um zu wissen, welches Bild in den Inhaltsbereich geladen werden soll. Auf dieselbe Weise erinnern wir uns an die Informationen über die Person, die das Bild erstellt hat, und legen sie in der von uns erstellten Eigenschaft "Player" ab..
Dann passen wir den Daumen an und positionieren ihn und fügen ihn der Rolle hinzu. Diese Funktion sollte aufgerufen werden, sobald die Daten geladen sind loadThumbnails (); auf die Onload-Funktion, die Sie zuvor erstellt haben.
onload: Funktion (e) jsonObject = JSON.parse (this.responseText); Aufnahmen = jsonObject.shots; loadThumbnails (); // ruft Funktion zum Laden von Thumbnails auf,
Sie sollten jetzt die Miniaturen sehen, die links in das Fenster geladen sind, und Sie können nach unten scrollen, um alle 15 Bilder anzuzeigen.
Erstellen Sie eine neue Bildansicht, um das größere Bild aufzunehmen, und fügen Sie es dem Inhaltsfenster hinzu. Dies ist das Bild, das angezeigt wird, wenn der Benutzer eine der Miniaturansichten auswählt. Die Bilder von Dribbble haben eine Auflösung von 400x300 Pixel, sodass Sie die Bildansicht erstellen, indem Sie folgenden Code hinzufügen:
var mainImage = Ti.UI.createImageView (width: 400, height: 300,) content.add (mainImage)
Wenn einer der Daumen gedrückt wird, möchten wir, dass das zugehörige größere Bild geladen wird, die URL, an die wir uns mit dem Daumen als Eigenschaft largeImage erinnert haben. Dazu fügen wir jedem Daumen einen eventListener hinzu, sobald dieser innerhalb der for-Schleife erstellt wird.
Funktion loadThumbnails () für (var i = 0; i < shots.length; i++) var thumb = Ti.UI.createImageView( image:shots[i].image_teaser_url, largeImage:shots[i].image_url, player:shots[i].player, height:150, top:i*170, ) thumb.addEventListener('touchstart', function(e) mainImage.image = e.source.largeImage; ); scroll.add(thumb) 
Wir haben jetzt eine einfache, aber funktionierende Galerie mit Live-Daten.
Popovers sind das zweite der Elemente der Benutzeroberfläche, die für die iPad-Entwicklung spezifisch sind. Damit können Sie dem vorhandenen Layout eine Informationsschicht hinzufügen.
var popover = Ti.UI.iPad.createPopover (width: 250, height: 110, arrowDirection: Ti.UI.iPad.POPOVER_ARROW_DIRECTION_DOWN,);
Dieser Code erstellt ein Popover-Objekt, definiert die Größe des darin enthaltenen Inhalts und legt die Richtung des Popoverpfeils (und damit die Position des Popover) fest. Die Optionen für die Positionierung des Popovers sind:
Ti.UI.AUI.UI.UP.OOP_UROP_OVER_ARROW_DIRECTION_LEFT Ti.UI.IPADOVER_ARROW_DIRECTION_LEFT Ti.UI.iPad.POPOVER_ARROW_DIRECTION_LEFT Ti.UI
Wir möchten, dass dieses Popover über dem mainImage angezeigt wird, wenn es gedrückt wird. Dazu erstellen wir einen eventListener für das mainImage und zeigen den Popover.
mainImage.addEventListener ('touchstart', function (e) popover.show (view: mainImage);); Dies definiert das mainImage als die Ansicht, an die der Popover angehängt wird.
Der Popover macht einige nette Dinge automatisch. Wenn Sie sich auf eine beliebige Stelle außerhalb des Popovers positionieren, wird das Fenster nicht mehr angezeigt.
Fügen Sie dem Popover einige Inhalte hinzu, insbesondere das Profilbild, den Twitter-Namen und den Ort des Erstellers. Beginnen Sie mit der Erstellung der Bildansicht und der verwendeten Etiketten, und fügen Sie sie dem Popover hinzu.
var profilePic = Ti.UI.createImageView (width: 80, height: 80, left: 0) var twitterName = Ti.UI.createLabel (width: 140, left: 120, color: '# ffffff', font: fontSize: 16, oben: 30, Höhe: 30) var location = Ti.UI.createLabel (color: '# ffffff', Schriftart: fontSize: 16, links: 120, Breite: 140, Oberseite: 60, Höhe: 30) popover.add (profilePic) popover.add (twitterName); popover.add (location);
Jetzt müssen wir nur noch diese Ansichten und Etiketten mit den Informationen verknüpfen, die wir von Dribbble erhalten haben. Da wir diese Informationen bei der Erstellung der Daumen (innerhalb der Playereigenschaft) beibehalten haben, ist es am besten, wenn der Benutzer einen Daumen auswählt.
Fügen Sie in der zuvor erstellten Touch Start Event Listener-Funktion die Informationen für den Popover-Titel, das Profilbild, den Twitter-Namen und den Ort hinzu.
thumb.addEventListener ('touchstart', Funktion (e) mainImage.image = e.source.largeImage; popover.title = e.source.player.name; profilePic.image = e.source.player.avatar_url; twitterName.text) = e.source.player.twitter_screen_name; location.text = e.source.player.location;); 
Und da haben Sie es, eine Galerie, die beide spezialisierten Elemente der iPad-Benutzeroberfläche verwendet, um die großartige Arbeit der Dribbble-Community vorzuführen. Ich hoffe, Sie haben diese einfache Verwendung der Dribbble-API genossen und erfahren, wie Sie die Verwendung der Dribbble-API ausloten.
var myRequest = Ti.Network.createHTTPClient (onload: function (e) jsonObject = JSON.parse (this.responseText); shots = jsonObject.shots; loadThumbnails ();, onerror: function (e) .error);, Timeout: 5000); myRequest.open ("GET", "http://api.dribbble.com/shots/popular"); myRequest.send (); var nav = Ti.UI.createWindow (backgroundColor: '# efeeea',); var content = Ti.UI.createWindow (backgroundColor: '# e2e1df',); var splitWin = Ti.UI.iPad.createSplitWindow (masterView: nav, detailView: content, showMasterInPortrait: true,); splitWin.open (); var scroll = Ti.UI.createScrollView (contentHeight: 'auto', showVerticalScrollIndicator: true,) nav.add (scroll) -Funktion loadThumbnails () für (var i = 0; i < shots.length; i++) // loops for each image var thumb = Ti.UI.createImageView( // creates thumb image:shots[i].image_teaser_url, // sets image to smaller version of image largeImage:shots[i].image_url, player:shots[i].player, height:150, // sets height top:i*170, // positions from top ) thumb.addEventListener('touchstart', function(e) mainImage.image = e.source.largeImage; popover.title = e.source.player.name; profilePic.image = e.source.player.avatar_url; twitterName.text = e.source.player.twitter_screen_name; location.text = e.source.player.location; ); scroll.add(thumb) // adds thumb to scrollview var mainImage = Ti.UI.createImageView( width:400, height:300, ) content.add(mainImage) var popover = Ti.UI.iPad.createPopover( width:250, height:110, ); mainImage.addEventListener('touchstart', function(e) popover.show(view:mainImage); ); var profilePic = Ti.UI.createImageView( width:80, height:80, left:0 ) var twitterName = Ti.UI.createLabel( width:140, left:120, color:'#ffffff', font:fontSize:16, top:30, height:30 ) var location = Ti.UI.createLabel( color:'#ffffff', font:fontSize:16, left:120, width:140, top:60, height:30 ) popover.add(profilePic) popover.add(twitterName); popover.add(location);
