|     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
Translate:
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

____________________________

169CC.- JavaScript y Botones en una página web.

p169CC_javascript_botones.aia

- En una página web construida con JavaScript tenemos tres botones: Rojo, Verde y Azul.

- Cuando pulsamos alguno de ellos se envía información a la aplicación, según la respuesta recibida...

- sea rojo, verde o azul, cambiará el color del Texto de la Etiqueta2.

_________________
- Diseño.

- Subimos el archivo botones_js.htm

- En esta ocasión el VisorWeb debe ser Visible, ya que en él se mostrarán lo botones.

- Archivo botones_js.htm

- Pulsa para ver botones_js.htm

jbotones_js.htm

<!DOCTYPE html><html>
<head><meta charset="utf-8">
<script language="JavaScript">
function rojo(elemento)
{ window.AppInventor.setWebViewString("rojo"); }
function verde(elemento)
{ window.AppInventor.setWebViewString("verde");}
function azul(elemento)
{ window.AppInventor.setWebViewString("azul");}
</script>
</head>

<body>
<input name="Rojo" type="button" value="ROJO" onClick="rojo(this);" /><br><br>
<input name="Verde" type="button" value="VERDE" onClick="verde(this);" /><br><br>
<input name="Azul" type="button" value="AZUL" onClick="azul(this);" /><br><br>

</body></html>

- Para que no aparezca el icono de zoom, añade esta línea dentro del <head>:

<meta name = "viewport" content = "user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

_________________
- Bloques.

_________________
- Comentarios.

- Según el botón pulsado, el código JavaScript enviará información al bloque: CadenaDeWebView mediante la línea:

window.AppInventor.setWebViewString("azul");

_________________
- Botones con colores.

- Si queremos botones de colores podemos utilizar CSS.

botones_css_js.htm

- Para el tamaño de los elementos, en vez de poner 90pt podemos ponerlo en porcentaje 20%.

jbotones_css_js.htm

<!DOCTYPE html><html>
<head><meta charset="utf-8">
<script language="JavaScript">
function rojo(elemento)
{ window.AppInventor.setWebViewString("rojo"); }
function verde(elemento)
{ window.AppInventor.setWebViewString("verde");}
function azul(elemento)
{ window.AppInventor.setWebViewString("azul");}
</script>
<style>
.rojo {
float: left;
width: 90pt;
height: 33pt;
line-height: 40px;
border-radius: 4px;
cursor: pointer;
background-color: red;
text-align: center;
font-family: Arial, sans-serif;
color: white;
}
.verde {
float: left;
width: 90pt;
height: 33pt;
line-height: 40px;
border-radius: 4px;
cursor: pointer;
background-color: green;
text-align: center;
font-family: Arial, sans-serif;
color: white;
}
.azul {
float: left;
width: 90pt;
height: 33pt;
line-height: 40px;
border-radius: 4px;
cursor: pointer;
background-color: blue;
text-align: center;
font-family: Arial, sans-serif;
color: white;
}
.rojo:hover {
background-color: #FF69B4;
color: black;
}
.verde:hover {
background-color: #7CFC00;
color: black;
}
.azul:hover {
background-color: #87CEFA;
color: black;
}
</style>
</head>

<body>
<div id="input1" class="rojo" name="Rojo" type="button" value="ROJO" onClick="rojo(this);" />ROJO</div><br><br><br>
<div id="input2" class="verde" name="Verde" type="button" value="VERDE" onClick="verde(this);" />VERDE</div><br><br><br>
<div id="input3" class="azul" name="Azul" type="button" value="AZUL" onClick="azul(this);" />AZUL</div><br><br><br>

</body></html>

__________________________________

 

- 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