DESARROLLO DE SISTEMAS DE INFORMACION

Curso: Entorno de Desarrollo de Aplicaciones Móviles Android I

Docente: Ing. Christian Nina Asto

App Inventor 2

TEMA: Conociendo los componentes básicos

1. INTRODUCCIÓN
Antes de comenzar se asume que el lector ha completado un curso de introducción
a App Inventor 2, lo cual será útil para realizar las distintas aplicaciones móviles.
Sin embargo, si no lo ha hecho se procurará revisar todos los principios
necesarios.

El desarrollo de un sistema no es mágico, se requiere habilidades que deben ser

dominadas; por ello iniciamos con conceptos fundamentales.

Es importante aprender acerca de App Inventor.

2. COMPETENCIAS DE LA GUIA

El estudiante al concluir la guía:

 Reconoce 3 componentes básicos para realizar una app

 Identifica propiedades y eventos.

3. MEDIOS Y MATERIALES:
 Computadora.
 Internet

1
 DESARROLLO DE SISTEMAS DE INFORMACION
Curso: Entorno de Desarrollo de Aplicaciones Móviles Android I
Docente: Ing. Christian Nina Asto

4. Desarrollo

Los componentes básicos se encuentran en la paleta de componentes en el

grupo de interfaz usuario, como se muestra a continuación:

4.1.Etiqueta(label)
Las etiquetas son componentes que se utilizan para mostrar texto.
Una etiqueta muestra el texto especificado en la propiedad Texto. Otras
propiedades, que se pueden establecer tanto en el diseñador como en el
editor de bloques, controlan la apariencia y la colocación de ese texto.

2
 DESARROLLO DE SISTEMAS DE INFORMACION
Curso: Entorno de Desarrollo de Aplicaciones Móviles Android I
Docente: Ing. Christian Nina Asto

Para el nombre de las etiquetas utilizaremos al inicio un prefijo de 3

caracteres en minúsculas lbl y luego el nombre al que hace referencia, por
ejemplo:

lblCantidad lblAlumno lblNota1 lblCorreo

4.2.Propiedades
 ColorDeFondo (BackgroundColor): Color
para el fondo de la etiqueta
 Negrita (FontBold): Si se establece, el texto
de la etiqueta se muestra en negrita.
 Cursiva (FontItalic): Se establece, el texto de
la etiqueta se muestra en cursiva.
 Tamaño de letra(FontSize): Tamaño en
puntos del texto de la etiqueta.
 TipoDe Letra (FontTypeface): Fuente del
texto de la etiqueta
 Alto(Height): Altura de la etiqueta
 Ancho(Width): Ancho de la etiqueta.
 Texto(Texto): Texto para mostrar en la
etiqueta.
 PosicionDelTexto(TextAlignment):
Alineamiento a la izquierda, centro o derecha.
 ColorDeTexto(TextColor): Color para el texto
de la etiqueta:
 Visible: Si esta activo, la etiqueta es visible o
no

4.3.CamposDeTexto (TextBox)
Los usuarios pueden introducir texto en un componente de cuadro de texto. El
valor del texto inicial o el que el usuario haya introducido en un componente
de cuadro de texto está en la propiedad Texto. Si Texto está en blanco,
puede utilizar la propiedad Hint para proporcionar al usuario una sugerencia
de lo que escribir. La sugerencia aparece como texto débil en el cuadro.
3
 DESARROLLO DE SISTEMAS DE INFORMACION
Curso: Entorno de Desarrollo de Aplicaciones Móviles Android I
Docente: Ing. Christian Nina Asto

Si el texto introducido por el usuario no se debe mostrar, usar

CampoDeContraseña (PasswordTextBox) en su lugar

Para el nombre de los campos de texto utilizaremos al inicio un prefijo

de 3 caracteres en minúsculas txt y luego el nombre al que hace
referencia, por ejemplo:

txtCantidad txtAlumno txtNota1 txtCorreoElectronico

4.3.1. Propiedades
 ColorDeFondo (BackgroundColor) El color
de fondo de la caja de entrada.
 Habilitado (Enabled) Cuando se selecciona,
el usuario puede introducir texto en el cuadro
de entrada.
 Negrita (FontBold) (exclusivamente en el
diseñador) Si se selecciona, la fuente para el
texto aparece en negrita. Por defecto, no
está seleccionado.
 Cursiva (FontItalic) (exclusivamente en el
diseñador) Si se selecciona el texto aparece
en cursiva. Por defecto, no lo hace.
 Tamaño de letra (FontSize)
(exclusivamente en el diseñador El tamaño
de la fuente para el texto. De forma
predeterminada, es de 14,0 puntos.
 TipoDeLetra (FontTypeface)
(exclusivamente en el diseñador) La fuente
para el texto.
 Alto (Height) Altura de la caja de texto.
 Width Ancho de la caja de texto

4
 DESARROLLO DE SISTEMAS DE INFORMACION
Curso: Entorno de Desarrollo de Aplicaciones Móviles Android I
Docente: Ing. Christian Nina Asto

 Pista (Hint) Si la propiedad Texto está

vacía, mostrará una sugerencia sobre
lo que el usuario debe ingresar.
 Multilínea (MultiLine) Si es verdad,
entonces este cuadro de texto acepta varias
líneas de entrada, que se introducen con la
tecla de retorno.
 SóloNúmeros (NumbersOnly) Si es verdad,
entonces se despliega exclusivamente el
teclado numérico, por lo que el usuario sólo
podrá entrar números, que pueden incluir
un punto decimal y un signo menos
opcional. Esto se aplica a la entrada del
teclado solamente.
 Texto (Text) El texto en el cuadro de
entrada, que se puede establecer por el
programador en el diseñador o el Editor de
bloques, o puede ser introducido por el
usuario.
 PosiciónDelTexto (TextAlignment)
(exclusivamente en el diseñador) El texto
puede ser justificado a la izquierda, centrado
o justificado a la derecha. De forma
predeterminada, el texto se justifica a la
izquierda.
 ColorDeTexto (TextColor) El color para el
texto. Usted puede elegir un color por su
nombre en el Diseñador o en el Editor de
bloques. El color de texto predeterminado es
negro.
 Visible Si es cierto, entonces el componente
es visible

5
 DESARROLLO DE SISTEMAS DE INFORMACION
Curso: Entorno de Desarrollo de Aplicaciones Móviles Android I
Docente: Ing. Christian Nina Asto

4.3.2. Eventos
 ObtenerFoco (GotFocus) Se dispara este evento cuando el cuadro
obtiene el foco, al tocarlo.
 PerdeFoco (LostFocus) Este evento se dispara cuando el cuadro
pierde el foco, por ejemplo, si el usuario toca un cuadro de texto
diferente.

4.3.3. Metodos
 OcultarTeclado (HideKeyboard)Oculta el teclado. Sólo los cuadros de
texto multilínea lo necesitan.

4.4.Botones
Los botones son los componentes que los usuarios utilizan para realizar
alguna acción en su aplicación. Los botones detectan cuando el usuario lo
pulsa. Muchos aspectos de la apariencia de un botón se pueden cambiar.

Para el nombre de los botones utilizaremos al inicio un prefijo de 3

caracteres en minúsculas btn y luego el nombre al que hace referencia,
generalmente una acción, por ejemplo:

btnCalcular btnSalir btnLimpiar btnSumar

4.4.1. Propiedades
 ColorDeFondo (BackgroundColor) Color de fondo
del botón.
 Habilitado (Enabled) Si está activado, el usuario
puede pulsar el botón para provocar la acción.
 Negrita (FontBold) Si está activado, el texto del
botón se muestra en negrita.
 Cursiva (FontItalic) Si está activado, el texto del
botón se muestra en cursiva.
 Tamaño de Letra (FontSize) Tamaño en puntos del
texto del botón.
6
 DESARROLLO DE SISTEMAS DE INFORMACION
Curso: Entorno de Desarrollo de Aplicaciones Móviles Android I
Docente: Ing. Christian Nina Asto

 TipoDeLetra (FontTypeface) Fuente (tipo de letra)

del texto del botón.
 Alto (Height) Altura del botón.
 Ancho (Width) Anchura del botón.
 Inagen (Image) Imagen para mostrar en el botón.
La imagen actuará como botón.
 Texto (Text) Texto para mostrar en el botón.
 PosicionDelTexto (TextAlignment) Alineamiento
del texto: Izquierda, centro o derecha.
 ColorDeTexto (TextColor) Color para el texto del
botón.

4.4.2. Eventos
 Click()Usuario pulsa y suelta el botón.
 Obtener Foco GotFocus()El botón es el elemento enfocado. Lo hemos
seleccionado con el dedo (pero mientras no lo soltemos, no es un clic).
 Perder Foco LostFocus()El botón dejó de ser el componente focalizado.

4.5.Paneles de Disposicion
Los paneles de disposición son contenedores que permiten organizar los
componentes que se encuentran en un determinado panel.
Los paneles de disposición pueden ser:

7
 DESARROLLO DE SISTEMAS DE INFORMACION
Curso: Entorno de Desarrollo de Aplicaciones Móviles Android I
Docente: Ing. Christian Nina Asto

 DisposiciónHorizontal: permiten colocar los componentes en forma

horizontal
 HorizontalScrollArrangement: permite colocar los componentes en
forma horizontal y si fuera necesario muestra una barra de
desplazamiento.
 DisposiciónTabular: permite colocar los componentes distribuidos en
columnas y registros.
 DisposiciónVertical: permite colocar los componentes en distribuidos en
forma vertical.
 VerticalScrollArrangement: permite colocar los componentes en forma
vertical y si fuera necesario muestra una barra de desplazamiento.

Utilizaremos estos paneles en el diseño para organizar nuestros componentes

y darle una mejor apariencia al diseño de la interfaz de nuestros proyectos.