|   FOROS      |     Tutoriales    |     KIO4 |      
   Inicio B4A (Basic4Android) App inventor 2 WAMP - PHP - MySQL
   Elastix - VoIP Cosas de Windows Webs interesantes Arduino
  Estación meteorológica Visual Basic Script (VBS) Translate:
Búsqueda en este sitio:


Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.

App inventor 2 en español
Cómo programar los teléfonos móviles con Android.
Ejemplos de App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

___________________________

Interfaz de usuario

6.- Vamos a manejar distintos controles y a trabajar con sus Propiedades.

p6_propiedades.aia

Podemos cambiar las Propiedades de un control en tiempo de Diseño o en tiempo de Ejecución.

En tiempo de Diseño sería cambiarlas en el panel derecho de Propiedades y en ejecución, cuando el programa está funcionando mediante los bloques.

- Si establezco por ejemplo el Texto de un Botón en rojo en las Propiedades y luego se puede cambiar mediante el código de bloques.

Vamos a crear un nuevo Proyecto llamado Propiedades.

Le ponemos cinco botones y una Etiqueta.
Cambiamos en tiempo de Diseño las Propiedades de la Etiqueta1, las ponemos como se indica a la derecha de la imagen.
Subimos este dibujo, mediante Medios / Subir archivo

En el Botón1, vamos a su Propiedad Imagen e introducimos el dibujo anterior para que el botón lo contenga.

Ponemos un Disposición / DisposiciónTabular1 de 3 columnas y 6 registros o filas. Es una tabla de 3 x 6, aunque no se ven los casilleros.
En ancho y el alto lo ponemos en Ajustar al contenedor, para que ocupe todo lo ancho y alto de la pantalla.
Introducimos los botones y el Label en cada una de las filas de la columna central, no se ven las delimitaciones pero es fácil de imaginar.

Debe quedar como esta imagen,,,

_________________
- Bloques.

- Cuando pulsamos el Botón1, cambia en tiempo de ejecución las Propiedades de la Etiqueta1.
- Cuando pulsamos el Botón2, se quita el Botón3 y se deshabilita el Botón4
- Cuando pulsamos el Botón5, se pone visible el Botón3, se habilita el Botón4 y se borra el texto de la Etiqueta1.

El Button tiene estos eventos:
(eventos son acciones que se pueden realizar: Click, ClickLargo, Pulsadoabajo, DejardePulsar,...)

Eventos del Botón

 

- Cuando hacemos Click

- Cuando el focus está en el botón, (El Focus es el elemento que está preparado para actuar)

- Cuando hacemos un Click largo, dejamos pulsado el ratón un par de segundos.

- Cuando el botón pierde el focus.

- Cuando dejamos el botón pulsado.

- Cuando levantamos dejamos de pulsar el botón.

Para aclarar algunos de estos eventos vamos a añadir a nuestro proyecto estos bloques...

- Estos bloques de color amarillo son eventos, es decir acciones que el Botón puede realizar.

___________________________________________________
- Cambio de color en un botón cuando es pulsado.

p6B_botones_de_colores.aia

- Baja estas imágenes a tu ordenador (Botón derecho / Guardar imagen como...)


- Si tienes un botón redondo, en las Propiedades del Botón, en la Propiedad Forma, establece redondeado.

- Si tienes problemas con el color de fondo del botón, entra en onlineimage y créale un fondo transparente

- En Ancho y Alto del Botón, establece los píxeles correspondientes.

- En el Diseño mediante Subir archivos, súbelos a la aplicación.

- En el Diseño, en cada botón en su Propiedad Imagen establece una imagen. Pon el tamaño de 150 pixel de Ancho.

- Borra todo en Texto de los botones.

- En los Bloques. En cada botón saca un TouchDown y un TouchUp.
- En cada Touch saca la Propiedad

- Cuando pulses el Botón cambiará su imagen y por tanto su color.

- De aquí puedes bajar muchos botones para tus proyectos: Botones.zip
- Puedes editar los botones para que tengan fondo transparente y se inserten mejor en la pantalla.

_________________________________________________
- Propiedades de la Etiqueta.

- Tanto el Botón como la Etiqueta tienen una serie de Propiedades que las podemos cambiar en tiempo de ejecución mediante el código de Bloques.

- A la Etiqueta le podemos poner, color de fondo, tamaño de letra, altura, texto, color de texto, visible, ancho.

- Diferencia entre

El primero toma el Texto que existe en la Etiqueta y lo pone en algún lugar.

El segundo se utiliza para tomar el valor del como y ponerlo en la Etiqueta.

__________________________________
- Códigos HTML en las Etiquetas.

- Se pueden poner códigos HTML, para ello en las Propiedades de la Etiqueta marcamos: HTMLFormat

- Crea un Botón y ocho Etiquetas (marcas en cada una HTMLFormat)

- Escribe este código:

__________________________________

 

- 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