|
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" />
IMPORTANTE, ACTUALIZACIÓN: actualmente para obtener la url no se utiliza las direcciones indicadas en la imagen, se utiliza:
url: http://localhost/botones_js.htm
url: http://localhost/botones_css_js.htm
_________________
- 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>
|
_________________
- Botón movible.
__________________________________
|
