Tutoriales

Propiedades genéricas de Componentes Básicos

X e Y

Estas propiedades permiten elegir la ubicación del componente en la pantalla de forma exacta utilizando los ejes X e Y. El punto de partida, con valores X: 0 e Y: 0, es la esquina superior izquierda.

Modificando el valor X movemos a la derecha o izquierda el componente y modificando el valor Y subimos o bajamos el componente por la pantalla.

Se puede modificar por pixeles (px) o por porcentaje (%) según la pantalla.

Para modificar el valor podemos introducir el valor numérico, modificar haciendo clic en las flechas o usando la rueda del ratón mientras tenemos el puntero sobre la opción.

Ancho y Alto

Estas propiedades permiten fijar el tamaño del componente, seleccionando el alto y el ancho. Se puede modificar por pixeles o por porcentaje según la pantalla.

Para modificar el valor podemos introducir el valor numérico, modificar haciendo clic en las flechas o usando la rueda del ratón mientras tenemos el puntero sobre la opción.

Mostrar

Marcando esta opción hacemos visible el componente o invisible al desmarcarla. Aunque el componente no esté visible, seguirá apareciendo en la lista de componentes y podrá programarse.

Propiedades y bloques de programación de Componentes Básicos

Este componente tiene varias propiedades genéricas que hemos visto al principio del glosario: X e Y, Ancho/Alto, Transparencia y Mostrar.

Y otras propiedades específicas que veremos a continuación: Esquinas, Borde, Relleno, Imagen fondo, Modo fondo, Deshabilitado, Texto, Fuente, Tamaño del texto, Color del texto, Alineación, Negrita/Cursiva/Subrayado, Animación clic y Sombra.

Esquinas

Esta propiedad permite redondear las esquinas del componente eligiendo un valor entre 0 y 100, cuanto mayor es el valor, más redondeadas serán las esquinas del componente.

Para modificar el valor podemos introducir el valor numérico, modificar haciendo clic en las flechas o usando la rueda del ratón mientras tenemos el ratón sobre la opción.

Relleno

Esta propiedad permite establecer el color de fondo del componente.

Modo fondo

Esta propiedad permite elegir cómo usar la imagen de fondo del componente: Inicial, Contenedor, Cubrir, Estirar, Repetir.

Deshabilitado

Esta propiedad marcando esta opción el componente será visible, pero no clicable. Es decir, no se podrá interactuar con él hasta que se programe que esté habilitado. Si no está marcada se verá y además se podrá pulsar sobre él.

Texto

Esta propiedad permite establecer el texto que aparece en el componente.

Fuente

Esta propiedad permite seleccionar la fuente del texto del componente.

Tamaño del texto

Esta propiedad permite elegir el tamaño del texto del componente.

Para modificar el valor podemos introducir el valor numérico, modificar haciendo clic en las flechas o usando la rueda del ratón mientras tenemos el ratón sobre la opción.

Color del texto

Esta propiedad permite establecer el color del texto del componente.

Alineación

Esta propiedad permite seleccionar la alineación del texto del componente. Margen izquierdo, centrado o margen derecho.

Negrita/Cursiva/Subrayado

Marcando estas opciones podemos hacer que el texto del componente tenga formato negrita, cursiva o subrayado, según las opciones que marquemos.

Animación clic

Esta propiedad permite seleccionar qué animación tiene el botón al pulsarlo: Transparencia o Pulsación.

Este componente tiene varios bloques de programación asociados.

Cuando Botón (bloque de inicio de evento)

Este bloque se utiliza para ejecutar una serie de instrucciones al producirse un evento en ese componente: hacer clic, clic largo, presionar o soltar. Elegimos en el primer desplegable qué componente programamos y en el segundo cuál va a ser el evento para que se ejecute.

Poner Botón (bloque para establecer valores)

Este bloque permite fijar los valores de las propiedades del componente. Se selecciona qué propiedad se quiere modificar desde el desplegable y se puede añadir el valor arrastrando un bloque hasta el hueco que hay después de como o pulsar en el hueco y elegir uno de los bloques sugeridos.

Parámetros (bloque de obtención de parámetros)

Este parámetro permite conocer el valor de las distintas propiedades del componente (por ejemplo, saber el color de relleno de un botón).

Este componente tiene varias propiedades genéricas que hemos visto al principio del glosario: X e Y, Ancho/Alto, Transparencia y Mostrar.

Y otras propiedades específicas que veremos a continuación: Relleno, Imagen fondo, Texto, Fuente, Tamaño del texto, Color del texto, Alineación y Negrita/Cursiva/Subrayado.

Relleno

Esta propiedad permite establecer el color de fondo del componente.

Imagen fondo

Esta propiedad permite establecer una imagen como fondo del componente. Podemos elegir una imagen que hayamos subido como recurso o escribir una URL.

Texto

Esta propiedad permite establecer el texto que aparece en el componente.

Fuente

Esta propiedad permite seleccionar la fuente del texto del componente.

Tamaño del texto

Esta propiedad permite elegir el tamaño del texto del componente.

Para modificar el valor podemos introducir el valor numérico, modificar haciendo clic en las flechas o usando la rueda del ratón mientras tenemos el ratón sobre la opción.

Color del texto

Esta propiedad permite establecer el color del texto del componente.

Alineación

Esta propiedad permite seleccionar la alineación del texto del componente. Margen izquierdo, centrado o margen derecho.

Negrita/Cursiva/Subrayado

Marcando estas opciones podemos hacer que el texto del componente tenga formato negrita, cursiva o subrayado, según las opciones que marquemos.

Este componente tiene varios bloques de programación asociados.

Poner Texto (bloque para establecer valores)

Este bloque permite fijar los valores de las propiedades del componente. Se selecciona qué propiedad se quiere modificar desde el desplegable y se puede añadir el valor arrastrando un bloque hasta el hueco que hay después de como o pulsar en el hueco y elegir uno de los bloques sugeridos.

Parámetros (bloque de obtención de parámetros)

Este parámetro permite conocer el valor de las distintas propiedades del componente (por ejemplo, saber el color de relleno).

Este componente tiene varias propiedades genéricas que hemos visto al principio del glosario: X e Y, Ancho/Alto, Transparencia y Mostrar.

Y otras propiedades específicas que veremos a continuación: Esquinas, Borde, Imagen fondo, Modo fondo, Rotación, Clicable y Sombra.

Esquinas

Esta propiedad permite redondear las esquinas del componente eligiendo un valor entre 0 y 100, cuanto mayor es el valor, más redondeadas serán las esquinas del componente.

Para modificar el valor podemos introducir el valor numérico, modificar haciendo clic en las flechas o usando la rueda del ratón mientras tenemos el ratón sobre la opción.

Borde

Esta propiedad permite seleccionar el grosor del borde del componente eligiendo un valor entre 0 y 100, cuanto mayor es el valor, más ancho es el borde del componente. También permite elegir el color de ese borde pulsando en el cuadrado de color.

Para modificar el valor podemos introducir el valor numérico, modificar haciendo clic en las flechas o usando la rueda del ratón mientras tenemos el ratón sobre la opción.

Imagen fondo

Esta propiedad permite establecer una imagen como fondo del componente. Podemos elegir una imagen que hayamos subido como recurso o escribir una URL.

Modo fondo

Esta propiedad permite elegir cómo usar la imagen de fondo del componente: Inicial, Contenedor, Cubrir, Estirar, Repetir.

Clicable

Marcando esta opción el componente se podrá clicar y programar qué pasará al hacer clic sobre él. Este componente tiene esta propiedad deshabilitada, por lo que si queremos usarla, la tenemos que habilitar previamente en las propiedades o programarla.

Sombra

Activando esta opción el componente tendrá sombra.

Este componente tiene varios bloques de programación asociados.

Cuando Imagen (bloque de inicio de evento)

Se utiliza para ejecutar una serie de instrucciones al hacer clic sobre ese componente. Elegimos en el desplegable qué imagen programamos.

Poner Imagen (bloque para establecer valores)

Este bloque permite fijar los valores de las propiedades del componente. Se selecciona qué propiedad se quiere modificar desde el desplegable y se puede añadir el valor arrastrando un bloque hasta el hueco que hay después de como o pulsar en el hueco y elegir uno de los bloques sugeridos.

Parámetros (bloque de obtención de parámetros)

Este parámetro permite conocer el valor de las distintas propiedades del componente (por ejemplo, saber cuál es la imagen de fondo).

Este componente tiene varias propiedades genéricas que hemos visto al principio del glosario: X e Y, Ancho/Alto, Transparencia y Mostrar.

Y otras propiedades específicas que veremos a continuación: Esquinas, Borde, Vídeo, Autoplay y Sombra.

Esquinas

Esta propiedad permite redondear las esquinas del componente eligiendo un valor entre 0 y 100, cuanto mayor es el valor, más redondeadas serán las esquinas del componente. 

Para modificar el valor podemos introducir el valor numérico, modificar haciendo clic en las flechas o usando la rueda del ratón mientras tenemos el ratón sobre la opción.

Borde

Esta propiedad permite seleccionar el grosor del borde del componente eligiendo un valor entre 0 y 100, cuanto mayor es el valor, más ancho es el borde del componente. También permite elegir el color de ese borde pulsando en el cuadrado de color.

Para modificar el valor podemos introducir el valor numérico, modificar haciendo clic en las flechas o usando la rueda del ratón mientras tenemos el ratón sobre la opción.

Vídeo

Esta propiedad permite establecer un vídeo como componente. Podemos elegir un vídeo que hayamos subido como recurso o escribir una URL.

Autoplay

Marcando esta opción el componente se activará solo al iniciar la aplicación y se reproducirá en bucle. Si no se marca esta opción tenemos que programar cómo se activará.

Sombra

Activando esta opción el componente tendrá sombra.

Este componente tiene varios bloques de programación asociados.

Poner Vídeo (bloque para establecer valores)

Este bloque permite fijar los valores de las propiedades del componente. Se selecciona qué propiedad se quiere modificar desde el desplegable y se puede añadir el valor arrastrando un bloque hasta el hueco que hay después de como o pulsar en el hueco y elegir uno de los bloques sugeridos.

Parámetros (bloque de obtención de parámetros)

Este parámetro permite conocer el valor de las distintas propiedades del componente (por ejemplo, saber si está activo).

Propiedades y bloques de programación de la pantalla

Relleno

Esta propiedad permite establecer el color de fondo del componente.

Modo fondo

Esta propiedad permite elegir cómo usar la imagen de fondo del componente: Inicial, Contenedor, Cubrir, Estirar, Repetir.

Orientación

Gracias a esta propiedad podemos seleccionar cómo queremos configurar la orientación de la pantalla, en horizontal o vertical.

Habilitar Scroll horizontal/vertical

Marcando esta propiedad habilitamos el scroll horizontal o vertical, según la casilla que marquemos. Por defecto, al abrir un nuevo documento de Bitbloq Apps aparece habilitado el scroll vertical. Si queremos modificarlo o habilitar también el horizontal se puede hacer desde el apartado Propiedades o programándolo. Esta propiedad es útil cuando necesitamos más espacio para colocar los componentes en la interfaz. En la aplicación podemos mover la pantalla pulsando y arrastrando.