Programarea setarilor utilizator in KDE 3

Partea a-IV-a: Proiectarea paginilor de configurare

Un dialog tipic KDE are citeva iconite in stinga, o pagina (activa) in dreapta si citeva butoane in josul dialogului. Iata de exemplu dialogul de preferinte al KTouch:

Urmatoarea imagine va arata widget-ul corespunzator al paginii de configurare (creat in QT Designer):

Widget-ul din QT Designer arata o bara de titlu, dar cind widget-ul va fi inglobat in dialogul de configurare bara de titlu va disparea si va fi afisat doar continutul widget-ului.

Acum pagina de configurare va fi creata inaintea dialogului, ceea cea vom face si noi acum. In Kdevelop din selectati itemul "Fisier" -> "Nou" si selectati "Widget (.ui)". Dialogul cere un nume pentru noul widget si ar trebui sa introduceti "prefgenerallayout" FARA .ui (va fi adaugat automat). Citeva remarci cu privire la numele folosit.

• Numele fisierului incepe cu "pref" deoarece va fi parte al dialogului de preferinte
• In mijloc este "general" deoarece va fi pagina cu optiunile "Generale (General)"
• Si la final "layout" (aranjare grafica), deoarece noi vom aranja grafic cu QT Designer widget-ul si toata functionalitatea va fi scrisa intr-o clasa derivata din acest "layout"

Inainte de toate haideti sa continuam cu adaugarea fisierului .ui la proiect. Va fi afisat urmatorul dialog. Nu trebuie decit sa-l confirmati:

Dupa ce apasati "OK", QT Designer va deschide fisierul si veti avea un widget gol cu care va puteti juca.

Fara KDevelop:

Puteti de altfel sa deschideti QT Designer, sa creati un nou widget si sa il salvati in subdirectorul src cu numele prefgenerallayout.ui. Acum trebuie doar sa adaugati acest fisier in linia cu fisierele sursa din fisierul Makefile.am cum ati facut mai sus. Asta este ce face KDevelop pentru dumnevoastra.

Haideti sa schimbam citeva proprietati ale widget-ului:

1. name: PrefGeneralLayout
2. caption: General (este optional deoarece nu va fi folosit, dar va ajuta sa il observati mai usor printre alte widget-uri)

Acum incepeti prin a adauga citeva widget-uri in pagina. In exemplul nostru avem nevoie doar sa afisam un text, deci vom folosi widget-ul KLineEdit pentru a edita textul si QLabel pentru a afisa ce vrem sa editam. Mai puneti si un cadru in jurul optiunilor, ca sa arate frumos. Inainte de a fixa layout-ul, pagina ar trebui sa arate cam asa:

Citeva comentarii cu privire la numele widget-urilor:

• In general ar trebui schimbate doar numele widget-urilor care trebuie modificate mai tirziu (din cod), asa ca in cazul acesta vom modifica doar denumirea widget-ului KLineEdit.
• Numiti-le ca in cazul variabilelor membru, ar trebui compuse din continut si tip, asa ca pentru linia de editare propun m_textEdit. Asta bineinteles ca este o recomandare, dar daca urmati aceste simple conventii veti scuti timp cind cautati un nume de widget mai tarziu. Daca ar trebui sa schimbati continutul unui widget care ar trebui sa reprezinte proprietatea m_text si ne amintim ca acel widget este KLineEdit putem deja sa ghicim numele: m_text+Edit=m_textEdit. Poate in viitor KDevelop va avea o optiune de completare automata mai puternica, care ne va arata toate widget-urile, dar pina atunci conventia de mai sus va va ajuta.

Acum vom contura aranjarea in pagina (layout). Pentru mai multe informatii va recomand sa cititi documentatia QT, unde aranjarea in pagina este descrisa in detaliu. Trebuie sa ne decidem daca frame-ul ar trebui sa se mareasca cind widget-ul se mareste sau daca ar trebui sa se opreasca la o lungime minima pe verticala si spatiul de sub el sa se mareasca. Am decis sa pun un spatiator (spacer - obiect care spatiaza) sub cadru, asa ca daca se mareste pe verticala cadrul va sta la marime minima pe verticala. Iata in final procedura de a crea aranjarea:

1. clic dreapta pe cadru (frame) si alegeti "Lay Out Vertically" (cadrul se va micsora la minimul posibil)
2. inserati un spatiator (iconita in forma de resort) sub cadru
3. dati clic dreapta pe widget si alegeti "Lay Out Vertically" (cadrul va creste pe orizontala la maxim si spatiatorul va creste pina va umple spatiul ramas sub cadru).

Cu aceste setari ale aranjarii puteti crea foarte usor aranjamente mult mai complexe (incercati sa folositi facilitatea de previzualizare din QT Designer).

Mai este un singur lucru de facut. Cind ati adaugat un aranjamentul la widget ati observat ca au mai aparut doua proprietati noi in fereastra de proprietati (selectati widget-ul dind clic undeva unde nu este nimic, in afara cadrului). Trebuie sa setati proprietatea layoutMargin la 0, altfel widget-ul va avea o margine care nu va arata prea frumos in dialogul de preferinte. Pagina finala ar trebui sa arate cam asa:

Acum salvati widget-ul si inchideti QT Designer (in caz ca aveti mai multe instante ale QT Designer cu acelasi widget, aveti grija pe care il salvati).

Acum in KDevelop trebuie doar sa executati make (apasati butonul) si observati cum fisierul prefgenerallayout.h este generat automat din fisierul .ui (folosind programul uic) si un altul numit prefgenerallayout.cpp care va fi compilat.

Fara KDevelop:

Cind veti executa make dupa ce ati adaugat fisierul .ui in Makefile.am va fi generat automat noul antet si noul fisier sursa pe care va fi compilat. La fel cum ati apasa butonul de compilare din KDevelop.

Pentru practica (si pentru ca ne va folosi) mai adaugam inca o pagina de configurare numita prefstylelayout.ui si vom construi pagina (al carei nume va fi PrefStyleLayout) care va arata ca in urmatoarea imagine:

Cele trei widget-uri care le vom folosi mai tirziu sint:

1. Un KColorButton numit "m_colorBtn"
2. Un KPushButton numit "m_fontBtn"
3. Un QLabel numit "m_fontLabel"

Acum incercati sa realizati acest widget singuri (ar fi cel mai bine) sau urmati instructiunile de mai jos.

1. creati un cadru cu proprietatile frameShape=Box si frameShadow=Sunken
2. creati doua etichete QLabel in interiorul cadrului si ca text puneti "Text color:" si "Font:"
3. creati doua spatiatoare QSpacer orizontale pentru fiecare linie
4. setati "size policy" la cele din stinga la valoarea "fixed"
5. creati un KColorButton si numiti-l "m_colorBtn"
6. creati un KPushButton si numiti-l "m_fontBtn" si ca eticheta il setati la "Choose..."
7. aliniati etichetele, spatiatoarele si butoanele in rinduri si coloane (imaginati-va un tabel)
8. dati clic dreapta in cadru si alegeti "Lay Out in a Grid". Cadrul ar trebui sa se micsoreze si widget-urile ar trebui sa se aranjeze intr-un tabel. Daca nu s-a intamplat asa, dati clic dreapta pe cadru, selectati "Break Layout", rearanjati butoanele, spatiatoarele si etichetele si recreati aranjamentul in tabel, pina cind va arata bine.
9. mariti cadrul un pic, dupa care dati clic dreapta si alegeti "Break Layout"
10. adaugati o eticheta QLabel sub cele 8 widget-uri (care ar trebui sa fie deja aranjate frumos).
11. numiti eticheta "m_fontLabel" si schimbati-i urmatoarele proprietati
    • paletteBackgroundColor -> selectati alb
    • frameShape=Box
    • text="abcdefg ABCDEFH 0123456789" (sau ce doriti)
    • hAlign=AlignHCenter
12. mariti eticheta astfel incit sa fie la fel de lata cit widget-urile de deasupra la un loc
13. creati aranjamentul (layout-ul) in cadru inca o data
14. adaugati un spatiator vertical sub cadru
15. creati un aranjament vertical in widget
16. setati variabila layoutMargin la 0
17. salvati widget-ul

Dupa ce ati creat si pagina a doua puteti recompila proiectul (ar trebui sa rezulte fisierul prefstylelayout.h)

Inainte de a ajunge la partea in care vedem ceva, trebuie create doua clase PrefGeneral si PrefStyle, amindoua sint copiii aranjamentelor create in ultima parte. Puteti crea clasele folosind vrajitorul "New Class" (clasa noua).

si creati o clasa PrefGeneral (introduceti textul in linia de editare cu eticheta "name") care este o clasa fiu al QWidget (bifati optiunea din casuta de optiuni) si derivati-o din PrefGeneralLayout (introduceti textul in linia de editare cu eticheta "Base class").

Vrajitorul va genera doua fisiere: prefgeneral.h si prefgeneral.cpp.

#ifndef PREFGENERAL_H
#define PREFGENERAL_H

#include <qwidget.h>
#include <prefgenerallayout.h>

/// Aceasta este implementarea paginii "General options"
/// din dialogul de preferinte
class PrefGeneral : public PrefGeneralLayout {
    Q_OBJECT
  public:
    /// Constructorul implicit
    PrefGeneral(QWidget *parent, const char *name=0, WFlags f=0);
};

#endif  // PREFGENERAL_H

#include "prefgeneral.h"
#include "prefgeneral.moc"

PrefGeneral::PrefGeneral(QWidget *parent, const char *name, WFlags f)
 : PrefGeneralLayout(parent, name, f)
{
    // DE FACUT: initializarea widget-urilor
}

Fara KDevelop:

Creati manual cele doua fisiere (si salvati-le in subdirectorul src). Ca de obicei trebuie adaugat fisierul CPP in Makefile.am si ar trebui sa se compileze fara probleme.

Fisierele de mai sus arata foarte diferit de cele generate de vrajitor pentru ca am facut mici modificari:

• comentariile implicite au fost inlocuite cu ale mele
• am scos destructorul (nu ne foloseste)
• constructorul are argumente implicite pentru name si wflags
• fisierul "prefgeneral.moc" este inclus sus (vedeti lamuririle pe care le-am dat in partea I).

Acelasi lucru trebuie facut si cu PrefStyleLayout. Trebuie sa creati o clasa fiu cu numele PrefStyle. Puteti face acest lucru singuri sau folositi proiectul: settingstutorial-03.tar.gz