Share
Al desarrollar aplicaciones móviles, hay ocasiones en que se necesitará un navegador web con todas las funciones, pero no es una opción permitir que su usuario abandone su aplicación. En este tutorial, aprenderá cómo incrustar una instancia de WebKit en su aplicación, evitando que el usuario tenga que dejar la aplicación para navegar por un sitio web.
Usando la corona nativo clase y la showWebPopup () Método, incorporaremos una instancia del navegador y mostraremos un botón para volver al contenido de la aplicación.
Lo primero que debes hacer es seleccionar la plataforma en la que deseas ejecutar tu aplicación, de esta manera podrás elegir el tamaño de las imágenes que usarás.
La plataforma iOS tiene estas características:
Debido a que Android es una plataforma abierta, hay muchos dispositivos y resoluciones diferentes. Algunas de las características de pantalla más comunes son:
En este tutorial nos centraremos en la plataforma iOS, específicamente desarrollando para su distribución a un iPhone / iPod touch.
Crearemos una interfaz básica con un botón que llamará a la vista web cuando se presione, también trabajaremos con texto que servirá de retroalimentación..
Dependiendo del dispositivo que haya seleccionado, deberá exportar los gráficos en el PPI recomendado, puede hacerlo en su editor de imágenes favorito.
Usé el Ajustar el tamaño ... Funciona en la aplicación Preview en Mac OS X.
Recuerde dar a las imágenes un nombre descriptivo y guardarlas en la carpeta de su proyecto.
Es hora de escribir nuestra aplicación!
Abra su editor de Lua preferido (cualquier editor de texto funcionará, pero no tendrá resaltado de sintaxis) y prepárese para escribir su increíble aplicación.
Primero, escondemos la barra de estado, esta es la barra en la parte superior de la pantalla que muestra la hora, la señal y otros indicadores.
display.setStatusBar (display.HiddenStatusBar)
Ahora añadimos el fondo de la aplicación..
Accentsconagua
local background = display.newImage ("background.png") Esta línea crea la variable local. fondo y usa el monitor API para agregar la imagen especificada al escenario. Por defecto, la imagen se agrega a 0,0 usando la esquina superior izquierda como punto de referencia.
Repita el proceso con la imagen del logotipo, colocándola en el centro superior del escenario..
local logo = display.newImage ("logo.png", 20, 20) Las siguientes líneas crearán el texto en el centro del escenario, normalmente solo necesitaremos un TextField, pero aparentemente el carácter de nueva línea (\ n) no funciona con la nuevo texto método en este momento.
local aboutText = display.newText ("", 0, 0, native.systemFontBold, 13) aboutText: setReferencePoint (display.CenterReferencePoint) aboutText.x = display.contentWidth * 0.5 aboutText.y = display.contentHeight * 0.5 - 30 aboutText: setTextColor (238, 238, 238) - #EEEEEE aboutText.text = "¡Gracias por usar MobileTuts +!" local aboutText2 = display.newText ("", 0, 0, native.systemFontBold, 13) aboutText2: setReferencePoint (display.CenterReferencePoint) aboutText2.x = display.contentWidth * 0.5 aboutText2.y = aboutText.y + 17 aboutText2: setTextColor ( 238, 238, 238) - #EEEEEE aboutText2.text = "Para obtener más información y actualizaciones, visite:" local link = display.newText ("", 0, 0, native.systemFontBold, 13) link: setReferencePoint (display.CenterReferencePoint ) link.x = display.contentWidth * 0.5 link.y = aboutText2.y + 30 link: setTextColor (229, 175, 6) - # E5AF06 link.text = "http://mobile.tutsplus.com/app" Este botón llamará a la vista web, este código lo agregará al escenario..
local goButton = display.newImage ("goButton.png") goButton: setReferencePoint (display.CenterReferencePoint) goButton.x = display.contentWidth * 0.5 goButton.y = link.y + 50 Cuando el usuario active la vista web, se mostrará una barra en la parte inferior de la pantalla, esta barra contendrá un botón que eliminará la vista web y mostrará el contenido de la aplicación..
El siguiente código agrega la barra inferior y la oculta de forma predeterminada.
local bottomBar = display.newImage ("bottomBar.png", 0, 436) bottomBar.isVisible = false El botón Atrás que eliminará la vista web (también oculto por defecto).
local back = display.newImage ("backButton.png", 286, 448) back.isVisible = false Esta función será ejecutada por el botón Atrás. Oculta la barra inferior y el botón Atrás y también elimina la ventana emergente web.
función back: toque (e) bottomBar.isVisible = false back.isVisible = false native.cancelWebPopup () end
Este código llamará a la ventana emergente web y hará que la barra inferior y el botón Atrás sean visibles para el usuario.
función goButton: toque (e) native.showWebPopup (0, 0, 320, 436, "http://mobile.tutsplus.com/author/carloz-yanez/") - Visibilidad del botón Atrás bottomBar.isVisible = true back. isVisible = verdadero fin
El método web emergente tiene los siguientes parámetros:
Las siguientes líneas agregan los oyentes requeridos a los botones de la pantalla..
goButton: addEventListener ("tap", goButton) back: addEventListener ("tap", back) 
Si todo funciona como se espera, estamos casi listos para construir nuestra aplicación para la prueba de dispositivos. Solo una cosa más: el icono de la aplicación..
Al usar los gráficos que creaste antes de poder crear un ícono bonito y atractivo, el tamaño del ícono para el ícono del iPhone es 57x57px (114x114px para la pantalla de la retina del iPhone 4), pero la tienda iTunes usa una versión de 512x512px, así que es mejor crear tu ícono en este tamaño.
No es necesario que tenga las esquinas redondeadas o el brillo transparente, iTunes y el iPhone lo harán por usted..
La visualización del contenido web desde su aplicación evitará que los usuarios de su aplicación dejen su aplicación para acceder a un sitio web y, en general, crean una experiencia de usuario más agradable. Gracias por leer este tutorial. Espero que lo hayas encontrado útil.!
