). Predstavme si, že vyzerá takto:Portál AbcLinuxu, 17. května 2024 22:19
Architektura Document-View: Menu, nástrojová lišta, hlavní okno, stavový řádek. Jednoduchý kreslící program.
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:
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:
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.
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:
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...newDocument(), saveDocument(),
atď.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ť:
mousePressEvent()mouseMoveEvent()mouseReleaseEvent()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ícdrawRect(): 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().
Otvorte serial2view.h a pridajte do neho tieto riadky:
(samozrejme do deklarácie triedy Serial2View)
protected:virtual void mousePressEvent( QMouseEvent );virtual void mouseReleaseEvent( QMouseEvent * );virtual void mouseMoveEvent( QMouseEvent * );private:bool mousePressed;A do serial2view.cpp pridajte implementáciu troch
metód:
void Serial2View::mousePressEvent( QMouseEvent *e ){mousePressed = true;}void Serial2View::mouseReleaseEvent( QMouseEvent *e ){mousePressed = false;}void Serial2View::mouseMoveEvent( QMouseEvent *e ){if (mousePressed){QPainter paint( this );paint.setPen( Qt::blue );paint.drawPoint( e->x(), e->y() );}}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:
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:
void Serial2View::resizeEvent ( QResizeEvent *e){QWidget::resizeEvent( e );int w;if (width()>doc->buffer.width()) { w = width(); } else { w
= doc->buffer.width(); }// ak oblubujete skratene zapisy:int h = height() > doc->buffer.height() ? height() :
doc->buffer.height();QPixmap tmp (doc->buffer);doc->buffer.resize(w, h);doc->buffer.fill( Qt::white );bitBlt( &doc->buffer, 0, 0, &tmp, 0, 0, tmp.width(),
tmp.height() );}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 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.
ISSN 1214-1267, (c) 1999-2007 Stickfish s.r.o.
3.3.2003 07:44