Componente TFormTabsBar en Delphi (aplicaciones con interfaz de pestañas)
TFormTabsBar es un componente que ha llegado en la versión 12 de Delphi y que nos va a permitir generar nuestra aplicación con una interfaz basada en pestañas como patrón de diseño (además de otras opciones). Este componente del que ya he hablado anteriormente en la entrada que trataba los proyectos con Interfaz MDI. En esta ocación me voy a centrar en una característica que vimos de pasada en aquel artículo, pero que es aplicable a todas nuestras aplicaciones (no sólo las de interface MDI). Aunque posiblemente después de aquella entrada nos haya quedado la sensación de que sólo podemos sacarle partido en los formularios MDI (embarcadero ha creado de nuevo el soporte para este tipo de interface), este componente se puede usar también con aplicaciones SDI.
Para nosotros y de cara a nuestros proyectos, digamos que este componente nos facilita el trabajo de albergar multiples formularios en un interface de usuario basado en pestañas (el exponente más claro de esto son los navegadores actuales).
El componente implementa la interface IFormVisualManager y podemos ver los métodos aquí.
Digamos que hasta ahora ya podíamos conseguir un «interface basado en pestañas» en nuestras aplicaciones, con los componentes que tenemos en Delphi. Era posible, aunque ese comportamiento debíamos programarlo nosotros (usando por ejemplo un TPagecontrol) , pero la verdad es que con el TFormTabsBar se nos facilita mucho el trabajo. Realmente el componente está diseñado para que nos sea fácil utilizarlo y veremos en el ejemplo posterior que, el código necesario para conseguirlo es mínimo.
Para ello voy a utilizar un proyecto sencillo SDI de Delphi (con varios formularios) y veremos que convertirlo es rápido y sencillo. Las pocas propiedades con la que cuenta el control son sencillas y últiles. Diría que son las mínimas que necesita, para que el comportamiento sea el esperado.
La forma de utilizar el componentes es sencilla y al final de al entrada lo veremos funcionando en un vídeo, para que veáis que realmente es simple. Los pasos de forma esquemática en nuestro proyecto serían los siguientes:
- Añadir el componente a nuestro formulario principal y un panel (normalmente alineado alClient) donde vamos a «incrustar» (dockar) nuestros formularios.
- Asignar al main en su la propiedad VisualManager el nuevo componente TFormTabsBar.
- A medida que vamos creando los formulario de nuestra aplicación (como hasta ahora), basta con «añadirlos» al componente VisualManager (su referencia) utilizando el método AddForm.
- Para completar nuestra interfaz de pestañas sólo nos queda incrustar el formulario creado, utilizando el método Dock de los TCustomForm estandard de Delphi.
A continuación podeís ver que con estos simples pasos ya podemos conseguir el efecto que estamos buscando.
Os he comentado que el componente tienes pocas propiedades; La mayoría las podéis apreciar en la imagen superior, en la parte derecha, (y las comentaremos en el video del ejemplo). Las vamos a ver a continuación y también tenéis todos los detalles en la documentación del componente y en las novedades de la versión 12 (y también en los comentarios del código, aunque no sea uno de los lugares habituaes donde vamos a mirar…).
Las revisamos y las comentamos un poco (link a la documentación); Dentro de la propiedad TabOptions tenemos las opciones:
- Draggable: Nos permitirá arrastrar las pestañas utilizando el ratón para reordenarlas dentro del control.
- MarkInvisibleForm: Nos permite diferenciar las pestañas que están asociadas a formulario visibles y formularios ocultos (se muestran liegeramente ténues o apagadas). Además al pulsar la pestaña podemos volver a visualizar el formulario (metodo Show).
- ShowCloseButton: Permite visualizar el botón de cerrar en las pestañas. Además al cerrar la pestaña utilizando este botón, el componente se encarga de llamar al método Close del formulario asociado.
- ShowFormIcon: Permite visualizar los iconos asociados a los formularios (propiedad Icon) dentro de la pestaña asociada a cada formulario.
- ShowFormSystremMenu: Según la documentación, permite mostrar el menú de la ventana del sistema del formulario, con clic derecho o desde el icono (ambas opciones).
- ShowHintForTruncatedCaption: Permite que el componente muestre el Hint en la pestaña de forma automática mostrando el texto del Caption (título de la pestaña), si este es demasiado largo y no se puede visualizar completo (*1*).
Otras propiedades del del componente son:
- ShowTabsMenuButton: Muestra un botón especial para llamar a un menú emergente, donde están todos los títulos de las pestaña definidas y poder así activar rápidamente cada formulario asociado.
- TabMinWitdh/TabMaxWidth: Está relacionada con vista anteriormente (*1*) y permiten definir anchos mínimos y máximos para las pestañas.
Y por último comentar que el componente soporta los estilos VCL como era de esperar (lo podéis ver en el código y lo veremos en el ejemplo).
Y que también permite tener el foco y por lo tanto soporte de teclado para la nevagación (para eso debe tener el TabStop es True). En este caso, los usuarios pueden seleccionar, desplazarse por las pestañas y activarlas con las teclas [Enter] o [Space].
Incluye también soporte High-DPI.
Y hasta aquí esta entrada. Es corta, pero la verdad es que el componente, aunque potente, es bastante simple de utilizar y no tiene muchas opciones más. Os dejo el código del proyecto al final y pequeño vídeo donde se ve cómo utlizarlo y comento algunas cosas de funcionamiento visto en la entrada, que siempre con una imagen/video son mucha más claras.
<Código fuente del proyecto de ejemplo>
Un saludo y hasta la próxima.
Embarcadero MVP.
Analista y Programador de Sistemas Informáticos.
Estudios de Informática (Ingeniería Técnica Superior) en la UPC (Universidad Politécnica de Barcelona).
Llevo utilizando Delphi desde su versión 3. Especialista en diseño de componentes, Bases de Datos, Frameworks de Persistencia, Integración Continua, Desarrollo móvil,…
Hola, excelente, una pregunta como puedo hacer que al seleccionar por código un form ya creado, este se active incluyendo la pestaña correspondiente, logre que se active el form pero la pestaña activa es de otro form.
Espero explicarme bien.
Gracias
Hola Alejandro.
Revisa el ejemplo, la selección de las pestañas al activar el form es automática (cuando no están incrustadas).
Si están incrustadas, revisando un poco el código del componente, veo que tiene propiedades para acceder a las pestañas, aunque está definido como protected, definiendo una clase interpuesta puedes acceder a él. Te adjunto algo de código que te permite navegar por código por las pestañas creadas: