App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando
-- Tutorial de iniciación de App Inventor 2 en español --
Volver al índice del tutorial
____________________________
294C.- Crear VisorWeb por código. Bajar archivo.
- Vamos a crear una extensión para obtener un VisorWeb por código.
______________________
- Bajar archivo.
- Además de poder crear un Visor Web por código, esta extensión también tiene un bloque para bajar archivos de internet, este bloque es independiente de los demás, es decir que podemos poner el bloque de DownloadFile, sin necesidad de crear un VisorWeb.
- Ver ejemplo al final de la página.
com.KIO4_CreateWebView.aix
Colabora en el mantenimiento de esta web.
- Si te gusta este sitio web y quieres colaborar en su mantenimiento, puedes donar unos 7€ o 7$ mediante este enlace de Paypal:
- Gracias por tu colaboración. |
________________________
1.- Crear un Visor Web desde código.
p194C_extension_CrearVisorWeb.aia
com.KIO4_CreateWebView.aix
________________________
- Diseño.
________________________
- Bloques.
________________________
- Comentarios.
- fit: adapta el tamaño de la página web al ancho de la pantalla.
- zoom: permite o no permite zoom. Para hacer zoom dejamos un dedo tocando la pantalla y movemos otro dedo sobre la pantalla.
- clickable: permite o no permite el funcionamiento de los enlaces.
- OnPageFinished: se activa cuando termina la carga de una página.
- pageHeight: tamaño vertical de la página cargada.
- WebViewString: se utiliza para trabajar con páginas activas de JavaScript.
- El bloque Zoom, realiza un zoom entre 0.001 y 100, pero se parte de la página se puede ocultar con otros componentes.
________________________________________________________________________
________________________
2.- JavaScript. WebViewString.
- Esto ya lo vimos en:
http://kio4.com/appinventor/166_javascript_pitagoras.htm
- Consiste en una página .htm con código en JavaScript que realizar una operación, en este caso el teorema de Pitágoras:
pitagoras.htm |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head><body>
<script>
datos = window.AppInventor.getWebViewString() ;
document.write("Datos recibidos: " + datos);
datos = datos + ":" ;
catetos = datos.split(":");
cateto1 = catetos[0];
cateto2 = catetos[1];
hipotenusa = Math.sqrt(Math.pow(cateto1, 2) + Math.pow(cateto2, 2)) ;
window.AppInventor.setWebViewString("Hipotenusa = " + hipotenusa); // La respuesta se envía directamente al Bloque CadenaDeWebView
document.write("<br /> Hipotenusa: <br />" + hipotenusa ); // Otra forma de enviar la respuesta. Con esta orden no hace falta Reloj.
document.write("<br><br><br><br><a href='http://kio4.com/appinventor'><b><font color'#009900'>KIO4.COM</font></b></a>");
</script>
</body></html>
|
- Mediante los bloques de WebViewString podemos enviar y recibir información de esa página, donde, en este caso está la resolución del teorema de Pitágoras.
- https://groups.google.com/forum/#!searchin/mitappinventortest/pitagoras%7Csort:date/mitappinventortest/gsHqd-cNyNM/TVYX1K_6BwAJ (en foro mit)
- Otros ejemplos de JavaScript en: http://kio4.com/appinventor/index.htm#javascript
________________________________________________________________________
________________________
3.- Vídeo con WebViewer.
- En este foro puse una manera de modificar el Archivo AndroidManifest.xml para que funcionara vídeo en un VisorWeb.
https://groups.google.com/forum/#!msg/mitappinventortest/aVPGacEOffE/qURKVY6LAgAJ (en foro mit)
- Ahora vamos a ver directamente vídeo en nuestro VisorWeb sin necesidad de cambiar el AndroidManifest. Es necesario que nuestro dispositivo tenga aceleración de vídeo.
- Creamos este archivo y lo subimos a la aplicación:
reproductor.htm |
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video - KIO4.COM</title>
</head>
<body>
<video id="medio" width="600" height="400" preload controls loop >
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" '>
</video>
</body>
</html> |
- En los bloques ponemos esta dirección:
file:///mnt/sdcard/AppInventor/assets/reproductor.htm
- En caso que vayamos a crear la instalación de la aplicación, cambiamos la dirección a esta otra:
file:///android_asset/reproductor.htm
________________________
- Zoom.
- Con este bloque podemos hacer un zoom de la página, su valor estará comprendido entre 0.01 y 100. Es un poco complicado de utilizar.
________________________________________________________________________
________________________
4.- Código en String.
p194C_extension_CrearVisorWebString.aia
com.KIO4_CreateWebView.aix
________________________
- Diseño.
________________________
- Bloques.
________________________
- Comentarios.
- Con este bloque podemos cargar una página web mediante su código HTML.
- Por ejemplo tenemos este código correspondiente a una página web.
- Cargamos esa cadena de caracteres en el bloque LoadHtmlString o en el CreateWebViewString.
|
<html><head><title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<center>
<p align="center"><font color="#FF0000" size="4" face="Arial"><b>Página realizada con código.</b></font></p>
<p align="center"><b><font color="#FF0000" size="4" face="Arial"><img src="https://christianflatearthministry.files.wordpress.com/2015/07/rotating-earth-1.gif" width="100" height="100"></font></b> </p>
<div align="center">
<table width="60%" border="2" cellpadding="10" cellspacing="0" bordercolor="#009900">
<tr>
<td width="54%"><b><font face="Arial">Tutoriales de App inventor </font></b></td>
<td width="46%"><font face="Arial"><a href="http://kio4.com/appinventor" target="_blank">http://kio4.com/appinventor</a></font></td>
</tr>
<tr>
<td><b><font face="Arial">Tutoriales de Arduino </font></b></td>
<td><font face="Arial"><a href="http://kio4.com/arduino" target="_blank">http://kio4.com/arduino</a></font></td>
</tr>
<tr>
<td><b><font face="Arial">Tutoriales de AutoIt </font></b></td>
<td><font face="Arial"><a href="http://kio4.com/autoit" target="_blank">http://kio4.com/autoit</a></font></td>
</tr>
</table>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/hs1FzKqE2nQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<div align="center"><img src="http://www.andalucia.org/media/fotos/image_152855_jpeg_800x600_q85.jpg" width="500" height="300">
</div><br>
<video id="medio" width="600" height="400" preload controls loop >
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" '>
</video>
</center>
</body>
</html> |
________________________
5.- Ejemplo. Bajar archivo.
p194C_extension_CrearVisorBajarArchivo.aia
- Además de poder crear un Visor Web por código, esta extensión también tiene un bloque para bajar archivos de internet, este bloque es independiente de los demás, es decir que podemos poner el bloque de DownloadFile, sin necesidad de crear un VisorWeb.
________________________
- Diseño.
________________________
- Bloques.
________________________
- Comentarios.
- url: dirección de internet donde está el archivo que queremos bajar.
- toDirectory: directorio a donde se bajará el archivo.
Si dejamos el cuadro en blanco, se guardará en /mnt/sdcard
Si ponemos un directorio, por ejemplo: /carpeta_de_bajada se guardará en ese directorio.
Si el directorio ya existiera anteriormente, se guardará en ese directorio.
Si el directono no existiera anteriormente, se creará ese directorio y se guardará en él el archivo.
- bytesDownloadedToFar: bytes que quedan por bajar.
- bytesToLoad: bytes totales del archivo.
- percent: porcentaje actual de la bajada.
- completed: es una variable booleana, cuando termina la bajada se pone en cierto.
- En el ejemplo bajaremos una imagen que está en:
http://appinventor.mit.edu/explore/sites/explore.appinventor.mit.edu/files/blog/ai-bee-horiz.png
y un archivo de 80 MB que está en:
http://appinv.us/aisetup_windows
- Se pueden bajar varios archivos al mismo tiempo, pero el bloque de evento de bajada conmutará entre una información y otra.
- Notificación.
Puedes ver el proceso de bajada mediante la Notificación.
___________________________
|