Tema 5: Tecnologías Web

Transcripción

1 Tema 5: Tecnologías Web Visor web en Android Depto. Ciencia de la Computación e IA

2 Puntos a tratar Creación de un visor web Propiedades del visor Comunicación aplicación-web Comunicación web-aplicación Vinculación con URLs 2

3 Visor web El visor web es una vista más que podemos incluir en la interfaz de las aplicaciones Se define de forma muy parecida en Android e ios WebView Nos permite incluir contenido rico de forma sencilla Podemos acceder a documentos web tanto locales como remotos El contenido se mostrará utilizando el motor del navegador nativo de casa dispositivo (Safari o Chrome) 3

4 Carga de una URL en Android Llamamos al método loadurl final WebView wbvisor = (WebView)this.findViewById(R.id.wvVisor); wbvisor.loadurl(" Acceso a contenido local en el directorio de assets wbvisor.loadurl("file:///android_asset/index.html"); Vincular con barra de progreso de la actividad getwindow().requestfeature(window.feature_progress);... wv.setwebchromeclient(new WebChromeClient() { public void onprogresschanged(webview view, int progress) { setprogress(progress * 100); } }); 4

5 Visualización de la página Página para móviles Se renderiza al tamaño de la pantalla No permite scroll horizontal No permite zoom Página no adaptada Se renderiza con la anchura que sea necesaria Se escala al tamaño de la pantalla Permite zoom y scroll horizontal 5

6 Escalar páginas no preparadas En Android se establece con propiedades independientes Todas ellas se establecen en un objeto WebSettings Evita que se pueda utilizar zoom Renderiza al tamaño necesario wbvisor.getsettings().setsupportzoom(false); wbvisor.getsettings().setusewideviewport(true); wbvisor.getsettings().setloadwithoverviewmode(true); Escala al tamaño de la pantalla 6

7 Barras de scroll en Android En páginas adaptadas al móvil la barra de scroll puede crear un efecto molesto: deja una barra blanca en el lateral Por ejemplo Página con jquery Mobile Scroll INSET Ocupa un espacio en la vista Deja un hueco blanco Scroll OVERLAY Se dibuja sobre la vista La página ocupa todo el área Establecer tipo de scroll INSET OVERLAY webview.setscrollbarstyle(webview.scrollbars_outside_overlay); 7

8 Movimiento en el historial El usuario puede navegar dentro del visor web pulsando sobre los enlaces (a no ser que lo impidamos) Tendremos un historial de navegación, y podremos navegar por él como en cualquier navegador Podemos volver atrás, o ir adelante Contamos con los mismos métodos en Android e ios goback goforward Podemos comprobar si se puede ir atrás o adelante (no se podrá si estamos en el última o en la primera página del historial) cangoback cangoforward if(wbvisor.cangoback()) { wbvisor.goback(); } 8

9 Comunicación aplicación-web Podemos invocar funciones Javascript del visor web <script type="text/javascript"> function mifuncionjavascript() { alert("hola mundo"); } </script> En Android podemos aprovechar el mismo método loadurl wbvisor.loadurl("javascript:mifuncionjavascript()"); En Android es importante activar previamente Javascript, ya que por defecto se encuentra desactivado en el visor web wbvisor.getsettings().setjavascriptenabled(true); 9

10 Comunicación web-aplicación (I) Debemos enviar un callback desde Javascript al código nativo Android nos proporciona una forma directa de hacer esto Podemos exponer una interfaz Java como objeto Javascript Definimos el objeto que queremos exponer La llamada desde Javascript no se realiza en el hilo de la UI class JavascriptCallbackInterface { public void temporizadorfinalizado() { runonuithread(new Runnable() { public void run() { final Button breset = (Button)findViewById(R.id.bReset); breset.setenabled(true); } }); } } 10

11 Comunicación web-aplicación (II) Exponemos el objeto en Javascript indicando el nombre que nos dará acceso a él (será una propiedad del objeto window) wbvisor.addjavascriptinterface( new JavascriptCallbackInterface(), "webview"); Llamamos al método Java definido anteriormente desde la interfaz Javascript <script type="text/javascript"> function fintemporizador() { window.webview.temporizadorfinalizado(); } </script> 11

12 Acceso a características nativas La comunicación bidireccional web-aplicación nos permitirá acceder desde componentes web a características nativas Base de datos, cámara, acelerómetro, notificaciones, etc Hay frameworks que aprovechan esto para permitirnos crear aplicaciones multiplataforma basadas en web Otros frameworks nos permiten construir aplicaciones multiplataforma en otros lenguajes 12

13 Vinculación con URLs Podemos lanzar aplicaciones mediante URLs La aplicación que se abra depende del tipo de URL Por ejemplo, al pulsar sobre URL de tipo http en Mail abre Chrome Tipos de URLs Tipo de URL HTTP Llamada telefónica Envío de SMS Mapas Google Youtube Ejemplo tel: sms:

14 Abrir aplicación a partir de una URL En Android lanzamos actividades mediante intents Se abre una actividad que sepa tratar el tipo de URL Puede ser una actividad no perteneciente a nuestra aplicación Si hay varias opciones, se pregunta al usuario Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(" startactivity(i); En Android una actividad se vincula a una URL definiendo un intent-filter en el AndroidManifest.xml 14

15 Preguntas...? 15