Share
Denne opplæringen vil lære deg hvordan du bruker Titanium Mobile's SplitWindow og Popover kontroller mens du bygger et fantastisk galleri med bilder fra Dribbble. Underveis vil du jobbe med webserviceforespørsler, bildebeholdere og andre vanlige Titanium Mobile-komponenter. La oss komme i gang!
Med denne opplæringen vil vi se på hvordan du bruker de to iPad-spesifikke brukergrensesnittelementene i Titanium Mobile for å lage en app. Spesielt vil denne appen bli et galleri som viser de mest populære verkene på Dribbble. Selv om de fleste av de samme verktøyene og brukergrensesnittelementene brukes til å lage telefon- og nettbrettapplikasjoner, er det forskjeller. Den mest åpenbare forskjellen i tablettutvikling er skjermstørrelsen.
Skjermbegrensningene i en telefon skyver designere for å skape grensesnitt som bare viser at navigasjonen eller innholdet av appen er om gangen. Dette fører ofte til et grensesnitt som presenterer en meny som forsvinner når brukeren ser på innholdet (med en tilbakeknapp for å gå tilbake til menyen).
Men når du arbeider med en nettbrett, har du mye mer plass og vil vanligvis vise navigasjonen og innholdet samtidig, menyene er tilgjengelige når brukeren ser på innholdet. Du vil også ofte lagre litt informasjon midlertidig over innholdet. Dette er hvor de iPad-spesifikke splitView- og Popover-kontrollene kommer inn.
Begynn med å skape et nytt mobilprosjekt innen Titanuim. Skriv inn navnet på prosjektnavnet, appen og firmaet du ønsker. For distribusjonsmålene fjerner du alle alternativene unntatt iPad da denne opplæringen er fokusert spesielt på iPads. Neste klikk Fullfør.
Dette skaper filstruktur og nødvendige filer for et mobilprosjekt. Vårt fokus er på "app.js" -filen (i ressursmappen), da dette er hvor vi skal sette vår kode. Filen "app.js" inneholder et standardprogram for å komme i gang, men da vi ikke vil bruke det i denne opplæringen, kan du slette all standardkoden i denne filen. Etter at du har slettet standardkoden, blir du igjen med et rent startpunkt.
For å utforske hvordan du bruker disse to UI-elementene, vil vi bygge et galleri som viser de mest populære verkene på Dribbble. Dribbble, i tillegg til vertskap for noe bemerkelsesverdig vakkert arbeid, har gitt en veldig enkel å bruke API for å få tilgang til bildene sine. API er direkte og trenger ikke noen form for autorisasjon for å komme i gang.
Fra denne API-en kan du få tilgang til bildene på Dribbble på en rekke måter, blant annet å se opp enkeltpersoner, oppgi debutene og notere de mest populære bildene. For denne opplæringen ser vi på de mest populære. For mer informasjon om API, besøk den offisielle dokumentasjonen.
Gjennom denne API-en sender Dribbble sine bilder via et JSON-objekt som er strukturert slik:
MERK: Bildet ovenfor ble tatt direkte fra http://dribbble.com/api
Innenfor dette JSON-objektet er en gruppe kalt "skudd" som har en rekke opplysninger om bildet. Delene av disse dataene som vi skal jobbe med, er tittelen, image_url, image_teaser_url, spillernavn, twitter_screen_name og plassering.
For å ringe på API-en fra Titanium, oppretter du en HTTPClient (i dette tilfellet, kalt "myRequest"):
Accentsconagua
var jsonObject; var skudd; var myRequest = Ti.Network.createHTTPClient (onload: funksjon (e) jsonObject = JSON.parse (this.responseText) shots = jsonObject.shots, onerror: funksjon (e) alert (e.error);, timeout: 5000); myRequest.open ("GET", "http://api.dribbble.com/shots/popular"); myRequest.send (); Innenfor denne koden kaller vi URL-adressen http://api.dribbble.com/shots/popular og, når den er lastet, setter svaret inn i en variabel som heter jsonObject. Vi bruker JSON.parse til å konvertere strengen som er sendt fra Dribbble til et JSON-objekt, noe som gjør det enklere å navigere. De variable "skuddene" inneholder en matrise som inneholder informasjonen for bildene. Du kan se hvordan dette ser ut ved å legge til "varsling (skudd)" til lastfunksjonen.
Formålet med en splitview-layout er å vise to vinduer samtidig. Det første vinduet er navigasjonen (som i vårt tilfelle vil inneholde miniatyrbildene) og det andre vinduet er å holde innholdet (inneholder det større bildet). Legg til følgende kode:
var nav = Ti.UI.createWindow (backgroundColor: '# efeeea',); var content = Ti.UI.createWindow (backgroundColor: '# e2e1df',); var splitWin = Ti.UI.iPad.createSplitWindow (masterView: nav, detailView: innhold, showMasterInPortrait: true,); splitWin.open ();
Her lager vi de to vinduene som vil danne vår layout, nav og innholdsvinduene. Naven vil holde miniatyrbildene våre og er derfor definert som masterView når delingsvinduet er opprettet. MasterView er til venstre og holder tradisjonelt navigasjonen. Som standard er hovedvisningen av et delt vindu ikke synlig i stående retning. For å se dette i handling, ta en titt på postklienten på iPad i stående og liggende retning. Når det forsvinner, må det opprettes en alternativ form for navigering. For enkelhets skyld vil vi holde masterView synlig i begge retninger for denne appen ved å sette egenskapen showMasterInPortrait til ekte.
Hvis du vil endre retningen i iOS-simulatoren, velger du Maskinvare> Roter rett fra hovedmenyen i simulatoren, eller trykk på Kommando →.
Dribbble API sender informasjon om 15 bilder om gangen, som er for mange til å vise i ledig plass. Vi kan lage en scrollView, navngitt rulle, og legge den til nav-vinduet slik at brukeren kan bla gjennom lengre liste.
var scroll = Ti.UI.createScrollView (contentHeight: 'auto', showVerticalScrollIndicator: true,) nav.add (bla)
Vi har allerede lagt inn informasjonen for å lage miniatyrbildene i array-skuddene. Vi kan nå opprette en funksjon som bruker den informasjonen til å lage miniatyrbilder.
funksjonsbelastning Thumbnails () 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
La oss gå gjennom hva denne funksjonen gjør. For hver av objektene i skuddfeltet (det vil si for hvert bilde vi vil vise) lager vi en bildevisning kalt "tommel". Bildegenskapen til denne visningen er satt til en mindre versjon av bildet (image_teaser_url) Dette er en 150px X 200px-versjon av bildet. Vi benytter også denne muligheten til å huske nettadressen for bildet i full størrelse. Vi gjør dette ved å legge til en ny egenskap, kalt largeImage, og sette den til verdien av bilder [i] .image.url. Vi vil bruke dette senere for å vite hvilket bilde som skal lastes inn i innholdsområdet. På samme måte husker vi informasjonen om personen som skapte bildet, plasserte det i eiendommen som vi opprettet navnet "spiller".
Vi størrer og plasserer tommelen og legger den til rullen. Denne funksjonen skal kalles når dataene er lastet, så legg til loadThumbnails (); til onload-funksjonen du opprettet tidligere.
onload: funksjon (e) jsonObject = JSON.parse (this.responseText); skudd = jsonObject.shots; loadThumbnails (); // kalles funksjon for å laste miniatyrbilder,
Du bør nå se miniatyrbildene lastet inn i vinduet mot venstre og kunne bla ned for å se alle 15 bildene.
Opprett en ny bildevisning for å holde det større bildet og legg det til innholdsvinduet. Dette er bildet som vises når brukeren velger ett av miniatyrbildene. Bildene fra Dribbble er 400x300px, slik at du oppretter bildevisningen ved å legge til denne koden:
var mainImage = Ti.UI.createImageView (bredde: 400, høyde: 300,) content.add (mainImage)
Når du trykker på tommelen, vil vi få den til å laste det tilhørende større bildet, nettadressen som vi lett har husket med tommelen som egenskapen largeImage. For å gjøre dette legger vi til en eventListener til hver tommel som den blir opprettet i forløp.
funksjonsbelastning Thumbnails () 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 nå et enkelt, men fungerende galleri som bruker live data.
Popovers er det andre av UI-elementene som er spesifikke for iPad-utviklingen. De lar deg legge til et lag med informasjon på eksisterende layout.
var popover = Ti.UI.iPad.createPopover (bredde: 250, høyde: 110, pilDireksjon: Ti.UI.iPad.POPOVER_ARROW_DIRECTION_DOWN,);
Denne koden oppretter et popover-objekt, definerer størrelsen på innholdet i den, og angir retningen til popover-pilen (og så plasseringen av popoveren). Alternativene for posisjonering av popover er:
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 vil at denne popover skal vises over mainImage når den er trykket. For å gjøre dette skaper vi en eventListener for mainImage og viser popover.
mainImage.addEventListener ('touchstart', funksjon (e) popover.show (view: mainImage);); Dette definerer mainImage som utsikten over hvilken popover er festet.
Popover gjør noen fine ting automatisk. I tillegg til å plassere seg ved siden av bildet, kan du klikke hvor som helst utenfor popoveren, føre til at den forsvinner.
La oss legge til noe innhold til popover, spesielt profilbildet, kvitteringsnavnet og plasseringen av skaperen. Begynn med å skape bildevisning og etiketter som skal brukes, og legge dem til popover.
var profilePic = Ti.UI.createImageView (bredde: 80, høyde: 80, venstre: 0) var twitterName = Ti.UI.createLabel (bredde: 140, venstre: 120, farge: '# ffffff' fontSize: 16, topp: 30, høyde: 30) var location = Ti.UI.createLabel (color: '# ffffff', font: fontSize: 16, venstre: 120, bredde: 140, topp: 60, høyde: 30) popover.add (profilePic) popover.add (twitterName); popover.add (posisjon);
Nå er alt som er igjen å knytte disse visningene og etikettene til informasjonen vi mottok fra Dribbble. Siden vi har holdt på denne informasjonen når vi opprettet tommelen (i spilleregenskapen), er den beste tiden å gjøre dette, når brukeren velger en tommel.
Innenfor berøringsbegivenhetens lytterfunksjon opprettet tidligere, legger du til informasjonen for popover-tittelen, profilbildet, kvitteringsnavnet og plasseringen.
thumb.addEventListener ('touchstart', funksjon (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;); 
Og der har du det, et galleri som bruker både spesialiserte iPad UI-elementer som viser det store arbeidet i Dribbble-fellesskapet. Håper du likte denne enkle bruken av Dribbble API og at du undersøker mer sofistikerte bruksområder av den.
var myRequest = Ti.Network.createHTTPClient (onload: funksjon (e) jsonObject = JSON.parse (this.responseText); shots = jsonObject.shots; loadThumbnails (); onerror: funksjon (e) alarm .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: innhold, showMasterInPortrait: true,); splitWin.open (); var scroll = Ti.UI.createScrollView (contentHeight: 'auto', showVerticalScrollIndicator: true,) nav.add (scroll) funksjonlastThumbnails () 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);
