Share
Questo tutorial ti insegnerà come usare i controlli SplitWindow e Popover di Titanium Mobile mentre crei una fantastica galleria di foto di Dribbble. Lungo il percorso, lavorerai con le richieste di servizio web, i contenitori di immagini e altri componenti comuni di Titanium Mobile. Iniziamo!
Con questo tutorial, vedremo come utilizzare i due elementi dell'interfaccia utente specifici per iPad all'interno di Titanium Mobile per creare un'app. In particolare, questa app sarà una galleria che mostra i lavori più popolari su Dribbble. Sebbene la maggior parte degli stessi strumenti e degli stessi elementi dell'interfaccia utente vengano utilizzati per creare app per telefoni e tablet, ci sono alcune differenze. La differenza più evidente nello sviluppo del tablet è la dimensione dello schermo.
Le limitazioni dello schermo di un telefono spingono i progettisti a creare interfacce che tendono a mostrare solo la navigazione o il contenuto dell'app in una volta. Ciò porta spesso a un'interfaccia che presenta un menu che scompare quando l'utente guarda il contenuto (con un pulsante indietro per tornare al menu).
Tuttavia, quando si lavora con un tablet, si ha molto più spazio e generalmente si vuole mostrare la navigazione e il contenuto allo stesso tempo, mantenendo accessibili le voci del menu mentre l'utente guarda il contenuto. Inoltre, desideri spesso sovrapporre temporaneamente alcune informazioni sul contenuto. È qui che entrano in gioco i controlli splitView e Popover specifici per iPad.
Inizia creando un nuovo progetto mobile all'interno di Titanuim. Inserisci il nome del progetto, l'ID dell'app e l'URL della società che desideri. Per gli obiettivi di distribuzione, deseleziona tutte le opzioni tranne iPad perché questo tutorial è incentrato specificamente su iPad. Next click Finish.
Questo crea la struttura del file e i file necessari per un progetto mobile. Il nostro focus è sul file "app.js" (all'interno della cartella delle risorse) poiché è qui che inseriremo il nostro codice. Il file "app.js" contiene un'applicazione predefinita per iniziare, ma poiché non verrà utilizzata in questa esercitazione, è possibile eliminare tutto il codice predefinito in questo file. Dopo aver eliminato il codice predefinito, ti verrà lasciato un punto di partenza pulito.
Per esplorare come utilizzare questi due elementi dell'interfaccia utente, costruiremo una galleria che mostra i lavori più popolari su Dribbble. Dribbble, oltre ad aver ospitato lavori straordinariamente belli, ha fornito un'API molto facile da usare per accedere alle loro immagini. L'API è diretta e non ha bisogno di alcuna forma di autorizzazione per iniziare.
Da questa API, è possibile accedere alle immagini su Dribbble in vari modi, tra cui la ricerca delle persone, l'elenco dei debutti e l'elenco delle immagini più popolari. Per questo tutorial, guarderemo al più popolare. Per ulteriori informazioni sull'API, visitare la documentazione ufficiale.
Attraverso questa API, Dribbble invia le sue immagini tramite un oggetto JSON strutturato in questo modo:
NOTA: l'immagine sopra è stata presa direttamente da http://dribbble.com/api
All'interno di questo oggetto JSON c'è un array chiamato "shots" che ha una varietà di informazioni sull'immagine. Le parti di questi dati con cui lavoreremo sono il titolo, image_url, image_teaser_url, nome giocatore, twitter_screen_name e posizione.
Per chiamare l'API da Titanium, si crea un HTTPClient (in questo caso, denominato "myRequest"):
Accentsconagua
var jsonObject; colpi di var; 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 (); All'interno di questo bit di codice, stiamo chiamando l'URL http://api.dribbble.com/shots/popular e, una volta caricato, inserendo la risposta in una variabile chiamata jsonObject. Utilizziamo JSON.parse per convertire la stringa inviata da Dribbble in un oggetto JSON, semplificando la navigazione. La variabile "scatti" contiene una matrice contenente le informazioni per le immagini. Puoi vedere come appare aggiungendo "alert (colpi)" alla funzione di caricamento.
Lo scopo di un layout splitview è mostrare due finestre contemporaneamente. La prima finestra è la navigazione (che nel nostro caso conterrà le anteprime) e la seconda finestra è per contenere il contenuto (contenente l'immagine più grande). Aggiungi il seguente codice:
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 ();
Qui, stiamo creando le due finestre che formeranno il nostro layout, il nav e le finestre dei contenuti. Il nav manterrà le nostre miniature ed è quindi definito come il masterView quando viene creata la finestra divisa. Il masterView è a sinistra e tradizionalmente contiene la navigazione. Per impostazione predefinita, la vista principale di una finestra divisa non è visibile con orientamento verticale. Per vederlo in azione, dai un'occhiata al client di posta sull'iPad con orientamento verticale e orizzontale. Quando scompare, è necessario creare una forma alternativa di navigazione. Per semplicità, terremo visibile la vista masterView in entrambi gli orientamenti per questa app impostando la proprietà showMasterInPortrait su true.
Per cambiare l'orientamento all'interno del simulatore iOS, seleziona Hardware> Ruota a destra dal menu principale nel simulatore, oppure premi Comando →.
L'API di Dribbble invia informazioni su 15 immagini alla volta, ovvero troppe da mostrare nello spazio disponibile. Possiamo creare una scrollView, denominata scroll e aggiungerla alla finestra nav per consentire all'utente di scorrere l'elenco più lungo.
var scroll = Ti.UI.createScrollView (contentHeight: 'auto', showVerticalScrollIndicator: true,) nav.add (scroll)
Abbiamo già inserito le informazioni per creare le miniature nell'array "scatti". Ora possiamo creare una funzione che utilizza tali informazioni per creare le miniature.
function 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
Passiamo attraverso ciò che fa questa funzione. Per ciascuno degli oggetti nell'array di scatti (vale a dire, per ogni immagine che mostreremo) creiamo una vista dell'immagine denominata "pollice". La proprietà dell'immagine di questa vista è impostata sull'URL di una versione ridotta dell'immagine (image_teaser_url) Questa è una versione 150px X 200px dell'immagine. Cogliamo anche questa opportunità per ricordare l'URL per l'immagine a dimensione intera. Lo facciamo aggiungendo una nuova proprietà, chiamata largeImage, e impostandola sul valore di shots [i] .image.url. Lo useremo in seguito per sapere quale immagine caricare nell'area del contenuto. Allo stesso modo, ricordiamo le informazioni sulla persona che ha creato l'immagine, inserendola nella proprietà che abbiamo creato denominata "player".
Quindi ridimensioniamo e posizioniamo il pollice e lo aggiungiamo alla pergamena. Questa funzione dovrebbe essere chiamata una volta caricati i dati, quindi aggiungi loadThumbnails (); alla funzione onload creata in precedenza.
onload: function (e) jsonObject = JSON.parse (this.responseText); shots = jsonObject.shots; loadThumbnails (); // chiama la funzione per caricare Thumbnails,
Ora dovresti vedere le miniature caricate nella finestra verso sinistra e poter scorrere verso il basso per vedere tutte le 15 immagini.
Crea una nuova vista immagine per tenere l'immagine più grande e aggiungerla alla finestra del contenuto. Questa è l'immagine che viene mostrata quando l'utente seleziona una delle miniature. Le immagini di Dribbble sono 400x300px, quindi puoi creare la vista dell'immagine aggiungendo questo codice:
var mainImage = Ti.UI.createImageView (width: 400, height: 300,) content.add (mainImage)
Quando si preme il tasto su dei pollici, si desidera caricare la relativa immagine più grande, l'URL per il quale ci siamo ricordati comodamente con il pollice come proprietà largeImage. Per fare ciò, aggiungiamo un eventListener a ogni pollice man mano che viene creato all'interno del ciclo for.
function 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) 
Ora disponiamo di una galleria semplice ma funzionante che utilizza dati in tempo reale.
I popover sono il secondo elemento dell'interfaccia utente specifico per lo sviluppo di iPad. Ti consentono di aggiungere un livello di informazioni al layout esistente.
var popover = Ti.UI.iPad.createPopover (width: 250, height: 110, arrowDirection: Ti.UI.iPad.POPOVER_ARROW_DIRECTION_DOWN,);
Questo codice crea un oggetto popover, definisce la dimensione del contenuto al suo interno e imposta la direzione della freccia popover (e quindi il posizionamento del popover). Le opzioni per il posizionamento del popover sono:
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
Vogliamo che questo popover appaia sopra l'immagine principale quando viene premuto. Per fare questo creiamo un eventListener per il mainImage e mostra il popover.
mainImage.addEventListener ('touchstart', function (e) popover.show (view: mainImage);); Questo definisce l'immagine principale come la vista su cui è collegato il popover.
Il popover fa alcune cose belle automaticamente. Oltre a posizionarsi accanto all'immagine, facendo clic in qualsiasi punto al di fuori del popover, questo scompare.
Aggiungiamo un po 'di contenuto al popover, in particolare la foto del profilo, il nome di twitter e la posizione del creatore. Inizia creando la vista immagine e le etichette che verranno utilizzate e aggiungendole al popover.
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 (posizione);
Ora non resta che legare queste opinioni ed etichette alle informazioni che abbiamo ricevuto da Dribbble. Poiché abbiamo trattenuto queste informazioni quando abbiamo creato i pollici (all'interno della proprietà del lettore), il momento migliore per farlo è quando l'utente seleziona un pollice.
All'interno della funzione di ascolto evento di inizio tocco creata in precedenza, aggiungere le informazioni per il titolo popover, l'immagine del profilo, il nome di Twitter e la posizione.
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;); 
E ce l'hai, una galleria che utilizza entrambi gli elementi dell'interfaccia utente iPad specializzati che mostrano il grande lavoro della community di Dribbble. Spero che ti sia piaciuto questo semplice utilizzo dell'API di Dribbble e che ne esplori usi più sofisticati.
var myRequest = Ti.Network.createHTTPClient (onload: funzione (e) jsonObject = JSON.parse (this.responseText); shots = jsonObject.shots; loadThumbnails ();, onerror: function (e) alert (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) function 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);
