Qt"> Qt Designer"> KDevelop"> ]> Anne-Marie Mahfouf

annma@kde.org

Laura Afrasinei Traducerea capitolelor 1-3 în limba română Claudiu Costin

claudiuc@kde.org

Corectura traducerii, traducerea capitolelor 4-8 si conversia la DocBook-XML 20012003 Anne-Marie Mahfouf &FDLNotice; 2003-08-01 0.4 &qt; este un set de biblioteci software utilizat de proiectul KDE pentru dezvoltarea de aplicaţii grafice. Acest document prezintă unui programator începător cum să creeze o aplicaţie simplă cu ajutorul &designer; 3.2 (sau 3.3) şi &kdevelop; 3.0. Tutorialul de faţă este bazat pe o aplicaţie scrisă de Jono Bacon şi a fost revizuită de Daniel Molkentin (pentru &kdevelop; versiunea 2) şi Thomas Nagy. KDE Qt KDevelop Designer tutorial Pentru a face ceva util cu ajutorul &designer;, vom construi un program simplu care vă va arăta puterea &designer; şi a &kdevelop;. Sperăm ca acest articol să vă ajute să creaţi prima dumneavoastră aplicaţie reală KDE. Dacă sînteţi deja familiarizaţi cu &kdevelop; şi &designer; şi doriţi doar să ştiţi cum funcţionează acestea împreună, treceţi direct la ultimul capitol unde este explicată pe scurt procedura. &kdevelop; vă va ajuta să realizaţi o aplicaţie KDE completă. Proiectul KDE foloseşte ca utilitare Autoconf şi Automake, iar &kdevelop; vă va furniza fişierele necesare (directorul admin şi fişierele Makefile.cvs, Makefile.am ...). Pentru acest tutorial trebuie să aveţi instalate &designer; şi &kdevelop;, precum şi bibliotecile KDE 3.2.x. Vom realiza un program KDE3 simplu care ia un nume, o adresă de e-mail, un comentariu şi generează o semnătură virtuală pentru un e-mail. &designer; face parte din pachetul qt-3.2.x. Dacă aveţi o versiune mai veche de &qt; instalată pe sistemul dumneavoastră, ar trebui să instalaţi cel puţin versiunea menţionată mai sus. La momentul scrierii articolului cea mai recentă versiune era 3.2.2. Verificaţi dacă aveţi instalate toate pachetele &qt;. Pentru a putea compila acest tutorial aveţi nevoie şi de fişierele antet &qt;. Acestea sînt de regulă incluse în pachetul pentru dezvoltare de software. De asemenea trebuie să vă asiguraţi că aveţi şi &designer;. Uneori acesta livrat ca pachet separat. Pentru a verifica dacă aveţi toate acestea, executaţi locate qstring.h Dacă este afişat /usr/lib/qt3/include/qstring.h, atunci puteţi seta variabila QTDIR la /usr/lib/qt3. Folosind un intrepretor de comenzi bash, tastaţi export QTDIR=/usr/lib/qt3 Puteţi descărca arhiva cu codul sursă de pe site-ul de web Trolltech sau puteţi obţine modulul qt-copy din SVN-ul KDE. Reţineţi că &qt; pentru Linux este licenţiat GPL. Pentru a afla cum să folosiţi SVN KDE în mod anonim, cum să obţineţi şi să compilaţi modulul qt-copy şi pe cele KDE, găsiţi aici o documentaţie mult mai cuprinzătoare. Apoi trebuie să setaţi variabila de mediu QTDIR. Aceasta ar trebui să indice directorul în care aţi instalat &qt;. Pentru un interpretor de comenzi bash ar trebui să tastaţi export QTDIR=/usr/local/qt, /usr/local/qt fiind directorul în care aţi instalat &qt;. Pentru mai multe detalii citiţi fişierul INSTALL. Apoi compilaţi-l folosind următoarele comenzi, linia de compilare recomandată fiind: $ ./configure -system-zlib -qt-gif -system-libpng -system-libjpeg \ -plugin-imgfmt-mng -thread -no-exceptions -debug -fast $ make Comanda make install nu este necesară. &designer; se află în directorul bin al celui de instalare a &qt;. Îl puteţi porni tastînd /usr/local/qt/bin/designer într-o consolă. Aici găsiţi explicaţii detaliate privind compilarea &qt; din surse. &kdevelop; 3 ar trebui să facă parte din distribuţia dumneavoastră de Linux. Versiunile anterioare ale acestuia au fost denumite Gideon, dar în momentul de faţă sînt depăşite. Dacă nu găsiţi &kdevelop; 3 distribuit astfel, citiţi următoarea secţiune pentru a afla cum să-l obţineţi şi să-l compilaţi. &kdevelop; poate fi descărcat de pe site-ul &kdevelop;, din secţiunea Download folosind cel mai apropiat site oglindă. La momentul scrierii articolului, cea mai recentă versiune de cod sursă &kdevelop; 3.0 era 3.0.4. Ultimele pachete sînt kdevelop-3.0.4.tar.bz2. Le puteţi descărca de aici. Pentru a compila &kdevelop; 3 aveţi nevoie de: qt-3.1.0 sau unul mai recent şi de kdelibs-3.1.0 sau mai recent. Variabilele de mediu QTDIR şi KDEDIR ar trebui să conducă la aceste directoare. Nu uitaţi să stabiliţi căile pentru KDE şi &qt;. Cele mai frecvente erori în folosirea &kdevelop; provin de la variabile de mediu neiniţializate corespunzător. Verificaţi într-o consolă executînd comanda set pentru a vedea toate variabilele de mediu. Ar trebui să setaţi variabila de mediu PATH precum şi LD_LIBRARY_PATH: $ export LD_LIBRARY_PATH=$QTDIR/bin:$KDEDIR/bin:$PATH $ export LD_LIBRARY_PATH=$QTDIR/lib:$LD_LIBRARY_PATH Dacă întîmpinaţi orice fel de problemă în a face &kdevelop; să funcţioneze, accesaţi secţiunea Forum de site-ul &kdevelop; pentru a găsi răspuns la problema dumneavoastră. Dacă nu aţi mai utilizat &kdevelop;, pentru a vă obişnui cu interfaţa şi iconiţele, încercaţi să creaţi un proiect nou pe care să îl compilaţi. Aceasta este o scurtă secţiune pentru cei ce doresc ultima versiune de &kdevelop;. Într-adevăr, &kdevelop; din SVN merită descărcat. Aveţi nevoie de qt-3.2.3 şi kdelibs-3.1.0 sau versiuni mai recente. $ mkdir KdevelopSVN $ cd KDevelopSVN $ svn co svn://anonsvn.kde.org/home/kde/trunk/KDE/kdevelop $ cd kdevelop $ svn co svn://anonsvn.kde.org/home/kde/trunk/KDE/kde-common/admin Cînd transferul s-a terminat: make -f Makefile.cvs ./configure --prefix='kde-config --prefix' make make install # ca root Citiţi apoi şi instrucţiunile de compilare de pe site-ul &kdevelop;. Widget: element al unei interfeţe grafice cum ar fi o fereastră, un buton sau o căsuţă text, o bară de defilare, un meniu etc. După cum aţi observat, unele widget-uri conţin alte widget-uri (bara de defilare spre exemplu). Din punct de vedere al programării trebuie să vă gîndiţi că toate widget-urile specializate moştenesc o clasă de bază widget, care este clasa QWidget. Managementul layout-ului: acest termen descrie modul în care widget-urile sînt aranjate într-o fereastră. În cea mai simplă formă, elementele sînt plasate pe o anumită poziţie, fiindu-le atribuită a anumită înălţime şi lungime. Dar atunci cînd utilizatorul modifică dimensiunile ferestrei widget-urile ar trebui să-şi menţină poziţia, modificîndu-şi totodată şi mărimea în mod corespunzător. Qt realizează acest lucru prin folosirea de layout-uri în care sînt plasate widget-urile. Semnale şi sloturi: sînt folosite pentru comunicaţia dintre obiecte. Mecanismul semnal/slot este o trăsătură principală a Qt. Semnalele sînt emise de obiectele ce-şi schimbă starea într-un mod ce ar putea interesa utilizatorul. Sloturile pot fi folosite pentru a primi semnale, dar sînt funcţii componente obişnuite. Se pot conecta oricîte semnale la un singur slot, iar un semnal poate fi conectat la oricîte sloturi. Pentru mai multe detalii puteţi citi documentaţia TrollTech referitoare la semnale şi sloturi. În cuprinzătoarea documentaţie online ce însoţeşte &qt;-ul, veţi găsi semnale şi sloturi publice care se potrivesc fiecărei clase în parte. Astfel, vă puteţi implementa propriile sloturi. Cadrul de lucru pe care se va baza proiectul nostru (exemplu: fereastra principală) poate fi realizat rapid şi cu uşurinţă folosind &kdevelop;. Deschideţi &kdevelop; şi selectaţi opţiunea New Project din meniul Project. Va apărea Application Wizard. Alegeţi C++KDE Simple KDE Application. Completaţi spaţiile libere cu numele proiectului (SigCreate), numele dumneavoastră ca autor, adresa dumneavoastră de e-mail. Expert aplicaţie Expert aplicaţie Expert aplicaţie Daţi clic pe butonul Next, verificaţi opţiunile SVN şi modelele de antet. Apoi daţi clic pe Finish. &kdevelop; va crea toate fişierele de care aveţi nevoie pentru a vă compila proiectul. Puteţi folosi selectorul de fişiere pentru a vedea codurile celor trei fişiere şi anume: main.cpp, sigcreate.cpp şi sigcreate.h. Editorul de fişiere &kdevelop; Editorul de fişiere &kdevelop; Editorul de fişiere &kdevelop; După ce Application Wizard a creat aplicaţia, compilaţi-o pentru a vă asigura că totul este în regulă. Pentru a face acest lucru selectaţi BuildRun automake & friends şi apoi BuildRun configure. Fereastra de mesaje ar trebui să afişeze: " Good - your configure finished. Start make now * * *** Success *** astfel încît puteţi utiliza make cu BuildProject (sau F8). Apoi BuildInstall şi BuildExecute programme (sau F9). Rezultatul este afişat în imaginea de mai jos. Aplicaţie KDE simplă Aplicaţie KDE simplă Aplicaţie KDE simplă Acum aveţi cadrul de lucru funcţional şi sînteţi gata să dezvoltaţi programul. Dacă &kdevelop; nu recunoaşte variabilele QTDIR şi KDEDIR atunci le puteţi seta pe acestea în ProjectProject options (din Configure Options). &designer; este un instrument pentru proiectarea şi implementarea interfeţelor grafice. Vă ajută să aranjaţi widget-urile într-o formă şi să adăugaţi un layout corespunzător astfel încît interfeţei dumneavoastră să i se poată modifica dimensiunile. Pentru detalii este recomandabil să citiţi manualul &designer;. &designer; are un editor de text, dar vom folosi &kdevelop; pentru a modifica codul sursă. Vom crea acum interfaţa aplicaţiei folosind &designer;. O formă din &designer; este salvată cu extensia .ui pentru că în acest mod este procesat de programul uic pentru a genera fişiere .h şi .cpp. &kdevelop; realizează toate acestea, dumneavostră netrebuind decît să creaţi forma. De fiecare dată cînd adăugaţi sau ştergeţi un fişier (acum vom adăuga un fişier .ui) din proiectul &kdevelop;, fişierul Makefile.am va fi modificat. &kdevelop; face singur acest lucru, dar va trebui ca dumneavoastră, după astfel de schimbări, să executaţi Run automake & friends. În &kdevelop; selectaţi meniul FileNew şi apoi completaţi datele necesare în fereastra care va apare. Întîi scrieţi numele fişierului: sigcreatedlg şi alegeţi ce fişier nou doriţi în lista derulantă: aici vom alege un widget (.ui). Asiguraţi-vă că opţiunea Add to project este bifată, aceasta asigurînd actualizarea fişierului Makefile.am. Adăugarea unui fişier .ui Adăugarea unui fişier .ui Adăugarea unui fişier .ui Daţi clic pe OK şi va apare fereastra Automake Manager. Automake manager Automake manager Automake manager Apăsaţi din nou OK. Dacă fişierul sigcreatedlg.ui nu este deschis în &designer;, accesaţi Automake Manager, daţi clic dreapta pe fişier şi selectaţi Open with, alegînd apoi &designer;. Referitor la denumire: este o idee bună să terminaţi numele ferestrei de dialog sau al formei în dlg pentru a conferi lizibilitate celor ce doresc să verifice codul sursă. sigcreatedlg arată faptul că este un dialog, o clasă de interfaţă. În mod obişnuit numele de clase KDE încep cu K (majusculă), urmate de denumirea care descrie cel mai în detaliu conţinutul programului dumneavoastră. Dacă era o aplicaţie KDE reală, denumirea aleasă ar fi trebuit să fie KSigCreate. &designer; &designer; &designer; Interfaţa &designer; este împărţită în trei zone. În stînga se găseşte bara de control unde de exemplu puteţi selecta widget-urile. În zona din dreapta pot fi selectate diferite dialoguri, însă vom păstra doar Property Editor, închizîndu-le pe celelalte două. Widget-urile pot fi ajustate pentru a le folosi aşa cum doriţi. Aici puteţi alege dimensiunea acestora, fundalul (paleta de culori) etc. Între cele două ferestre se află forma care este fereastra efectivă a programului, în interiorul căreia veţi crea interfaţa grafică. După adăugarea sigcreatedlg.ui, înainte de a construi programul, va trebui să rulaţi Automake & friends, precum şi Run configure. Aceste proceduri asigură actualizarea fişierului Makefile.am. De fiecare dată cînd doriţi să utilizaţi &designer; trebuie să aveţi o reprezentare coerentă a interfeţei pe care doriţi să o realizaţi. În figura de mai jos puteţi vedea cum va arăta programul. Este o fereastră cu un număr de obiecte (sau widget-uri) astfel încît utilizatorul să completeze căsuţele text cu informaţiile corespunzătoare. Din punctul de vedere al utilizatorului programul trebuie să fie cît mai uşor de utilizat. SigCreate Programul de creat Programul de creat Aplicaţia creează o semnătură de e-mail care va fi afişată pe ecran. Utilizatorul trebuie să introducă numele, adresa de e-mail şi să selecteze un comentariu din cele trei propuse. Cînd apăsaţi butonul Create!, semnătura este prezentată într-un MultiLineEdit. La apăsarea butonului Cancel, programul se va termina. Acest proiect, constituit ca tutorial, nu reflectă utilizări neapărat practice. Reveniţi la fereastra &designer; cu noul dialog deschis. Veţi remarca că Property Editor este completat cu date referitoare la noua formă pe care aţi creat-o. Pe prima linie este trecut numele formei, adică Form1. Daţi clic pe cîmpul ce-i conţine numele pentru a-l schimba în SigCreateDlg. Acesta va constitui numele clasei de dialog aşa încît ar trebui denumit sugestiv. Proprietăţile se modifică în felul următor: selectaţi proprietatea pe care doriţi să o modificaţi şi schimbaţi-i setările din dreapta ei. Proprietatea Caption trebuie înlocuită cu SigCreateDlg v.01. Editorul de proprietăţi Editorul de proprietăţi Editorul de proprietăţi Acum vom începe să adăugăm widget-uri în dialogul nostru. Pentru început vom insera textul în partea de sus a ferestrei program, care arată ca în imaginea de mai jos. Acest text informează utilizatorul despre modul de folosire a programului. Tipul de widget folosit se numeşte etichetă şi puteţi include unul în program în felul următor: Selectaţi dialogul astfel încît acesta să fie poziţionat în bara de unelte: Common Widgets TextLabel. Cursorul poziţionat pe formă va lua formă de cruce. Desenaţi un dreptunghi pentru etichetă, ca într-un program de desenat şi veţi observa că acesta va fi creat cuprinzînd un text oarecare. Pentru a modifica acest text daţi dublu clic pe etichetă şi apoi tastaţi textul dorit. Acesta va fi This program will create an email signature for you. Just fill in the boxes and hit the Create! button. Selectaţi Align Center pentru a-l poziţiona. Textul din eticheta text Textul din eticheta text Textul din eticheta text La final, folosind agăţătorile, redimensionaţi widget-ul la mărimea dorită. Pentru a fi poziţionat în partea de sus a ferestrei centraţi eticheta cu ajutorul mouse-ului. Aceasta tehnică este doar una temporară însă. În capitolele viitoare vom studia alte tehnici de aranjare, mai elegante. QLabel-ul de sus QLabel-ul de sus QLabel-ul de sus Această procedură este folosită pentru fixarea oricărui tip de widget care poate fi suportat de &designer;: selectaţi-l, mutaţi-l şi apoi modificaţi-i proprietăţile şi dimensiunea. Un concept interesant în &designer; este faptul că widget-urile pot funcţiona ca şi containere pentru alte widget-uri. Acest fapt poate fi demonstrat prin crearea de linii de editare în interiorul cadrului. În imaginea de mai jos avem mai multe etichete şi căsuţe text în interiorul unui cadru, care este denumit GroupBox şi funcţionează ca un container pentru etichetele şi căsuţele text din interiorul său. Într-o primă fază vom crea frame-ul selectînd GroupBox-ul: dialogul ToolboxContainers sau ToolsContainers GroupBox din bara de defilare. Puteţi crea căsuţele text trasînd cu mouse-ul chiar sub eticheta creată anterior. În Property Editor puteţi modifica proprietăţile titlului astfel încît să modificaţi textul din cadru. Completaţi cîmpul destinat titlului cu detaliile necesare. Dacă observaţi un "+" în faţa unui item din Property Editor acesta indică faptul că există subproprietăţi ale sale ce pot fi de asemenea modificate. După ce aţi creat cadrul (spre exemplu GroupBox-ul), creaţi încă trei etichete ca şi cea de mai sus, dar de acestă dată în cadrul GroupBox-ului. Puteţi verifica apoi în Object Explorer (WindowsViews Object Explorer) dacă etichetele au devenit descendenţii cadrului GroupBox. Modificaţi textul etichetelor dînd dublu clic pe ele. Un GroupBox cu 3 etichete Un GroupBox cu 3 etichete Un GroupBox cu 3 etichete După ce aţi realizat toate acestea puteţi crea căsuţele text. Ele vor permite utilizatorului să-şi introducă numele şi adresa de e-mail. Vom folosi cel mai simplu tip de astfel de căsuţe: un widget numit QLineEdit care permite utilizatorului să introducă un text pe un singur rînd. Pentru nume şi adresa de e-mail trebuie create două astfel de widget-uri. În meniul Tools selectaţi Input Line Edit şi trasaţi widget-ul lîngă eticheta intitulată Your name. Se procedează analog şi pentru adresă. Comentariul personalizat va fi ales de către utilizator. Vom folosi o listă derulantă care va pune la dispoziţia utilizatorului trei comentarii. Selectaţi iconiţa ComboBox sau meniul ToolsInput ComboBox şi poziţionaţi căsuţa lîngă eticheta Witty comment. Apoi daţi dublu clic pe aceasta pentru a introduce textul dorit. Selectaţi butonul New Item şi introduceţi textul comentariului în căsuţa din dreapta. Repetaţi operaţiunea pentru al doilea şi al treilea comentariu. Apăsaţi OK cînd aţi terminat. Redimensionaţi widget-urile pentru a avea un aspect compact. Denumirea widget-urilor: Pînă în momentul de faţă nu am numit nici unul dintre widget-urile plasate în program. Este util ca acestora să li se atribuie o denumire internă pentru a putea fi apelate ulterior în program. Etichetele, neîndeplinind nici o funcţie nu trebuiesc denumite, însă alte widget-uri necesită acest lucru. Acesta este cazul căsuţelor text al căror conţinut trebuie prelucrat. Numele ar trebui să poată fi recunoscut cu uşurinţă şi să fie logic. Numele sînt atribuite cu ajutorul proprietăţii omonime (Name) care se găseşte în partea superioară a Property Editor. Prima LineEdit va fi denumită nameBox, iar cea de-a doua, mailBox. ComboBox-ul va fi identificat ca commBox. Aceasta ne va permite să accesăm comentariile. Daţi clic pe fiecare căsuţă text şi completaţi denumirea sa în cîmpul Name din Property Editor. Procedaţi similar şi la ComboBox. Proiectarea grafică va fi finalizată prin adăugarea unei etichete intitulate Generated Signature. Sub aceasta vom adăuga un TextEdit (ToolsInput TextEdit) unde va fi generată semnătura. Aceasta va fi denumită sigBox. Adăugăm apoi două butoane în partea de jos (Create! şi Cancel). Acestea nu vor fi neapărat denumite. Salvaţi forma. O puteţi previzuliza astfel: PreviewPreview Form. Forma înainte de aranjare Forma înainte de aranjare Forma înainte de aranjare Această secţiune descrie managementul layout-ului. Dacă redimensionăm fereastra de previzualizare veţi observa că widget-urile nu-şi modică corespunzător dimensiunile. Pentru a îmbunătăţi aspectul acestora vom folosi o proprietate a &qt; denumită control de spaţiere. Acestea sînt ca nişte arcuri virtuale care împing widget-urile pe fiecare dimensiune în parte. Un layout bun este esenţial pentru aplicaţia dumneavoastră deoarece este posibil ca atunci cînd anumite părţi ale acesteia sînt traduse, să fie mai lungi decît varianta în engleză şi să fie totuşi necesar ca acestea să încapă în widget-uri. Geometria widget-urilor trebuie să fie "prietenoasă" pentru cazul în care redimensionăm fereastra aplicaţiei. Layout-urile sînt realizate prin încercări cu ajutorul operaţiunii de previzualizare ce vă va permite să vedeţi rezultatele obţinute şi să-l alegeţi pe cel optim. Pentru început vom folosi controalele de spaţiere pentru a centra textul din căsuţa de sus. Redimensionaţi eticheta astfel încît să aibă dimensiunile textului. Apoi adăugaţi două astfel de controale de spaţiere, unul la fiecare capăt, astfel: selectaţi iconiţa reprezentînd un arc sau meniul LayoutAdd Spacer. Mutaţi fiecare control pe orizontală. Pentru ca elementul de spaţiere să reapară este suficient să daţi clic pe spaţiul din stînga textului. Repetaţi procedura şi pentru partea dreaptă. Apoi adăugaţi un astfel de control în dreapta etichetei Generated Signature şi un altul în stînga butonului Create!. Adăugarea spaţiatoarelor Adăugarea spaţiatoarelor Adăugarea spaţiatoarelor Acum spaţiile libere fiind ocupate de controalele de spaţiere, avem nevoie de un management al layout-ului. Acesta va permite widget-urilor să fie redimensionate de fiecare dată cînd ferestra principală îşi modifică dimensiunile. Este obligatoriu să avem un bun management al layout-ului. După alegerea acestuia redimensionaţi de mai multe ori fereastra pentru a vă asigura că totul este în regulă. Putem folosi fie management vertical, fie orizontal, fie grilă. Primul rînd al widget-ului este orizontal (control de spaţiere + etichetă + control de spaţiere), necesitînd astfel un management orizontal. Cele trei widget-uri trebuie selectate simultan: selectaţi-l pe primul şi apoi pe al doilea şi al trelea ţinînd apăsată tasta Shift. Apoi daţi clic pe iconiţa Horizontal Layout (sau meniul LayoutLayout Horizontally). Veţi observa o linie roşie ale cărei dimensiuni pot fi modificate în jurul celor trei obiecte pentru a indica că layout-ul este ajustat. Redimensionaţi căsuţa roşie dacă este necesar. Acum puteţi repeta procedura pentru celelalte trei etichete, de data acesta folosind un management vertical al layout-ului, ca şi pentru cele două LineEdit şi pentru ComboBox. Managementul vertical este de preferat pentru alinierea obiectelor. Folosindu-l pe cel orizontal, căsuţele şi etichetele nu vor avea aceeaşi dimensiune şi nici nu vor fi aliniate. Acest tip de management însă este necesar pentru etichetele însoţite de controale de spaţiere cît şi pentru butoanele cu controale. Pentru a termina layout-ul trebuie ca forma să supervizeze căsuţele al căror management de layout a fost deja modificat. Astfel, vom plasa totul într-o grilă. Acest lucru se realizează astfel: clic dreapta pe formă şi selectaţi Layout in a grid. Imaginea obţinută trebuie să se asemene cu figura de mai jos. Managementul complet al layout-ului Managementul complet al layout-ului Managementul complet al layout-ului Semnalele şi sloturile sînt folosite pentru comunicaţia dintre obiecte. Mecanismul semnal/slot este o trasătură centrală a &qt; şi probabil partea care îl diferenţiază cel mai mult de alte programe similare care de regulă folosesc funcţii "callback". În &qt; un semnal este emis de un widget atunci cînd apare un eveniment, de obicei acesta fiind declanşat de către utilizator, spre exemplu apăsarea unui buton sau scrierea unui text într-un QLineEdit. Un slot este o funcţie care răspunde unui anumit semnal. Acum widget-urile sînt implementate şi layout-ul ajustat. Ultimul lucru ce trebuie făcut în legătură cu design-ul formei este crearea unor conexiuni semnal-slot. Pentru a face acest lucru manual este nevoie de o funcţie connect(), dar &designer; vine în ajutor cu o soluţie simplă, dar eficientă. Pentru a crea aceste conexiuni vom folosi controalele de conectare, fie selectînd iconiţa (sub formă de săgeată roşie ce pătrunde într-un pătrat verde), fie selectînd din meniu ToolsConnect Signals/Slots sau apăsînd F3. Pentru a crea o conexiune, daţi clic pe formă, pe widget-ul care va fi legat de slot, trageţi linia în afara formei şi apoi eliberaţi butonul mouse-ului. În primul rînd ne vom ocupa de butonul Create!. Selectaţi Connect Signal/Slot fie cu ajutorul iconiţei, fie din meniul Tools sau apăsînd F3. Apoi daţi clic pe butonul Create! cu cursorul în formă de cruce şi trageţi linia în afara formei. Cînd eliberaţi butonul mouse-ului veţi vedea conexiunile ca în figură. Crearea unui slot nou Crearea unui slot nou Crearea unui slot nou Acum dorim să creăm un slot care să genereze o semnătură în momentul în care utilizatorul va apăsa butonul Create!. Semnalul va fi clicked() (puteţi alege din 5 semnale pentru un QPushButton) şi trebuie să creăm slotul pentru a realiza apoi conexiunea. Pentru a crea slotul vom da clic pe butonul Edit Slots care va deschide o fereastră ca în figura de mai jos. Acum daţi clic pe New Slot, redenumiţi slotul apărut (în loc de new_slot(), slotCreateSig()), dar păstraţi specificatorul de acces. Cînd veţi apăsa OK veţi reveni la fereastra conexiunilor ce va afişa însă un nou slot în secţiunea Slots. Vizualizare şi editare conexiuni Vizualizare şi editare conexiuni Vizualizare şi editare conexiuni Pentru a realiza o nouă conexiune selectaţi pur şi simplu semnalul dorit (care în acest caz este clicked()) şi apoi selectaţi slotul (slotCreateSig()). Cînd aţi selectat şi semnalul şi slotul, veţi vedea conexiunea realizată în partea de jos a ecranului. După ce aţi finalizat apăsaţi OK. Repetaţi procedura şi pentru butonul Cancel folosind semnalul clicked() şi slotul close(). Acum semnalele şi sloturile sînt terminate. În acest tutorial vom folosi controlul de subclasare &kdevelop; din Automake Manager. Dacă aveţi o versiune &kdevelop; care nu are această capacitate treceţi la unde acest pas este explicat fără utilizarea acestui control. Vom porni de la proiectul KDE intitulat SigCreate şi sigcreatedlg.ui pe care l-am adăugat la acest proiect. În Automake Manager, în secţiunea sigcreate trebuie să aveţi trei fişiere: sigcreatedlg.ui, sigcreate.cpp şi main.cpp. Proiectul trebuie să poată fi compilat şi să afişeze o fereastră principală ca în figura din . Cum clasa sigcreate nu ne este de folos o vom îndepărta şi o vom folosi pentru subclasarea sigcreate.dlg. În fereastra Automake Manager, daţi clic dreapta pe sigcreate.cpp şi selectaţi Remove. În fereastra ce va apărea bifaţi şi Also Remove it from Disk. Procedaţi similar şi cu sigcreate.h. Aceasta este modalitatea de a şterge fişiere care nu vă mai sînt necesare, Makefile.am fiind actualizat. Nu uitaţi să rulaţi automake & friends şi să configuraţi înaintea compilării proiectului. Nu vom proceda astfel deoarece vom face şi alte schimbări. Numele de clasă SigCreate va fi acum folosit pentru subclasă. În Automake Manager, în sigcreate, daţi clic dreapta pe sigcreatedlg.ui şi alegeţi Subclass Widget din meniu ce apare. Completaţi numele subclasei cu SigCreate. Bifaţi căsuţa Reformat source şi apăsaţi OK. Nu adăugaţi fişierele în SVN deoarece această opţiune nu a fost activată în proiectul nostru. Puteţi vedea că slotul pe care l-am creat în &designer; este listat aici şi selectat. Metoda va fi implementată în fişierele generate. Dacă îl deselectaţi, nu va fi generat codul în clasa dumneavoastră. Dialogul subclasei Dialogul subclasei Dialogul subclasei Trebuie să eliminăm cîteva linii din main.cpp deoarece proiectul model de aplicaţie simplă KDE face referire la KMainWindow care în mod normal este clasa de bază utilizată. Dar aici SigCreate este bazat pe QWidget. Trebuie să ştergeţi toate liniile dintre KApplication app; şi return app.exec(); cu excepţia celor păstrate aici: SigCreate *mainWin = 0; mainWin = new SigCreate(); app.setMainWidget( mainWin ); mainWin->show(); După aceea implementaţi slotul adăugînd următoarele linii între acolade: void sigcreate2::slotCreateSig() {} pentru a implementa slotul: sigBox->append("\n--"); sigBox->append(nameBox->text()); sigBox->append(mailBox->text()); sigBox->append(commBox->currentText()); şi bineînţeles antetele corespunzătoare: #include <qlineedit.h> #include <qcombobox.h> #include <qmultilineedit.h> Executaţi BuildRun automake & friends, BuildRun configure, BuildBuild Project, BuildInstall (sau BuildInstall ca utilizatorul root), BuildExecute Program. Asta-i tot! Programul funcţionează! Vedeţi imaginea de mai jos. Programul Programul Programul Cîteva cuvinte în plus despre semnale şi sloturi. Mecanismul de semnale şi sloturi este "type safe": semnătura unui semnal trebuie să se potrivească cu semnătura slotului ce îl recepţionează (de exemplu, veţi conecta valueChanged(int) cu un slot avînd ca argument un int). Un alt lucru de ţinut minte este că toate clasele care moştenesc QObject sau una din subclasele sale (de exemplu QWidget) pot conţine semnale şi sloturi. Toate textele pe care le folosiţi în programul dumneavoastră KDE trebuie să fie încapsulate în funcţia i18n() function (care are ca antet klocale.h) deoarece toate proiectele KDE sînt traduse în alte limbi. Citiţi Cum să traducem KDE pentru a afla mai multe despre internaţionalizare şi ultimul capitol al acestui tutorial pentru a afla cum să traduceţi aplicaţia. Dacă vreţi să fiţi ajutat, puteţi să-mi trimiteţi un e-mail sau să discutăm pe IRC (serverul irc.openprojects.net, pe canalul #kde-women sau #kde-devel, iar porecla mea este annma). Puteţi descărca codul sursă al proiectului SigCreate project dacă daţi clic pe sigcreate-0.1.tar.gz. Ţineţi cont că pentru a-l compila aveţi nevoie de Qt-3.2.0 sau mai recent. Acesta este un rezumat despre cum să lucraţi cu &kdevelop; şi &designer;. Din meniul &kdevelop; FileNew, selectaţi un fişier Widget (.ui) şi daţi-i un nume (de exemplu kprojectdlg), selectaţi add to Project. Daţi clic pe OK. Va porni &designer;. Lucraţi pe formă iar apoi salvaţi fişierul şi închideţi &designer;. Fişierul va apare în &kdevelop; în secţiunea User Interface (kprojectdlg.ui). Creaţi o clasă nouă (de exemplu cu numele KProject) (Project menu, iar apoi New class...) care moşteneşte clasa din fişierul dialog creat (kprojectdlg) şi este o clasă fiu QWidget. Adăugaţi sloturile şi alte semnale sau funcţii membru în clasa derivată KProject. Cînd proiectul este terminat, aţi putea dori ca interfaţa grafică să fie tradusă într-una sau mai multe limbi. Aici aflaţi cum să faceţi acest lucru. Instalaţi o versiune modificată de gettext de la http://developer.kde.org şi puneţi-l în directorul dumneavoastră personal. Această versiune o găsiţi la http://public.kde.planetmirror.com/pub/kde/devel/gettext-kde/ $ tar xvzf gettext-0.10.35-kde.tar.gz $ cd gettext-0.10.35-kde $ ./configure $ make $ mkdir -p ~/bin $ cp src/gettext src/xgettext ~/bin # copiaţi gettext şi xgettext # în directorul $HOME/bin $ export PATH=~/bin:$PATH Apoi treceţi în directorul proiectului: $ cd /calea/la/proiectulmeu Setaţi variabila de mediu KDEDIR să indice la instalarea dumneavoastră de KDE — pe sistemul meu Mandrake Linux este /usr. Această calea poate fi determinată şi executînd kde-config --prefix. $ export KDEDIR=`kde-config --prefix` # sau export KDEDIR=/usr Creaţi fişierele de traduceri PO (cataloagele de mesaje): $ make -f admin/Makefile.common package-messages Traduceţi fişierele .po cu ajutorul KBabel. Aceste fişiere sînt în directorul po al proiectului dumneavoastră. Nu vă atingeţi de fişierul .pot! $ make package-messages $ sudo make install Citiţi aici versiunea originală a acestui capitol scris de Thomas Nagy. Numele aplicaţiilor KDE începe, în general, cu litera K urmată de un nume ce sugerează ce face programul. De exemplu, KMail este foarte simplu şi sugerează utilizatorului că într-adevăr aceasta este o aplicaţie KDE şi se ocupă de e-mail-uri. Pentru numele care urmează literei K este util să alegeţi un nume în limba engleză. Bineînţeles că aceasta este numai o indicaţie. Sînteţi liber să alegeţi ce doriţi, dar un nume bun face ca aplicaţia dumneavoastră să fie cunoscută mult mai rapid. Căutaţi pe Google (în Konqueror, scrieţi gg:numele_aplicaţie_dumneavoastră) pentru a vedea dacă numele aplicaţiei este deja folosit sau este protejat de drepturile de autor. Dacă este aşa sau aveţi dubii, schimbaţi-l. Comentariile trebuie să fie în engleză deoarece este mult mai uşor pentru cineva care vă citeşte codul sursă. Numele claselor sînt în mod normal în engleză şi trebuie să indice ce face clasa. Exemple bune: TopLevel, CursorInterface, TaskManager. Observaţi literele majuscule şi ţineţi cont că C++ este senzitiv la majuscule. Numele funcţiilor încep cu literă mică. Iată cîteva exemple: void activateRaiseOrIconify(); void toDesktop(int); void windowAdded(WId); Indentarea codului poate fi oricum doriţi atîta timp cît este uşor de urmărit şi de alţi programatori. Întotdeauna ţineţi cont că alţii îl vor citi şi eventual vor încerca să-l facă mai uşor de înţeles. Programul dumneavoastră este interesant, credeţi că aveţi timp să lucraţi serios la el, aveţi nevoie de păreri şi ajutor pentru a-l îmbunătăţi. Sînteţi de acord să-l distribuiţi sub licenţa GPL sau echivalentă. Puteţi cere un cont SVN pentru a-l importa în kdenonbeta. Modulul kdenonbeta este destul de maire şi nu este distribuit cu KDE-ul oficial. Nu este distribuit ca pachet, nici tradus şi ciclurile uzuale de dezvoltare-distribuire. Scopul său este să permită celorlalţi dezvoltatori să lucreze la aplicaţia dumneavoastră şi să o testeze. Bineînţeles că aveţi nevoie cel puţin de qt-copy, arts şi kdelibs din SVN trunk. Ca să aflaţi cum să lucraţi cu SVN, citiţi Using Subversion with KDE. Cînd aplicaţia are finalizate cele mai importante funcţii, este total compatibilă KDE (i18n, xml GUI, etc.), puteţi întreba dacă poate fi mutată într-un pachet KDE oficial. Pentru a obţine un cont SVN, urmaţi aceste instrucţiuni. Trimiteţi un e-mail la sysadmin (at) kde (dot) org în care justificaţi de ce aveţi nevoie de el. Spuneţi că doriţi să importaţi aplicaţia (numele_aplicaţiei) în modulul kdenonbeta. Asiguraţi-vă că v-aţi dat numele complet şi adresa de e-mail dacă sînt diferite de cele din cîmpul "From" al mesajului. Puteţi să cereţi un anumit nume pentru cont. La ora actuală accesul la SVN poate fi realizat prin SVN-peste-SSH sau HTTPS. Pentru acces svn+ssh aveţi de ales între autentificare cu parolă sau cu pereche de chei publică-privată. La e-mail ataşaţi cheia publică dorită (de exemplu: ~/.ssh/id_dsa.pub). Aşteptaţi un răspuns din partea administratorilor de sistem KDE. După ce aţi compilat cel puţin qt-copy, arts şi kdelibs, trebui să obţineţi o copie de lucru a fişierelor din kdenonbeta. Autentificaţi-vă la serverul SVN cu numele de utilizator şi parola obţinute mai devreme. $ svn co protocol://username@svn.kde.org/home/kde/trunk/KDE/kdenonbeta $ cd kdenonbeta $ svn co protocol://username@svn.kde.org/home/kde/trunk/KDE/kde-common/admin Copiaţi cu totul directorul principal al proiectului în kdenonbeta şi apoi, din directorul principal, executaţi: $ make distclean Toate fişierele .o trebuie să fi dispărut. Ştergeţi manual toate fişierele Makefile, Makefile.in (dar nu şi Makefile.am) şi toate cele generate de &kdevelop;. Ştergeţi directoarele admin, autom4te.cache, debug, doc, po şi templates. Trebuie să mai păstraţi numai unele fişiere şi subdirectorul src. Mergeţi mai sus un director în kdenonbeta şi executaţi: $ make -f Makefile.cvs $ ./configure --prefix=$KDEDIR $ cd nume_proiect $ make $ su -c 'make install' Toţi aceşti paşi trebuie să se execute cu succes. Dacă apar erori ar trebui să le puteţi corecta uitîndu-vă cu atenţie la mesajele de eroare. Dacă v-aţi blocat şi nu mai aveţi idei, conectaţi-vă pe IRC şi întrebaţi pe unul din canalele #kde sau #kde-devel. Cineva vă va ajuta. Apoi în directorul kdenonbeta executaţi: $ svn add nume_proiect $ svn add nume_proiect/* $ svn add nume_proiect/src $ svn add nume_proiect/src/* $ svn commit Va apare o fereastră (implicit cea a editorului vi) unde introduceţi un mesaj jurnal. Este o practică bună să scrieţi observaţii la ceea ce puneţi sau adăugaţi în SVN. În cazul dumneavoastră veţi spune (mai întîî apăsaţi i pentru a intra în modul de editare al vi): Prima importare a proiectului nume_proiect. Verificaţi că toate fişierele au fost corect adăugate. Dacă nu, folosiţi comenziile svn add filename şi svn commit. De fiecare dată cînd doriţi să lucraţi la proiect, nu uitaţi să rulaţi: $ svn up ca să fiţi sigur că aveţi ultima versiune. Trebuie să aveţi instalat pe sistemul dumneavoastră modulul kdesdk. În acest modul există kdesdk/scripts/svn2dist, un script care extrage o aplicaţie din arborele cu cod sursă KDE şi îl împachetează ca pe o aplicaţie de sine stătătoare. Dacă rulaţi comanda svn2dist --help, obţineţi: Usage: svn2dist module directory [options] [addfile1] [addfile2] ... Considerînd că aplicaţia dumneavoastră este în modulul kdenonbeta şi are numele KMyApp, iată comanda pe care trebuie să o executaţi: $ svn2dist /calea/la/sursele/svn/kde/kdenonbeta/ kmyapp -n kmyapp -v 0.1 unde înlocuiţi kmyapp cu numele aplicaţiei dumneavoastră şi 0.1 cu versiunea curentă a programului. În directorul unde aţi executat comanda vor fi create două pachete: kmyapp-0.1.tar.gz şi kmyapp-0.1.tar.bz2. Răspunsuri la întrebări frecvente pentru programatorul KDE http://developer.kde.org/documentation/other/developer-faq.html KDE Application Developer's Checklist http://developer.kde.org/documentation/other/checklist.html Tutorial interfaţa grafică XML KDE http://www.ro.kde.org/articole/xmlgui.html Referinţa API-ului KDE (pentru SVN trunk) http://developer.kde.org/documentation/library/cvs-api/ Proiectarea interfeţelor grafice KDE http://developer.kde.org/documentation/standards/kde/style/basics/index.html Referinţa Qt pe web http://doc.trolltech.com/3.2/index.html Qt Quartely: ştiri pentru programatorii C++ şi Qt http://doc.trolltech.com/qq/ The C++ FAQ Lite http://www.parashift.com/c++-faq-lite/index.html Programarea setărilor utilizator în KDE 3 http://www.ro.kde.org/articole/kdeset.html Pasul 1 - Verificaţi că aţi salvat forma cu numele sigcreatedlg.ui şi închideţi &designer;. Dacă deschideţi acest fişier cu un editor de text, veţi vedea că nu este cod sursă C++, ci cod de marcare XML. Cu &designer; vine şi un utilitar de linie de comandă special numit uic. Această comandă este folosită pentru a converti fişierul .ui în fişiere .h şi .cpp. În mod normal această operaţie este făcută automat de &kdevelop;. Dacă dintr-un anumit motiv &kdevelop; nu generează fişierele .h şi .cpp din sigcreatedlg.ui, iată mai jos două comenzi pe care le puteţi executa manual într-o consolă, în directorul sigcreate/src: uic -o sigcreatedlg.h sigcreatedlg.ui uic -o sigcreatedlg.cpp -i sigcreatedlg.h sigcreatedlg.ui Pasul 2 - Acum trebuie să derivaţi clasa pe care &kdevelop; a generat-o pentru dumneavoastră (clasa SigCreate) din noua clasă dialog &designer;. În &kdevelop; afişaţi fişierul sigcreate.h selectîndu-l în File Selector şi adăugaţi #include "sigcreatedlg.h" în partea de sus a fişierului sigcreate.h, cu toate antetele de care aveţi nevoie. #include <kapplication.h> #include <qwidget.h> #include <qlineedit.h> #include <qmultilineedit.h> #include <qcombobox.h> #include <sigcreatedlg.h> /** SigCreate este clasa de bază a proiectului */ class SigCreate : public SigCreateDlg { Înlocuiţi public KMainWindow cu public SigCreateDlg deoarece SigCreate se trage din SigCreateDlg. În fişierul sigcreate.h ar trebui să aveţi următoarele linii: class SigCreate : public SigCreateDlg { Q_OBJECT public: /** constructor */ SigCreate(QWidget *parent=0, const char *name=0); /** destructor */ ~SigCreate(); }; Fişierul sigcreate.cpp ar trebui să arate ca mai jos: #include "sigcreate.h" SigCreate::SigCreate(QWidget *parent, const char *name) : SigCreateDlg(parent, name) { } SigCreate::~SigCreate() { } Pasul 3 - De asemenea trebuie să adăugaţi manual fişierele incluse. În sigcreate.h adăugaţi antetele următoare, cîte unul pentru fiecare din clasele pe care le-am folosit: #include <qlineedit.h> #include <qcombobox.h> #include <qmultilineedit.h> Pasul 4 - Comentaţi cîteva linii din fişierul main.cpp: /* if (app.isRestored()) { RESTORE(SigCreate); } else*/ deoarece proiectul era iniţial generat să se bazeze pe KMainWindow ce oferă foarte multe funcţionalităţi. Deoarece acest program este gîndit pentru un tutorial, nu reflectă un flux de programare "real". După ce aţi inclus fişierul .ui, creaţi o clasă nouă, SigCreate. Pentru a face acest lucru daţi clic dreapta pe Classes, selectaţi New Class... şi apoi va apărea dialogul Class Generator. Introduceţi numele clasei (SigCreate) şi al clasei de bază (SigCreateDlg). Nu uitaţi să selectaţi opţiunea generate a QWidget-childclass. La sfîrşit daţi clic pe OK. Nu am parcurs acel pas deoarece clasa SigCreate este fereastra noastră principală. Clasa derivată nu poate fi numită ca fişierul .ui. Din fişierul .ui sînt generate automat fişierele .h şi .cpp aşa că trebuie să aibă nume diferite. Puteţi să evidenţiaţi un fişier de interfaţă grafică adăugînd dlg la numele lui. Clasa derivată din .ui s-ar putea numi de exemplu mainWindowDlg. Acum generaţi proiectul pentru a vedea dacă totul este corect. Mai întîi rulaţi BuildRun automake & friends, BuildRun configure, BuildBuild Project şi BuildInstall (sau Install ca utilizatorul root). La final porniţi programul cu BuildExecute Program (sau &Shift;F9). Reţineţi că în funcţie de configuraţia dumneavoastră, dacă nu aveţi acces de scriere în $KDEDIR, s-ar putea să fie nevoie să executaţi BuildInstall ca utilizatorul root. De asemenea puteţi să săriţi peste pasul cu instalarea. Pentru tutorialul de faţă nu este o problemă, dar la aplicaţiile reale s-ar putea să apară probleme. Interfaţa grafică trebuie să apară dar pentru moment butonul Create! nu merge. Îl vom rezolva implementînd slotul slotCreateSig(). Vedeţi imaginea de mai jos. Dacă la compilare vă loviţi de eroarea Syntax error before `{' token făcînd referire la acolada dreaptă înainte de linia cu Q_OBJECT din sigcreate.h, atunci aţi uitat să adăugaţi #include "sigcreatedlg.h" sau fişierul sigcreatedlg.h nu a fost creat (conform notei de mai sus). Programul Programul Programul aproape gata Pentru a face programul să funcţioneze dorim să dăm clic pe butonul Create! şi acest lucru afişează semnătura în cîmpul TextEdit. Este important să învăţaţi din documentaţia &qt; ce face fiecare widget, să aflaţi semnalele şi sloturile asociate. De exemplu citiţi documentaţia clasei QPushButton. Ea este derivată din QButton şi în documentaţia QButton puteţi vedea uşor care sînt semnalele disponibile. Signals void pressed () void released () void clicked () void toggled ( bool on ) void stateChanged ( int state ) Deci semnalul de care avem nevoie aici este clicked() emis de butonul Create!. Deoarece SigCreate este o clasă derivată din SigCreateDlg, slotul nostru îl implementăm în clasa SigCreate. El va fi o metodă publică. În fişierul sigcreate.cpp adăugăm următoarele linii: void SigCreate::slotCreateSig() { sigBox->append("\n--"); sigBox->append(nameBox->text()); sigBox->append(mailBox->text()); sigBox->append(commBox->currentText()); } şi bineînţeles declarăm acea metodă în fişierul sigcreate.h, după cum urmează: public slots: virtual void slotCreateSig(); În codul de mai sus puteţi vedea că în sigBox, care este un TextEdit, va fi un "--", apoi textul din nameBox (numele pe care l-aţi introdus), adresa de e-mail plus comentariul. append() este o metodă QTextEdit. Această clasă are o mulţime de funcţii membru astfel că ar trebui să citiţi documentaţia ei ca să aflaţi ce metodă vă trebuie şi funcţionalităţile widget-ului în general. Generaţi din nou proiectul (BuildBuild Project sau BuildInstall ca utilizatorul root) şi rulaţi programul. Iată mai jos ce ar trebui să obţineţi: Merge! Merge! Merge! Tutorial copyright 2001-2003 Anne-Marie Mahfouf annma AT kde DOT org Contributori: : Thomas Nagy tnagy NOSPAM eleve DOT emn DOT fr &underFDL;