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
___________________________
160B.- Ordenar lista.
p160B_javascript_ordenar.aia
- Tenemos una serie de número separado por como y los vamos a ordenar mediante código JavaScript. Utilizaremos...
window.AppInventor.getWebViewString() para obtener los datos.
window.AppInventor.setWebViewString() para devolver el resultado.
También devolverá el resultado con esta otra línea...
document.write("Números ordenados: <br />" + lista);
_________________
- Diseño.
- Ponemos un VisorWeb, en esta ocasión está Visible, pero lo puedes poner no Visible. El VisorWeb no es necesario que se vea.
- Archivo calculo_directo.htm
calculo_directo.htm |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head><body>
<script>
var lista = eval('[' + window.AppInventor.getWebViewString() + ']');
// lista.sort(); // Ordenar palabras
lista.sort(function(a,b) { return a - b; }); // Ordenar números // return b - a, sale alrevés.
window.AppInventor.setWebViewString("" + lista); // La respuesta se envía directamente al Bloque CadenaDeWebView
document.write("Números ordenados: <br />" + lista); // Otra forma de enviar la respuesta.
</script>
</body></html>l>
|
_________________
- Bloques.
- Mientras estamos depurando el programa con App inventor dejamos la dirección que está puesta. Cuando lo vayamos a Generar para obtener el archivo de instalación .apk, previamente cambiamo la dirección del archivo a file:///android_asset/calculo.htm
_________________
- Comentarios.
- En esta ocasión se enviará los datos mediante VisorWeb.CadenaDeWebViewer.
- El código JavaScript tomará esos datos mediante: window.AppInventor.getWebViewString()
- Realizará la función de "ordenar" ("sort") y devolverá la lista ordenada mediante:
document.write("Números ordenados: <br />" + lista);
- El resultado de esta orden irá directamente a la página web.
- Además el código JavaScript también devolverá la lista ordenada mediante:
window.AppInventor.setWebViewString("" + lista);
- Las "" son para que intreprete la salida como cadena de caracteres.
- Esta última información la tomárá el código de App inventor mediante el Bloque: VisorWeb.CadenaDeWebViewer y la pondrá en la Etiqueta1.
_________________
_________________
_________________
_________________
_________________
2.- Otro código parecido para ordenar lista.
p169H_javascript_ordenar_lista.aia
______________________________________________
- Bloques.
ordenar_lista.htm |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head><body>
<script>
datos = window.AppInventor.getWebViewString().split(",") ;
resultado = datos.sort();
window.AppInventor.setWebViewString(resultado.toString());
document.write("<br><br><br><br><a href='http://kio4.com/appinventor'><b><font color'#009900'>KIO4.COM</font></b></a>");
// Juan Antonio Villalpando
</script>
</body></html>
|
- Los datos llegan así: 3, 2, 1, 7, 5, 4, 6, 9, 8
- .split(",") separa a cada uno por la coma y los introduce en su tabla datos.
- datos.sort() los ordena automáticamente.
- Se obtiene el resultado ordenado en la tabla resultado.
- La tabla resultado se pasa a Cadena de texto mediante resultado.toSting()
- Se envía a la aplicación mediante setWebViewString 1, 2, 3, 4, 5, 6, 7, 8, 9
- La aplicacion toma esa Cadena de texto y la pasa a una nueva tabla mediante el bloque: lista desde registro csv
________________________________________________
3.- Otro código para ordenar.
calculo.htm |
<!DOCTYPE html>
<html><body>
<script> var lista = eval('[' + window.AppInventor.getWebViewString() + ']');
// lista.sort(); // Ordenar palabras
lista.sort(function(a,b) { return a - b; }); // Ordenar números // return b - a, sale alrevés. window.AppInventor.setWebViewString(lista.toString());
</script>
</body></html>
|
__________________________________
|