La tua prima app Android e iOS con Ionic Framework

Chi mi segue abitualmente già lo sa, da tempo partecipo come relatore a ESC, un incontro non-profit di persone interessate al Software e Hardware Libero, all’Hacking e al DIY che si svolge a fine estate presso Forte Bazzera, vicino a Venezia.

Nel 2016 ho parlato di ricostruzione forense di NTFS, nel 2017 di Gimp e della comunità Ask Ubuntu e nel 2018 di un sistema di build automatizzato per realizzare una distribuzione Linux forense come Caine.

Anche quest’anno ho voluto dedicarmi allo sviluppo software, stavolta però ho proposto un talk riguardante la creazione di app per le piattaforme Android e iOS usando tecnologie web:

La tua prima app Android e iOS con Ionic Framework

Moltissime applicazioni per smartphone hanno una struttura simile e abbastanza semplice. Lo sviluppo nativo richiederebbe di programmarle con linguaggi e ambienti diversi a seconda della piattaforma. Ionic Framework è una piattaforma di sviluppo gratuita e open source che permette di usare una sola codebase esportando poi app ibride per Android, iOS e browser.

Il talk è stato pubblicato su YouTube, mentre potete scaricare il codice di esempio su GitHub. Sono disponibili anche le slide in formato PDF.

Ovviamente, non perdetevi gli altri talk sul canale ufficiale ESC, perché erano tutti estremamente interessanti!

Se la vostra azienda ha bisogno di un’app ma non ha il tempo o le risorse per svilupparla internamente, potete sempre contattarmi cliccando qui.

Usare Jquery per gestire tabelle e altri elementi con overflow su dispositivi mobili

Qualche tempo fa mi stavo occupando di rendere un sito web mobile-friendly e mi sono trovato di fronte alla necessità di gestire delle tabelle molto larghe. Purtroppo non era possibile pretendere che le tabelle fossero tutte quante di larghezza ridotta o con poche colonne, perciò era necessario usare l’overflow orizzontale con il CSS.

Oltre alle tabelle, ci sarebbero state anche delle formule visualizzate con Mathjax che — se molto lunghe — avrebbero “sfondato” la pagina. Ho avuto modo di accorgermi ben presto che la soluzione è leggermente meno semplice di quanto si possa pensare.

Nonostante le ultime versioni di Android e di iOS per iPhone/iPad supportino lo scorrimento di parti di pagina affette da overflow, le versioni vecchie di Android non permettono di scorrere correttamente con il dito, mentre quelle di iOS richiedono due dita e ciò è poco intuitivo.

Fortunatamente, ho trovato una soluzione interessante in Javascript sul blog di Chris Barr. Leggendo i commenti, ho anche scoperto con piacere che un lettore (Jeff) ne aveva fornito una versione Jquery, mentre un altro (Cormac) suggeriva l’utilizzo del metodo .live() per consentirne un corretto utilizzo anche su elementi caricati nel DOM in un momento successivo.

Ho deciso di unire i due approcci ed è venuto fuori il seguente risultato, che potete includere all’interno della pagina:


function isTouchDevice(){
	try {
		document.createEvent("TouchEvent");
			return true;
	}
	catch(e) {
		return false;
	}
}

function touchScroll(selector) {
    if (isTouchDevice()) {
        var scrollStartPosY=0;
        var scrollStartPosX=0;
        $("body").delegate(selector, 'touchstart', function(e) {
            scrollStartPosY=this.scrollTop+e.originalEvent.touches[0].pageY;
            scrollStartPosX=this.scrollLeft+e.originalEvent.touches[0].pageX;
        });
        $("body").delegate(selector, 'touchmove', function(e) {
            if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
                this.scrollTop+e.originalEvent.touches[0].pageY < scrollStartPosY-5) ||                  (this.scrollTop != 0 && this.scrollTop+e.originalEvent.touches[0].pageY > scrollStartPosY+5))
                    e.preventDefault();
            if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
                this.scrollLeft+e.originalEvent.touches[0].pageX < scrollStartPosX-5) ||                  (this.scrollLeft != 0 && this.scrollLeft+e.originalEvent.touches[0].pageX > scrollStartPosX+5))
                    e.preventDefault();
            this.scrollTop=scrollStartPosY-e.originalEvent.touches[0].pageY;
            this.scrollLeft=scrollStartPosX-e.originalEvent.touches[0].pageX;
        });
    }
}

La cosa interessante della soluzione proposta da Jeff (e che ho riutilizzato) è quella di permettere il corretto funzionamento dei link contenuti nell’elemento che scorre.

Come potete intuire dal codice, la prima funzione controlla se il dispositivo è dotato di touchscreen oppure no, mentre la seconda accetta un selettore Jquery e associa un evento che viene azionato quando l’utente scorre con il dito sopra gli elementi corrispondenti.

Per applicare lo scorrimento alle tabelle, è necessario racchiuderle con un contenitore (in questo caso un <div>) in modo da applicare l’overflow, che con le tabelle non funziona in modo convenzionale.

La funzione deve essere richiamata dentro a $(document).ready(), e può essere utilizzata così, tenendo presente il trucco per le tabelle:


$(document).ready(function() {
    touchScroll(".MathJax_Display");
    $("table").wrap('<div class="table-scroll"></div>');
    $(".table-scroll").css('overflow', 'auto');
    touchScroll(".table-scroll");
});

La prima chiamata a touchScroll() si occupa delle formule prodotte da MathJax, i cui elementi compaiono nel DOM in un momento successivo ma sono catturati ugualmente grazie all’uso di .delegate(). Le seguenti righe si occupano invece di racchiudere le tabelle con un contenitore di classe table-scroll e applicano la funzionalità di scorrimento usando il selettore adeguato.

Questo è quanto! Come avete visto, una volta predisposta la funzione di Chris Barr modificata da Jeff, Cormac e me è sufficiente usare una chiamata per applicare l’overflow agli elementi desiderati. Nel caso delle tabelle, è necessario inserire un contenitore addizionale, ma questo si può fare con Jquery, in modo da evitare di introdurre modifiche al markup della pagina.