Herramientas de HTML5 Intel® para el desarrollo de aplicaciones para dispositivos móviles

por Egor Churaev

Descargas


Herramientas de HTML5 Intel® para el desarrollo de aplicaciones para dispositivos móviles [PDF 821.98KB]
Código fuente para iOS [ZIP file 168 KB]
Código de fuente de resultado de las herramientas de HTML5 [ZIP file 86KB]

HTML5 es el nuevo estándar de HTML. Recientemente, Intel Corporation anunció un conjunto de Herramientas de HTML5 para el desarrollo de aplicaciones para dispositivos móviles. Este artículo describe cómo migrar una aplicación de acelerómetro Apple iOS* a HTML5 con la ayuda de estas herramientas. Tenga en cuenta que: el código autogenerado creado por Intel® XDK puede contener el código licenciado bajo una o más de las licencias descritas en el Apéndice A de este documento. Para obtener detalles sobre qué bibliotecas se utilizan para habilitar su aplicación, consulte la salida de Intel XDK.

Intel® HTML5 App Porter Tool


Lo primero que haremos será tomar una aplicación de acelerómetro iOS y convertiremos el código de fuente Objective-C* a HTML5. Lo haremos con Intel® HTML5 App Porter Tool y el código de fuente que se encuentra aquí: [iOS_source.zip] (Nota: el código de ejemplo IOS_source se proporciona según la Licencia de software de ejemplo Intel detallada en el Apéndice B). Puede descargar Intel HTML5 App Porter Tool de la ficha Herramientas en: http://software.intel.com/es-es/html5. Después de completar y enviar el formulario con su dirección de correo electrónico, recibirá enlaces para descargar esta herramienta. Las instrucciones sobre cómo utilizar esta herramienta se encuentran en este sitio: http://software.intel.com/es-es/articles/tutorial-creating-an-html5-app-from-a-native-ios-project-with-intel-html5-app-porter-tool

Cuando complete todos los pasos, obtendrá el código de fuente en HTML5.

Intel XDK


Es posible abrir el código HTML5 en cualquier IDE. Intel le ofrece una herramienta conveniente para desarrollar aplicaciones HTML5: Intel XDK, que es un Kit para desarrollo multiplataforma (http://software.intel.com/es-es/html5/tools). Con Intel XDK, los desarrolladores pueden escribir un solo código fuente para desplegarlo en muchos dispositivos. Lo que es especialmente positivo es que no es necesario instalarlo en su equipo. Puede instalarlo como una extensión para Google Chrome*. Si utiliza otro navegador, tiene que descargar un archivo JavaScript* y ejecutarlo. A veces es necesario actualizar Java*.

Después de instalar Intel XDK, verá la ventana principal:

Si desea migrar código existente, pulse el botón “Start new” (Iniciar nuevo).

Si está creando un proyecto nuevo, escriba el Nombre del proyecto y seleccione “Create your own from scratch,” (Crear su propio proyecto desde el principio) tal como se muestra en la captura de pantalla a continuación.

Marque “Use a blank project” (Usar un proyecto en blanco). Espere unos minutos y aparecerá el mensaje “Application Created Successfully!” (La aplicación se ha creado satisfactoriamente).

Haga clic en “Open project folder” (Abrir carpeta de proyecto).

Elimine todos los archivos de esta carpeta y copie los archivos migrados. Todavía no hemos migrado la aplicación de acelerómetro del todo. Nos falta escribir una interfaz para ella. Es posible eliminar los conectores creados por Intel HTML5 App Porter Tool. Elimine estos archivos:

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

Para actualizar el proyecto en Intel XDK, vaya a la ventana del editor en el emulador de Windows.

Abra el archivo index.html y elimine las líneas que restan de los archivos incluidos.

Abra el archivo todo_api_application_appdelegate.js e implemente la propiedad “window” no asignada del delegado.

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;
};

Abra el archivo viewcontroller.js. Elimine todas las funciones que se utilizaron para trabajar con el acelerómetro en la antigua aplicación iOS. Al final obtenemos este archivo:

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();
    };>});

En el archivo ViewController_View_774585933.css, tenemos que cambiar los estilos de los colores de elementos de negro a blanco para que se puedan leer en un fondo negro: color: rgba(0,0,0,1); a color: rgba(256,256,256,1);. Como resultado obtenemos:

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;
}

Después de actualizar la ventana del emulador verá:

 

Para codificar las funciones de acelerómetro, necesitamos utilizar la biblioteca appMobi JavaScript. La documentación sobre esta biblioteca se encuentra aquí. Se instala durante la descarga de Intel XDK.

Abra el archivo index.html y agregue esta línea a la lista de secuencias de comandos:

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

Abra el archivo ViewController_View_774585933.html. Tenemos que cambiar el nombre de los campos a nombres más lógicos de:

<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 mismo debe hacerse en el archivo ViewController_View_774585933.css, donde tenemos que cambiar el nombre de los estilos.

Abra el archivo viewcontroller.js y escriba algunas funciones para utilizar el acelerómetro.

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);

Actualice el proyecto y podrá verlo en la ventana del emulador:

Puede ver cómo funciona el acelerómetro en Intel XDK utilizando el panel “ACCELEROMETER”:

La aplicación tendrá este aspecto:

El código fuente de la aplicación completo se encuentra aquí.
Apéndice A: Contratos de licencia de código de Intel® XDK

Apéndice B: Contrato de licencia de código de ejemplo Intel

 

Intel y el logotipo de Intel son marcas comerciales de Intel Corporation en EE. UU. y/u otros países.
 Copyright © 2013 Intel Corporation. Todos los derechos reservados.
*Las demás marcas y nombres podrían ser considerados como propiedad de terceros.

Einzelheiten zur Compiler-Optimierung finden Sie in unserem Optimierungshinweis.