Share
Acest tutorial vă va învăța cum să utilizați controalele SplitWindow și Popover de la Titanium Mobile în timp ce construiți o minunată galerie de fotografii de la Dribbble. Pe parcurs, veți lucra cu cereri de servicii web, cu contacte imagine și cu alte componente comune ale Titanium Mobile. Să începem!
Cu acest tutorial, ne vom uita la modul în care să folosim cele două elemente de interfață iPad specifice din cadrul Titanium Mobile pentru a crea o aplicație. În mod specific, această aplicație va fi o galerie care prezintă cele mai populare lucrări despre Dribbble. Deși majoritatea acelorași instrumente și elemente UI sunt utilizate pentru a crea aplicații pentru telefon și tabletă, există diferențe. Cea mai evidentă diferență în dezvoltarea tabletelor este dimensiunea ecranului.
Limitările ecranului unui telefon îi împing pe designeri să creeze interfețe care tind să afișeze doar navigarea sau conținutul aplicației în același timp. Acest lucru duce adesea la o interfață care prezintă un meniu care dispare atunci când utilizatorul se uită la conținut (cu un buton înapoi pentru a reveni la meniu).
Cu toate acestea, atunci când lucrați cu un comprimat, aveți mult mai mult spațiu și, în general, doriți să afișați navigarea și conținutul în același timp, menținând accesibilitatea elementelor de meniu în timp ce utilizatorul privește conținutul. De asemenea, doriți să plasați temporar unele informații temporar asupra conținutului. Aici intră controalele specifice splitView și Popover pentru iPad.
Începeți prin crearea unui nou proiect mobil în cadrul companiei Titanuim. Introduceți numele de proiect, ID-ul aplicației și adresa URL a companiei dorite. Pentru obiectivele de implementare, debifați toate opțiunile, cu excepția iPad-ului, deoarece acest tutorial este concentrat în special asupra iPad-urilor. Apoi faceți clic pe Finalizare.
Aceasta creează structura de fișiere și fișierele necesare pentru un proiect mobil. Accentul nostru este pus pe fișierul "app.js" (în dosarul de resurse), deoarece acesta este locul în care vom introduce codul nostru. Fișierul "app.js" conține o aplicație implicită pentru a începe să începeți, dar pe măsură ce nu o vom folosi în acest tutorial, puteți șterge toate codurile implicite din acest fișier. După ștergerea codului implicit, veți rămâne cu un punct de pornire curat.
Pentru a explora modul de utilizare a acestor două elemente ale UI, vom construi o galerie care prezintă cele mai populare lucrări despre Dribbble. Dribbble, în plus față de găzduirea unor lucrări remarcabil de frumoase, a oferit un API foarte ușor de folosit pentru a accesa imaginile lor. API-ul este direct și nu are nevoie de nici o formă de autorizare pentru a începe.
Din acest API puteți accesa imaginile de pe Dribbble într-o varietate de moduri, inclusiv căutarea persoanelor, listarea debuturilor și listarea celor mai populare imagini. Pentru acest tutorial, vom analiza cele mai populare. Pentru mai multe informații despre API, vizitați documentația oficială.
Prin intermediul acestui API, Dribbble trimite imaginile sale printr-un obiect JSON care este structurat astfel:
NOTĂ: Imaginea de mai sus a fost luată direct de la http://dribbble.com/api
În acest obiect JSON se află o matrice denumită "fotografii" care are o varietate de informații despre imagine. Particulele acestor date cu care vom lucra sunt titlul, image_url, image_teaser_url, numele jucătorului, numele twitter_screen și locația.
Pentru a apela API-ul de la Titanium, creați un HTTPClient (în acest caz, numit "myRequest"):
Accentsconagua
var jsonObject; var focuri de artificii; var myRequest = Ti.Network.createHTTPClient (onload: funcția (e) jsonObject = JSON.parse (this.responseText) shots = jsonObject.shots, onerror: funcția (e) alert (e.error) timeout: 5000); myRequest.open ("GET", "http://api.dribbble.com/shots/popular"); myRequest.send (); În acest bit de cod, sunăm pe adresa URL http://api.dribbble.com/shots/popular și, odată încărcată, punem răspunsul într-o variabilă numită jsonObject. Utilizăm JSON.parse pentru a converti șirul care este trimis de la Dribbble într-un obiect JSON, ceea ce face mai ușor navigarea. Variabila "fotografii" deține o matrice care conține informațiile pentru imagini. Puteți vedea cum arată acest lucru adăugând "alertă (fotografii)" la funcția de încărcare.
Scopul unei structuri splitview este de a arăta două ferestre în același timp. Prima fereastră este navigația (care în cazul nostru va conține miniaturile), iar cea de-a doua fereastră va conține conținutul (care conține imaginea mai mare). Adăugați următorul cod:
var nav = Ti.UI.createWindow (backgroundColor: '# efecteea',); var conținut = Ti.UI.createWindow (backgroundColor: '# e2e1df',); var splitWin = Ti.UI.iPad.createSplitWindow (masterView: nav, detailView: content, showMasterInPortrait: true,); splitWin.open ();
Aici, creăm cele două ferestre care vor forma aspectul nostru, ferestrele de navigație și de conținut. Navigatorul va păstra miniaturile și, prin urmare, este definit ca masterView atunci când fereastra split este creată. MasterView este la stânga și deține în mod tradițional navigația. În mod implicit, vizualizarea masterView a unei ferestre împărțite nu este vizibilă în orientare portret. Pentru a vedea acest lucru în acțiune, aruncați o privire asupra clientului de e-mail pe iPad în orientare portret și peisaj. Când dispare, trebuie creată o formă alternativă de navigație. Din motive de simplitate, vom păstra vizualizarea masterView în ambele orientări pentru această aplicație prin setarea proprietății showMasterInPortrait la true.
Pentru a modifica orientarea în cadrul simulatorului iOS, selectați Hardware> Rotate dreapta din meniul principal din simulator sau apăsați Command →.
API-ul Dribbble trimite informații despre 15 imagini la un moment dat, care este prea mare pentru a fi afișate în spațiul disponibil. Putem crea un scrollView, numit derulare, și să îl adăugăm în fereastra nav pentru a permite utilizatorului să parcurgă lista mai lungă.
var scroll = Ti.UI.createScrollView (contentHeight: 'auto', showVerticalScrollIndicator: true,) nav.add (defilați)
Am introdus deja informațiile pentru a crea miniaturile în tablouri. Acum putem crea o funcție care utilizează aceste informații pentru a crea miniaturile.
funcția loadThumbnails () pentru (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
Să mergem prin ceea ce face această funcție. Pentru fiecare dintre obiectele din matricea imaginilor (adică pentru fiecare imagine pe care o vom arăta), vom crea o imagine de imagine numită "degetul mare". Proprietatea imaginii acestei vizualizări este setată la urlul unei versiuni mai mici a imaginii (image_teaser_url) Aceasta este o versiune de 150px X 200px a imaginii. De asemenea, avem ocazia să ne amintim adresa URL pentru imaginea de dimensiune completă. Facem acest lucru prin adăugarea unei noi proprietăți, denumită largeImage, și stabilindu-l la valoarea imaginilor [i] .image.url. Vom folosi acest lucru mai târziu pentru a cunoaște imaginea care se încarcă în zona de conținut. În același mod, ne amintim informațiile despre persoana care a creat imaginea, plasându-o în proprietatea pe care am creat-o numită "player".
Apoi dimensionăm și poziționăm degetul mare și îl adăugăm în parcurgere. Această funcție trebuie apelată odată ce datele sunt încărcate, deci adăugați loadThumbnails (); la funcția de descărcare pe care ați creat-o mai devreme.
încărcare: funcție (e) jsonObject = JSON.parse (this.responseText); shots = jsonObject.shots; loadThumbnails (); // funcția apeluri pentru încărcarea Thumbnails,
Ar trebui să vedeți acum miniaturile încărcate în fereastră spre stânga și să puteți derula în jos pentru a vedea toate cele 15 imagini.
Creați o nouă imagine pentru a ține imaginea mai mare și adăugați-o în fereastra de conținut. Aceasta este imaginea care se afișează atunci când utilizatorul selectează unul dintre miniaturi. Imaginile de la Dribbble sunt de 400x300px pentru a crea vizualizarea imaginilor prin adăugarea acestui cod:
var mainImage = Ti.UI.createImageView (lățime: 400, înălțime: 300,) content.add (mainImage)
Când se apasă pe degetele, vrem să îl încărcăm pe imaginea de dimensiuni mai mari, URL-ul pe care l-am amintit cu ușurință cu degetul mare ca proprietate largeImage. Pentru a face acest lucru, adăugăm un eventListener fiecărui deget, pe măsură ce acesta este creat în buclă for.
funcția loadThumbnails () pentru (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) 
Acum avem o galerie simplă, dar funcțională folosind datele live.
Popovers sunt al doilea dintre elementele UI care sunt specifice dezvoltării iPad-ului. Acestea vă permit să adăugați un strat de informații pe aspectul existent.
var popover = Ti.UI.iPad.createPopover (lățimea: 250, înălțimea: 110, arrowDirection: Ti.UI.iPad.POPOVER_ARROW_DIRECTION_DOWN,);
Acest cod creează un obiect popup, definește dimensiunea conținutului din cadrul acestuia și stabilește direcția săgeții popup (și astfel poziționarea poporului). Opțiunile pentru poziționarea poporului sunt:
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
Vrem ca acest popup să apară deasupra principalului Imagine când este apăsat. Pentru a face acest lucru vom crea un eventListener pentru mainImage și va afișa popup.
mainImage.addEventListener ('touchstart', funcția (e) popover.show (view: mainImage);); Aceasta definește principalele imagini ca vedere pe care este atașat popup.
Popoverul face niște lucruri frumoase în mod automat. Pe lângă faptul că se poziționează lângă imagine, făcând clic pe oriunde în afara ferestrei populate îi va face să dispară.
Să adăugăm conținut la popup, în special profilul picului, numele de twitter și locația creatorului. Începeți prin crearea afișării imaginilor și a etichetelor care vor fi utilizate și adăugându-le la popup.
var profilPic = Ti.UI.createImageView (lățime: 80, înălțime: 80, stânga: 0) var twitterName = Ti.UI.createLabel (lățime: 140, stânga: 120, culoare: 'ffffff' fontSize: 16, vârful: 30, înălțimea: 30) var location = Ti.UI.createLabel fontfile: ffffff ', font: fontSize: 16 60, înălțime: 30) popover.add (profilePic) popover.add (twitterName); popover.add (locație);
Acum, tot ce rămâne este să legăm aceste vederi și etichete de informațiile pe care le-am primit de la Dribbble. De vreme ce am păstrat aceste informații atunci când am creat degetele (în cadrul proprietății jucătorului), cel mai bun moment pentru a face acest lucru este atunci când utilizatorul selectează un deget mare.
În cadrul funcției de ascultare a evenimentului de pornire a atingerii, adăugați mai devreme informațiile despre titlul popup, imaginea de profil, numele de twitter și locația.
thumb.addEventListener ('touchstart', funcție (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;); 
Și acolo o aveți, o galerie care utilizează atât elemente de iPad specializate pentru iPad, care arată marile activități ale comunității Dribbble. Sper că v-ați bucurat de această utilizare simplă a API-ului Dribbble și că veți explora utilizările mai sofisticate ale acestuia.
var myRequest = Ti.Network.createHTTPClient (onload: funcția (e) jsonObject = JSON.parse (this.responseText); shots = jsonObject.shots; loadThumbnails (); .error); timeout: 5000); myRequest.open ("GET", "http://api.dribbble.com/shots/popular"); myRequest.send (); var nav = Ti.UI.createWindow (backgroundColor: '# efecteea',); var conținut = 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,) funcția nav.add (scroll) loadThumbnails () pentru (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);
