Začíname KProgramovať - V

28. 2. 2003 | Ondrej Krsko | Programování | 9668×

Architektura Document-View: Menu, nástrojová lišta, hlavní okno, stavový řádek. Jednoduchý kreslící program.

Model Dokument - Pohľad

V tomto dieli sa zameriam na jednu metódu ako tvoriť aplikácie. Je pomenovaná "Document-View Model". Jedná sa o pomerne rozšírenú metódu. Možno ju už poznáte (Windows programátori napríklad z knižnice MFC od Microsoftu). Napriek tomu nezabudnem na ostatných a všetko pekne poporiadku vysvetlím.

Na začiatok trošku teórie. Ako príklad si vyberiem jednoduchý textový editor. Poskytuje užívateľské rozhranie na editáciu textu (to asi nikoho neprekvapí). Predstavme si, že vyzerá takto:

• Menu: poskytuje prístup ku väčšine funkcií ako napríklad otváranie súborov alebo vyhľadávanie v texte.
• Nástrojová lišta (toolbar): zrýchlený prístup k často používaným funkciám.
• Hlavný pohľad: priestor, kde je možné editovať text.
• Stavový riadok

Hlavný pohľad je najdôležitejšia časť celej aplikácie. Určuje, na čo sa aplikácia bude dať použiť (viete si určite predstaviť aj grafický editor s podobným rozdelením, tabuľkový procesor, internetový prehliadač, atď). Na veľa jednoduchších programov možno použiť už existujúci ovládací prvok (napríklad HTML prehliadač). Zväčša sa ale nevyhneme tvorbe nových tried. Často je možné skombinovať tieto dva prístupy dokopy a použiť dva rôzne pohľady.

Prečo sa ale celý model nazýva Document-View? Zrejme je už asi jasné, že bude existovať ešte jedna trieda - Document. Možno sa pýtate načo? Keby chcel užívateľ pracovať s dvoma rôznymi pohľadmi, možno vytvoriť dva oddelené pohľady. Čo ale v prípade, keď tieto dva pohľady majú byť synchronizované. Pri zmene v jednom pohľade by mal druhý dostať informáciu o nej a aktualizovať svoj obsah (jedná sa o pomerne častý program, napríklad HTML editor). Document-View architektúra to rieši rozdelením "problému" do dvoch tried:

• Dokument udržiava informácie o dátach a umožňuje pohľadom ich zmenu.
• Pohľad zobrazuje dáta a posiela dokumentu ich zmeny.

Využitím tried predpripravených KDE a Qt programátormi si uľahčíme veľa práce. Aj keď sa Vám teraz možno zdá zbytočné postupovať akousi okľukou cez Dokument, časom zistíte, že v zložitejších programoch tým len získate. Hoci na zobrazované dáta budete potrebovať len jeden pohľad, model Document-View Vás donúti použiť správny návrh tried. A ako vieme, dobre urobený návrh je často veľkým krokom k funkčnému a ľahko rozširovateľnému programu.

Vlastná trieda View

Všeobecných informácií by už bolo aj dosť, poďme radšej niečo vytvoriť. Potrebné bude naimplementovať potomka triedy QWidget a prepísať niektoré virtuálne metódy na spracovanie udalostí. Takisto vytvoríme niekoľko slotov, ku ktorým potom bude možné pristupovať cez menu. Na začiatku si treba premyslieť, s akým typom dát má aplikácia pracovať. Potom treba určiť, ako bude View zobrazovať údaje a ako ich bude Document ukladať a načítavať.

A teraz sa už konečne pustíme do programovania, aj keď nie tak celkom. Začiatok za nás spraví KDevelop. Vytvorte nový projekt typu "KDE Normal". Ja som ho pomenoval Serial2. Po dokončení generovania môžete porovnať vytvorené súbory a triedy s tými zo Serial1. Určite si všimnete, že Application Wizard nám vytvoril tri triedy:

• Serial2App: potomok triedy KMainWindow. Vytvorí celé užívateľské prostredie (menu, toolbar, statusbar, atď). V menu sú predpripravené všetky najčastejšie používané funkcie, ako Open, Save...
• Serial2Doc: dokument, tak ako som ho popísal vyššie. Pripravené sú napríklad metódy newDocument(), saveDocument(), atď.
• Serial2View: trieda odvodená od QWidget (aj keď predka možno zmeniť, ak to budete považovať za potrebné). Pripravené metódy sú napríklad getDocument() a print().

Skúste teraz program skompilovať a spustiť. Ak máte všetko správne nastavené, malo by sa zobraziť okno ako na obrázku (a to sme ešte nič nenapísali). Vyskúšajte viaceré položky z menu. Niektoré zatiaľ vôbec nereagujú, iné sú už pripravené ako napríklad otvorenie súboru.

Rozhodol som sa, že si vytvoríme jednoduchý program na kreslenie. (Je to akási obdoba Hello World programu pri vysvetľovaní Document-View architektúry). Najprv doprogramujeme všetko potrebné do triedy Serial2View. Zrejme budeme musieť sledovať:

• stlačenie tlačítka myši: virtuálna metóda mousePressEvent()
• pohyb myši tlačítka myši: virtuálna metóda mouseMoveEvent()
• uvoľnenie tlačítka myši: virtuálna metóda mouseReleaseEvent()

QPainter

Pozornosť si zaslúži aj trieda QPainter. Trieda ponúka optimalizované funkcie na grafické operácie, ktoré bude potrebovať pri práci s GUI. Dokáže kresliť všetko od bodov, čiar až po komplexné geometrické útvary. Tiež dokáže pracovať s textom. Medzi často používané funkcie patria:

• drawPoint(): funkcia vykreslí bod, ako parameter očakáva súradnice.
• drawPoints(): na vstupe dostane pole bodov.
• drawLine(): nakreslí čiaru podľa zadaných súradníc
• drawRect(): obdĺžnik.
• drawRoundRect(): parametre sú obdobné ako pri funkcii drawRect(). Posledné dva ale určujú polomer zaokrúhlenia.
• drawEllipse(): elipsa.

Všetky tieto funkcie očakávajú ako parametre integer. Farbu, hrúbku pera a ďalšie vlastnosti sa neodovzdávajú priamo pri volaní týchto funkcií. Zmeniť ich môžete pomocou špecializovaných metód, napríklad setPen().

Ďalšie funkcie umožňujú prácu s obrázkami. Spomeniem napríklad drawPixmap(), drawImage() a drawTiledPixmap(). Ďalšie informácie možno nájsť v dokumentácii. Písanie textov je možné vďaka funkcii drawText().

Obsluha udalostí

Otvorte serial2view.h a pridajte do neho tieto riadky: (samozrejme do deklarácie triedy Serial2View)

1. protected:
2. virtual void mousePressEvent( QMouseEvent );
3. virtual void mouseReleaseEvent( QMouseEvent * );
4. virtual void mouseMoveEvent( QMouseEvent * );
5. private:
6. bool mousePressed;

A do serial2view.cpp pridajte implementáciu troch metód:

1. void Serial2View::mousePressEvent( QMouseEvent *e )
2. {
3. mousePressed = true;
4. }
5.  
6. void Serial2View::mouseReleaseEvent( QMouseEvent *e )
7. {
8. mousePressed = false;
9. }
10.  
11. void Serial2View::mouseMoveEvent( QMouseEvent *e )
12. {
13. if (mousePressed)
14. {
15. QPainter paint( this );
16. paint.setPen( Qt::blue );
17. paint.drawPoint( e->x(), e->y() );
18. }
19. }

Program môžete spustiť. Určite si ale všimnete pár nedokonalostí. Ak napríklad okno zminimalizujete a potom znova obnovíte (jednoducho povedané, prinútite systém k prekresleniu plochy programu), nakreslený obrázok sa stratí.

Upravíme teda metódu mouseMoveEvent() tak, aby si pamätala, čo užívateľ nakreslil. Presnejšie povedané, začne spolupracovať s dokumentom, ktorý sa stará práve o takéto veci. V mouseMoveEvent() povie dokumentu o všetkých zmenách. V novej metóde paintEvent(), ktorá je vyvolaná pri potrebe prekresliť prvok sa zase dokumentu opýtame na aktuálne údaje a zobrazíme ich. Aby bol program "čistý", nenecháme počiatočnú hodnotu premennej mousePressed na náhodu a priradíme do nej false. V konštruktore si takisto odovzdáme ukazovateľ na dokument, inak by sme s ním nemohli pracovať. Všetky tieto zmeny si môžete stiahnuť tu (845 kB).

Nová metóda mouseMoveEvent() si zaslúži krátky popis. Riadok číslo 15 z predchádzajúceho výpisu je nahradený riadok:

15. QPainter paint( &doc->buffer );

Rozdiel je v parametri QPaintDevice. Pôvodne sme odovzdávali ako parameter samotný objekt Serial2View. Teraz je nahradený triedou KPixmap. Sem dokreslíme novú čiaru, a potom volaním bitBlt() skopírujeme celý jej obsah na Serial2View.

Použitím KPixmap sa objavil ďalší problém. Jeho veľkosť napevno nastavujem v Serial2Doc::newDocument(), čo nie je celkom správne. Jeho veľkosť sa musí prispôsobovať veľkosti okna. Musíme teda pridať ešte jednu metódu reagujúcu na zmenu veľkosti:

1. void Serial2View::resizeEvent ( QResizeEvent *e)
2. {
3. QWidget::resizeEvent( e );
4. int w;
5. if (width()>doc->buffer.width()) { w = width(); } else { w = doc->buffer.width(); }
6. // ak oblubujete skratene zapisy:
7. int h = height() > doc->buffer.height() ? height() : doc->buffer.height();
9. QPixmap tmp (doc->buffer);
10. doc->buffer.resize(w, h);
11. doc->buffer.fill( Qt::white );
12. bitBlt( &doc->buffer, 0, 0, &tmp, 0, 0, tmp.width(), tmp.height() );
13. }

Na začiatku zavolám obsluhu udalosti u predka. Potom vypočítam veľkosť obrázku. Ak sa okno zmenšuje, veľkosť obrázku sa nemení (aj keď časť obrázku nebude vidno). Ak sa veľkosť okna zväčšuje, treba prispôsobiť aj veľkosť bufferu. Vypočítane hodnoty sú uložené v premenných "w" a "h". Opäť môžete program spustiť a skontrolovať zmeny.

Nabudúce...

Nabudúce sa pozrieme na triedu Serial2Doc. Program bude schopný ukladať nakreslený obrázok a takisto aj otvárať existujúce z disku. Rozšírime ho o niekoľko jednoduchých funkcií (kresliť čiary je v dnešnej dobe trošku primálo.

Související články

Začíname KProgramovať - I
Začíname KProgramovať - II
Začíname KProgramovať - III
Začíname KProgramovať - IV

Odkazy a zdroje

KDevelop
Qt Designer

       

Komentáře

[misso]

myslite, ze Document View ma nejaku buducnost? nie je skor zaujimavejsie orientovanie sa na komponenty tak ako je to v Delphi, Kylixe alebo novom .NET ???

[pf]

Jak to presne myslite "orientovat se na komponenty"? Neco jako system - vezmu komponentu z palety, mrsku s ni na formular poklikam cosi a mam vysledek jaky (zrovna) chci?

[misso]

ano, presne tak. a komponenty su navyse znovupouzitelne, nie ako nejaky view alebo document.

[mato]

cafte, mam takyto problem: ked chcem v kdevelope vytovorit novy projekt a na konci sprievodcu novym projektom kliknem na create tak mi vypise nasledujucu hlasku: configure: error: Qt (>= Qt 3.0.2) (library qt-mt) not found. Please check your installation! For more details about this problem, look at the end of config.log. Make sure that you have compiled Qt with thread support! warning: Serial1 inherits unknown class 'QWidget' QWidget hasn't a reference. at /usr/share/kdoc/kdocHTMLutil.pm line 576, line 39. QWidget hasn't a reference. at /usr/share/kdoc/kdocHTMLutil.pm line 576, line 39. pritom som qt kniznicu aj nanovo instaloval. neviete mi poradit co to znamena. Mam Mandrake 8.2, KDE3, QT2 aj QT3. dik za radu.

[Jiří Hubka]

A nemenil jste kompilator napr. na verzi gcc3.x.x ?

[mato]

ale ano menil, pouzival som gcc-2.96, teraz pouzivam gcc-3.0 a g++-3.0, g++-2.96 mi vypisovalo chybove hlasky, ked som pouzival triedu ios_base.

[kmana]

Bude někdy pokračování ? Seriál je celkem povedený a přínosný

[Radim Burget]

Super, nejlepsi tutorial co sem cet... Co takhle v pristim dile nejak rozumne vysvetlit jak se pohybovat v refernecni prirucce KDE a jak hledat jine informace? Myslim, ze by to spousta zacatecniku ocenila.

[Vit]

Muzete mi prosim poradit ? Pouzivam SUSE 10. a tam v KDevelop neni moznost vyberu "KDE Normal", pouze "Application framework". Ten kdyz pouziji a pridam vse v clanku popsane, tak mi program na mys nereaguje a nic nekresli. Muzete mi poradit jakou verzi KDevelop pouzivate ? Pripadne jaky system ? Pripadne kde by se daly najit zdrojove kody aplikace Serial2 vcetne toho projektu najit ?

Zkousel jsem tento problem resit ale bezuspesne. Zrejme je problem uz v tom "Application framework" Ale nevim jaky.

[fany]

Ahojte mam problem s dokumentaciou ked dam search tak mi to vypise Cannot find htsearch executable. Ako som pochopil chyba mi nejaky balik ale neviem aky? Ake baliky by bolo dobre si nainstalovat aby som mal plne funkcnu dokumentaciu s vyhladavanim?