viste secondarie

Anatomia di un sistema di navigazione di applicazione Cordova (parte IV): le viste secondarie

viste secondarie, il tema di questa quarta parte dell'articolo dedicato a un sistema di navigazione per un'applicazione Cordova, Non sono in realtà strettamente legate al sistema di navigazione. Mi sono reso conto troppo tardi che viste secondarie avrebbe meritato un nuovo articolo specifico per loro solo. Ma dal momento che nella prima parte di questo articolo mi aveva promesso di dirvi su di loro, bene, Voglio mantenere la mia promessa. E dopo tutto, gli utenti devono essere in grado di navigare viste secondarie anche, così, anche se la nostra barra superiore non sia direttamente coinvolto, Vedremo che il nostro menu della barra laterale sarà 🙂

La logica sottostante

Come ho detto, viste secondarie ci permetterà di aprire un sacco di “pagine” per eseguire compiti specifici: vedere una grande immagine, compilare un documento, Dettagli prodotto lettura. Generalmente, siamo in grado di aprire qualsiasi di questi viste secondarie utilizzando una voce di menu o toccando un pulsante in una delle pagine principali o anche toccando un pulsante in un altrovista secondaria. Così, possiamo sicuramente avere diversi viste secondarie già aperto in un determinato momento e ci si può aspettare che possiamo tornare al precedente aperto Visualizza basta scorrere verso sinistra, o toccando un pulsante specifico indietro e, ovviamente, utilizzando il pulsante Indietro del nostro telefono.

Questo non è gestito automaticamente da Cordova, quindi dobbiamo scrivere manualmente il codice per gestire viste secondarie e la navigazione tra di loro. Per fare il cappello costruiremo un semplice array dove stiamo gonig per memorizzare l'apertura viste secondarie. Inoltre creeremo due funzioni di entrare e lasciare viste secondarie: enterSecondaryView() eexitSecondaryView(). Il primo ha diversi compiti da eseguire:

  • sarà impostare l'animazione utilizzata per entrare nel vista secondaria
  • si aggiunge l'id della vista secondaria alla matrice secondaryViews[]
  • infine sarà facoltativamente eseguire alcune azioni specifiche (tipicamente, caricare alcuni dati dal database)

Il exitSecondaryView() eseguirà le azioni analogici per gestire il processo di uscita:

  • fisserà l'animazione opportunamente
  • rimuoverà id della vista dalla secondaryViews[] Vettore
  • sarà facoltativamente eseguire qualsiasi azione abbiamo bisogno uscendo dalla specifica vista secondaria

Detto in merito alla logica, nel codice creeremo div specifici (come molti come abbiamo bisogno per la nostra applicazione) dando loro la “secondario-view” classe. Come vedremo, il relativo css è molto semplice. Andare avanti con un po 'di codice.

Il codice HTML markup

Il markup HTML di base per una vista secondario è molto semplice:

 
<div id="view_a" class="secondary-view"> 
    <div class="secondary-view-toolbar"> 
        <div class="navbar" data-role="navbar"> 
            <ul class="cfx-menu">
                <li class="back-button unique-item">
                    <a href="#" class="back">
                         <i class="material-icons">arrow_back</i>
                    </a>
                </li> 
            </ul> 
        </div> 
    </div> 
    <div class="page-wrapper"> 
         <h4>view_a</h4> 
          <div class="content-wrapper"> 
          </div> 
     </div> 
</div> 

Come potete vedere, niente di speciale qui: noi creiamo la nostra div e subito dopo abbiamo messo un secondo div per ospitare un colpo di testa dove abbiamo posto un menu con un pulsante unico, il pulsante indietro, che ci permetterà di uscire dalla vista. Poi nella pagina involucro ospiterà un titolo della pagina e l'involucro contenuti. Ovviamente, questa è solo la struttura di base: è possibile aggiungere più pulsanti nell'intestazione vista secondaria.

Quindi cerchiamo di aggiungere qualche altra vista secondaria e alcuni contenuti falsi. La vista di sezione secondaria del nostro file html sarà così:

<div id="view_a" class="secondary-view">
	<div class="secondary-view-toolbar">
		<div class="navbar" data-role="navbar">
			<ul class="cfx-menu">
				<li class="back-button"><a href="#" class="back"><i class="material-icons">arrow_back</i><br></a></li>
			</ul>
		</div>
	</div>
	<div class="page-wrapper">
		<h4>2 view_a</h4>
		<div class="content-wrapper">
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
		</div>
	</div>
</div>		


<div id="view_b" class="secondary-view">
	<div class="secondary-view-toolbar">
		<div class="navbar" data-role="navbar">
			<ul class="cfx-menu">
				<li class="back-button"><a href="#" class="back"><i class="material-icons">arrow_back</i><br></a></li>
			</ul>
		</div>
	</div>
	<div class="page-wrapper">
		<h4>2 view_b</h4>
		<div class="content-wrapper">
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<a href="#" class="view_c">view_c</a>
		</div>
	</div>
</div>		
<div id="view_c" class="secondary-view">
	<div class="secondary-view-toolbar">
		<div class="navbar" data-role="navbar">
			<ul class="cfx-menu">
				<li class="back-button"><a href="#" class="back"><i class="material-icons">arrow_back</i><br></a></li>
			</ul>
		</div>
	</div>
	<div class="page-wrapper">
		<h4>2 view_c</h4>
		<div class="content-wrapper">
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
			<p>Some content</p>
		</div>
	</div>
</div>

Ora abbiamo qualcosa con cui giocare 🙂

gli stili

Per il layout di base descritto sopra, gli stili sono abbastanza semplici:

.secondary-view{
	background: #fff !important;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	min-height: 100%;
	z-index: 4;
        display: none;
	-webkit-box-shadow: 2px 0px 4px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    2px 0px 4px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         2px 0px 4px 0px rgba(50, 50, 50, 0.75)	;
}
.secondary-view-toolbar{
	background: #689F38 !important;
	width: 100%;
	height: 50px;
	margin-top: 0;
	color: #fff;
}
.page-wrapper{
	padding: 30px 10px 0 10px !important;
}

Al fine di ridurre al minimo le nostre regole di stile, dobbiamo cambiare un po 'quello che abbiamo fatto per progettare la nostra barra in alto. In quella parte dell'articolo abbiamo messo tutte le regole per il menu in alto sotto la barra di #CFX-topbar menu Id. Ora dobbiamo usare molte di tali norme anche per le nostre opinioni secondarie’ intestazioni, quindi cerchiamo di aggiungere alla nostra lista #CFX-topbar menu la nuova classe .CFX-menù. Poi, nel nostro foglio di stile, sostituire le seguenti regole:

#cfx-topbar-menu{
	list-style: none;
	position: relative;
	padding: 0;
	width: 100%;
}
#cfx-topbar-menu li{
	width: 19% !important;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}
#cfx-topbar-menu li a{
	display: block;
	background: transparent !important;
	text-decoration: none;
	margin-top: .3em;
	color: white;
}

con le seguenti

.cfx-menu{
	list-style: none;
	position: relative;
	padding: 0;
	width: 100%;
}
.cfx-menu li{
	width: 19% !important;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}
.cfx-menu li a{
	display: block;
	background: transparent !important;
	text-decoration: none;
	margin-top: .3em;
	color: white;
}

In aggiunta dobbiamo cambiare la regola

#cfx-topbar .material-icons{
	font-size: 32px;
}

per

.cfx-menu .material-icons{
	font-size: 32px;
}

Infine, Aggiungiamo una regola specifica per l'icona indietro:

.cfx-menu li.back-button {
	text-align: left;
	padding-left: 10px;
}

Per di qua, siamo in grado di utilizzare il CFX-menù classe anche per la vista secondario è intestazioni senza duplicare regole css.

Se si vuole vedere il risultato, basta commentare la proprietà di visualizzazione in .secondario-view regola al fine di lasciarlo visibile, collegare il telefono ed eseguire l'applicazione. Si dovrebbe vedere qualcosa di simile

La vista secondaria
La vista secondaria

il javascript

Finalmente possiamo guardare a qualcosa di interessante. codice Javascript ci permetterà di entrare una vista secondaria, per uscire esso, per animare il nostro modo di entrare e uscire e di utilizzare il pulsante Indietro dura del telefono per navigare indietro attraverso viste secondarie aperte li exting in sequenza.

Qui le funzioni per entrare viste secondarie:

var secondaryViews = [];
var activeView;
function enterSecondaryView(id) {
	activeView = id;
	var animation = 'slideInLeft';
	processSecondaryViewsArrayOnEnter();
	$(document).scrollTop(0);
	doEnterAction();
	$('#' + activeView).css({'display': 'block'}).addClass('animated ' + animation);
	setTimeout(function () {
		$('#' + activeView).removeClass('animated ' + animation);
		if (secondaryViews.length > 1) {
			$('#' + secondaryViews[secondaryViews.length - 2]).hide();
		}
		activeView = '';
	}, 1000);
}
function processSecondaryViewsArrayOnEnter() {
	if ($.inArray(activeView, secondaryViews) == -1) {
		secondaryViews.push(activeView);
	}
}
function doEnterAction() {
	if (activeView == 'view_a') {
		//here your specific stuff
	} else if (activeView == 'view_b') {
		//here your specific stuff
	}
}

Vediamo queste funzioni ad uno ad uno.

Prima di tutto creiamo il secondaryViews Vettore. Poi creiamo una variabile per rendere visibile a tutti i metodi richiesti l'id della vista secondaria vogliamo entrare: ActiveView.

Il enterSecondaryView() metodo accetta solo un parametro, l'id della vista secondaria vogliamo entrare a.

La prima cosa che fa questo metodo è assegnare il valore del suo parametroId alla variabileActiveView. Poi si crea la variabile “animazione” e imposta il valore di “slideInLeft”. Se si vuole cambiare lo stile di animazione, questo è un buon posto per farlo (per vedere le opzioni disponibili diano un'occhiata al file di lui css / animate.css). Si potrebbe anche preparare una specifica funzione per impostare animazione differente conseguenza alla vista secondario specifico stiamo entrando, ma lascio a voi: qui ci terremo le cose semplici.

Una volta che l'animazione è impostata, il metodo chiama il processSecondaryViewsArrayOnEnter() funzione: va bene, il nome è in realtà decisamente ridicolo lungo, ma è chiaro quanto questa funzione fa, non è vero? Vai a l'implementazione del metodo e vedrete il codice: se la vista secondaria vogliamo entrare non è già nella matrice secondaryViews, suo id viene aggiunto all'array. Per di qua, siamo in grado di tenere traccia dei punti di vista si apre l'utente e della loro esatta sequenza.

Poi abbiamo la possibilità di eseguire alcune “azione di ingresso” (tipicamente per caricare alcuni dati da un database) al fine di riempire la nostra visione con alcuni contenuti dinamici.

Infine, l'animazione è gestita in modo simile a quello che abbiamo usato per il nostro menu laterale; abbiamo anche reimpostare la variabile ActiveView ad un valore vuoto.

Qui di seguito troverete il codice per il processo inverso che uscire dalla vista corrente attiva.

function exitSecondaryView(id, sender) {
	activeView = id;
	var animation = 'slideOutLeft';
	processSecondaryViewsArrayOnLeave();
	doLeaveAction();
	$('#' + activeView).addClass('animated ' + animation);
	setTimeout(function () {
		$(document).scrollTop(0);
		$('#' + activeView).css('display', 'none').removeClass('animated ' + animation);
		activeView = '';
	}, 1000);
}
function processSecondaryViewsArrayOnLeave() {
	if (secondaryViews.length > 1) {
		$('#' + secondaryViews[secondaryViews.length - 2]).show();
	}
	secondaryViews.pop();
}
function doLeaveAction() {
	if (activeView == 'view_a') {
		//do stuff
	} else if (activeView == 'view_b') {
		//do stuff
	}
}

Per vederlo in azione ci resta che aggiungere un po 'gestore di eventi al nostro menu laterale:

$(document).on('click', '.view_a', function (e) {
	e.preventDefault();
	exitMenu();
	enterSecondaryView('view_a');
});
$(document).on('click', '.view_b', function (e) {
	e.preventDefault();
	exitMenu();
	enterSecondaryView('view_b');
});
$(document).on('click', '.view_c', function (e) {
	e.preventDefault();
	exitMenu();
	enterSecondaryView('view_c');
});

Fatto! In questo modo siamo in grado di aprire viste secondarie sia dal menu laterale e da un link che abbiamo inserito nella view_b. Eseguire l'applicazione e godere!

Scorri per uscire una vista secondaria

Se vogliamo che i nostri utenti siano in grado di uscire da viste secondarie appena strisciata, abbiamo solo bisogno di aggiungere qualche riga di codice per attaccare rubare gestore di eventi al nostro viste secondarie:

$(".secondary-view").swipe({
	swipeLeft: function () {
		var activeView = $(this).attr('id');
		exitSecondaryView(activeView);
	}
	threshold: 200,
	excludedElements: "label, button, input, select, textarea, .noSwipe"
});

Facile, non è vero?

Il pulsante indietro telefono

L'ultimo tocco è quello di cambiare un po 'ha il codice del metodo onBackKeyDown() al fine di poter utilizzare anche per navigare indietro attraverso viste secondarie aperte. Primo, abbiamo bisogno di chek se qualche vista secondaria è attualmente aperto: altrimenti, il codice per gestire i punti di vista carosello e verrà eseguita l'applicazione in uscita; altrimenti, Non ci resta che ottenere la vista secondaria attualmente attiva e chiamare il metodo exitSecondaryView() passando il parametro corretto.

var lastTimeBackPress = 0;
var timePeriodToExit = 2000;
function onBackKeyDown(e) {
	e.preventDefault();
	e.stopPropagation();
	if (secondaryViews.length == 0) {
		console.log('sv length is 0');
		var page = $('.item.active').attr('id');
		if (page == 'page1') {
			if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
				navigator.app.exitApp();
			} else {
				window.plugins.toast.showWithOptions({
					message: "Press again to exit.",
					duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
					position: "bottom",
					addPixelsY: -40  // added a negative value to move it up a bit (default 0)
				});
				lastTimeBackPress = new Date().getTime();
			}
		} else {
			$('.carousel').carousel('prev');
		}
	}else{
		var activeView = secondaryViews[secondaryViews.length - 1];
		exitSecondaryView(activeView);
	}
}

È tutto gente! Se avete qualche commento, critiche o suggerimenti, Sarò felice di sentire voi.

Qui è possibile scaricare il codice sorgente completo:

Codice sorgente completo

Alla prossima 🙂


Parte 1Parte 2Parte 3Parte 4


3 commenti su “Anatomia di un sistema di navigazione di applicazione Cordova (parte IV): le viste secondarie”

  1. Ciao,

    Terminato il tutorial. L'esperienza utente è brillante. Grazie ancora.

    Solo un'altra cosa (Sembro Colombo!): Tutto funziona tranne il “tasto indietro” sulle viste secondarie.

    L'ancoraggio all'interno dell'elemento pubblicitario di ogni visualizzazione non viene attivato.

    Ogni elemento pubblicitario ha class=”tasto indietro” e il css si presenta come questo:

    .CFX-menù li.back-button {
    Allinea testo: sinistra;
    imbottitura-sinistra: 10Px;
    }

    Eventuali suggerimenti?

    Grazie molto.

  2. Ciao,

    Ho riscontrato due problemi dopo aver completato la Parte IV di questo tutorial.

    Uno è una soluzione semplice, l'altro su cui ho disegnato un vuoto completo:

    EDIZIONE-1: Impossibile chiudere l'app toccando due volte alla prima visualizzazione.

    Il test per “Pagina 1” nel campo onBackKeyDown(e) funzione, rendiconto “indefinito”.
    Correzione:
    Cambiare:
    pagina var = $('.item.active') …
    per:
    pagina var = $('.carousel-item.active') …

    NUMERO-2: In alto a sinistra “tasto indietro” sulla vista secondaria non funziona.

    Per cercare di risolvere il problema ho sostituito class=”indietro” con class=”view_a” su “view_b”.

    Viene visualizzato “view_a” ma non c'è animazione scorrevole, e non so cosa sostituire con il “indietro” per la prima vista secondaria”view_a”.

    Potresti per favore inviare il codice corretto?

    Questo è l'ultimo problema che riesco a trovare. Dopo che questo problema è stato risolto, il tutorial è funzionalmente completo.

    Grazie molto.

    1. Ciao Paolo. Mi dispiace per la risposta successiva, ma ho qualche problema qui a Tenerife: Il virus corona sta danneggiando la mia attività perché quasi tutti i miei clienti lavorano nel turismo, quindi ho qualche difficoltà a seguire il mio piccolo blog.
      Comunque, Confesso che non capisco i tuoi problemi. Ho appena installato Cordova sul mio sistema, collegato il mio telefono e digitato “Corsa Cordova” per far funzionare l'app di esempio sul mio Redmi 7… Sia i pulsanti posteriori rigidi che quelli morbidi funzionano come previsto, Entrambi i menu laterali scorrono senza intoppi, Lo scorrimento verso sinistra e verso destra funziona bene…. Sto usando esattamente il codice che ti ho inviato via e-mail. E lo renderò disponibile o scaricabile presto, Promesso 🙂
      Discutiamo del problema che hai riscontrato ma al momento non sono in grado di replicarlo. E fidati di me, Non ho cambiato una virgola nel codice….

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *