|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
  AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Cosas de Windows Webs interesantes
T Búsqueda en este sitio:


.

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&iacute;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&aacute;gina realizada con c&oacute;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.

___________________________

 

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información