Share
En la Parte 1 de esta serie de tutoriales, presentamos nuestra aplicación de ejemplo, describimos el flujo de páginas y discutimos cómo construir las páginas en la aplicación a través de jQuery Mobile. En la Parte 2, completamos la implementación de nuestra aplicación web. En esta parte final, migraremos la aplicación web a una aplicación nativa de Android.
La aplicación web completada en la Parte 2 ahora se convertirá en una aplicación nativa de Android. La discusión a continuación se aplica a Android OS 2.2 y 2.3.
La aplicación de Android utilizará index.html como su componente de interfaz de usuario. Escribiremos un android.app.Actividad clase para definir el punto de integración entre index.html y la aplicación nativa. También escribiremos un android.webkit.WebViewClient clase para asegurarse de que la página de detalles de noticias se muestra dentro del original android.webkit.WebView instancia donde se lanza la aplicación Noticias.
Accentsconagua
index.html Vamos a actualizar el NOTICIAS_URI variable de la siguiente manera:
var NEWS_URI = 'http://rss.news.yahoo.com/rss/';
No necesitamos bridge.php en la aplicación nativa de Android para reenviar llamadas AJAX a Yahoo! Noticias. Esto se debe a que la restricción del mismo origen no se aplica aquí. Cuando está empaquetado como parte de la aplicación nativa, el index.html El archivo no se descarga desde un servidor web. Como tal, puede hacer llamadas AJAX a URL remotas.
Además, agregamos la siguiente función:
var EMPTY = ";? function changeLocation (varURI) showProgress (); $ .get (EMPTY, function (data) window.location = varURI;);
los cambiar locación() La función será llamada desde el android.webkit.WebViewClient, que se mostrará momentáneamente. El propósito de la función es mostrar la página de progreso durante la transición de la página Noticias a la página Detalles de noticias.
cambiar locación() es para mostrar la página de progreso.obtener() La función es una jQuery especializada. ajax () función. Nosotros llamamos obtener() pasándole una URL vacía y un controlador de devolución de llamada, que establece el ubicación de ventana variable al argumento de entrada. El argumento de entrada es la URL en el una etiqueta para una noticia, como se explica en la Parte 2, "Ir a la página de detalles de noticias de la página de noticias". Cuando se carga la URL, la página de progreso se reemplaza con el contenido de esa URL.cambiar locación() no es una parte esencial de la migración de la aplicación web a una nativa. Solo se necesita para mostrar una página de progreso al pasar de la página Noticias a la página Detalles de noticias en la aplicación nativa. La porción inicial de nuestro Actividad clase, llamada NoticiasActividad se muestra a continuación:
paquete com.news; importar android.app.Activity; importar android.webkit.WebView; importar android.os.Bundle ;? La clase pública NewsActivity extiende la actividad WebView mWebView; public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main); mWebView = (WebView) findViewById (R.id.webview); mWebView.setWebViewClient (new NewsClient ()); mWebView.getSettings (). setJavaScriptEnabled (true); mWebView.getSettings (). setDomStorageEnabled (true); mWebView.loadUrl ("android_asset / www / index.html"); ? onCreate () Método, primero llamamos la implementación predeterminada de la súper clase y luego invocamos setContentView () para cargar el archivo de diseño para esta actividad. El argumento de entrada para setContentView () es R.layout.main que es una referencia a main.xml en el res / diseño carpeta.WebView vía findViewById (R.id.webview). Establecemos una costumbre WebViewClient sobre el WebView, llamado NewsClient (para ser revisado pronto). Luego, configuramos el WebView para permitir la ejecución de JavaScript y la API de almacenamiento DOM (este último es necesario para usar HTML5 almacenamiento local).WebView para cargar el index.html página que tiene el código UI.En la página Detalles de noticias, al presionar el botón Atrás del dispositivo, el usuario regresará a la página Categorías. Para estar seguros de eso, primero necesitamos manejar el onKeyDown evento en nuestro NoticiasActividad. Esto se muestra a continuación:
La clase pública NewsActivity extiende la actividad WebView mWebView; public void onCreate (Bundle savedInstanceState) ? public boolean onKeyDown (int keyCode, KeyEvent event) if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack ()) mWebView.goBack (); devuelve verdadero return super.onKeyDown (keyCode, evento); ?
Si el evento clave corresponde al botón Atrás del dispositivo y al WebView tiene historia para volver, luego le preguntamos al WebView Para retroceder un solo paso en su historia. En la página de detalles de noticias, esto corresponderá a index.html. Cuando el historial retroceda, la página de Categorías se mostrará siguiendo los pasos descritos en la Parte 2, "Inicio de la aplicación".
Por último, echemos un vistazo a la costumbre. WebViewClient que se implementa como una clase interna de NoticiasActividad.
La clase pública NewsActivity extiende la actividad WebView mWebView; public void onCreate (Bundle savedInstanceState) ? mWebView.setWebViewClient (new NewsClient ()) ;? public boolean onKeyDown (int keyCode, KeyEvent event) ? la clase privada NewsClient extiende WebViewClient public boolean shouldOverrideUrlLoading (vista de WebView, String url) view.loadUrl ("javascript: changeLocation ('" + url + "')"); devuelve verdadero ? La única operación que anulamos de la clase padre es shouldOverrideUrlLoading () donde instruimos al WebView para llamar a la función de JavaScript cambiar locación() en index.html.
WebViewClient, La página de detalles de noticias se mostraría en una aplicación de navegador separada, fuera de la aplicación de noticias. Por lo tanto, definiendo una costumbre. WebViewClient es esencial para mostrar la página de detalles de noticias como parte de la aplicación Noticias (es decir, en la misma WebView que alberga el index.html).shouldOverrideUrlLoading () De una manera más simplificada, como sigue: public boolean shouldOverrideUrlLoading (vista WebView, String url) view.loadUrl (url); devuelve verdadero
Eso sería suficiente para mostrar la página de detalles de noticias en el mismo WebView que alberga index.html. Sin embargo, la transición de la página de Noticias a la página de Detalles de Noticias no incluiría mostrar la página de progreso.
Habiendo revisado el Actividad Clase, veamos otros componentes de nuestra aplicación..
AndroidManifest.xmlPara una discusión general sobre el AndroidManifest.xml Archivo referido a la referencia oficial. En ese archivo, hay dos elementos particulares dignos de comentar.
android.app.Actividad La documentación, de forma predeterminada, un cambio de configuración, incluido un cambio en la orientación o la accesibilidad del teclado, hace que se destruya la actividad actual. Para evitar el comportamiento predeterminado, configuramos nuestra aplicación especificando los cambios de configuración que serán manejados por la propia aplicación. Esto se define en la configChanges atributo donde orientación corresponde al cambio de orientación y teclado oculto corresponde a un cambio de accesibilidad del teclado (por ejemplo, un usuario abre el teclado del dispositivo). Estamos configurando la aplicación para que, si ocurre alguno de esos cambios, la actividad actual no se destruya..strings.xmlNoticias
Este archivo define la constante nombrada. nombre de la aplicación que se utiliza para identificar la aplicación de noticias. El valor de ese atributo se muestra en varios lugares en nuestro dispositivo Android, como se muestra a continuación. De izquierda a derecha: debajo del icono de inicio de la aplicación, la barra de título de la aplicación, Configuración - Administrar aplicaciones.
android.app.Actividad Implementamos la interfaz de usuario en nuestra aplicación nativa de Android usando index.html y el soporte de JavaScript y css bibliotecas Un punto de integración entre index.html y la costumbre android.app.Actividad clase es la siguiente línea:
mWebView.loadUrl ("android_asset / www / index.html"); Además, observe en "La clase de actividad" que habilitamos JavaScript y DOMStorage en el android.webkit.WebView objeto como index.html necesita ejecutar JavaScript y acceder a HTML5 almacenamiento local.
mWebView.getSettings (). setJavaScriptEnabled (true); mWebView.getSettings (). setDomStorageEnabled (true);
Finalmente, en el AndroidManifest.xml Permitimos conexiones a Internet desde nuestra aplicación a través de:
Las Figuras 1 a 4 mostradas anteriormente en la Parte 1 de esta serie son las imágenes de pantalla de la aplicación nativa de Android.
Para crear el ícono de inicio de la aplicación Noticias, seguimos las pautas de diseño de íconos para aplicaciones de Android. En ese recurso, varias plantillas en formato Adobe PSD están disponibles para descargar. Nosotros descargamos icon_templates-v2.0.zip y extraído Launcher-icon-template.psd. En ese archivo, seleccionamos dos plantillas para crear nuestro icono de inicio:
Colocamos esas plantillas en dos capas separadas en Adobe Photoshop y agregamos un texto gráfico, Noticias, en una capa adicional en la parte superior para componer el icono de inicio. Según la pauta, creamos tres versiones del ícono para pantallas de densidad baja, media y alta con 36 x 36, 48 x 48 y 72 x 72 píxeles de tamaño, respectivamente. Cada uno de esos iconos se llama icon.png y se colocan en las carpetas de proyectos de Android de acuerdo con la siguiente tabla:
| Nombre de la carpeta | Nombre del archivo | Tamaño del pixel |
res \ drawable-ldpi | icon.png | 36 x 36 |
res \ drawable-mdpi | icon.png | 48 x 48 |
res \ drawable-hdpi | icon.png | 72 x 72 |
Como ejemplo, este es el ícono de lanzamiento de 36 x 36:
Como parte de este tutorial, proporcionamos los archivos de proyecto necesarios para importar la aplicación nativa de Android News en el entorno de desarrollo de Eclipse. Los prerrequisitos del proyecto son:
El proyecto ha sido probado con éxito tanto con la plataforma Android 2.2 API nivel 8 como con la plataforma 2.3 API nivel 9.
Antes de importar el proyecto a su entorno Eclipse, asegúrese de que el complemento ADT de Eclipse apunte a la ubicación correcta de Android SDK en su sistema local. Para comprobar esto, en el menú de Eclipse vaya a Ventana -> Preferencias -> Android. los Ubicación SDK La ventana debe establecerse en la ubicación del SDK de Android. Una vez configurado correctamente, debería ver algo similar a la imagen a continuación:
Los archivos de proyecto se proporcionan en un archivo de archivo llamado noticias.zip. Para importar el proyecto en el menú de Eclipse, vaya a Archivo -> Importar y luego en el asistente de importación de archivos seleccione General -> Proyectos existentes en el espacio de trabajo (vea abajo).
En la siguiente página del asistente, elija la Seleccionar archivo de archivo botón de radio y navegar a donde noticias.zip se encuentra en su sistema de archivos. los Proyectos ventana se llenará automáticamente donde el Noticias El proyecto ya está seleccionado. Esto se muestra a continuación. presione el Terminar botón para completar la importación.
Eclipse construirá la aplicación automáticamente después de la importación. Ahora, debería ver el proyecto de Noticias en el explorador de proyectos, como se muestra a continuación:
Para compilar / depurar su proyecto, puede elegir entre las plataformas Android OS 2.3 y 2.2 como destino de compilación. Para ello, seleccione la Noticias Proyecto en el explorador de proyectos y en el menú contextual, seleccione Propiedades. En la lista de propiedades del lado izquierdo, seleccione Androide como la propiedad. Los objetivos de compilación disponibles se muestran a la derecha, como se muestra a continuación:
Una lista de archivos en el proyecto se da a continuación..
Ya hemos discutido algunos de esos archivos. A continuación se muestra una revisión rápida / resumen:
src carpeta contiene el código fuente de la NoticiasActividad clase.gen La carpeta contiene los archivos generados automáticamente por Eclipse ADT..activos \ www La carpeta y sus subcarpetas contienen todos los archivos necesarios para la interfaz de usuario, incluidos index.html; activos \ www \ css-js tiene el css y los archivos JavaScript utilizados por index.html. En particular: jquery-1.4.4.min.js, jquery.mobile-1.0a2.min.js, jquery.mobile-1.0a2.min.css son las bibliotecas de framework jQuery Mobile.jquery.ba-dotimeout.js es la biblioteca jquery-dotimeout-plugin.jquery.dst.js es la biblioteca de plugins DST.js.activos \ www \ css-js \ images \ icons-18-white.png es un archivo de imagen al que hacen referencia las bibliotecas de la infraestructura de jQuery Mobile.activos \ www \ img \ wait.gif es el icono de hilado usado en la página de progreso.res \ drawable * las carpetas almacenan los iconos de inicio, como se explica en la sección "Icono de inicio de aplicación" de este tutorial.res \ layout \ main.xml archivo es el archivo de diseño XML de Android. Dado que la interfaz de usuario en nuestra aplicación se define en index.html Al usar el marco de jQuery Mobile, este archivo es muy simple y no necesita más explicación..res \ values \ strings.xml y AndroidManifest.xml.default.properties define el objetivo de construcción y es parte de noticias.zip. Eclipse ADT lo sobrescribirá en función de su selección del objetivo de compilación.Además de desarrollar aplicaciones web móviles multiplataforma, el marco jQuery Mobile se puede utilizar para implementar aplicaciones nativas de Android. En esta serie de tutoriales, desarrollamos una aplicación web utilizando jQuery Mobile y luego la migramos a una aplicación nativa de Android con solo pequeñas modificaciones. La idea principal es utilizar el android.webkit.WebView Objeto como contenedor para ejecutar el archivo html de la aplicación web y el código jQuery Mobile JavaScript que contiene. Algunas observaciones finales se dan a continuación..
android.webkit.WebView no está sujeto a restricciones del mismo origen al realizar llamadas AJAX.