Supporto volontario e collaborativo per Joomla!® in italiano

Personalizzare il componente content con gli override - Seconda parte (refactor)

Valutazione attuale: 0 / 5

Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
 
Codice
Iniziamo subito! Sarà abbastanza breve non preoccupatevi!!!.

Ci siamo lasciati con qualcosa di funzionante e va bene, ma ci siamo anche detti che avremo scritto del codice migliore!
Questa è la puntata dedicata ad ottimizzare e migliorare il codice scritto nell'articolo precedente.

Questo è quello che abbiamo fatto 
https://gist.github.com/BruceGitHub/1ed35b930dc44a7b85b81a48b4bd780c#file-editvideo-php-custom

Articoli della serie precedenti:
  1. http://www.joomla.it/e-ancora/articoli-community-3x/8633-personalizzare-il-componente-content-con-gli-override.html
Non faremo tutto subito ma applicheremo trasformazioni su trasformazioni al codice per renderlo sempre migliore, quindi non faremo tantissime modifiche, di fatto in un progetto vero questa attività non ha mai fine, l'ottimizzazione continua del codice si esegue per tutta vita
del progetto (o almeno così dovrebbe essere).

Incominciamo a scrivere il nuovo contenuto del file editvideo.php:
https://gist.github.com/BruceGitHub/df5e1305dd69bfe88be58c6099f7f64a

Se guardiamo con attenzione questo file noteremo che 
1. abbiamo migliorato un pochetto il codice come ? 
Aggiungendo una funzione chiamata ReloadAllVideo dentro questa function non c'è più quel pannettone di roba
disordinata ma c'è del codice leggermente più chiaro e personalizzabile. 

2. abbiamo aggiunto delle linee di codice per una nuova funzionalità, la paginazione, infatti nella precedente versione non era gestito il fatto che un canale potesse avere 10.000 video perchè il codice vincolava la visualizzazione agli ultimi 50.

Quindi visto che il nostro rafactoring è minimale e si spera di facile comprensione è stato fatto (ma non per questo poco di valore) possiamo concentrarci maggiormente sulla nuova funzionalità. La paginazione.

Per integrare questo nuovo meccanismo abbiamo usato delle funzionalità native delle API di youtube che poi abbiamo dovuto integrare nel nostro software tramite alcune modifiche sia alla parte di logica che a quella di interfaccia (adesso è tutto mescolato, non va bene ma risolveremo anche questo aspetto più tardi).

Partiamo dalla documentazione ufficiale.
https://developers.google.com/youtube/v3/docs/search/list (Cercate pageToken).

Il funzionamento è semplice ci viene fornito un codice (un token) per le nextpage e per le prevpage per andare avanti o indietro dobbiamo usare questi token e metterli nella richiesta che faremo al server. Traduciamo il tutto in codice.

Ci servono tre nuovi controlli nella nostra UI (User Interface)
il codice inizia qui 

https://gist.github.com/BruceGitHub/df5e1305dd69bfe88be58c6099f7f64a#file-editvideo-php-L175
<input type="hidden" id="pageToken" value="">
<div>
   <button type="button" id="pageTokenPrev" value="" >Prev</button>
   <button type="button" id="pageTokenNext" value="" >Next</button>
</div>

un tag hidden e due bottoni niente di complicato.

Ora dobbiamo usare questi controlli. La UI funzionerà così se il server ci da il dato di nextpage mostreremo il relativo bottone, se ci darà il dato per prevpage mostremo il relativo bottone se li fornirà entrambi mostreremo entrambi i bottoni.

Ecco il codice un pezzetto è tutto nel gist.

.done(function(data) {							

if (typeof data.prevPageToken === "undefined") 
{
   jQuery("#pageTokenPrev").hide();
}
else
{
   jQuery("#pageTokenPrev").show();
}

if (typeof data.nextPageToken === "undefined") 
{
   jQuery("#pageTokenNext").hide();
}
else
{
   jQuery("#pageTokenNext").show();
}

jQuery("#pageTokenNext").val(data.nextPageToken);
jQuery("#pageTokenPrev").val(data.prevPageToken);
​

nelle ultime due righe prendiamo il valore dalla risposta del server e lo mettiamo dentro il campo value del controllo. Tutto questo va messo nella parte di codice in cui riceviamo il dato dal server.

Ok tutto bello ma manca l'interazione con l'utente, anche questo è abbastanza facile.

Il codice inizia qui
https://gist.github.com/BruceGitHub/df5e1305dd69bfe88be58c6099f7f64a#file-editvideo-php-L125

jQuery("#pageTokenNext").on( "click", function( event ) {
   jQuery("#pageToken").val(jQuery("#pageTokenNext").val());
      ReloadAllVideo();
   });

jQuery("#pageTokenPrev").on( "click", function( event ) {
   jQuery("#pageToken").val(jQuery("#pageTokenPrev").val());
      ReloadAllVideo();
   });​

In pratica tramite jQuery intercettiamo l'evento click del bottone e facciamo richiamare le informazioni dal server tramite ReloadAllVideo, per caricare i dati aggiornati.

Un ultimo dettaglio e ci siamo, ovvero ogni volta che ricarichiamo i dati dobbiamo cancellare la nostra lista per farlo aggiungiamo in cima alla funzione una riga di codice 

jQuery("#list_of_video").empty();​

Per ora è tutto nella prossima puntata seguiremo la stessa linea refactoring e se forse qualche nuova funzionalità... 

ciao alla prossima




CommentaCommenta questo articolo sul forum
Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
roberto diana
Alcune informazioni su di me:
Lavoro nel campo della programmazione dal 2000... Adoro questo mondo e tutto quello che ci gira intorno :-)


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Calendario articoli

Novembre 2017
Lun Mar Mer Gio Ven Sab Dom
30 31 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 1 2 3

Ultima versione di Joomla!®

downloadVer. 3.8.2 Stabile Italiana
Data di rilascio: 07 Novembre 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: