Share
Denna handledning lär dig hur du använder Titanium Mobile's SplitWindow och Popover-kontroller samtidigt som du bygger ett fantastiskt galleri med bilder från Dribbble. Under tiden kommer du att arbeta med webbtjänstförfrågningar, bildbehållare och andra vanliga Titanium Mobile-komponenter. Låt oss börja!
Med denna handledning kommer vi att titta på hur du använder de två iPad-specifika användargruppelementen inom Titanium Mobile för att skapa en app. Specifikt kommer den här appen att vara ett galleri som visar de mest populära verken på Dribbble. Även om de flesta av samma verktyg och användargränssnitt används för att skapa telefon- och tablet-appar, finns det skillnader. Den mest uppenbara skillnaden i tablettutveckling är skärmstorleken.
Skärmbegränsningarna för en telefon trycker på designers för att skapa gränssnitt som brukar visa bara navigationen eller innehållet i appen samtidigt. Detta leder ofta till ett gränssnitt som presenterar en meny som försvinner när användaren tittar på innehållet (med en bakåtknapp för att återgå till menyn).
Men när du arbetar med en tablett har du mycket mer utrymme och vill i allmänhet visa navigationen och innehållet samtidigt, menyerna är tillgängliga när användaren tittar på innehållet. Du vill ofta lagra viss information tillfälligt över innehållet. Det här är de specifika splitView- och popover-kontrollerna från iPad.
Börja med att skapa ett nytt mobilprojekt inom Titanuim. Ange projektnamn, app ID och företagsadress som du önskar. För implementeringsmålen, avmarkera alla alternativ utom iPad eftersom denna handledning är inriktad specifikt på iPads. Nästa klick Slutför.
Detta skapar filstrukturen och nödvändiga filer för ett mobilprojekt. Vårt fokus är på filen "app.js" (i resursmappen) eftersom det är här vi lägger vår kod. Filen "app.js" innehåller en standardprogram för att komma igång, men eftersom vi inte använder den i den här handledningen kan du ta bort all standardkod i den här filen. När du har raderat standardkoden lämnar du en ren startpunkt.
För att utforska hur man använder dessa två UI-element kommer vi att bygga ut ett galleri som visar de mest populära verken på Dribbble. Dribbble, förutom värd för något anmärkningsvärt vackert arbete, har gett ett mycket lättanvänt API för att komma åt sina bilder. API: n är direkt och behöver ingen form av behörighet för att komma igång.
Från det här API-programmet kan du få tillgång till bilderna på Dribbble på olika sätt, inklusive att titta på personer, notera debuterna och lista de mest populära bilderna. För den här handledningen ser vi på de mest populära. För mer information om API: n, besök den officiella dokumentationen.
Genom detta API skickar Dribbble sina bilder via ett JSON-objekt som är strukturerat som så:
OBS: Ovanstående bild togs rakt från http://dribbble.com/api
Inom detta JSON-objekt är en grupp som heter "skott" som har en mängd information om bilden. Delarna av dessa data som vi kommer att arbeta med är titeln, image_url, image_teaser_url, spelarnamn, twitter_screen_name och plats.
För att anropa API: n från Titanium skapar du en HTTPClient (i det här fallet heter "myRequest"):
Accentsconagua
var jsonObject; var skott; var myRequest = Ti.Network.createHTTPClient (onload: funktion (e) jsonObject = JSON.parse (this.responseText) shots = jsonObject.shots, onerror: funktion (e) alert (e.error);, timeout: 5000); myRequest.open ("GET", "http://api.dribbble.com/shots/popular"); myRequest.send (); Inom denna bit av kod anropar vi URL-adressen http://api.dribbble.com/shots/popular och, en gång laddad, sätter svaret i en variabel som heter jsonObject. Vi använder JSON.parse för att konvertera strängen som skickas från Dribbble till ett JSON-objekt, vilket gör det enklare att navigera. Variabeln "skott" innehåller en array som innehåller informationen för bilderna. Du kan se hur det ser ut genom att lägga till "alert (shots)" till lastfunktionen.
Syftet med en splitview-layout är att visa två fönster samtidigt. Det första fönstret är navigeringen (som i vårt fall kommer att innehålla miniatyrer) och det andra fönstret är att hålla innehållet (innehåller den större bilden). Lägg till följande kod:
var nav = Ti.UI.createWindow (backgroundColor: '# efeeea',); var innehåll = Ti.UI.createWindow (backgroundColor: '# e2e1df',); var splitWin = Ti.UI.iPad.createSplitWindow (masterView: nav, detailView: innehåll, showMasterInPortrait: true,); splitWin.open ();
Här skapar vi de två fönstren som kommer att bilda vår layout, navet och innehållsfönstren. Naven håller våra miniatyrer och definieras därför som masterView när splitfönstret skapas. MasterView är till vänster och håller traditionellt navigeringen. Som standard är huvudvy av ett delningsfönster inte synligt i stående orientering. För att se detta i åtgärd, ta en titt på postklienten på iPad i porträtt och liggande riktning. När det försvinner måste en alternativ navigeringsform skapas. För enkelhets skull kommer vi att behålla masterView synlig i båda riktningarna för den här appen genom att ställa egenskapen showMasterInPortrait till sann.
Om du vill ändra orienteringen i iOS-simulatorn väljer du Maskinvara> Rotera höger från huvudmenyn i simulatorn eller trycker på Kommandot →.
Dribbble API skickar information om 15 bilder i taget, vilket är för många att visa i ledigt utrymme. Vi kan skapa en scrollView med namnet scroll och lägga till det i nav-fönstret för att tillåta användaren att bläddra genom den längre listan.
var scroll = Ti.UI.createScrollView (contentHeight: 'auto', showVerticalScrollIndicator: true nav.add (scroll)
Vi har redan lagt in informationen för att skapa miniatyrbilderna i arrayen "skott". Vi kan nu skapa en funktion som använder den informationen för att skapa miniatyrer.
funktion loadThumbnails () for (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
Låt oss gå igenom vad den här funktionen gör. För var och en av objekten i skottmatrisen (dvs för varje bild som vi ska visa) skapar vi en bildvisning med namnet "tumme". Bildegenskapen för den här vyn är inställd på webbadressen till en mindre version av bilden (image_teaser_url) Detta är en 150px X 200px-version av bilden. Vi tar även tillfället i akt för att komma ihåg webbadressen för fullstorleksbilden. Vi gör det genom att lägga till en ny egenskap, med namnet largeImage, och ställa in värdet på bilderna [i] .image.url. Vi kommer att använda det senare för att veta vilken bild som ska laddas in i innehållsområdet. På samma sätt kommer vi ihåg informationen om den person som skapade bilden, placerade den i egenskapen som vi skapade namngiven "spelare".
Vi storlekar och placerar sedan tummen och lägger den till rullningen. Denna funktion ska ringas när data är laddade, så lägg till loadThumbnails (); till den onload-funktion som du skapade tidigare.
onload: funktion (e) jsonObject = JSON.parse (this.responseText); skott = jsonObject.shots; loadThumbnails (); // kallar funktion för att ladda miniatyrer,
Du bör nu se miniatyrerna laddade i fönstret till vänster och kunna rulla ner för att se alla 15 bilder.
Skapa en ny bildvy för att hålla den större bilden och lägga till den i innehållsfönstret. Detta är bilden som visas när användaren väljer en av miniatyrerna. Bilderna från Dribbble är 400x300px så du skapar bildvisningen genom att lägga till den här koden:
var mainImage = Ti.UI.createImageView (bredd: 400, höjd: 300,) content.add (mainImage)
När du trycker på tummen, vill vi få den att ladda den relaterade större bilden, den URL som vi bekvämt har kommit ihåg med tummen som egenskapen largeImage. För att göra detta lägger vi till en eventListener på varje tumme som den skapas inom loopbandet.
funktion loadThumbnails () for (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) 
Vi har nu ett enkelt men fungerande galleri med live data.
Popovers är den andra av UI-elementen som är specifika för iPad-utvecklingen. De låter dig lägga till ett lager av information på den befintliga layouten.
var popover = Ti.UI.iPad.createPopover (bredd: 250, höjd: 110, pilriktning: Ti.UI.iPad.POPOVER_ARROW_DIRECTION_DOWN,);
Denna kod skapar ett popover-objekt, definierar innehållets innehåll inom den och anger riktningen för popover-pilen (och så popover-positionen). Alternativen för positioneringen av popover är:
Ti.UI.iPad.POPOVER_ARROW_DIRECTION_UP Ti.UI.iPad.POPOVER_ARROW_DIRECTION_DOWN Ti.UI.iPad.POPOVER_ARROW_DIRECTION_LEFT Ti.UI.iPad.POPOVER_ARROW_DIRECTION_RIGHT Ti.UI.iPad.POPOVER_ARROW_DIRECTION_ANY
Vi vill att denna popover ska visas ovanför mainImage när den trycks in. För att göra detta skapar vi en eventListener för mainImage och visar popover.
mainImage.addEventListener ("touchstart", funktion (e) popover.show (view: mainImage);); Detta definierar mainImage som den vy på vilken popover är kopplad.
Popover gör några fina saker automatiskt. Förutom att placera sig bredvid bilden, kan du klicka bort var som helst utanför popoveren för att den ska blekna.
Låt oss lägga till lite innehåll på popover, speciellt profilbilden, kvitteringsnamnet och skaparens placering. Börja med att skapa bildvyn och etiketter som ska användas, och lägg till dem till popover.
var profilePic = Ti.UI.createImageView (bredd: 80, höjd: 80, vänster: 0) var twitterName = Ti.UI.createLabel (bredd: 140, vänster: 120, färg: '# ffffff' fontSize: 16, topp: 30, höjd: 30) var plats = Ti.UI.createLabel (färg: '# ffffff', typsnitt: fontSize: 16, left: 120, width: 140, top: 60, höjd: 30) popover.add (profilePic) popover.add (twitterName); popover.add (plats);
Nu är allt som är kvar att knyta dessa åsikter och etiketter till den information som vi fått från Dribbble. Eftersom vi har hållit på den här informationen när vi skapade tummen (inom spelaregenskapen), är den bästa tiden att göra detta när användaren väljer en tumme.
Inom den starta händelsen lyssnarfunktionen som skapades tidigare lägger du till informationen för popover-titeln, profilbilden, kvitteringsnamnet och platsen.
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;); 
Och där har du det, ett galleri som använder både specialiserade iPad-UI-element som visar på Dribbble-communityets stora arbete. Hoppas du njöt av den här enkla användningen av Dribbble API och att du utforskar mer sofistikerade användningar av det.
var myRequest = Ti.Network.createHTTPClient (onload: funktion (e) jsonObject = JSON.parse (this.responseText); shots = jsonObject.shots; loadThumbnails ();, onerror: funktion (e) alert .error);, timeout: 5000); myRequest.open ("GET", "http://api.dribbble.com/shots/popular"); myRequest.send (); var nav = Ti.UI.createWindow (backgroundColor: '# efeeea',); var innehåll = Ti.UI.createWindow (backgroundColor: '# e2e1df',); var splitWin = Ti.UI.iPad.createSplitWindow (masterView: nav, detailView: innehåll, showMasterInPortrait: true,); splitWin.open (); var scroll = Ti.UI.createScrollView (contentHeight: 'auto', showVerticalScrollIndicator: true,) nav.add (scroll) funktion loadThumbnails () for (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);
