LungoJS è un framework HTML5, CSS3 e JavaScript open source, per la creazione di applicazioni web rivolte al mobile. Una libreria cross-platform per sviluppare in ambiente iOS, Android, Blackberry e webOS, al fine di distribuire le applicazioni nei Market o sui siti web.
È in grado di gestire gli eventi touch dei dispositivi: tap, doppio tap e slide ma non consente di includere immagini al di fuori del set di icone vettoriali appartenente alla libreria. La scelta dell'utilizzo della grafica vettoriale ha l'obiettivo di avere sempre le dimensioni dell'immagine adatte ad ogni risoluzione, senza perdere in qualità.
Grazie a LungoJS sfruttiamo appieno anche alcune API HTML5 come:
- WebSQL, una specifica per le operazioni CRUD su database, molto simile a SQL
- Geolocation, per definire una struttura dati atta a contenere vari dati geospaziali
- History, in grado di manipolare la storia delle sessioni nel contesto browser
- Device Orientation, la capacità di ri-definire l'orientamento degli assi cartesiani X,Y,Z
L'architettura del framework è modulare e offre la completa personalizzazione, per utilizzarlo è sufficiente includere nell' <head> della pagina due fogli di stile e uno script che scarichiamo dal sito.
Lo script seguente include tutte le librerie disponibili per LungoJS:
<link rel="stylesheet" href="../../build/lungo-1.0.1.min.css">
<link rel="stylesheet" href="../../build/themes/lungo.theme.default.css">
<!-- LungoJS (Production mode) -->
<script src="/lungo.js/lungo-1.0.1.packed.js"></script>
<!-- LungoJS - Sandbox App -->
<script src="/app/app.js"></script>
<script src="/app/data.js"></script>
<script src="/app/events.js"></script>
<script src="/app/services.js"></script>
<script src="/app/view.js"></script>La particolarietà di LungoJS è di sfruttare i nuovi tag di HTML5 per utilizzarli
come schema di riferimento per la struttura dell'applicazione: il contenuto della pagina deve essere organizzato con una struttura semantica ben precisa tramite tag <section>:
<section id="main">
<header data-back="home blue" data-title="Titolo Sezione"></header>
<article id="articolo1">
<!-- contenuti -->
</article>
<footer class="toolbar"></footer>
</section>Organizzare i contenuti: usiamo <section> per definire i template e <article> per le pagine
La <section> funge da principale elemento contenitore e serve come riferimento per inizializzare le pagine, che mettiamo nel tag <article>, ed effettuare il rendering dei contenuti. Per questo nel gergo di LungoJS quando parliamo di View ci riferiamo alle <section>
<section id="main">
<!-- header -->
<article id="first_article">
<!-- contenuti -->
</article>
<article id="second_article">
<!-- contenuti -->
</article>
<!-- footer -->
</section>All'interno della section possono essere presenti dei sub-elementi come <header>, <footer>, <article> per definire semanticamente il documento
HTML della nostra web-app.
La proprietà data-title permette di assegnare un titolo alla sezione mentre data-back crea un bottone di colore blu con l'icona home, che rimanda alla sezione precedente.
Navigare tra le pagine
Anche la navigazione tra le pagine, in LungoJS viene definita in maniera semantica sfruttando l'elemento <a> e la proprietà target. Ecco come possiamo passare da un article all'altro:
<section id="main">
<article id="first_article">
<a href="#second_article" data-target="article" data-icon="home"></a>
</article>
<article id="second_article">
<a href="#first_article" data-target="article" data-icon="back"></a>
</article>
</section>Cambiare View
Per passare invece da una section all'altra, ci permette di cambiare anche completamente il template (la view):
<section id="main">
<article id="first_article">
<a href="#second" data-target="section" data-icon="home"></a>
</article>
</section>
<section id="second">
<!-- contenuti -->
</section>Le icone
Il set di icone viene utilizzato semplicemente attraverso la proprietà data-icon, dove basta specificare il nome dell'immagine desiderata, LungoJS avrà il compito di pescare ed includere la stessa.
<a href="#" data-icon="home"></a>Per cambiare icona basta indicare il nome presente nella libreria. Identica la modalità per la creazione dei bottoni.
<a href="#" class="button blue" data-icon="home"></a>Mentre gli elementi restanti come Form, Input Text, Input Password e Textarea, vengono richiamati attraverso la proprietà placeholder.
Non dimentichiamoci di includere all'interno della view il tag <scroll> per rendere la pagina scorrevole:
<article id="main" class="list">
<scroll id="main_scroll">
<ul>
<li data-icon="user">
<strong>@soyjavi</strong>
<small>Author of @Lungojs</small>
</li>
<li data-icon="user">
<strong>@htmlit</strong>
<small>Developer of @Lungojs</small>
</li>
</ul>
</scroll>
</article>Lungo.js in action
Per comprendere appieno le potenzialità di questo framework, sviluppiamo un'applicazione che ci consenta di visualizzare un'anagrafica prodotti sfruttando le API WebSQL. Realizziamo quindi il db per registrare gli articoli da imputare:
var db = openDatabase('databaseAN', '1.0', 'DATABASE ANAGRAFICA', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS ANAGRAFICA (ID UNIQUE, DESCRIZIONE, CATEGORIA)');
tx.executeSql('INSERT INTO ANAGRAFICA (ID, DESCRIZIONE, CATEGORIA)
VALUES (1, "10 TABLET PC Android 2.2 Webcam ePad ZT-180", "001")');
tx.executeSql('INSERT INTO ANAGRAFICA (ID, DESCRIZIONE, CATEGORIA)
VALUES (2, "HARD DISK ESTERNO 2 TB HARDISK 2000 GB 3.5", "001")');
tx.executeSql('INSERT INTO ANAGRAFICA (ID, DESCRIZIONE, CATEGORIA)
VALUES (3, "ALIMENTATORE PC 625W 12CM 20+4pin PCI-E 8PIN", "001")');
}Attraverso le classi di LungoJS e le specifiche CSS3 costruiamo ora un'interfaccia utente:
<section id="main">
<article id="presentazione">
<header data-title="Gruppo HTML S.r.l."></header>
Gruppo HTML è una delle principali realtà del Web italiano.
Nata nel 1997, oggi comprende un ampio network editoriale che va dall'IT all'automotive,
dal business al lifestyle. Completano il gruppo una divisione di sviluppo e una di formazione.
</article>
<footer class="toolbar">
<nav>
<a href="#presentazione" data-target="article" data-icon="home"></a>
<a href="#selezione" data-target="article" data-icon="user"></a>
</nav>
</footer>
</section>All'interno del main, i javascript-buttons rimandano l'utente alla sezione interessata, specificando la destinazione nella proprietà "data-target":
<article id="selezione">
<scroll id="">
<p class="buttons" style="height:730px;">
<a href="#vista" data-target="section" class="button big red"
onClick="getComponent();">COMPONENTI E SERVIZI</a>
<a href="#vista" data-target="section" class="button big green"
onClick="getPc();">PC PORTATILI</a>
</p>
</scroll>
</article>Ora non resta che caricare i dati dal database:
function getComponent(){
document.querySelector('#title').innerHTML += "COMPONENTI e PERIFERICHE";
db.transaction(function (tx) {
tx.executeSql("SELECT * FROM ANAGRAFICA WHERE CATEGORIA='001'", [],
function (tx, results) {
for (i=0; i<results.rows.length; i++){
var desc = "<p>"+results.rows.item(i).DESCRIZIONE+"</p>";
document.querySelector('#content').innerHTML += desc;
}
},
null);
});
}e reindirizzarli nella View, da includere ovviamente nel main:
<section id="vista">
<header data-back="user blue"></header>
<article id="view">
<div id="content" name="content"></div>
</article>
</section>Link utili
