Las fichas o pestañas hace tiempo que se  utilizan en muchos programas informáticos. Podemos acceder a diferente información sin tener que abrir una nueva ventana simplemente hacemos clic en cada una de las fichas. Hoy todos los navegadores web utilizan este sistema para que podamos acceder a todas las páginas web que tengamos abiertas de una forma sencilla.

En ActivInspire podemos ver un ejemplo de uso de esto cada vez que abrimos un rotafolios.

Como ya expliqué en Curiosidades 1.5 tenía mucho interés en dedicar tiempo a crear un proyecto que explicaré en una próxima entrada y que pretendía que funcionase mediante tabs.

Este proyecto fue el primero en el que descubrí una serie de curiosidades que expliqué en Contener cualquier cosa, además de la solución adoptada.

Lo primero es crear un rectángulo sin contorno al que denomino súper-contenedor, el cual coloco en la parte inferior de la página como se muestra en la imagen.


En el Explorador de propiedades en la categoría Contenedor cambio la propiedad Puede contener=Cualquier cosa.

Ahora con la herramienta Figura dibujo un rectángulo redondeado que luego coloco sobre el súper-contenedor.


Nuevamente con la herramienta Figura dibujo un rectángulo que luego colocaré en el súper-contenedor en la parte inferior del rectángulo redondeado.


Como se aprecia en la imagen ya tenemos creada la forma de la pestaña.

Selecciono estos dos últimos rectángulos y en Explorador de propiedades en la categoría Contenedor cambio la propiedad Puede contener=Cualquier cosa.

Ahora con la herramienta Texto escribo un nombre para la pestaña y lo llevo hasta colocarlo encima del rectángulo redondeado.


Ya tenemos terminada la estructura de la pestaña.

Mi idea era que las fichas ocupasen poco espacio en la página por eso las coloqué en la parte inferior y que mostrasen la información que contienen de una forma automática. Lo que se me ocurrió fue el utilizar acciones para que cuando hiciese clic en la pestaña  me mostrara su contenido y haciendo clic en otro lugar se ocultase.

Para poder realizar esto, es necesario saber dos datos, el primero, la posición Superior que ocupa el súper-contenedor y el segundo dato, la posición Superior que ocupa ese mismo objeto si lo desplazamos hacia la parte inferior de la página para que sólo deje ver el rectángulo redondeado.

Esta información es fácil de obtener en el Explorador de propiedades en la categoría Posición. En mi caso el primer dato sería 560 y el segundo 730.

Seleccionamos el rectángulo redondeado y en el Explorador de acciones buscamos en las Acciones de objeto la denominada Colocar arriba.

En las Propiedades de acción y = 560 y como Objetivo = Figura1 el súper-contenedor. Aplicar cambios.

Haremos lo mismo para el cuadro de texto con los mismos valores.

A continuación realizamos la misma operación para el rectángulo (no el súper-contenedor) pero con y=730 y como Objetivo = Figura1. Aplicar cambios.

Ahora simplemente haremos clic en cualquier parte del rectángulo y la pestaña se moverá hacia abajo y si hacemos clic en el rectángulo redondeado, volverá hacia arriba.

video

Ahora debemos seleccionar el súper-contenedor y vamos al Explorador de propiedades en la categoría Relleno seleccionamos la propiedad Estilo=Ninguno. Así evitamos que se muestre y la pestaña seguirá funcionando, ya solo queda seleccionar todos los objetos de la pestaña y duplicarla cuantas veces necesitemos.

video

Sólo queda personalizar cada ficha editando el texto, cambiando el color de relleno y poniendo la información adecuada en cada una de ellas.

Deja un comentario