Ehilà!

Benvenuti a questo tutorial su come costruire un sistema di navigazione affidabile ed efficace per un'applicazione mobile Cordova. La piccola app che andremo a costruire non farà nulla: nessun modulo di invio, nessuna navigazione nel database né caricamento di immagini né funzioni di condivisione. Assolutamente niente: le sue pagine saranno solo pagine vuote vuote, con solo un tag di intestazione con il titolo, solo per darci un feedback di base di ciò che sta accadendo.

Quello su cui voglio concentrarmi sono le tecniche che possiamo usare per costruire un'applicazione che supporti la navigazione attraverso le sue viste usando i gesti (tocca e scorri) e pulsanti duri. La nostra applicazione avrà una sola pagina, indice.html, che divideremo in tante sezioni, ognuna delle quali rappresenterà un Visualizza.

Sistema di navigazione dell'applicazione Cordova

Caratteristiche

La nostra app sarà strutturata su due tipi di visualizzazioni:

alcune viste verranno raggruppate e saranno le viste principali della nostra app: Saremo in grado di navigare tra queste visualizzazioni facendo scorrere il dito verso sinistra o verso destra o, in alternativa, toccando un pulsante nella barra in alto; Per passare alla visualizzazione precedente potremo anche utilizzare il pulsante Hard Back del nostro telefono
le altre viste saranno indipendenti l'una dall'altra e queste saranno le viste secondarie: a questo secondo tipo di viste apparterranno un menu laterale e tutte quelle viste utilizzate dall'applicazione per svolgere compiti specifici, come aggiungere un cliente, registra un nuovo utente, vedere i dettagli di un prodotto e così via (Hey, Tieni presente che questi sono solo esempi e non implementeremo nessuna di queste funzioni specifiche nella nostra applicazione di esempio

Discuteremo i seguenti aspetti del sistema di navigazione:

come implementare un sistema di scorrimento per navigare attraverso il viste principali: Scorrendo verso sinistra potremo passare alla vista successiva, Scorrendo verso destra torneremo al precedente.
come costruire un menu superiore fisso con icone per fornire ai nostri utenti un modo alternativo per navigare tra le viste principali
come creare un menu laterale
come creare diverse viste per eseguire azioni specifiche: queste viste secondarie verrà richiamato dalle voci di menu o dai pulsanti posti nelle videate principali
come chiudere le viste secondarie usando un pulsante indietro morbido?, un gesto di scorrimento o il pulsante indietro del telefono indifferentemente
come utilizzare il pulsante Indietro del telefono per tornare alla pagina precedente, non importa se è una vista principale o secondaria o un menu laterale; Implementeremo anche il comportamento standard del pulsante Indietro in modo che se l'utente lo tocca due volte, uscirà dall'app

Requisiti

Per costruire il nostro sistema di navigazione utilizzeremo alcuni strumenti abituali, con cui qualsiasi sviluppatore web ha familiarità, e qualche plugin aggiuntivo:

Bootstrap 3.x
jQuery
jquery.touchSwipe.js (non è un plugin Cordova ma funziona benissimo anche nelle applicazioni Cordova)
Plugin PhoneGap Toast (questo non è un requisito per il sistema di navigazione ma è bello mostrare i messaggi all'utente in perfetto stile Android invece di utilizzare avvisi javascript)

Procederemo all'installazione di ogni plugin quando ne avremo bisogno, quindi per il momento non fare nulla: continua a leggere, il momento dell'azione arriverà presto!

Prima di continuare a leggere il tutorial assicurati di aver seguito i passaggi descritti nell'articolo Configurazione di base del progetto Cordova. Ammetto che non è un grande articolo, ma dà qualche suggerimento di base per iniziare un nuovo progetto Cordova e renderlo pronto a seguire i vari tutorial che troverete in questo blog. L'unica modifica che devi fare è il nome dell'applicazione; usa questo comando: cordova create navApp com.codingfix.navApp NavApp . Per il resto basta seguire i passaggi descritti in quell'articolo: non perché rappresentino il modo migliore per impostare un progetto Cordova ma solo perché in questo modo saremo sicuri che i nostri file siano identici e non rischieremo qualche noioso equivoco.

Le viste principali

Adesso, Siamo pronti per iniziare. La prima cosa che costruiremo è il 4 viste principali struttura dell'applicazione, quindi lo prepariamo a supportare il gesto di scorrimento.

Il markup

Dopo il corpo tag aggiungi il seguente markup:

<div id ="myCarousel" class ="scivolo giostra" Dati-ride ="giostra" intervallo di tempo ="falso">
	<div class ="giostra interno" role ="casella di riepilogo">
		<div id ="Pagina 1" class ="elemento attivo"><h2>Pagina 1</h2></Div>
		<div id ="PAGE2" class ="articolo "><h2>Pagina 2</h2></Div>
		<div id ="pagina 3" class ="articolo"><h2>page 3</h2></Div>
		<div id ="Pagina4" class ="articolo"><h2>pagina 4</h2></Div>
	</Div>
</Div>

Il carosello Bootstrap è un modo fantastico e semplice per implementare il supporto dei gesti in un'app mobile ibrida. Ma prima di poterlo vedere in azione dobbiamo fare alcune cose aggiuntive.

Prima di tutto, dobbiamo installare il plugin TouchSwipe. Puoi usare sopra il livello del mare o pergolato oppure puoi semplicemente scaricare o clonare il repository da Github: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin.

Una volta installato il software, metti la versione minimizzata del plugin, il file jquery.touchSwipe.min.js nel tuo navApp/www/js/ directory e collegala nella tua indice.html file:

        <script type ="text / javascript" src ="Cordova.js"></copione>
		<script type ="text / javascript" src ="JS / jquery-2.2.3.min.js"></copione>
		<script type ="text / javascript" src ="JS / bootstrap.min.js"></copione>
		<script type ="text / javascript" src ="js/jquery.touchSwipe.min.js"></copione>
        <script type ="text / javascript" src ="JS / index.js"></copione>
    </corpo>
</.html>

Il foglio di stile

Apri i tuoi navApp/www/css/index.css usando il tuo editor di codice preferito. Se hai seguito i miei suggerimenti Dovrebbe sembrare come questo:

.html, corpo{
	altezza: 100%;
}

Adesso, aggiungi le seguenti righe:

.giostra,.articolo,.attivo{
	altezza:100%;
}
.giostra interno{
	altezza:100%;
}

Con questo le nostre pagine riempiranno lo spazio disponibile nel display del nostro smartphone.

il javascript

Ora che abbiamo tutto a posto, dobbiamo solo scrivere poche righe di codice per configurare il nostro carosello e inizializzare il plugin TouchSwipe. Prima di tutto, all'interno della funzione principale di jQuery che abbiamo nel nostro navApp/js/index.js, dobbiamo inizializzare il carosello Bootstrap:

$(documento).pronto(funzione () {
	$('.giostra').giostra('pausa');
});

Vedi? Sospendiamo il carosello perché non vogliamo che le visualizzazioni delle nostre applicazioni scorrano automaticamente come se fossero immagini in un sito Web!

Quindi andiamo con il codice per il plugin TouchSwipe:

$(".giostra interno").rubare({
	scorrere verso sinistra: funzione () {
		$(Questo).genitore().giostra('prossimo');
	},
	scorri verso destra: funzione () {
		$(Questo).genitore().giostra('Prev');
	},
	soglia: 200,
	excludedElements: "etichetta, pulsante, ingresso, Selezionare, area di testo, .noSwipe"
});

Si noti che l'evento è vincolante rubare all'elemento con classe giostra interno. Il rubare l'evento ha 2 funzioni di callback allegate nel nostro esempio, scorrere verso sinistra e scorri verso destra: in base all'evento innescato, useremo Bootstrap per far scorrere il nostro carosello all'elemento successivo per scorrere verso sinistra e alla precedente per scorri verso destra. Quindi impostiamo la soglia a 200: questo significa che l'utente deve far scorrere il dito almeno per 200 px in ordine rubare evento essere attivato. Infine escludiamo alcuni elementi che non vogliamo inneschino il rubare evento.

Va ben oltre lo scopo di questo tutorial analizzare le numerose opzioni che il plug-in TouchSwipe ti offre per gestire i gesti. Forse questo sarà l'argomento per un altro articolo. Comunque, se vuoi conoscere meglio questo plugin incredibilmente utile, puoi leggere la documentazione completa Qui.

Partire!

Va bene, È il momento di verificare se abbiamo fatto tutto nel modo giusto. Collega il telefono al computer, apri la tua CLI e vai alla directory del tuo progetto navApp/ e digita il seguente comando:

cordova esegui Android

Wow, fantastico! Puoi navigare tra le visualizzazioni semplicemente scorrendo il dito verso sinistra o verso destra!!! grande! Ma… Ops! Non si ferma mai! Sta scivolando ancora e ancora, in un ciclo infinito: Questo è un male. Come qualsiasi altra applicazione mobile, una volta raggiunta l'ultima visualizzazione, L'evento di scorrimento verso sinistra non dovrebbe più essere attivato; E quando sei sulla prima vista non potrebbe essere possibile scorrere verso destra e andare direttamente alla vista 4.

Va bene, Dovremo correggere questo bug. fortunatamente, Bootstrap ha un vasto arsenale pronto per noi e tra le altre armi possiamo trovare l'evento slide.bs.carosello. Associando questo evento al tuo carosello puoi eseguire codice personalizzato prima lo scorrimento si verifica (per eseguire del codice dopo l'evento diapositiva è stato licenziato utilizzare slide.bs.carousel anziché).

Quindi è il momento di usare gli id che abbiamo impostato per le nostre viste. Li useremo per verificare se la pagina corrente è Pagina 1 o Pagina4 e agendo di conseguenza solo prevenendo il comportamento dell'evento predefinito:

$('#mioCarosello').su('slide.bs.carousel', funzione (e) {
	pagina var = $('.Item.active').attr('Id');
	Se (e.direction == 'sinistra') {
		Se (pagina == 'pagina4') {
			e.preventDefault();
		}
	} altro {
		Se (Pagina == 'page1') {
			e.preventDefault();
		}
	}
});

Probabilmente qualcuno potrebbe pensare che potremmo rendere questo codice più compatto e avrebbe ragione. Ma preferisco tenerlo così solo per un motivo: in una vera app, Probabilmente dovremo eseguire righe di codice specifiche in base non solo alla direzione di scorrimento, ma anche all'ID della pagina attiva, quindi tenere separato il check per la direzione dal check della pagina è più comodo e rende subito chiaro come gestire questo aspetto della nostra app.

Va bene, adesso. Esegui di nuovo l'app e vedrai che si comporta come previsto. il tuo intero indice.js dovrebbe piacermi:

era app = {
    inizializzare: funzione() {
        document.addEventListener('Deviceready', this.onDeviceReady.bind(Questo), falso);
    },
    onDeviceReady: funzione() {
        this.receivedEvent('Deviceready');
    },
    receivedEvent: funzione(Id) {
        console.log('Evento ha ricevuto: ' + Id);
    }
};

app.initialize();

$(documento).pronto(funzione () {
	$('.giostra').giostra('pausa');

	$(".giostra interno").rubare({
		scorrere verso sinistra: funzione () {
			$(Questo).genitore().giostra('prossimo');
		},
		scorri verso destra: funzione () {
			$(Questo).genitore().giostra('Prev');
		},
		soglia: 200,
		excludedElements: "etichetta, pulsante, ingresso, Selezionare, area di testo, .noSwipe"
	});
	
	$('#mioCarosello').su('slide.bs.carousel', funzione (e) {
		pagina var = $('.Item.active').attr('Id');
		Se (e.direction == 'sinistra') {
			Se (pagina == 'pagina4') {
				e.preventDefault();
			}
		} altro {
			Se (Pagina == 'page1') {
				e.preventDefault();
			}
		}
	});
	
});

Il pulsante indietro rigido

Generalmente, toccando il pulsante indietro rigido del telefono si viene portati alla visualizzazione dell'app precedente: Non sarebbe meraviglioso se potessimo implementare questa funzione nella nostra app? sì, Sarebbe. Quindi apriti indice.js file e cercare il onDeviceReady metodo della App oggetto (se hai seguito i miei suggerimenti, dovrebbe essere in linea 5). Cambia questo metodo facendolo sembrare il seguente:

onDeviceReady: funzione () {
	this.receivedEvent('Deviceready');
	document.addEventListener("tasto indietro", onBackKeyDown, falso);
},

Per di qua, ogni volta che verrà toccato il pulsante Indietro del nostro telefono, Cordova scatterà la funzione onBackKeyDown(). Possiamo mantenere questa funzione abbastanza semplice, per il momento:

funzione onBackKeyDown(e) {
	e.preventDefault();
	$('.giostra').giostra('Prev');
}

Se esegui la tua app, puoi vedere che questo codice funziona bene. Ma, dato che abbiamo usato jQuery preventDefault() metodo per gestire da soli il pulsante Indietro, ora non siamo più in grado di uscire dall'app. Quindi dobbiamo fare il nostro onBackKeyDown() funzione un po' più complessa. Prima di vedere il codice, Installiamo un altro ottimo plugin, il Plugin PhoneGap Toast. Vai alla tua CLI e, nella directory principale del tuo progetto, digita il seguente comando:

plugin cordova aggiungi https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git

Questo plugin ci consentirà di mostrare alcuni avvisi ai nostri utenti utilizzando uno stile Android nativo. Torna al codice.

è stata l'ultima volta che la pressione di ritorno = 0;
era timePeriodToExit = 2000;
funzione onBackKeyDown(e) {
	e.preventDefault();
	pagina var = $('.Item.active').attr('Id');
	Se (Pagina == 'page1') {
		Se (nuovo Data().prendi tempo() - lastTimeBackPress < timePeriodToExit) {
			navigatore.app.exitApp();
		} altro {
			window.plugins.toast.showWithOptions({
				Messaggio: "Premere di nuovo per uscire.",
				durata: "corto", // che è 2000 Signorina. "lungo" è 4000. O specificare il nr di ms te.
				posizione: "parte inferiore",
				addPixelsY: -40  // aggiunto un valore negativo per spostarlo un po ' (predefinito 0)
			});
			lastTimeBackPress = nuova data().prendi tempo();
		}
	} altro {
		$('.giostra').giostra('Prev');
	}
}

La prima cosa che notiamo è la coppia di variabili lastTimeBackPress e timePeriodToExit. Useremo queste variabili per verificare se l'utente ha toccato due volte il pulsante Indietro e per misurare il tempo tra il primo e il secondo tocco: se questo tempo è inferiore a 2 secondi usciamo dall'app altrimenti mostriamo a “pane abbrustolito” all'utente che gli dice che deve toccare di nuovo per uscire dall'app. Le opzioni del plugin Toast sono solo alcune e sono assolutamente autoesplicative, quindi non ho intenzione di annoiarvi con inutili bla-bla-bla. Basta eseguire l'app, scorri verso sinistra e verso destra per navigare tra le visualizzazioni, usa il pulsante Indietro del telefono per tornare alla prima visualizzazione e tocca di nuovo il pulsante Indietro per vedere il tuo “pane abbrustolito”. Freddo, non è vero?

Nel prossimo articolo vedremo come aggiungere una barra superiore fissa per aumentare le opzioni di navigazione per i nostri utenti.

Saluti 🙂

Parte 1 – Parte 2 – Parte 3 – Parte 4

Anatomia di un sistema di navigazione di applicazione Cordova (parte I): gesto strisciata