Strumenti di Intel® HTML5 per lo sviluppo di applicazioni mobili

di Egor Churaev

Download


Strumenti di Intel® HTML5 per lo sviluppo di applicazioni mobili [PDF 821.98 KB]
Codice sorgente iOS [file ZIP da 168 KB]
Codice sorgente dei risultati degli strumenti HTML5 [file ZIP da 86 KB]

HTML5 è il nuovo standard HTML. Intel Corporation ha recentemente annunciato una serie di strumenti HTML5 per lo sviluppo di applicazioni mobili. Questo documento mostra come effettuare il porting di un'applicazione accelerometro Apple iOS* verso HTML5 utilizzando questi strumenti. Notare che il codice generato automaticamente da Intel® XDK potrebbe contenere del codice concesso in licenza in base alle licenze descritte nell'Appendice A del presente documento. Fare riferimento all'output di Intel XDK per sapere quali librerie sono utilizzate per abilitare l'applicazione.

Intel® HTML5 App Porter Tool


La prima cosa che faremo è prendere l'applicazione iOS dell'accelerometro e convertire in HTML5 il codice sorgente Objective-C*. Lo faremo utilizzando lo strumento Intel® HTML5 App Porter Tool e il codice sorgente che si trova qui: [iOS_source.zip] (notare che il codice di esempio IOS_source viene fornito sotto la Licenza del codice sorgente di esempio Intel descritta nell'Appendice B). È possibile scaricare Intel HTML5 App Porter Tool dalla scheda Tools all'indirizzo http://software.intel.com/it-it/html5. Dopo aver compilato e inviato il modulo con il proprio indirizzo e-mail, si otterranno i link per scaricare questo strumento. Le istruzioni su come utilizzare lo strumento possono essere trovati nel sito http://software.intel.com/it-it/articles/tutorial-creating-an-html5-app-from-a-native-ios-project-with-intel-html5-app-porter-tool

Terminata l'esecuzione di tutti i passaggi, si otterrà il codice sorgente HTML5.

Intel XDK


Il codice HTML5 può essere aperto in qualsiasi IDE. Intel offre un comodo strumento per lo sviluppo di applicazioni HTML5, l'Intel XDK - Kit di sviluppo per più piattaforme (http://software.intel.com/it-it/html5/tools). Con Intel XDK, gli sviluppatori possono scrivere un codice sorgente unico da distribuire su molti dispositivi. Ciò che è particolarmente comodo è che non è necessario installarlo sul proprio computer. È possibile installarlo come un'estensione di Google Chrome*. Se si utilizza un altro browser, è necessario scaricare un file JavaScript* ed eseguirlo. A volte è necessario aggiornare Java*.

Dopo aver installato Intel XDK, viene visualizzata la finestra principale:

Se si desidera eseguire il porting del codice esistente, premere il grosso pulsante "Start new".

Se si sta creando un nuovo progetto, immettere il nome del progetto e selezionare “Create your own from scratch”, come mostrato nella schermata qui sotto.

Selezionare “Use a blank project”. Attendere finché appare il messaggio “Application Created Successfully!”

Fare clic su “Open project folder”.

Rimuovere tutti i file da questa cartella e copiare i file di cui si è eseguito il porting. Il porting dell'applicazione accelerometro non è però ancora avvenuto. Si deve ancora a scrivere un'interfaccia per l'applicazione. È possibile rimuovere gli hook creati da Intel HTML5 App Porter Tool. Rimuovere questi file:

  • todo_api_application__uiaccelerometerdelegate.js
  • todo_api_application_uiacceleration.js
  • todo_api_application_uiaccelerometer.js
  • todo_api_js_c_global.js

Per aggiornare il progetto in Intel XDK, andare alla finestra dell'editor nell'emulatore di Windows.

Aprire il file index.html e rimuovere le righe lasciate dai file inclusi.

Aprire il file todo_api_application_appdelegate.js e implementare la proprietà “window” non mappata del delegato.

application.AppDelegate.prototype.setWindow = function(arg1) {
    // ================================================================
    // REFERENCES TO THIS FUNCTION:
    // line(17): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: [*js.APT.View]
    //    Expected return type: [unknown type]
    //
    //if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
    //{
        // TODO remove exception handling when implementing this method
       // throw "Not implemented function: application.AppDelegate.setWindow";
    //}
this._window = arg1;
};

application.AppDelegate.prototype.window = function() {
    // ================================================================
    // REFERENCES TO THIS FUNCTION:
    // line(20): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: none
    //    Expected return type: [unknown type]
    //
    // line(21): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: none
    //    Expected return type: [unknown type]
    //
    //if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
    //{
        // TODO remove exception handling when implementing this method
       // throw "Not implemented function: application.AppDelegate.window";
    //}
return this._window;
};

Aprire il file viewcontroller.js. Rimuovere tutte le funzioni utilizzate per lavorare con l'accelerometro nella vecchia applicazione iOS. Alla fine si ottiene questo file:

APT.createNamespace("application");

document.addEventListener("appMobi.device.ready",onDeviceReady,false);

APT.ViewController = Class.$define("APT.ViewController");

application.ViewController = Class.$define("application.ViewController", APT.ViewController, {
    __init__: function() {
        this.$super();
    };>});

Nel file ViewController_View_774585933.css dobbiamo cambiare gli stili dei colori degli elementi da nero a bianco in modo che siano leggibili su sfondo nero: da color: rgba(0,0,0,1); a color: rgba(256,256,256,1);. Come risultato si ottiene:

div#Label_590244915
{
	left: 20px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 320px;
	top: 0px;
	opacity: 1;
}
div#Label_781338720
{
	left: 20px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 29px;
	opacity: 1;
}
div#Label_463949782
{
	left: 20px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 51px;
	opacity: 1;
}
div#Label_817497855
{
	left: 20px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 74px;
	opacity: 1;
}
div#Label_705687206
{
	left: 70px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 29px;
	opacity: 1;
}
div#Label_782673145
{
	left: 70px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 51px;
	opacity: 1;
}
div#Label_1067317462
{
	left: 70px;
	color: rgba(256,256,256,1);
	height: 21px;
	position: absolute;
	text-align: left;
	width: 42px;
	top: 74px;
	opacity: 1;
}
div#View_774585933
{
	left: 0px;
	height: 548px;
	position: absolute;
	width: 320px;
	top: 20px;
	opacity: 1;
}

Dopo aver aggiornato la finestra dell'emulatore, si vede:

 

Per codificare le funzioni dell'accelerometro bisogna usare appMobi JavaScript Library. La documentazione di questa libreria può essere trovata qui. È installata quando si scarica Intel XDK.

Aprire il file index.html e aggiungere questa riga all'elenco degli script:

<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>

Aprire il file ViewController_View_774585933.html. Dobbiamo rinominare i campi con nomi più logici, cioè da:

<div data-apt-class="Label" id="Label_705687206">0</div>
<div data-apt-class="Label" id="Label_782673145">0</div>
<div data-apt-class="Label" id="Label_1067317462">0</div>

a:

<div data-apt-class="Label" id="accel_x">0</div>
<div data-apt-class="Label" id="accel_y">0</div>
<div data-apt-class="Label" id="accel_z">0</div>

Lo stesso dovrebbe essere fatto nel file ViewController_View_774585933.css, dove dobbiamo rinominare i nomi degli stili.

Aprire il file viewcontroller.js e scrivere alcune funzioni per utilizzare l'accelerometro.

function suc(a) {
    document.getElementById('accel_x').innerHTML = a.x;
    document.getElementById('accel_y').innerHTML = a.y;
    document.getElementById('accel_z').innerHTML = a.z;
}

var watchAccel = function () {
    var opt = {};
    opt.frequency = 5;
    timer = AppMobi.accelerometer.watchAcceleration(suc, opt);
}

function onDeviceReady() {
    watchAccel();
}
document.addEventListener("appMobi.device.ready",onDeviceReady,false);

Aggiornare il progetto. Lo si può vedere sulla finestra di emulazione:

È possibile vedere come funziona l'accelerometro in Intel XDK utilizzando il pannello “ACCELEROMETER”:

L'applicazione sarà simile a questa:

Il codice sorgente completo dell'applicazione è reperibile qui.
Appendice A: Contratti di licenza del codice Intel® XDK

Appendice B: Contratto di licenza del codice sorgente di esempio Intel

 

Intel e il logo Intel sono marchi di Intel Corporation registrati negli Stati Uniti e/o in altri paesi.
 Copyright © 2013 Intel Corporation. Tutti i diritti riservati.
*Altri marchi e denominazioni potrebbero essere proprietà di terzi.

Per informazioni più dettagliate sulle ottimizzazioni basate su compilatore, vedere il nostro Avviso sull'ottimizzazione.
Contrassegni: