Appify evolve sempre di più ed è con questo blog che ho intenzione di documentare le capacità di questo framework. Infatti sono felice di comunicarvi che Appify metterà a disposizione un meccanismo di templating delle pagine semplice ed efficace.

Pages e container

Appify è un framework per applicazioni mobile HTML5 strutturato a pagine(pages). Una pagina è semplicemente un div che contiene una porzione di codice HTML che Appify interpreterà per agganciare i Controller. Il sistema di templating vi aiuterà a mantenere il codice delle vostre pagine più pulito poiché il codice di ogni pagina può essere dichiarato in modo isolato. Il contenitore delle pagine è a sua volta un documento HTML che le contiene tutte, per semplicità chiameremo questo documento "container".

appify-template

Possiamo quindi dichiarare una pagina nel container in questo modo:

<div data-appify-template="pages/example-page.html"></div>

Come si può facilmente notare l'attributo data-appify-template è stato valorizzato con una url che corrisponde al percorso dove Appify si aspetta di trovare il file contenente il codice html della pagina desiderata.
Quando verrà invocato il metodo "startApp()" in pratica Appify si preoccuperà di capire quali sono tutti i div che hanno questo attributo e scaricherà tutte le pagine per voi attaccandole al DOM del nostro container.

Il container delle pagine risulterà molto più pulito poiché basterà dichiarare una serie di pagine:

<div data-appify-template="pages/example-page1.html"></div>
<div data-appify-template="pages/example-page2.html"></div>
<div data-appify-template="pages/example-page3.html"></div>
<div data-appify-template="pages/example-page4.html"></div>

mentre il codice di ogni pagina sarà localizzato nei relativi file html.

Dynamic content loading vs Static content loading

Riepilogando il sistema che abbiamo appena visto si chiama "dynamic content loading" e si contrappone al sistema, già esistente in Appify, "static content loading". Il dynamic content loading può essere usato in Appify per evitare di avere un container poco leggibile specie quando la mole di pagine della nostra applicazione aumenta a dismisura. Trattandosi di un contesto "mobile web app" è doveroso precisare che il download delle pagine avviene allo start della nostra applicazione. Nei prossimi articoli vi mostrerò come istruire Appify per scaricare nuove pagine solo quando l'utente effettivamente cerca di visualizzarle, ovvero il lazy-loading delle pagine.



  • submit to reddit
blog comments powered by Disqus