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, we’ll see that our sidebar menu will be 🙂

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 or even tapping a button in anothervista 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>

Now we have something to play with 🙂

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.

The first thing this method does is to assign the value of its parameterId to the variableActiveView. 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

On to the next 🙂


Parte 1Parte 2Parte 3Parte 4


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

  1. Ciao,

    Finished the tutorial. The UX is brilliant. Thanks again.

    Just one more thing (I sound like Columbo!): Everything is working except for the “tasto indietro” on the secondary views.

    The anchor inside each view’s line item is not being triggered.

    Each line item has class=”tasto indietro” and the css looks like this:

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

    Any suggestions?

    Grazie molto.

  2. Ciao,

    I’ve found two issues after completing Part IV of this tutorial.

    One is a simple fix, the other I have drawn a complete blank on:

    ISSUE-1: Cannot close app by double-tap on first view.

    The test for “Pagina 1” in the onBackKeyDown(e) funzione, returnsundefined”.
    Fix:
    Change:
    pagina var = $(‘.item.active’)
    per:
    pagina var = $(‘.carousel-item.active’) …

    ISSUE-2: Top-left “tasto indietro” on secondary view does not work.

    To try and fix I have replaced class=”indietro” with class=”view_a” su “view_b”.

    This displays “view_a” but there is no sliding animation, and I don’t know what to substitute the “indietro” class for on the first secondary view”view_a”.

    Could you please post the corrected code?

    This is the final issue I can find. After this is fixed the tutorial is functionally complete.

    Grazie molto.

    1. Hello Paul. Sorry for later response but I have some issue here in Tenerife: Corona virus is dstroyng my business because almost all my clients work in tourism, so I have some difficult to follow up my little blog.
      Comunque, I confess I don0’t understand your issues. I’ve just installed Cordova on my system, connected my phone and typedcordova runto get the sample app running on my Redmi 7Both hard and soft back buttons work as expected, both side menus slide in smoothly, swipe left and right work fine…. I’m using exactly the code I sent you vie email. And I’ll make it available or download soon, I promise 🙂
      Let’s discuss about the issue you have found but currently I’m not able to replicate it. And trust me, I didn’t change a comma in the code….

Lascia un commento

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