Modificación del interfaz de usuario existente

En primer lugar, en la pestaña Grupos de archivos, seleccionamos el archivo centralviewbase.ui, y KDevelop abrirá el diseñador. Lo primero que haremos es romper las disposiciones. Usted se preguntará, ¿romper las disposiciones? Sí, eso se hace para poder decir: "Deja de manejar las posiciones actuales de los elementos, porque vamos a añadir otros nuevos".

Pinche para seleccionar el widget principal, y después pinche en el icono de la barra de herramientas Break Layout (también disponible en el menú Layout). Ahora seleccione la caja de agrupación que contiene los deslizadores y rompa también la disposición de estos. Debe darse cuenta de que las dos disposiciones son independientes entre sí. La disposición del widget principal es una disposición vertical, que maneja m_label y la caja de agrupación, y la disposición de dicha caja, maneja las etiquetas y los deslizadores.

Si intenta añadir un elemento dentro de otro que tiene una disposición, se le preguntará si desea romper antes la disposición para poder añadirlo. Pero eso no debería ocurrir ahora puesto que hemos roto las disposiciones manualmente :).

Ahora que hemos roto la disposición, puede mover hacia arriba los deslizadores y las etiquetas para dejar espacio para el nuevo deslizador que añadiremos. Añada una etiqueta de texto Alfa: y un deslizador al que llamaremos m_alpha (que el usuario podrá utilizar para establecer el alfa u opacidad de la mezcla de colores) en la parte de abajo de la caja de agrupación. Cambie sus propiedades para que el rango de valores de m_alpha vaya de 0 a 100. Seleccione la caja de agrupación ...

... y pinche en la barra de herramientas para añadir una disposición de rejilla.

Ahora puede seleccionar el widget principal y añadir la disposición vertical.

Si queremos mejor todavía más el aspecto de nuestra aplicacióm, podemos añadir un botón KColorButton que utilizaremos como forma alternativa de selección del color mediante un diálogo de color estándar.

Selecciónelo y añádalo en la parte derecha de la caja de agrupación (pero dentro de ella). ¿Reconoce ese diálogo? Sí, está preguntando si se debe romper la disposición o cancelar la operación. Seleccionaremos romper la disposición y a continuación la volveremos a crear.

Podemos añadir una disposición de rejilla a la caja de agrupación tal y como está, y el diseñador lo colocará correctamente de forma automática, pero vamos a utilizar otra técnica con la intención de aprender algo más. Deseleccione cualquier widget que pudiera estar seleccionado, y pulsando la tecla “Ctrl” en el teclado, dibuje un rectángulo que cubra las etiquetas y los deslizadores (pero no la caja de agrupación entera, ni el KColorButton), de esa forma quedarán seleccionados. Una vez que tenga los 8 elementos seleccionados, pinche en la disposición de rejilla, y el diseñador generará una disposición de rejilla para eso elementos. Ahora esta disposición maneja a sus hijos, pero (aún) no está manejada por nadie, así que resulta un tanto inútil.

Para solucionarlo, seleccionaremos la caja de agrupación y añadiremos una disposición horizontal. Esta nueva disposición manejará la disposición de rejilla y el widget KColorButton, colocándolos uno junto al otro.

Note la diferencia existente entre seleccionar la caja de agrupación y añadir una disposición horizontal y seleccionar la disposición de rejilla y el KColorButton y añadir entonces esa disposición horizontal. En el primer caso, la disposición pertenecerá a la caja de agrupación, de forma que administrará las políticas de tamaño y (directa o indirectamente) a todos sus hijos. En el segundo caso, añadiremos una disposición horizontal independiente. Puede realizar pruebas de estas dos formas de actuar y utilizar la opción Preview Form para comprobar las diferencias que se produce al redimensionar la ventana.

Bien, ahora seleccionaremos el widget principal y añadiremos una disposición vertical y, de esta forma, hemos hecho que todos los elementos estén manejados por una disposición, que es la forma correcta de actuación (quizá debería decir que esta debe ser la forma correcta de actuación, para resaltar que es como hay que hacerlo para que las aplicaciones funcionen correctamente).

Esto podría ser suficiente para la mayor parte de la gente, pero no para nosotros. Queremos que el widget KColorButton (al que llamaremos m_colorButton) aumente hasta ocupar todo el espacio de la caja de agrupación. Para ello, le cambiaremos la política de tamaño. Seleccione m_colorButton y en el editor de propiedades, abra la sección sizePolicy y cambie vSizeType a Expanding.

Vaya, probablemente no era esto lo que queríamos. Hemos observado anteriormente que m_label tenía una política de tamaño de expansión (MinimumExpanding para ser precisos) mientras que la caja de agrupación no nos importaba (únicamente tenía una política Preferred). Ahora la caja de agrupación también se ha expandido porque la política de m_colorButton es Expanding (por lo que trata de ocupar el mayor espacio vertical posible), y m_label también, así que el sistema de disposición trata de darle a cada uno la mitad del espacio disponible, y eso no es lo que buscamos. ¿Hay una solución? Desde luego. En casos como este es posible darle a los elementos involucrados distintos factores de expansión para que a uno de ellos se le asigne más espacio que al otro en caso de que ambos quieran la mayor cantidad de espacio posible. Esto se hace gracias a la propiedad verticalStretch. Así que incrementaremos el valor de la propiedad verticalStretch de m_label para que éste sea más grande y se solucione el problema.

Bien, ahora que el aspecto vuelve a ser el correcto, podemos abrir el editor de slots y añadir dos nuevos, uno para el deslizador alfa (llamado setAlpha(int)) y otro al que se llamará cuando el usuario modifique el color en m_colorButton, al que llamaremos setColor(const QColor &).

Es hora de hacer las conexiones. No voy a volver a explicar cómo se hace, puesto que es muy sencillo. Tiene que conectar la señal valueChanged(int) de m_alpha con el slot setAlpha(int) del widget principal. No olvide conectar también la señal changed(const QColor &) de m_colorButton con el slot setColor(const QColor &) del widget principal.

Bueno, de momento ya es suficiente, así que guardaremos el archivo .ui, cerraremos el diseñador, compilaremos el resultado y lo llamaremos s6. Fíjese que, en este caso, no hemos hecho nada con KDevelop, únicamente hemos modificado el interfaz de usuario con el diseñador y el hecho de compilar sin haber cambiado nada nos da el nuevo interfaz de usuario (con el código anterior funcionando correctamente). Añadiremos el código del nuevo interfaz en el siguiente paso.