Sviluppo di applicazioni HTML5 per Intel AppUp(SM);
Parte 1: un esempio semplice
Introduzione
Questo è il primo di una serie di articoli in cui si illustra come sviluppare applicazioni HTML5 per Intel AppUp(SM). In questo primo articolo vengono fornite informazioni di base su come ottenere un'applicazione semplice pacchettizzata mediante l'uso dell'incapsulatore. Negli articoli successivi verranno descritte alcune applicazioni di esempio più complesse che illustrano le diverse funzionalità di HTML5. Ai fini di questo documento, si presuppone che il lettore abbia familiarità con l'utilizzo di HTML5 o almeno di HTML4 e JavaScript.
L'articolo è incentrato sulla piattaforma Windows, sebbene l'incapsulatore sia in grado di creare anche pacchetti eseguibili sulla versione Netbook di MeeGo. L'obiettivo principale è consentire in futuro l'esecuzione di queste applicazioni anche su altre piattaforme, come Tizen, senza modifiche o apportando modifiche minime.
Tutti i file sorgente descritti in questo articolo possono essere scaricati qui.
Al momento della redazione del presente articolo è ancora in corso il test della versione beta dell'incapsulatore. È quindi possibile che vi siano alcune differenze tra ciò che viene descritto e illustrato in questo articolo e la versione finale.
Applicazione semplice
Lo scopo di questo primo esempio consiste nel visualizzare una pagina Web, utilizzare un semplice foglio di stile e scrivere del codice JavaScript. Illustrerò innanzitutto come utilizzare alcune delle API fornite da Intel AppUp. Successivamente, fornirò indicazioni passo passo per eseguire il packaging del codice come applicazione mediante l'uso dell'incapsulatore e per l'installazione e l'esecuzione del codice su un desktop Windows.
Sebbene sia possibile inserire tutto il codice in un singolo file HTML, per un'applicazione semplice è consigliabile inserire il codice JavaScript in uno o più file separati. È anche disponibile un file CSS per illustrare l'utilizzo tipico dei fogli di stile.
Per iniziare, è necessario utilizzare un file HTML principale, index.html, che farà riferimento al foglio di stile adoperato in questo esempio (app.css) e a un file JavaScript esterno (functions.js). Il file html principale deve essere denominato index.html; agli altri file si può assegnare il nome che si preferisce. Nelle prime righe del file index.html, mostrate nel Listato 1 riportato di seguito, si fa riferimento al foglio di stile e al file JavaScript.
<!DOCTYPE HTML> <html> <head> <title>HTML5 Application: Simple Example</title> <link href="app.css" rel="stylesheet" type="text/css" /> <script src="functions.js" type="text/javascript"></script> </head>
Listato 1 - Parte 1: file HTML principale
Implementiamo ora il corpo della pagina Web con un'intestazione e del testo, come illustrato nel Listato 2:
<body> <h1>HTML5 Application: <em>Simple Example</em></h1> This is a simple first example of an HTML5 application. It illustrates what is needed to use Encapsulator to package an HTML5 application for AppUp. As well as a single HTML file, it includes a JavaScript file and style sheet. It shows how to call some of the Encapsulator AppUp APIs and use some HTML5 features. </hr>
Listato 2 - Parte 2: file HTML principale
Occorre ora creare tre pulsanti e associarli alle funzioni JavaScript da eseguire quando vengono selezionati. Il codice per questi pulsanti viene illustrato nel Listato 3:
<a href="#" id="FullScreen" class="button black" onclick="fullScreen()">Set Full Screen Mode</a> <a href="#" id="ExitFullScreen" class="button white" onclick="exitFullScreen()">Exit Full Screen Mode</a> <a href="#" id="CloseApp" class="button blue" onclick="closeApplication()">Close Application</a>
Listato 3 - Parte 3: file HTML principale
Infine, nella parte in fondo alla pagina verranno inseriti i tag di chiusura body e html e alcune informazioni sul copyright:<br><br><hr> <address><br>Copyright © 2011, Intel Corporation.</address> </body> </html>
Listato 4: Parte 4: file HTML principale
Di seguito è riportato il file JavaScript, functions.js. Il file implementa semplicemente tre funzioni, richiamando le funzioni fornite nell'API Intel AppUp. Le funzioni si spiegano da sole e sono descritte in maggiore dettaglio qui. Il file completo viene mostrato nel Listato 5:
function closeApplication() { intel.adp.encapsulator.closeapplication(); } function fullScreen() { intel.adp.encapsulator.setfullscreen(); } function exitFullScreen() { intel.adp.encapsulator.exitfullscreen(); }
Listato 5: file delle funzioni JavaScript
Infine, è disponibile un foglio di stile, app.css, in cui viene definito lo stile da utilizzare per i pulsanti. In questo articolo non verrà illustrato l'intero file, perché è molto lungo e non particolarmente interessante. È comunque possibile scaricarlo ed esaminarlo. Nel Listato 6 è illustrata una parte del file.
BODY { background-color: grey } .button { display: inline-block; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
Listato 6: parte del file CSS
Intel AppUp richiede inoltre la creazione di un file di icona, che verrà utilizzato durante il packaging dell'applicazione. Il file dell'icona deve essere in formato PNG, denominato icon.png; l'icona deve essere di forma quadrata con una risoluzione di almeno 128 x 128 pixel. Nella Figura 1 viene mostrata l'icona creata:
Figura 1: icona applicazione
Una volta creati questi file, è possibile testare l'applicazione localmente utilizzando un browser Web. L'unica limitazione è rappresentata dall'incapacità del browser di riconoscere le funzioni API JavaScript Intel AppUp. Nel caso di questa semplice applicazione, l'esecuzione in locale del test dell'applicazione in un browser Web è un metodo efficiente per verificare l'aspetto dell'interfaccia utente.
A questo punto, l'applicazione è pronta ed è possibile procedere con il packaging dell'applicazione con l'incapsulatore.
Utilizzo dell'incapsulatore
L'incapsulatore è uno strumento basato sul Web utilizzato per eseguire il packaging dell'applicazione HTML5 come applicazione nativa per Intel AppUp per ogni piattaforma.
Il primo passo prevede l'inserimento dei file dell'applicazione in un archivio ZIP. Nella Figura 2 viene mostrata una schermata che ho creato quando ho eseguito questa operazione su un desktop Windows 7 utilizzando Windows Explorer. Si devono includere i quattro file creati in precedenza: il file HTML principale, il file JavaScript, il file CSS e l'icona.
Figura 2: creazione del file ZIP
A questo punto, è possibile accedere all'incapsulatore aprendo l'URL con un browser Web. Dopo aver letto le informazioni nella scheda Introduction, accedere a Make your app. È necessario compilare i campi obbligatori del modulo. Per informazioni sui campi da compilare, fare clic sul pulsante "?". Una volta inserite tutte le informazioni, fare clic su Choose File per selezionare e caricare il file ZIP con i file dell'applicazione. Nella Figura 3 viene mostrato un esempio dell'applicazione:
Figura 3: compilazione dei campi dell'incapsulatore
Ora, è possibile fare clic su Make it; l'incapsulatore esaminerà i file dell'applicazione e visualizzerà un avviso nel caso in cui rilevi eventuali problemi. L'incapsulatore è uno strumento molto efficace per rilevare e informare della presenza di eventuali errori, come un file di icona mancante o troppo piccolo, un formato di stringa della versione non corretto e così via.
Se non si verifica alcun errore, si attiva la scheda Check status and download ed è possibile monitorare lo stato mentre l'incapsulatore esegue il packaging dell'applicazione per ciascuna piattaforma. Questa operazione è illustrata nella schermata della Figura 4 di seguito.
Figura 4: verifica dello stato e del download
Una volta eseguito il packaging dell'applicazione, nell'interfaccia Web viene visualizzato un avviso che informa del completamento dell'operazione e viene fornito un collegamento per scaricare i pacchetti. Per Windows, viene creato un file MSI, mentre per MeeGo viene creato un pacchetto RPM. Se il processo di packaging non riesce, viene visualizzata la causa dell'errore; si potrà quindi correggere il problema e rieseguire il processo.
Prima di procedere, vediamo cosa accade "dietro le quinte" durante la creazione dei pacchetti: L'incapsulatore crea un'applicazione nativa che comprende un motore di rendering HTML. Attualmente, l'applicazione utilizza il toolkit Qt e QtWebKit. La visualizzazione Web nell'applicazione apre il file index.html dell'applicazione. Questa applicazione wrapper viene compilata per ciascuna piattaforma e impacchettata nel formato appropriato, con il file di icona e tutti gli altri file inclusi nell'archivio ZIP.
In MeeGo, il pacchetto è un file rpm, che utilizza la versione di Qt installata in MeeGo per i netbook. Il pacchetto può essere installato con il comando "rpm".
In Windows, il pacchetto è un file MSI che include una procedura guidata grafica di installazione/disinstallazione. Il pacchetto comprende Qt e qualsiasi altra DLL richiesta dall'applicazione wrapper nativa.
Installazione, esecuzione e disinstallazione
Ora che il pacchetto è stato creato, è possibile installarlo e testarlo. In Windows, scaricare il file MSI generato ed eseguirlo. Viene visualizzato un programma di installazione simile a quello riportato nella Figura 5:
Figura 5: programma di installazione dell'applicazione
Una volta completato il processo di installazione, avviare l'applicazione dall'icona sul desktop o dal menu Start, come illustrato nella Figura 6 riportata di seguito:
Figura 6: esecuzione di un esempio semplice
A questo punto, è possibile completare il test. Utilizzando l'applicazione di esempio, si possono testare i tre pulsanti e verificare che eseguano le funzioni previste.
Per disinstallare l'applicazione, basta ricorrere al Pannello di controllo di Windows. In Windows 7, viene visualizzata una schermata simile a quella nella Figura 7:
Figura 7: disinstallazione dell'applicazione
Distribuzione nell'AppUp Store
Nel caso di un'applicazione reale che si desidera offrire come download, è preferibile distribuirla nell'AppUp Store. Gli altri passaggi necessari per l'esecuzione di questa operazione verranno illustrati in un articolo successivo.
Altri suggerimenti
Di seguito sono riportati alcuni suggerimenti utili.
Per eseguire il debug dell'applicazione, come illustrato in precedenza, una delle possibili strategie da adottare consiste nell'eseguire l'applicazione localmente in un browser. Questa strategia consente di evitare il ciclo di caricamento/generazione/download previsto per l'utilizzo dell'incapsulatore, ma in genere non consente di eseguire un test completo dell'applicazione, poiché questa viene eseguita in un ambiente diverso rispetto all'applicazione wrapper Intel AppUp. Per il test e il debug dell'applicazione è disponibile uno strumento, denominato Web Inspector, integrato nel motore di rendering WebKit. Se si fa clic con il pulsante destro del mouse sulla visualizzazione Web, viene visualizzata la voce di menu "Inspect", che consente di aprire lo strumento Web Inspector. Oltre a visualizzare gli errori e a eseguire il debug del codice JavaScript, si possono eseguire numerose operazioni, come la visualizzazione degli elementi HTML e delle informazioni sulle prestazioni. Quando l'applicazione viene inviata a Intel AppUp come versione ufficiale, il menu Inspect non viene visualizzato. Nella Figura 8 viene mostrata l'esecuzione di Web Inspector.
Figura 8: Web Inspector
Poiché lo standard HTML5 è ancora in fase di evoluzione, i motori di rendering Web non supportano tutte le funzioni. Esistono alcune limitazioni nel motore di rendering basato su QtWebKit utilizzato dal programma wrapper dell'incapsulatore. Le funzioni HTML5 supportate dall'incapsulatore sono documentate qui. In futuro, si prevede un costante miglioramento del livello di supporto dello standard HTML5,
in modo da ridurre il numero di test da eseguire. Di seguito sono riportati alcuni aspetti da prendere in considerazione durante l'esecuzione dei test dell'applicazione:
- Controllare tutte le funzionalità dell'applicazione
- Testare tutte le piattaforme che si desidera supportare (ad es., Windows e MeeGo)
- Testare più versioni della piattaforma, ad esempio diverse versioni di Windows
- Verificare che il programma di installazione installi solo i file necessari
- Verificare che il programma di disinstallazione rimuova tutti i file
- Utilizzare Web Inspector per controllare la presenza di errori o avvisi JavaScript ed eseguire la funzionalità Audits
Riepilogo
In questo tutorial sono state fornite le informazioni di base sull'utilizzo dell'incapsulatore Intel AppUp per il packaging di un'applicazione HTML5 semplice. Spero che questo semplice esempio rappresenti un utile punto di partenza per la creazione delle vostre applicazioni. Nelle pubblicazioni successive verranno esaminate alcune applicazioni HTML5 più complesse che illustrano le altre funzionalità dello standard HTML5 supportate dall'incapsulatore Intel AppUp.
Copyright © 2011, Intel Corporation.
