App Inventor

Tabla Periódica

(App Inventor)

Diseño

Screen1:

Creamos un proyecto de nombre "tablaperiódica"

Para el título se introduce una posición vertical y dentro una etiqueta con el nombre, en este caso `` Tabla Periódica ´´.Abajo se mete una posición horizontal para poder colocar las columnas en horizontal.

Dentro de la disposición horizontal se introducen tantas disposiciones verticales como se necesite, en este caso para hacer la tabla son 18. Dentro de estas disposiciones se va metiendo botones con su tamaño,color,forma y nombre correspondiente. Hay columnas que necesitan un espacio,para esto se ponen etiquetas con una altura detreminada y vacias.

Nuestras medidas han sido:

Propiedades

Componentes

• DisposiciónTitulo

• DispHorizontalCentro: 3
• DispVertical : Arriba
• ColorDeFondo : Ninguno
• Alto : Automático...
• Ancho : Ajustar al contenedor...
• Imagen : Ninguno...

• EtiquetaTitulo

• Negrita : No
• Cursiva : No
• Tamaño de letra: 34
• Alto: Automático...
• Ancho : Automático...
• Texto : Tabla Periódica
• PosiciónDelTexto : izquierda: 0
• ColorDeTexto : Negro

Propiedades

Componentes

• DisposicionTabla

• DispHorizontal : Izquierda : 1
• DispVertical : Arriba : 1
• Alto : Automático...
• Ancho : Automático...

• DispHorizontal : Izquierda : 1
• DispVertical : Arriba : 1
• Alto: Automático...
• Ancho : Automático...

• DisposicionesVerticales

• ColorDeFondo : Naranja/Azul/Verde/Gris/Violeta
• Tamaño de letra : 14.0
• Alto : Automático...
• Ancho : 43 pixels...
• Texto: (elemento)
• PosiciónDelTexto : Centro : 1

• Botones

• TinyBD1

Screen2:

Introducimos una disposición horizontal y le ponemos de texto "Información". Luego añadimos una etiqueta como separador y una gran disposición horizontal. En esta disposición metemos dos disposiciones verticales: en una ponemos siete etiquetas con la información de cada elemento y en la otra siete etiquetas vacías en las que se pondrán los datos numéricos según el elemento señalado. Por último, añadimos una disposición horizontal en la que ponemos el botón atrás para volver a Screen1.

Las medidas han sido:

Propiedades

Componentes

• DispHorizontal: Centro : 3
• DispVertical : Arriba : 1
• ColorDeFondo: Blanco
• Alto : Automático...
• Ancho : Ajustar al contenedor...

• DisposiciónTitulo

• EtiquetaTitulo

• Tamaño de letra : 44
• Alto : Automático...
• Ancho : Automático...
• PosiciónDelTexto : izquierda : 0
• ColorDeTexto : Negro

• Separador

• Alto : 7 pixels...
• Ancho : Automático...
• Texto : Vacío

Doble clic pa

Propiedades

Componentes

• DispHorizontal: Izquierda : 1
• DispVertical : Arriba : 1
• Alto : Automático...
• Ancho: Ajustar al contenedor...

• DisposiciónHorizontal

• DispHorizontal : Izquierda : 1
• DispVertical : Arriba : 1
• Alto : Automático...
• Ancho : Automático...

• DisposiciónVertical1

• DispHorizontal : Centro : 3
• DispVertical : Arriba : 1
• Alto : Automático...
• Ancho : Ajustar al contenedor...

• DisposiciónVertical2

Componentes

Propiedades

• Etiquetas1

• Tamaño de letra: 24
• Alto : Automático...
• Ancho : Automático...
• Texto : Nombre/Simbolo/Masa atómica/ Número atómico/Estado/Tipo/ Número oxidación.
• PosiciónDelTexto : izquierda : 0
• ColorDeTexto : Negro

• Etiquetas2

• Tamaño de letra: 24
• Alto : 10 percent...
• Ancho : Ajustar al contenedor...
• Texto : Vacío
• PosiciónDelTexto: centro : 1

• BotonAtras

• Tamaño de letra: 14
• Alto: Automático...
• Ancho: Automático...
• Forma : redondeado
• Texto: ATRAS

Bloques

Screen1:

Creamos una lista vacía llamada tabla. En esta tabla ponemos todos los elementos y su información. Luego guardamos toda la tabla en tinyBD y ponemos un valor para cada botón. Al pulsar un botón saldrá la información del elemento deseado ya que está guardada en la tinyBD.

Screen2:

Ponemos que cuando bontón atras se pulse se vaya directamente a la tabla periódica. Después ponemos cada respuesta de la información asociada con la tinyBD para guardar dicha información. Así se verá reflejada en cada etiqueta vacía que pusimos.

Realizado por: Jaime Polo Arenas. Rafael Emilio Pérez López.