En aquest apartat veurem com fem el disseny gràfic de la finestra de l'aplicació. Ho farem amb l'ajuda de l'aplicació QT Designer.
El que hem de fer és, dins del QDevelop, fer doble clic sobre el nom del fitxer de diàleg que tinguem al nostre projecte. Així doncs fem doble clic sobre el fitxer mainwindow.ui i automàticament se'ns obrirà el QT Designer i esterem en disposició de modificar el disseny de la nostra aplicació:

El primer que farem serà canviar el nom de la finestra per un altre de més adient. Per fer-ho anem a l'editor de propietats i modifiquem la propietat windowTitle i hi fiquem (per exemple) Editor de text:

El següent pas serà crear els menús de l'aplicació. Volem que la nostra aplicació tingui els menús Fitxer, Edita i Ajuda, i alhora que per cadascun d'aquests menús hi tinguem un submenú.
El que hem de fer és anar a la finestra i clicar on hi posa Type Here i hi posem el nom que nosaltres vulguem, amb això aconseguirem crear un menú.
Per crear un altre element de menú cliquem al Type Here de la dreta i posem el nom; així fins que tinguem els tres menús creats.

Important:

Un cop tenim els menús creats, hem de crear el submenú per cadascun d'ells. Ho farem clicant sobre el nom del menú en qüestió i després clicant sobre el Type Here que se'ns desplega a sota.
Crearem els següents submenús:

• Per al menú Fitxer: Nou, Obre, Desa, Anomena i desa... i Sortir. Ficarem un separador entre Anomena i desa... i Sortir. Ens ha de quedar com en la següent imatge:

  

• Per al menú Edita: Retalla, Copia i Enganxa. Ens ha de quedar com en la següent imatge:

  

• Per al menú Ajuda: Quant a l'Editor i Quant a QT. Ens ha de quedar com en la següent imatge:

  

Ara que ja tenim els 3 menús creats, modificarem algunes propietats amb l'editor de propietats per cada ítem de cada menú. Una d'aquestes propietats és la de ficar una icona a cada element del menú, però per poder fer-ho abans hem de crear un recurs.

Els passos que hem de seguir per crear un recurs són els següents:

1. Fiquem la carpeta img que conté les icones dins el directori ~/qtapp/ui
2. Anem a l'editor de recursos de QT Designer i al desplegable escollim l'opció New tal com es mostra en la següent imatge:

   

3. Li fiquem el nom application.qrc
4. Premem sobre la creu per afegir un element i ens afegirà /new/prefix1 però hi farem doble clic i ho canviarem per /toolbar
5. Premem sobre el botó d'afegir fitxers i seleccionem tots els fitxers de la carpeta ~/qtapp/ui/img

Ara que ja tenim creat el nostre fitxer de recursos, anem a veure quines són les propietats que tenim que modificar per cada element dels tres menús que hem creat anteriorment.
A continuació veurem els passos per modificar les propietats per a l'ítem Nou del menú Fitxer. Per la resta ho farem de la mateixa manera.
Els passos són els següents:

1. Cliquem sobre l'element Nou per a tenir aquest element seleccionat i que se'ns mostrin les seves propietats.
2. Dins l'editor de propietats modifiquem:
   1. shortcut: ens serveix per accedir a l'acció de l'element mitjançant el teclat de manera ràpida. En el nostre cas un cop haguem clicat sobre la casella per canviar el valor, premem la compinació de tecles 'Ctrl.' + N
   2. statusTip: la nostra aplicació té una barra d'estat per mostrar informació. Doncs aquesta propietat ens permet mostrar el text que volem que hi aparegui quan s'executa l'acció escollida.
      Com que estem modificant la propietat de l'ítem Nou, voldrem que sota ens hi mostri el missatge Crea nou fitxer, així hi ficarem aquest missatge en el camp de valor de la porpietat statusTip.
   3. objectName: és el nom que utilitzarem quan vulguem accedir a ell a l'hora de fer la implementació de l'aplicació amb el QDevelop. Hi podem ficar qualsevol nom. En tot cas, hi fiquem actionNou.
   4. icon: ara que ja tenim el fitxer de recursos creat, podem assignar una icona per a aquest element del menú. Clicarem sobre i en la finestra de diàleg que se'ns obre, escollirem la icona que vulguem:

      

En la següent imatge podem veure les propietats que hem modificat:

Ara anirem repetint aquests passos en la resta d'ítems dels menús.

Un cop hem modificat les propietats de tots els ítems dels menús (10 en total), ja podem configurar la barra d'eines.
Quan hem creat cada ítem del menú, se'ns ha afegit dins l'apartat d'edició d'accions (Action Editor) un element, corresponent a cadascuna de les accions que es poden escollir del menú:

És a dir, com entre els 3 menús hi tenim 10 ítems, el resultat serà que tindrem 10 accions disponibles.
El que hem de fer per configurar la barra d'eines, és anar arrossegant cadascun d'aquests elements dins la barra d'eines en l'ordre que nosaltres vulguem i ficant separadors on creguem convenient:

Arribats a aquest punt on ja tenim creats els menús i la barra d'eines, el que tenim que fer és agregar a la nostra finestra una àrea de text.
Per fer-ho seleccionarem el widget Text Edit de l'apartat d'Input Widgets, l'arrossegarem fins la nostra aplicació i li modificarem la mida:

Com que volem que la zona del Text Edit que hem afegit es redimensioni si escanvia la mida de la finestra i volem que estigui ben disposat dins aquesta, farem clic en una zona que no sigui la del Text Edit i després seleccionarem l'opció del menú Forms -> Layout in a grid o clicarem al botó de la barra d'eines.

Ja tenim dissenyada la finestra del nostre editor!! Només ens resta desar els canvis per a que el QDevelop els tingui en compte.

En els següents apartats veurem la implementació necessària per a que l'aplicació esdevingui plenament funcional.

Nota:

En el disseny anterior no hem vist la funcionalitat de configurar Signals i Slots entre diferents widgets degut a que amb el QT Designer se'ns permet d'escollir com a Slots les accions pròpies del widget que recull el Signal, però com que volem que s'executin unes altres determinades accions, la "interconnexió" de Signals/Slots la farem a l'editar el codi font.
Però per mostrar un petit exemple de com afegir un Signal i un Slot, suposem que hem afegit un botó (widget Push Button) davall del Text Edit i volem que al clicar-lo s'esborri tot el text que contingui el Text Edit.

Un cop afegit el botó i canviat el text d'aquest, el que hem de fer és clicar al botó de la barra d'eines de QT Designer per a passar a mode d'edició de Signals/Slots. Ara seleccionarem el botó i sense deixar anar el ratolí seleccionarem el Text Edit.
Un cop fet se'ns obrirà una finestra com la següent, on a la llista de l'esquerra hi tenim els diferents Signals del botó i a la part dreta hi trobem els diferents Slots del Text Edit.
En el nostre cas com a signal seleccionarem clicked() i com a Slot clear(). Amb això li estarem dient que quan es faci clic al botó es netegi el text.

Aquesta acció no caldrà que la implementem, ja quedarà implementada pel propi QT Designer.

Josep Ramon Benet Bitrià
2008