Tutorial de Qt4 Designer

Títol: Tutorial de Qt4 Designer Volum: 1 Alumne: Xavier Fuster Juncà Director/Ponent: Lluís Pérez Vidal Departament: Llenguatges i Sistemes Informàtics Data: 18/06/2009 DADES DEL PROJECTE Títol del Projecte: Tutorial de Qt4 Designer Nom de l'estudiant: Xavier Fuster Juncà Titulació: Enginyeria en Informàtica Crèdits: 37,5 Director/Ponent: Lluís Pérez Vidal Departament: Llenguatges i Sistemes Informàtics MEMBRES DEL TRIBUNAL (nom i signatura) President: Lluís Solano Albajes Vocal: Pere Barlet Ros Secretari: Lluís Pérez Vidal QUALIFICACIÓ Qualificació numèrica: Qualificació descriptiva: Data: Agraïments Primer de tot agrair a en Lluís, el director del projecte, la possibilitat que m'ha brindat de fer-lo i la dedicació que hi ha mostrat, obert sempre a resoldre els meus dubtes. Un agraïment també a l'Imanol Muñoz, per la paciència que ha tingut escoltant els meus dubtes i preguntes i per l'ajuda que m'ha donat. Donar les gràcies de manera especial a la meva xicota Tamar pel suport que m'ha donat durant tot el projecte i la paciència que ha tingut per escoltar-me parlant d'aquest tema contínuament durant mesos. Mil gràcies. També donar les gràcies a la meva família, els meus pares Martí i Assumpció i a la meva germana Cristina, pel seu suport incondicional en tot moment. I finalment a tots els meus amics escampats per la geografia catalana, que han sabut distreure'm per donar-me forces i poder seguir treballant. Capítol 1 Introducció En aquest capítol es vol donar una idea general sobre el tema del projecte, les raons que l’han motivat i com s’ha organitzat la memòria en general. 1.1 – Definició del projecte Elaboració d'un tutorial del Designer de Qt4, a partit d'un de ja existent per Qt3 visible a http://www.lsi.upc.edu/~lpv/plmaster.dir/charalam/index.html , tot fet en Linux. 1.2 – Descripció del projecte Aquest projecte té com a objectiu principal ser el successor d’un manual ja existent de la versió 3 del programa de creació d’interfícies Qt Designer1, usat com a suport a la docència a l’Escola Tècnica superior d’Enginyeria Industrial de Barcelona (ETSEIB)2. A més, donada la seva naturalesa el seu àmbit pot no només limitar-se a l’ETSEIB, sinó que pot ser útil per a qualsevol usuari de Linux interessat en Qt4 Designer. A més a més, un requisit bàsic és que estigui creat integrament en una plataforma GNU/Linux i per a la versió gratuïta del Designer dissenyada per la citada plataforma. Qt Designer de fet és una aplicació amb interfície gràfica orientada a la creació d’altres interfícies, el qual basa el seu funcionament en la llibreria Qt3, que és multi plataforma, i per tant permet crear interfície amb un alt grau de portabilitat. Desenvolupada per la companyia Qt Software (anteriorment TrollTech), ens proporciona un conjunt d'eines per elaborar 1: http://doc.trolltech.com/4.0/qt4-designer.html 2: http://www.etseib.upc.edu/ 3: http://www.qtsoftware.com/products/library 1 1. Introducció Tutorial de Qt4 Designer interfícies d'usuari gràfiques (GUI) a través de la seva combinació amb el llenguatge C++ en el seu paquet bàsic i la seva pròpia interfície gràfica, el citat Designer. La llibreria Qt compta amb totes les definicions dels elements bàsiques per a poder crear aquestes interfícies, des dels marcs generals on ubicar-les fins als botons concrets per executar una determinada funció, a part de totes les funcions per interconnectar-los i dotar els elements de funcionalitats. Aquesta llibreria és molt extensa, i per tant el Designer no inclou totes les possibilitats ni tots els elements existents, només uns patrons bàsics i generals de disseny i uns quants elements que poden englobar la majoria de solucions amb l’únic objectiu de simplificar les tasques i estalviar feina de programació directa de codi. L’anterior manual va ser fet sobre la versió 3 de la llibreria i del seu Designer, per tant i com s’anirà veient i confirmant en el transcurs d’aquesta memòria, donada la substancial diferència entre les versions 3 i 4 del programa, cal una revisió completa del manual i una reestructuració del mateix. Per poder fer-lo, cal investigar el programa, estudiar-ne les novetats, les noves possibilitats i revisar com es poden trametre els mateixos coneixements als lectors del tutorial. A més a més, i amb el vistiplau del director, vaig decidir enfocar el manual de manera diferent al que hi havia com a punt de partida, conservant-ne l'essència (És a dir, que fos gràfic, amb moltes captures i de seguiment intuïtiu), per tal de millorar-lo, aportant al lector una base de coneixements més sòlida sobre l'entorn de l'aplicació en sí i més d'un exemple guiat a solucionar i amb les instruccions corresponents per a elaborar-ne la sol·lució. 2 1. Introducció Tutorial de Qt4 Designer 1.3 – Motivació personal Els motius que m’han impulsat a triar aquest projecte enlloc de qualsevol altre dels ofertats són els següents: ➢El seu caire docent i el fet que altra gent es pugui beneficiar de la meva feina. Crec que un bon tutorial que descrigui com usar l’eina potencia l’interès del lector cap a aquesta i possibilita un aprenentatge ràpid i efectiu. A més, en ser un tutorial sota llicència Creative Commons4 es fa possible el lliure accés a la seva informació. ➢El fet d’haver treballat amb l’anterior versió del programa a l’assignatura de Visualització i Interacció gràfica (VIG) a la Facultat d'Informàtica de Barcelona (FIB), la qual cosa em va fer adonar la la incompletesa de molts manuals que es poden trobar per la xarxa. Una de les motivacions d'aquest projecte, doncs, ha estat crear un manual bastant complet a l'abast de tothom, integrant tant conceptes purament teòrics i d'ús de la interfície del Designer fins a exemples pràctics i sol·lucionats que serveixen com a exemples a realitzar per tal de consolidar aquests conceptes. ➢La possibilitat d'aprendre. Abans de realitzar el tutorial desconeixia per complet la nova distribució de Qt Designer, i ara he adquirit els coneixements i els recursos necessaris per elaborar qualsevol tipus d’interfície que sigui realitzable amb aquesta eina, que al meu parer és molt potent i interessant. ➢El meu creixent interès pel món del software lliure i l'open source. En ser un programa open source en la seva versió gratuïta i que funciona sobre una plataforma lliure com Linux, que a opinió meva és el futur de la informàtica, crec que cal potenciar-ne l'ús, i una bona manera de fer-ho és elaborar recursos com aquest tutorial, que a part de proporcionar al lector les nocions necessàries sobre programes que hi puguin funcionar a més estan disponibles a tothom que li faci falta a través de la xarxa de manera gratuïta i protegits de la comercialització gràcies a llicències, com Creative Commons, en el cas d'aquest projecte. ➢La finalització de la meva carrera d'enginyeria en informàtica. 4: http://creativecommons.org/licenses/by-nc/3.0/es/ 3 1. Introducció Tutorial de Qt4 Designer ➢El fet de poder realitzar el projecte des de casa, amb flexibilitat d'horaris total, ja que combinava el projecte amb varies assignatures de la carrera. A més, i malgrat que sóc conscient que en la majoria de casos no és així en el món laboral, el fet d'organitzar-me la feina a la meva manera era un repte per demostrar-me que tenia capacitat de regular-me la càrrega i el ritme de treball. 1.4 – Organització de la memòria. He organitzat la memòria del projecte pensant en quatre blocs clarament diferenciats i cinc annexos. En primer lloc, la introducció, la qual dóna una idea general del projecte. En segon lloc, la part de desenvolupament en la que aporto la visió del projecte des del meu punt de vista, el de desenvolupador del manual, una anàlisi en ordre cronològic sobre la realització del propi tutorial i detallant els programes utilitzats durant el transcurs de la mateixa. I com a tercer gran bloc, el punt de vista del lector del manual, com cal que l'usi per tal de treureli tot el partit possible. Finalment, s'ha inclòs un capítol de conclusions sobre el projecte. El primer annex és el contingut del tutorial en sí extret dels arxius l'HTML que el composen. He decidit utilitzar el propi tutorial com annex de la memòria perquè dins seu he explicat pràcticament la totalitat de tecnicismes i conceptes relacionats amb el programa, i per aquest fet pot ser un també una valuosa eina de consulta per aquesta memòria. El segon annex és la ressenya d'informació extreta del manual d'Ubuntu d'una comanda explicada en l'apartat de desenvolupament de la memòria. El tercer annex correspon a l'estudi econòmic del projecte i l'anàlisi de la planificació 4 1. Introducció Tutorial de Qt4 Designer El quart annex és un complement que explica els continguts del DVD adjunt a la memòria que conté el tutorial i la memòria pròpiament dita. El cinquè i últim annex és la bibliografia del projecte, que inclou totes les planes web que s'han usat per a la construcció del tutorial en sí. Aquesta memòria ha estat redactada amb el programa open source, Open Office Writer, i està disponible en format PDF 5. Tant el tutorial com la memòria han estat desenvolupats íntegrament en un sistema operatiu GNU/Linux, concretament en una distribució Ubuntu en la seva versió 9.04. 5:http://leary.lsi.upc.edu/fuster/memoria.pdf 5 1. Introducció Tutorial de Qt4 Designer 6 Capítol 2 Desenvolupament En aquest capítol de la memòria es descriurà l'estructura que s'ha ultimat durant el desenvolupament del tutorial, els programes que s'han usat per al mateix i els diversos problemes que s'han anat solucionant al llarg del procés. 2.1 – Organització del manual 2.1.1 – Estructura general El primer pas per a la creació del tutorial per a la nova versió de Qt Designer va ser l'estudi del seu predecessor. L'anterior manual es vertebrava al voltant de la creació d'una interfície en concret que usava signals i slots per connectar uns botons a un widget Canvas creat per l'autor i la proposta d'exercicis interactius per a modificar-la, sense solució publicada. Així doncs tenia assegurat el format del manual, tipus web, com l'anterior, i vaig prendre la decisió de fer-la íntegrament amb llenguatge HTML, lleguatge de programació de planes 7 Il·lustració 1: Vista de la interfície aconseguida a través de la ressolució de l'anterior tutorial 2. Desenvolupament Tutorial de Qt4 Designer a part de ser una tasca molt feixuga, no tenia massa sentit pràctic, ja que cada element per si sol no formarà en gairebé cap cas una interfície, sinó que serà la suma d'un grup d'elements en interacció qui ho farà. Així doncs, i un cop més consultant al meu director de projecte, vaig reestructurar la idea que tenia sobre la secció d'exemples. Vaig decidir fer una sèrie d'exemples graduals, de menys a més dificultat. Els de menys dificultat tindrien la totalitat de la seva resolució possible des del propi Qt4 Designer, sense haver d'annexar-hi cap codi ni de crear cap fitxer de codi, perquè no requeririen la compilació dels mateixos. Els de més dificultat en canvi, tot i que no serien complicats, exigirien tocar els arxius relatius al projecte per compilar-los, consultar la API de la llibreria i usar els coneixements donats sobre custom widgets. El que sí que tenia clar des d'un principi era l'estructura que seguirien els exemples. Cada exemple constaria de dues parts: l'enunciat i la solució. A l'enunciat es presentaria una captura de la interfície demanada a l'exercici, l'explicació exacta del comportament que hauria d'arribar a tenir un cop feta i, en cas que fes falta, l'enllaç als arxius que es requerissin per a la resolució del problema. A la solució podia posar-s'hi en algun cas l'exercici solucionat si s'esqueia, però el principal i més rellevant seria la resolució guiada pas per pas del problema proposat, amb explicacions, raonaments i captures del programa per cadascuna de les accions a realitzar a cada pas . Un cop decidida l'estructura que seguirien els exemples, vaig creure que era molt interessant que almenys en un es veiés la característica de portabilitat de projectes realitzats amb d'altres versions de Qt a la nova. I per fer-ho, podia fer servir la interfície que servia de model per a la versió anterior del tutorial, tot explicant-ne la seva compatibilitat amb la nova versió i explicant també el conjunt de procediments que cal realitzar per a poder-la compilar i executar amb la nova versió de la llibreria Qt. Amb 14 2. Desenvolupament Tutorial de Qt4 Designer aquesta idea vaig agregar una nova secció als exemples, dedicada a aquest exemple concret que tracta la problemàtica amb arxius creats amb versions anteriors de Qt. Faltava doncs crear aquests exemples per cadascun dels apartats estipulats. Com a exemples senzills, vaig decidir abordar els temes següents per tal que els lectors poguessin experimentar amb cada un d'ells d'una manera o altra: ➢Layouts8, widgets d'exemple de l'aplicació i widgets contenidors i no-contenirdors predeterminats al programa a l'exemple Ús de layouts. En aquest exemple els usuaris del manual experimentaran amb els layouts i les seves propietats, a part de veure el comportament en directe de check boxes, radio buttons i button boxes9. 8: Veure apartat A.2.1.2 de la memòria 9: Veure apartat A.2.1.2 de la memòria 15 Il·lustració 4: Vista de la interfície resolta de l'exemple "Ús de layouts" 2. Desenvolupament Tutorial de Qt4 Designer ➢Dials, slider bars i LCDPanels10 i signals i slots a l'exemple Connexions bàsiques. La idea d'aquest apartat és que els usuaris del tutorial aprenguin a fer connexions bàsiques mitjançant signals i slots dins del propi Designer, sense necessitat d'introduir cap línia de codi fora d'aquest. ➢Spacers, botons, labels i línies de text11 a l'exemple L'aparença és el que compta. Aquest exemple va sorgir degut a una experiència que he observat a moltíssima gent quan comença a usar Qt, que és un gran conflicte amb els spacers i el seu comportament. Amb aquest exemple pretenc evitar aquests dubtes clarificant les seves propietats i explicant què volen dir cadascuna d'elles, quin és el motiu del comportament que parametritzen i quina és la seva repercussió sobre la resta d'elements amb els que estan en contacte a la interfície. 10: Veure apartat A.2.1.2 de la memòria 11: Veure apartat A.2.1.2 de la memòria 16 Il·lustració 5: Vista de la interfície resolta de l'exemple "Connexions bàsiques" 2. Desenvolupament Tutorial de Qt4 Designer Un cop fets els exemples més senzills, vaig posar-me a treballar en els més complexos. Volia que els usuaris que seguissin el tutorial haguessin d'interaccionar amb els arxius relacionats amb l'entorn del programa que s'havien explicat a l'apartat de compilació i arxius relacionats del manual, però sense forçar-los a programar en excés, ja que el manual està fonamentalment enfocat al Designer. La idea era que poguessin interpretar els aquests arxius i siguessin minimament capaços de modificar-los per tal d'obtenir els resultats que necessitessin en cas de necessitat sense haver de ser uns experts programadors. A més, en aquesta secció em volia centrar en aquests nous aspectes plenament, pel que altres eventualitats tractades als exemples senzills com l'ús de layouts o spacers serien detallades, però en menor grau. D'aquesta manera crec que es marca una mica més la idea d'una pauta de progressió en els exemples, pensats per a fer primer els més senzills i després els més complexes. Amb la premissa anterior, d'estalviar tota la programació que no fos estrictament necessària, es crearen dos exemples, que reunien diversos conceptes: ➢Labels, botons, i signals i slots personalitzats a El semàfor. L'exemple exigeix interactuar amb les propietats del les labels i crear signals i slots personalitzats 17 Il·lustració 6: Vista de la interfície a realitzar a l'exemple "L'aparença és el que compta" 2. Desenvolupament Tutorial de Qt4 Designer mitjançant l'edició dels fitxers .cpp i .h12 relacionats amb la interfície i explicats a l'apartat de compilació i fitxers de la part teòrica del tutorial. ➢Custom widgets i signals i slots propis dels custom widgets a La calculadora. Pel fet comentat anteriorment, no m'interessava que els propis usuaris programessin els custom widgets, ja que no volia enfocar el manual a programadors experimentats, i vaig creure més apropiat donar-los els nous widgets fets i que segons els patrons explicats els analitzessin, per veure quins són els seus signals i slots i què fan, i agreguessin a la interfície, tot seguint els passos descrits en l'apartat de widgets i custom widgets del manual. 12: : Veure apartat A.3 de la memòria 18 Il·lustració 7: Vista de la interfície a obtenir amb l'exemple "El semàfor" 2. Desenvolupament Tutorial de Qt4 Designer 2.1.4 – Apartat d'enllaços Finalment, vaig complementar el tutorial amb un apartat d'enllaços web, on es faciliten les adreçes en xarxa dels següents elements: ➢Enllaços a la web de l'aplicació, la documentació relacionada i exemples d'interfícies resoltes des dels arxius font, és a dir, només amb codi i sense usar Designer. ➢Enllaços a webs des d'on l'usuari pot descarregar-se editors de text, per poder editar els arxius de codi mencionats en el tutorial. Malgrat que l'editor de text per defecte de la distribució Linux que es tingui serveix perfectament, si l'usuari en volgués provar un altre aquí en pot trobar. ➢Enllaç a un manual bàsic d'ús de Linux, per si l'usuari no domina aquest sistema operatiu i té dubtes sobre comandes o organització del propi sistema operatiu. ➢Enllaç a un manual de C++, el llenguatge que s'usa pels fitxers relacionats amb els projectes de Qt4 Designer i del qual és bàsic tenir una noció per poder seguir correctament el tutorial del projecte. 19 Il·lustració 8: Vista de la interfície obtinguda resolent l'exemple "La calculadora" 2. Desenvolupament Tutorial de Qt4 Designer 2.2 – Programari utilitzat En aquesta secció es presentaran breument els programes usats durant la creació del tutorial, la funció que s'els ha donat i el motiu pel qual s'ha fet la tria: 2.2.1 – Linux Ubuntu 9.04 Com s'ha comentat anteriorment, un dels requisits del projecte era que fos desenvolupat íntegrament en un entorn Linux. A partir d'aquí, era jo qui podria decidir la distribució a utilitzar, i vaig decantar-me per Ubuntu. La meva decisió va obeir a motius diversos. En primer lloc, el fet que tenia instal·lada en el meu portàtil aquesta distribució des de feia quasi dos anys i ja estic acostumat a treballar amb ella, malgrat que haver d'instal·lar una nova distribució no hagués suposat cap problema. Un altre motiu va ser el creixement de nombre d'usuaris que està tenint aquesta distribució, s'està fent molt popular, i aquest fet em va fer acabar de decantar per aquesta opció. 2.2.2 – Editor de text Tant per fer l'edició de l'estructura HTML del tutorial com per modificar i crear fitxers .cpp i .h relacionats amb els exemples creats per al manual cal un editor de text. La meva elecció va ser basicament forçada; inicialment havia pensat utilitzar Kate13 com a editor, però el problema era que en el meu portàtil, on he desenvolupat tot el projecte, no anava bé, malgrat haver-lo reinstal·lat diversos cops. Així doncs, em vaig decantar per l'editor de text d'Ubuntu, ja que servia perfectament i a més compta amb un codi de colors bastant clar per la sintaxi del text quan reconeix el format de l'arxiu. 13: http://kate-editor.org/ 20 2. Desenvolupament Tutorial de Qt4 Designer 2.2.3 - GIMP És un programa de tractament d'imatges de Linux14. El seu nom són sigles, que signifiquen GNU Image Manipulation Code. Vaig decantar-me per aquest programa després de buscar alternatives lliures a Adobe Photoshop, ja que jo tenia nocions d'aquest últim i trobo molt interessant el seu funcionament i les seves possibilitats. La veritat és que em va sorprendre agradablement aquest programa, doncs és molt semblant en la filosofia de funcionament al seu homòleg de pagament, almenys pel poc que l'he utilitzat. Fonamentalment, l'he fet servir per modificar captures de pantalla i per fer seleccions d'espais concrets d'aquestes captures, com els botons de la barra d'eines, utilitzats en aquesta part del tutorial15. 2.2.4 – Mozilla Firefox Navegador web de codi obert16 que ha estat usat per a la previsualització del manual en general i de determinats avanços del mateix en particular, per comprovar la correcta visualització dels elements per pantalla. He escollit aquest navegador pel mateix motiu que la distribució Ubuntu, crec que és el navegador gratuït que té major nombre d'usuaris i per tant el que està més estès i a més és el que jo mateix utilitzo habitualment, pel que hi estic fortament familiaritzat. 2.2.5 – OpenOffice Writer Processador de textos de codi obert, part integrant del paquet d'utilitats d'ofimàtica OpenOffice.org17, molt potent que es pot utilitzar per editar informes i documents de caràcter formal que he usat per crear i formatar tant l'informe intermedi del projecte com la aquesta memòria. A més, compta amb la interessant utilitat incorporada de passar els 14: http://www.gimp.org/ 15: Veure apartat A.2.3 de la memòria 16: http://www.mozilla-europe.org/ca/firefox/ 17: http://ca.openoffice.org/ 21 2. Desenvolupament Tutorial de Qt4 Designer documents realitzats a PDF automàticament. M'he decantat pel seu ús perquè és un programa gratuït i de codi obert per a Linux. 2.2.6 – OpenOffice Impress Programa que he utilitzat per elaborar la presentació per la defensa del projecte. Serveix per fer presentacions multimèdia anàlogament al popular programa de pagament PowerPoint, forma part també del paquet ofimàtic OpenOffice.org i per tant és de codi obert. He decidit fer-ne ús degut als mateixos motius que m'han dut a utilitzar OpenOffice Writer. 2.3 – Problemes i solucions Durant tot el procés d'elaboració del tutorial m'he trobat amb diverses dificultats que han estat resoltes en la mesura que ha estat possible sense canviar l'essència inicial del projecte. Un dels primers problemes que se'm van presentar va ser la interrelació de conceptes dins els manual. Quan en algun apartat teòric s'explica algun concepte, i per fer-ho es recorre a l'explicació o definició d'un concepte descrit en un apartat anterior o posterior, sobretot si és d'un apartat posterior, podria haver-hi el risc que l'usuari del manual no entengués bé l'explicació, es fes un embolic o simplement la passés per alt per pura comoditat. Per això vaig estar pensant la millor manera de resoldre aquest fet. En primera instància, vaig fer enllaços dins l'explicació, de manera que si l'usuari hi clica va directament a l'apartat on s'explica el concepte marcat per l'enllaç. Això és una possible solució, sí, però no és gaire concreta. Per exemple, si hom està seguint 22 2. Desenvolupament Tutorial de Qt4 Designer l'exemple del semàfor i quan se li diu que el fitxer main18 obeeix el patró del fitxer main genèric de l'apartat de compilació, si l'enllaç d'aquest concepte el porta al principi de l'apartat de compilació, que és molt llarg i engloba diversos temes, l'usuari s'ha d'entretenir a buscar per tota la plana web de la secció l'apartat que parla del fitxer main genèric, la qual cosa fa més lenta la seva resolució de l'exercici i pot provocar que perdi el fil de les explicacions. Per tant, calia concretar més aquest enllaç, i aconseguir que tan dins d'una mateixa plana com entre planes diferents en clicar a un enllaç l'usuari fos transportat al concepte particular que està buscant. Per fer-ho, em vaig recolzar en uns enllaços especials que possibilita el llenguatge HTML, com són la dupla <a name=”nomConcepte”>Concepte</a>, que defineix un camp propi amb un nom, i <a href=”web.html#nomConcepte”>enllaç</a>, que crea l'enllaç a aquest camp concret dins la plana que web que el defineix. El seu funcionament és el següent: Il·lustració 9: Esquema del funcionament dels enllaços conceptuals del tutorial. A més, i creient-ho convenient, es van afegir al final de cada apartat important i amb entitat pròpia dins les seccions més llargues, un enllaç a l'inici de la secció, és a dir, de la mateixa plana web, per augmentar la navegabilitat. 18: Veure apartat A.3 de la memòria 23 <a name=”Concepte”>Concepte</a> <a href=”PlanaDesti.html#Concepte”>enllaç</a> Plana de destí Plana actual 3. Punt de vista de l'usuari Tutorial de Qt4 Designer concretes associades a cada funció disponible. 3.2.6 – El menú principal 6 Ubica i desglossa per complet tot el menú principal del programa, donant una breu explicació sobre cadascuna d'elles. 3.2.7 – La barra d'eines7 Proporciona la informació necessària de cada icona de la barra d'eines i les possibilitats de configuració de la mateixa, relacionant els conceptes amb els vistos a l'apartat del menú principal. 3.2.8 – Fitxers i compilació del projecte8 En aquest apartat es llisten i expliquen els diversos fitxers relacionats amb el procés de compilació d'una interfície creada amb Qt Designer, així com es donen les pautes per poder compilar una interfície creada per l'usuari amb l'aplicació. 3.2.9 – Les accions9 Proporciona la definició de les accions de Qt Designer, i mostra el seu ús i els seves característiques. 6: Veure apartat A.2.2 de la memòria 7:Veure apartat A.2.3 de la memòria 8: Veure apartat A.3 de la memòria 9: Veure apartat A.4 de la memòria 30 3. Punt de vista de l'usuari Tutorial de Qt4 Designer 3.2.10 – Widgets i custom widgets10 Defineix el concepte de widget i custom widget i mostra com agregar custom widgets al programa de manera que puguin ser usats com els predeterminats del Designer. 3.2.11 – Signals & slots11 Dóna els conceptes teòrics bàsics sobre els signals i slots i mostra com usar els predeterminats dels elements dins el propi Designer. 3.2.12 – Exemples i sol·lucions12 En aquest apartat es posen a prova els coneixements adquirits a la resta del tutorial, proposant problemes a solucionar i donant-ne, per cada un d'ells , una solució pautada. 3.2.12.1 – Exemples bàsics13 En aquests exemples ajuden a assimilar conceptes purament relacionats amb el propi Designer: L'ús de layouts, widgets predeterminats, connexions bàsiques entre ells, l'ús de la finestra de propietats i de la barra d'eines. 10: Veure apartat A.5 de la memòria 11: Veure apartat A.6 de la memòria 12: Veure apartat A.7 de la memòria 13: Veure apartat A.7.1 de la memòria 31 3. Punt de vista de l'usuari Tutorial de Qt4 Designer 3.2.12.2 – Augmentant la dificultat 14 Aquest apartat obliga a l'usuari a interaccionar amb els arxius relatius als projectes de Qt Designer però que no es poden modificar a través d'ell, incorporar custom widgets a l'aplicació, saber analitzar els arxius font dels custom widgets per desxifrar què fan els seus signals i slots propis, incorporar a una interfície signals i slots creats per ells mateixos, a part de repassar conceptes que ja es donaven en els exemples més senzills, com l'us de layouts, la gestió de les propietats dels elements a través de la finestra de propietats, la creació de connexions entre elements dins el propi Designer i l'ús de widgets predeterminats del Designer. 3.2.12.3 – Porting de Qt3 a Qt415 Descriu els passos a seguir per tal d'executar una aplicació generada amb la llibreria Qt3 en l'actual versió i força a l'usuari a crear i modificar els arxius font relacionats per la creació de custom widgets i la integració a la interfície del Designer. 3.2.13 – Enllaços16 Aquest apartat no té una finalitat docent, si no més aviat de consulta. S'hi poden trobar enllaços web a recursos de naturalesa diversa, com programes d'edició de codi, manuals de Linux i C++ o webs de consulta sobre Qt Designer, la API de Qt o exemples resolts, que malgrat que són en versió íntegra de codi, poden mostrar les possibilitats de la llibreria i què es pot arribar a fer amb ella. 14: Veure apartat A.7.2 de la memòria 15: Veure apartat A.7.3 de la memòria 16: Veure apartat A.8 de la memòria 32 3. Punt de vista de l'usuari Tutorial de Qt4 Designer 3.3 – Usuaris novells El plantejament que hauria de tenir un usuari novell davant d'aquest manual és usar-lo com una eina totalment seqüencial, és a dir, seguir-lo des del primer punt fins l'últim i per ordre. Podria ometre potser l'apartat de millores de la versió, però també conté informació que pot interessar-li de cara apartats següents. Primer de tot veure com s'instal·la el programa, com cal que l'executi i tot seguit els elements que el componen. Aprendre per a què serveixen les diferents finestres del programa, mitjançant una lectura exhaustiva d'aquestes, de les opcions del menú i de la barra d'eines. Tot seguit, amb l'apartat de compilació, assimilar per a què serveixen els arxius descrits i provar de reproduir l'exemple donat de compilació per assimilar bé els conceptes. Seguir l'exemple únicament llegint-lo també és vàlid, però així s'agafa una mica de practica i agilitat en aquest procés, que és mecànic i sempre reitera els mateixos passos. En acabat, reproduir també l'exemple de l'apartat d'accions després d'assimilar els conceptes descrits per veure en directe com apareixen els elements en el Designer. Caldria fer el mateix per l'apartat de signals i slots, doncs és dels més importants del tutorial. La seva postura davant dels exemples hauria de ser la mateixa que per la resta del tutorial. Hauria de començar pels més senzills i intentar-los de resoldre per ordre ell mateix consultant les diverses seccions del manual o els recursos de la secció d'enllaços si és necessari. Quan el tingui resolt pot comprovar la solució proposada, o també la pot consultar en cas que la resolució del problema se li resisteixi, tot reproduint cada pas descrit en el tutorial ell mateix al seu ordinador i veient com realment arriba al resultat desitjat. Per a aquest tipus d'usuari l'exemple de Porting de Qt3 a Qt4 és un exemple més, pot servir per aprendre el concepte i la mecànica i per si cau a les seves mans una interfície com la indicada, però com que no ha tocat mai abans els programa la utilitat d'aquest exemple acaba aquí. 33 3. Punt de vista de l'usuari Tutorial de Qt4 Designer 3.4 – Usuaris iniciats Per a un usuari iniciat en l'ús del programa Designer i el seu entorn els apartats inicials no tenen interès. Ja sap què és el programa i per què serveix. Potser li cal consultar la instal·lació, però això depèn més del seu nivell d'experiència en Linux. A partir d'aquí, aquest tipus d'usuari pot no seguir un ordre seqüencial del manual, pot saltar-se els apartats que ja conegui i domini i concentrar-se en examinar els que desconegui amb una metodologia semblant a la d'un usuari novell per aquests casos. En quant als exemples, es recomanable que els intentin de fer tots per ordre de la mateixa manera que els usuaris novells, primer llegint el problema plantejat i intentar-lo de resoldre per ells mateixos recolzant-se en el tutorial i els enllaços externs. En aquest perfil d'usuari l'exemple de porting tindrà la mateixa finalitat que pels usuaris novells. 3.5 – Usuaris iniciats en alguna altra versió En aquest cas, donades les diferències respecte les anteriors versions del programa i de la llibreria que ja s'han comentat, aquest tipus d'usuari a la pràctica és d'un perfil intermedi entre un usuari novell i un d'iniciat. Coneixia algunes de les característiques i funcionalitats de versions anteriors, però podria ser que haguessin canviat en la nova distribució. Per tant, el seguiment que hauria de fer del manual és seqüencial també, però com en el cas d'un usuari iniciat, ometent l'apartat que descriu què és i què fa el programa i , variant del mètode dels anterior usuaris, llegint bé els canvis principals de la nova versió. La lectura de la resta de capítols teòrics pot ser menys exhaustiva en algunes parts, que no hagin canviat respecte altres versions, com algunes opcions de la finestra principal, però 34 3. Punt de vista de l'usuari Tutorial de Qt4 Designer atenta a les novetats que el propi usuari adverteixi dins d'aquests capítols. Els capítols que si que requereixen una atenció especial són el de compilació i fitxers i el de widgets i custom widgets, els procediments dels quals canvien totalment respecte altres versions. En quan a la secció d'exemples, i degut als citats canvis, es recomana un seguiment seqüencial dels exemples de la mateixa manera que s'ha descrit per als usuaris iniciats, però en aquest cas l'exemple de porting agafa molt més sentit, doncs donarà l'eina necessària a l'usuari per poder transportar a la nova versió de la llibreria les seves creacions anteriors. 3.6 – Usuaris experimentats El manual, basant-se en l'anterior i en el context en què ha estat encarregat, no està enfocat en línies generals a aquest tipus d'usuaris. La part teòrica esdevé només una eina de consulta ocasional, ja que aquest perfil posseïx ja tots els conceptes bàsics relatius al programa . La part d'exercicis solucionats s'hauria d'enfocar de manera no seqüencial, en la que el propi usuari seleccioni els exemples que realment li poden suposar un repte o li poden aportar nous coneixements, provar-los de fer i tant si els ha sortit com si no l'han pogut acabar, consultar la solució guiada i seguir-la pas per pas. L'exemple de porting només cal que el realitzin si no coneixien la metodologia que comporta. 35 3. Punt de vista de l'usuari Tutorial de Qt4 Designer 3.7 – Usuaris experimentats en altres versions Aquest perfil d'usuari és bastant equivalent al d'un usuari iniciat en altres versions, malgrat que tingui un coneixement bàsic superior en alguna distribució anterior, les novetats que incorpora aquesta versió el força a repassar els conceptes teòrics a partir del capítol dels primers passos i de la secció de les millores de la versió, fent una lectura dels capítols teòrics buscant els canvis que hi trobi i especialment als capítols de compilació i fitxers i de widgets i custom widgets, pels motius citats anteriorment. Pels exercicis cal agafar un plantejament de tria d'exemples interessants, en base als coneixements que vegi que han canviat respecte la versió que dominava, i els realitzi de la mateixa manera que els altres usuaris. L'exemple de porting és molt interessant en aquest perfil d'usuari i cal que el faci, doncs li proporcionarà una eina per transportar els seus projectes anteriors a la nova versió. 36 Capítol 4 Conclusions Aquest capítol de la memòria està dedicat a les conclusions extretes després de la finalització del tutorial. 4.1 – El tutorial Fer conclusions sobre un tutorial és complicat, ja que la conclusió més important és si realment aconsegueix trametre els coneixements pels quals ha estat creat, i aquest veredicte està en mans dels possibles usuaris que tindrà. La conclusió que puc extreure'n jo com a autor del mateix és que crec que he aconseguit actualitzar, millorar i ampliar el tutorial anterior, donant-li un conjunt de coneixements més ampli i global i organitzant aquests continguts de manera gradual, ordenada i pautada. En definitiva, s'ha aconseguit donar una perspectiva global de l'aplicació i de la immensa llibreria sobre la que funciona. 4.2 – Qt4 Designer Un cop finalitzat el tutorial de l'aplicació, puc concloure fermament que en la meva opinió l'aplicació Designer ha donat un pas de gegant cap endarrere. La complicació que presenta per gestionar projectes integrals , degut al nul suporta la compilació o la creació d'arxius relacionats amb la interfície, o les poques facilitats que dóna a l'hora d'implementar widgets personalitzats opino que en desdibuixen les millores 37 4. Con clusions Tutorial de Qt4 Designer de la llibreria en general. Aquests fets crec que poden ser el resultat de la compra per part de Nokia1 de la companyia fabricant, l'aparició d'una versió amb llicència comercial i els canvis d'estratègia de la companyia. 4.3 – Aprenentatge personal Amb l'elaboració d'aquest manual he adquirit moltíssims coneixements sobre l'eina Qt Designer i sobre l'ús de la llibreria Qt en sí. Tenia certs coneixements sobre la versió 3 de l'eina, però vistos tots els canvis que comporta la nova versió m'he vist obligat a reciclar-me i a espavilar-me per resoldre els dubtes que anaven sorgint. Es podria pensar doncs, que no he usat gaires dels coneixements adquirits durant la carrera d'Enginyeria Informàtica, i de fet potser en el sentit tècnic i deixant a part els conceptes de Linux i de programació que he usat és veritat. Però el que si que he pogut posar en pràctica ha estat la constància en el treball, la planificació en el temps de la feina, la solució metòdica dels problemes que he trobat i l'autosuficiència que he adquirit per una via o altre durant els meus estudis, i que al meu parer, són els coneixements més importants. 1: http://www.nokia.com/ 38 Annex A Tutorial de Qt4 En aquest annex es proporciona la part teòrica del manual creat com a part central del projecte, que serveix de referència per a la memòria. A.1 - Introducció A.1.1 – Què és Qt4 Designer? Qt4 Designer és una aplicació basada en una biblioteca multi plataforma (Qt) desenvolupada per la companyia Qt Software (anteriorment TrollTech) que ens proporciona un conjunt d'eines per elaborar interfícies d'usuari gràfiques (GUI) usant el llenguatge C++ i la seva pròpia interfície gràfica. Encara que nativament el programa usi C++, existeixen bindings o adaptacions de la biblioteca per a poder usar-lo amb C, Phyton (PyQt) , Java (QtJambi), Perl (PerlQt), Gambas (gb.qt) , Ruby (QtRuby), PHP (PHP – Qt), entre d'altres. Esta totalment orientat a objectes, és fàcilment extensible i posseeix una API amb funcions de múltiples facetes, com mètodes per accedir a bases de dades mitjançant SQL, ús de documents XML, maneig d'estructures de dades convencionals, etc. 39 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer A continuació, s'explicaran detalladament tots els elements que es poden apreciar en la captura, amb exemples pràctics a resoldre si s'escau. A.2.1 – Les finestres En aquest apartat del manual es tractaran les funcions de cadascuna de les finestres internes del programa. 46 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer A.2.1.1 – La Finestra New Form Aquesta finestra s'obre en iniciar el programa i mostra un menú que permet: ➢Seleccionar d'entre un conjunt de plantilles prefabricades o bé creades per l'usuari (A l'esquerra), amb la corresponent previsualització de la pròpia plantilla (A la dreta), per si n'hi ha alguna que s'adapti al projecte a realitzar. Com a opcions figuren: •Dialog with buttons bottom :Per crear un quadre de diàleg amb els botons d'acceptar o cancel·lar a la part de baix a la dreta de la finestra. •Dialog with buttons right: El mateix tipus de finestra que l'anterior, però ara amb els botons d'acceptar i cancel·lar a la part de dalt a la dreta. •Dialog without buttons: Finestra de diàleg sense botons. •Main: Per crear una finestra principal del programa. La plantilla proporciona una interfície buida amb una barra d'eines per omplir i parametritzar. •Widget: Proporciona un widget buit (Veure apartat de widgets per a més 47 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer informació sobre els mateixos). ➢Sota Aquestes plantilles apareix la opció per si es vol que aquesta finestra aparegui sempre en iniciar el programa. Si es desmarca, només apareixerà quan creem algun element nou (Veure apartat del Menú File). ➢A La part de sota de la finestra, tenim una sèrie de botons dels quals tot seguit es detalla la funció: •Open... : Permet obrir un arxiu d'interfície existent. •Recent: Mostra una llista d'arxius d'interfície creats recentment. Compta amb la única subopció de buidar la llista. •Close: Tanca la finestra New Form •Create: Confirma la selecció de la plantilla que sigui i crea la interfície corresponent per poder començar a dissenyar-la. 48 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer A.2.1.2 – La finestra Qt Designer (Principal) Aquesta és la finestra principal de l'aplicació, i per extensió la més complexa i la que reuneix més funcionalitats del programa. Quan es tanca aquesta finestra es tanca el programa, la qual cosa no passa amb cap de les altres. Dins d'ella es troben (Per ordre descendent en pantalla): 49 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer ➢El menú principal: Bàsic per al maneig de l'aplicació. Podeu trobar la seva explicació detallada al corresponent apartat del manual. ➢La barra d'eines: També bàsica en l'ús del programa, trobareu la seva explicació a l'apartat corresponent del manual. ➢Un catàleg que conté widgets estàndards facilitats per a la creació d'interfícies i elements contenidors i d'organització per tal d'aconseguir unes interfícies degudament equilibrades. També s'hi afegiran els custom widgets creats pel propi usuari. Poden trobar-se exemples resolts que usen varis d'aquests elements a l'apartat d'exemples d'aquest manual. Aquest últim punt és el que es desenvolupa de manera més extensa en aquesta part del manual i pretén donar una orientació sobre l'ús de cada element d'aquest submenú. Cal remarcar que aquests elements quan els inserim són “inerts”, és a dir, no fan cap acció per si sols, cal que els connectem a altres elements o amb el formulari en general mitjançant signals i slots si cal amb l'ajuda de l'API de cada element a la llibreria. Per ordre d'aparició descendent, es troben: ➢Layouts (Organitzadors) : Els layouts són elements que permeten agrupar els diferents elements distribuïts per la interfície per tal d'assegurar la seva correcta visualització en pantalla. Poden combinar-se per aquesta finalitat amb els spacers (Al punt següent es veuran). Els layouts un cop creats permetran que els elements que en formin part actuïn com una unitat a l'hora de col·locar-los i fixar-ne la mida, estaran completament sota la gestió del layout (La qual cosa pot anul·lar-se ràpidament fent Ctrl + 0 per trencar el layout) . Existeixen 3 tipus diferents de layouts, verticals (Per elements alineats verticalment) , horitzontals (Per elements alineats horitzontalment) i en graella 50 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer (Forma matricial), els quals poden combinar-se de diverses maneres i fins i tot auto contenir-se per tal d'organitzar la interfície. ➢Spacers: Els spacers són elements delimitadors d'espai que serveixen per mantenir una correcta distribució tant dins d'un layout com entre ells. N'hi ha de dos tipus, horitzontals i verticals. Els dos tipus tenen les mateixes característiques i el fet de triar-ne un tipus o un altre depèn de la situació en que volem utilitzar-los. ➢Buttons: Són elements que s'activen per interacció de l'usuari i permeten activar accions o perfilar opcions. Tenim els següents tipus: •Push Buttons: Botons tipus acceptar o cancel·lar. •Tool Buttons: Botons parametritzables que permeten invocar accions del programa. •Radio Buttons: Són botons que solen presentar-se en grups de dos o més per adquirir el seu sentit i permeten triar entre varies opcions , la selecció de les quals és excloent (Només n'hi pot haver una de seleccionada a la vegada). •Check Boxes: Podríem dir que són caselles de confirmació, que permeten seleccionar o no una opció. A diferència dels radio buttons, no cal ni que es presentin amb grup ni que una per força hagi d'estar seleccionada, perquè mostren opcions en principi completament independents. •Button Box: Possibiliten una conjunt per defecte de botons d'acceptar i cancel·lar. 51 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer ➢Item Views (Model-Based): Serveixen per mostrar i modificar informació relacionada amb models. El seu ús és molt específic i va lligat a l'ús d'un framework de Qt, el Model/View. ➢Item Widgets (Item-Based): Serveixen per mostrar i modificar informació relacionada amb ítems d'un model. El seu ús és molt específic i va lligat a l'ús d'un framework de Qt, el Model/View. ➢Containers: Són elements purament d'organització i agrupació d'altres elements dins les interfícies, obeint a criteris semàntics. Tenim els següents tipus: •Group Box: Delimita un marc on agrupar elements. •Tool Box: Determina l'organització d'elements a partir de pestanyes verticals o pàgines. •Tab Widget: Proporciona un marc amb pestanyes per separar els elements. •Stacked Widget: S'assembla molt al Group Box, però en aquest cas compta amb unes fletxes a la part de dalt a la dreta que permeten canviar d'un a l'altre, com si fossin diferents pestanyes. •Frame: S'usen per incloure i agrupar widgets. La seva raó de ser és que estan pensats per ser usats en contenidors més complexos, com a base d'aquests. Poden incloure el seu propi layout. •Widget: Contenidor per a widgets . •Dock Widget: Funcionalment fan el mateix que el Widget, però ofereixen la possibilitat de tancar i restablir, la qual cosa optimitza l'espai del formulari. 52 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer ➢Input Widgets: Aquest apartat és un dels més interessants, ja que proporciona widgets ja implementats els quals només cal interconnectar amb altres elements i que recullen dades d'entrada al sistema a través de l'interfície. Trobem: •Combo Box: Permet configurar un desplegable amb opcions alternatives i completament personalitzables (Fent dos clics sobre la Combo Box inserida al formulari accedim al menú d'edició de la mateixa, en la qual podem afegir opcions o bé incloure, per cadascuna d'elles, una imatge). •Font Combo Box: És una Combo Box que mostra diversos tipus de fonts . •Line edit: Proporciona una línia de text on es poden introduir caràcters. •Text Edit: Serveix també per introduir caràcters , però en aquest cas en més quantitat, paràgrafs si es vol. •Spin Box: Permet incloure un número natural. •Double Spin Box: Serveix per introduir un nombre real positiu, amb un nombre de decimals predeterminat. •Date Edit: Proporciona un quadre per fixar una data determinada. •Time Edit: Proporciona un quadre per fixar una hora determinada. •Date/Time Edit: Proporciona un quadre per fixar una data i una hora determinades. •Dial: És una espècie de potenciòmetre que permet regular el que convingui segons a què estigui connectat. •Horitzontal Scroll Bar: Barra d'scroll horitzontal parametritzable. •Vertical Scroll Bar: Barra d'scroll vertical parametritzable. •Horitzontal Slider: Barra d'slide horitzontal. •Vertical Slider: Barra d'slide vertical. 53 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer ➢Display Widgets: En aquest apartat també es proporcionen widgets ja implementats, però en aquest cas estan destinats a mostrar informació per pantalla no modificable per part de l'usuari. Hi trobem: •Text Label: És l'equivalent no modificable a Line Edit . Proporciona una línia de text. •Text Browser: És un quadre de text. •Graphics View: Nova funcionalitat de Qt4 per a la visualització de gràfics interactius. És el successor natural del Canvas. •Calendar: És una aplicació de calendari. •LCD Number: Panell de números tipus digital. •Progress Bar: Barra de progrés, com una barra de càrrega d'aplicació, per exemple. •Horitzontal Line: Línia horitzontal de separació de continguts. •Vertical Line: Línia vertical de separació de continguts. ➢Arthur Widgets (Demo): Són un conjunt de widgets de demostració, ben treballats i implementats, els quals donen una idea bàsica de les possibilitats que ofereix Qt4. ➢Display Widgets (Examples): Exemples implementats de widgets de visualització. ➢Qt3 Support: Aquí trobem múltiples elements que o bé no eren a la versió 3 del programa o bé la seva implementació ha variat en la versió 4. Serveixen perquè el programa que 54 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer s'efectuï en aquesta versió , si usa aquest conjunt de widgets, pugui ser compilat per la versió 3, augmentant la portabilitat i la compatibilitat. A.2.1.3 – La finestra signals & slots Aquesta finestra s'encarrega de la gestió dels signals i slots de l'aplicació. Al requadre principal apareixeran les connexions principals entre els elements del programa, molt important els conceptes que representen cada columna: •Sender: Element d'origen de la relació, qui detona l'acció. •Signal: Event que provoca o desencadena l'acció. •Receiver: Element que es veu afectat per l'acció detonant al sender. •Slot: Efecte que produeix l'acció a l'element destí (Receiver). A baix a la dreta de la finestra tenim dos botons. •: Serveix per afegir una nova connexió a la interfície. • :Elimina la connexió seleccionada. A l'apartat de Signals i Slots es tracta en profunditat aquest aspecte del programa, que és fonamental en la creació d'interfícies, ja que és la pedra angular per dotar-les de funcionalitat. 55 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer guardar les modificacions fetes a tots ells de cop. ➢Accés ràpid per teclat: Ctrl+Shift+S des del programa principal o Alt+L des del menú File. •Save Form As Template: ➢Permet guardar el formulari que estem dissenyant com a plantilla, és a dir, que ens aparegui en el menú New Form per tal que el poguem seleccionar per defecte. Si hi cliquem apareix la pantalla següent, en la que li hem de donar un nom i una ubicació, que per defecte és la del directori de motlles del programa. Després, si cliquem a New form , veurem que ens apareix a la llista. 62 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer ➢Accés ràpid per teclat: Alt+T des del menú File. •Close Form: ➢Tanca un formulari, però no el programa ➢Accés ràpid per teclat: Ctrl+W des del programa principal o Alt+C des del menú File. •Quit: ➢Surt de l'aplicació ➢Accés ràpid per teclat: Crtl+Q des del programa principal o Alt+Q des del menú File. 63 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer ➢Edit : Aquest apartat conté majoritariament opcions que incideixen en l'edició dels formularis. Trobem: •Undo: ➢Desfà l'última acció efectuada en l'edició del formulari. ➢Accés ràpid per teclat: Ctrl+Z des del programa principal. •Redo: ➢Refà l'última acció que havíem desfet. ➢Accés ràpid per teclat: Ctrl+Shift+Z des del programa principal. •Cut: ➢Treu l'element seleccionat del formulari i el posa al porta papers per tal que es pugui posar a un altre lloc i més d'una vegada, si així es desitja. Ull! Si es tallen dues coses per separat, només la segona es 64 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer guardarà al porta papers, ja que aquest només guarda un element o un conjunt d'elements seleccionats alhora. ➢Accés ràpid per teclat: Ctrl+X des del programa principal o bé Alt+T des del menú Edit. •Copy: ➢Si s'efectua aquesta operació sobre un element, aquest queda al mateix lloc on és, però se'n guarda una copia idèntica (Amb les mateixes propietats i connexions) al porta papers. Ull! Recordar que només es pot copiar un o un conjunt d'elements seleccionats alhora, per les propietats del porta papers. Si hi ha un element o conjunt d'elements tallat al porta papers i copiem alguna cosa, desapareixerà. ➢Accés ràpid per teclat: Ctrl+C des del programa principal o bé Alt+C des del menú Edit. •Paste: ➢Enganxa al formulari el contingut del porta papers. ➢Accés ràpid per teclat: Ctrl+V des del programa principal o bé Alt+P des del menú Edit. •Delete: ➢Elimina l'element seleccionat. ➢Accés ràpid per teclat: Tecla Supr des del programa principal o bé Alt+D des del menú Edit. •Select All: ➢Selecciona tots els elements del formulari que s'estigui editant en aquell moment. ➢Accés ràpid per teclat: Ctrl+A des del programa principal o bé Alt+A des del menú Edit. 65 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer •Send To Back: ➢Endarrereix vers l'espectador (Envia cap enrere) l'element en l'ordre de mostra dels diferents elements del formulari. ➢Accés ràpid per teclat: Ctrl+K des del programa principal o bé Alt+B des del menú Edit. •Send to Front: ➢Apropa cap a l'espectador (Superposa) l'element seleccionat del formulari. ➢Accés ràpid per teclat: Ctrl+L des del programa principal o bé Alt+F des del menú Edit. •Edit Widgets: ➢Mode de visualització de formularis estàndard de l'aplicació. La vista d'un formulari concret seria, per exemple, la següent: ➢Accés ràpid per teclat: F3 •Edit Signals/Slots: ➢Mode de visualització que ens dóna informació sobre els signals i slots del formulari en edició. Seguint l'exemple anterior, seria aquesta vista: 66 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer ➢Accés ràpid per teclat: F4 •Edit Buddies: ➢Mode d'edició de buddies. ELs buddies són relacions entre una etiqueta i un camp que pugui rebre dades, com un LineText. En el cas d'exemple, com que no hi ha cap Label no s'hi pot establir cap buddie. •Edit Tab Order: ➢Mostra l'ordre dels elements d'entrada de dades per teclat dins el formulari i permet modificar-lo, fent clic sobre el propi ordre mostrat. Seguint l'exemple, la captura seria així: 67 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer •Preferences...: ➢Obre la finestra de preferències per l'edició d'interfícies,que és el següent: Podem retocar múltiples aspectes de l'editor, en ordre descendent: •Si volem que el programa estigui composat per finestres independents (Multiple top-level windows) o bé un bloc de totes les finestres, una vista més estàndard (Docked 68 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer Windows). •La font per defecte que usa l'editor per als formularis. •La mida de la quadrícula que apareix de fons als formularis per alinear elements o eliminar-la. (A la part dreta) Afegir nous directoris de plantilles de formularis per defecte) ➢Form: A l'apartat Form hi trobarem opcions d'edició generals del formulari en edició, així com de la seva visualització: •Lay Out Horitzontally: ➢Estableix pel formulari actual un layout horitzontal automàticament a tots els elements del formulari en edició. ➢Accés ràpid per teclat: Ctrl+1 des del programa principal o bé Alt+H des del menú Form. •Lay Out Vertically: ➢Estableix pel formulari actual un layout vertical automàticament a tots els elements del formulari en edició. 69 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer ➢Accés ràpid per teclat: Ctrl+2 des del programa principal o bé Alt+V des del menú Form. •Lay Out Horitzontally in Splitter: ➢Estableix un layout horitzontal amb separadors mòbils. ➢Accés ràpid per teclat: Ctrl+3 des del programa principal o bé Alt+P des del menú Form. •Lay Out Vertically in Splitter: ➢Estableix un layout verticals amb separadors mòbils. ➢Accés ràpid per teclat: Ctrl+4 des del programa principal o bé Alt+L des del menú Form. •Lay Out in Grid: ➢Estableix automàticament per tots els elements del formulari en edició un a Grid Layout . ➢Accés ràpid per teclat: Ctrl+5 des del programa principal o bé Alt+G des del menú Form. •Break Layout: ➢Trenca el layout seleccionat o bé el general que s'hagi creat anteriorment. ➢Accés ràpid per teclat: Ctrl+0 des del programa principal o bé Alt+B des del menú Form. •Adjust Size: ➢Ajusta de manera automàtica la mida del formulari en edició. ➢Accés ràpid per teclat: Ctrl+J des del programa principal o bé Alt+S des del menú Form. 70 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer •Preview In: ➢Permet retocar les preferències de visualització de la interfície en edició, i fa una previsualització del formulari en el format seleccionat. •Preview: ➢Permet fer una previsualització del formulari en edició per veure com quedarà un cop acabada i en funcionament. ➢Accés ràpid per teclat: Ctrl+R des del programa principal o bé Alt+Pr des del menu Form. •Form Settings...: ➢En aquest menú s'hi pot introduir el nom de l'autor, jugar amb la graella de punts orientativa que hi ha al fons del formulari en edició, etc. 71 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer <y>80</y> <width>80</width> <height>28</height> </rect> </property> <property name="text"> <string>PushButton</string> </property> </widget> •Els fitxers .pro És el fitxer que conté la informació necessària per generar un MakeFile i poder compilar el projecte. D'entrada no està generat, però es pot crear de manera automàtica amb el flag de qmake -project, que s'explicarà a l'apartat de compilació d'aquesta mateixa secció. Aquest fitxer pot ser modificat manualment segons les necessitats que es tinguin. Els seus principals camps són: •SOURCES: Indica un fitxer .cpp que ha de ser compilat amb el programa. La sintaxi ha de ser com la següent: SOURCES += fitxer1.cpp SOURCES += fitxer2.cpp o bé pot ser, amb la sintaxi de les edicions anteriors de Qt: SOURCES = fitxer1.cpp \ fitxer2.cpp •HEADERS: Serveix per indicar els fitxers .h que cal incloure en la compilació. La seva 78 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer sintaxi és la mateixa que la del camp SOURCES. •TARGET: És on s'indica el nom de l'arxiu resultant de la compilació, és a dir, el del programa a executar. Només cal introduir-ne un , com a molt. Si aquest camp no es toca l'executable s0anomenarà com s'anomeni l'arxiu .pro. La seva sintaxi és: TARGET = NomExecutable •RESOURCES: Indica els fitxers de recursos .qrc a tenir en compte en la compilació. La sintaxi és la mateixa en el cas que el camp SOURCES. •CONFIG: Indica diferents paràmetres de la configuració, com si es vol tenir la opció de debug activada. En tot cas, sempre cal incloure-hi el paràmetre qt. Nota important: Cada cop que es creï o s'elimini un arxiu relacionat amb el projecte, cal modificar el fitxer .pro. •Els fitxers .qrc És on s'especifiquen els recursos externs a Qt Designer (Com imatges) usats en el disseny de la interfície. És un arxiu en format XML que llista els fitxers que s'usaran amb la seva ubicació a disc i opcionalment un nom de recurs. Un exemple de fitxer qrc podria ser el següent: <!DOCTYPE RCC><RCC version="1.0"> <qresource> <file>images/copy.png</file> 79 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer <file>images/cut.png</file> <file>images/new.png</file> <file>images/open.png</file> <file>images/paste.png</file> <file>images/save.png</file> </qresource> </RCC> Com s'ha explicat a l'apartat dels fitxers .pro, cal afegir els fitxers de recursos que es tinguin al citat arxiu per tal de que formin part de la compilació. El que farà el primer pas de la compilació serà crear un arxiu qrc_application.cpp, que contindrà comprimides les dades referents als recursos com a cadenes binàries, comprimides i estàtiques en C++ per al seu ús en la compilació amb MakeFile. •Els fitxers .cpp i .h Són els arxius de C++ que defineixen funcionalitats amb les que es faran interactuar les interfícies creades i també per definir les interfícies pròpiament dites de manera que poguem executar-les a partir d'un main. Els .h contenen les variables i les capçaleres de les funcions i els .cpp contenen les funcions en sí i les crides als elements de la biblioteca Qt, així com als components de la interfície. ➢Compilació del projecte La compilació d'un projecte elaborat amb Qt4 segueix sempre les mateixes pautes, i tot i que pot semblar un mètode un pèl complex al principi, és reiteratiu sempre sobre els mateixos passos. A continuació es detallen aquests passos: 80 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer •Primer pas: Crear la interfície. Com es pot esperar, el primer que cal fer és definir la interfície, ja sigui mitjançant el Qt4 Designer o bé en un arxiu .cpp definint-ne els elements mitjançant a llibreria Qt. Com que aquest manual és sobre Qt4 designer, suposarem que es crea la interfície mitjançant el Qt4 Designer. Quan s'hagi guardat, en la carpeta destinada a crear el nou projecte, aquesta serà un arxiu amb extensió .ui. Per tal d'il·lustrar millor l'exemple, ens basarem en una interfície senzilla com al de la captura següent. Tindrà simplement un boto que es dirà boto1 i un camp LineText que tindrà per nom linia: •Creació del .h corresponent Nota: Podeu trobar programes d'edició a l'apartat d'enllaços del manual. L'editor de textos d'Ubuntu serveix perfectament. Un cop es tingui el .ui llest, cal crear els arxius .h i .cpp que representaran la interfície dissenyada. En primer lloc s'escriurà el .h . a la mateixa carpeta que el .ui . 81 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer El .h citat haurà de portar per nom el mateix amb el que hem guardat la interfície creada (És a dir, si la interfície es diu "nominterficie.ui", aquest arxiu s'haurà de dir "nominterficie.h"), i tindrà el següent codi dins seu (Sota la imatge). Per editar el fitxer, només cal introduir a la consola dins de la carpeta desitjada: #ifndef NOMINTERFICIE_H #define NOMINTERFICIE_H #include "ui_nominterficie.h" class nomInterficie : public QWidget, private Ui::nomFORMULARI { Q_OBJECT public: nomInterficie(); public slots: void escriu(); }; #endif 82 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer Parts interessants del codi: ➢#ifndef NOMINTERFICIE_H / #define NOMINTERFICIE_H Aquesta part és una macro, que estipula que només es crei una classe de la interfície, encara que varis arxius tinguin el .h a l'include. ➢#include "ui_nominterficie.h" Potser la línia més important del codi. Cal saber que quan es compila un projecte de Qt, la instrucció qmake genera, per cada interfície.ui un arxiu de capçaleres de nom ui_interficie.h amb tota la informació que hi havia implícita sobre aquella interfície en C++. Això inclou objectes,atributs i relacions que s'hagin definit en la interfície per als objectes de la mateixa. ➢class nomInterficie : public QWidget, private Ui::nomFORMULARI nomInterficie és el nom de la classe en C++ que serà la interfície. Amb public QWidget li indiquem que de fet és un Widget , si haguessim creat un Dialog seria QDialog. Ui::nomFORMULARI és el nom que li hem donat al formulari que volem que aparegui per pantalla dins el la finestra de propietats de QT4. ➢nomInterficie(); Defineix el constructor de la classe per defecte. ➢public slots: Dins aquest apartat s'inclouen les capçaleres dels slots que es volen definir manualment per a la interfície creada. Per a més informació sobre els slots i les seves funcions, consultar l'apartat de signals i slots del tutorial. En aquest cas s'ha definit la capçalera d'un slot sense paràmetres que es diu escriu. Si es volguessin definir signals, només caldria fer una apartat de public signals: 83 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer •Creació del .cpp de la interfície Totalment relacionat amb el .h que s'acaba de crear, en l'exemple nominterficie.cpp, ara cal crear el nominterficie.cpp. Aquest contindrà l'activació de la interfície gràfica i la definició dels signals i slots dels quals prèviament s'hagin definit les capçaleres al .h. En el cas de l'exemple, el nominterficie.cpp tindria aquest aspecte: #include <QtGui> #include "nominterficie.h" nomInterficie::nomInterficie() { setupUi(this); // Això activa la interfície gràfica connect( boto1, SIGNAL( clicked() ), this, SLOT( escriu() ) ); } void nomInterficie:: escriu(){ QString hola; hola="Ja ho tenim aixo"; linia->setText(hola); } El que fa aquest codi és definir el constructor nomInterficie , que serà per defecte, i dins d'ell, amb la funció connect relaciona els signals i slots establerts manualment de la interfície. En aquest cas, es pot veure que el signal del boto1 activa l'acció de l'slot escriu*. Com que és un slot definit per l'usuari al .h, i no dels predeterminats en el .ui, cal escriure què fa exactament, i això s'aconsegueix en la definició de la funció escriu. En aquesta funció, es pot veure com el que efectua és escriure a 84 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer l'element línia, que és un camp LineEdit, "Ja ho tenim això". * La Sintaxi de la funció connect, bàsica per a la connexió través de signals i slots, és connect(Sender, Signal, Reciever, Slot), en aquest cas el reciever és la mateixa classe, perquè la funció en que definim l'slot és creada per nosaltres i no forma part dels slots predefinits del reciever. •Generació del fitxer main Un cop fets els passos anteriors, caldrà crear un cos, una arrel per la estructura, el programa principal que s'executi i que cridi a la interfície. Per això cal un main, un programa principal. Caldrà crear doncs un arxiu main.cpp. En el cas d'exemple, contindrà el següent codi: #include <QApplication> #include "nominterficie.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); nomInterficie *prova = new nomInterficie; prova->show(); return app.exec(); } La creació d'un main en molts casos segueix aquest patró. S'inclou l'arxiu de capçaleres de la interfície que s'ha creat anteriorment, s'inicia l'aplicació Qt i es crea una instància de nomInterficie, que se l'anomena prova, usant el constructor que 85 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer s'ha definit al .cpp. Tot seguit, per mostrar-lo només cal invocar la seva propietat show. Llavores es dona l'ordre d'execució de l'aplicació Qt, a l'última línia. El projecte ja està llest per ser compilat! •Generació automàtica del fitxer .pro Un cop fets aquests passos, cal fer el fitxer .pro. Es pot fer de dues maneres, o bé manualment amb un editor de text o bé de manera automàtica. Per fer-ho automàticament, cal introduir la següent comanda a la consola, des de la carpeta del projecte: qmake -project Aquest pas serà obligatori cada cop que afegim o eliminem fitxers relacionats amb el projecte dins de la carpeta. •Qmake i make: Tot seguit, a la consola i a la carpeta del projecte només cal introduir la comanda: qmake Aquesta comanda el que farà és generar el makeFile, un arxiu amb instruccions de compilació, i preparar els arxius de recursos pel compilador de C++. 86 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer Seguidament,per compilar, cal introduir: make •Execució del programa Un cop fets els passos anteriors, ja es pot executar el projecte. Per defecte, i si no s'ha modificat el fitxer.pro, l'executable tindrà el nom de la carpeta del projecte, i per executar-lo només fa falta introduir la següent comanda a la consola: ./nomcarpeta Podem veure els resultats, abans de prémer el botó i després: 87 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer A.5 – Widgets i custom widgets Un widget exactament és un component visual amb el que podem intercatuar dins de la interfície gràfica, i amb el que haurem d'interactuar a l'hora de programar-la. Qt4 Designer proporciona de sèrie un ampli ventall de widgets prefabricats, com panells LCD, botons, pestanyes o spacers. Cada widget disposa d'una sèrie de signals i slots amb els quals se'ls pot dotar de funcionalitat en combinació amb l'entorn. Denominem custom widgets o widgets personalitzats a aquells que pot generar-se cada usuari del programa i després inserir-los a l'aplicació per usar-los de la mateixa manera que ho fa amb un dels predeterminats. La problemàtica que hi ha en aquesta versió de Qt Designer és la poca predisposició que mostra l'aplicació en sí a l'hora de crear nous widgets. En anteriors versions, el fet de crear un nou widget podia fer-se quasi íntegrament des del designer, i l'aplicació facilitava molt la feina, cosa que s'ha eliminat en aquesta nova versió, almenys en la seva distribució gratuïta. A més, en aquesta versió tots els widgets han d'heretar de la classe QWidget de la llibreria, mentre que abans no era necessari. Ara, per crear un nou widget cal fer-ho editant fitxers de codi de C++ i afegint-lo després a la interfície del designer com a plug-in. En aquest apartat s'intentaran donar unes nocions bàsiques per a la creació de custom widgets. Petit manual per a la creació de custom widgets. Nota: Per consultar l'estructura dels custom widgets i la seva aplicació, es pot complementar la següent explicació amb aquest exemple. Per començar, cal tenir clar que com a mínim caldran 5 arxius per crear un nou widget i un últim pas: 94 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer 1. Arxiu .cpp de definicio del pulgins. Aquest arxiu, al que s'anomenarà definicioplugin.cpp per exemple, segueix sempre la mateixa estructura, la qual es mostra a continuació, punt per punt. La seva funció és definir el nou plugin la carcassa del mateix pulgin, per tal que el programa el reconegui com a tal i es pugui introduir i ser usat com qualsevol altre al Qt4 designer. #include "definiciowidget.h" #include "definicioplugin.h" Cal fer un include de l'arxiu de capçaleres de definició del widget i del del propi plugin. #include <QtPlugin> Cal fer un include de la llibreria QPlugin, definida per Qt. NouPlug::NouPlug(QObject *parent) : QObject(parent) { initialized = false; } Funció de creació del plugin. NouPlug es el nom de la classe del plugin i va en consonància amb el que se li donarà al .h, però pot ser el que es vulgui, és a dir, no cal que es digui així. void NouPlug::initialize(QDesignerFormEditorInterface * core) 95 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer { if (initialized) return; initialized = true; } bool NouPlug::isInitialized() const { return initialized; } Inicialitza el plugin i comprova si està inicialitzat, respectivament. QWidget *NouPlug::createWidget(QWidget *parent) { return new definicioWidget(parent); } Crea el widget, s'ha de fer que el retorn sigui una nova definició de la classe del nou widget que es crearà. QString NouPlug::name() const { return "nomWidget"; } Al retorn s'hi posa el nom del widget. QString NouPlug::group() const 96 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer { return "Grup del nou Widget"; } El retorn determina al grup de la finestra principal on es situarà el nou widget. QIcon NouPlug::icon() const { return QIcon(); } QString NouPlug::toolTip() const { return ""; } QString NouPlug::whatsThis() const { return ""; } bool NouPlug::isContainer() const { return false; } Determina si és un contenidor d'altres widgets (Com un QGroupBox). QString NouPlug::domXml() const 97 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer { return "<widget class=\"definicioWidget\" name=\"nomWidget\">\n" " <property name=\"geometry\">\n" " <rect>\n" " <x>269</x>\n" " <y>6</y>\n" " <width>150</width>\n" " <height>100</height>\n" " </rect>\n" " </property>\n" " <property name=\"toolTip\" >\n" " <string>""</string>\n" " </property>\n" " <property name=\"whatsThis\" >\n" " <string> " "Text que apareix en passar-hi el ratolí per sobre.</string>\n" " </property>\n" "</widget>\n"; } Informació que traspassarà, si no es modifica res, el Designer al fitxer .ui quan es guardi la interfície que el contingui. Ull! Cal que els camps widget class i name del principi siguin concordants amb els que hem definit més amunt, o el widget no funcionarà. QString NouPlug::includeFile() const { return "definiciowidget.h"; } 98 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer Cal establir quin és el fitxer que conté les capçaleres de les funcions específiques del widget. Q_EXPORT_PLUGIN2(definicioPluguin, NouPlug) Crea el plug-in. 2. Arxiu .h de definicio del pulgins. Si es segueix la pauta de l'apartat anterior per crear el definicioplugin.cpp, l'arxiu es dirà definicioplugin.h, i contindrà les capçaleres de les funcions anteriors, per tant serà així: #ifndef CUSTOMWIDGETPLUGINNOUWIDGET_H #define CUSTOMWIDGETPLUGINNOUWIDGET_H #include <QDesignerCustomWidgetInterface> class NouPlug : public QObject, public QDesignerCustomWidgetInterface { Q_OBJECT Q_INTERFACES(QDesignerCustomWidgetInterface) public: NouPlug(QObject *parent = 0); bool isContainer() const; bool isInitialized() const; 99 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer QIcon icon() const; QString domXml() const; QString group() const; QString includeFile() const; QString name() const; QString toolTip() const; QString whatsThis() const; QWidget *createWidget(QWidget *parent); void initialize(QDesignerFormEditorInterface *core); private: bool initialized; }; #endif 3. Arxiu .cpp de definicio del propi widget. Aquest arxiu ja és propi del widget que es vol crear, segons el conveni de tota la explicació seria el definiciowidget.cpp. Segueix aproximadament la mateixa estructura que un arxiu .cpp que s'utilitzi per compilar una interfície. Aquí s'hi definirà el constructor del widget (Que a la vegada usarà la definició del plugin per crear-lo, les seves connexions i signals i slots, si en té. #include "definicioWidget.h" definicioWidget::definicioWidget(QWidget* parent): QLineEdit(parent){ 100 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer //AQUÍ EL CONTINGUT QUE CALGUI } //AQUÍ ELS SIGNALS I SLOTS QUE PERTOQUIN Cal fer un include del seu .h i definir-ne, com a mínim, el constructor, on es posarà clarament de quina classe de widget hereda les propietats que tindrà per defecte, amén de les que s'afegeixin per signals i slots personalitzats que pertoquin. En aquest cas es pot veure que hereta de QLineEdit, per exemple. 4. Arxiu .h de definicio del propi widget. Aquest arxiu és el de capçaleres de definiciowidget.cpp, per tant seria el definiciowidget.h. El seu contingut seria el següent: #include <QLineEdit> #include <QtDesigner/QDesignerExportWidget> class QDESIGNER_WIDGET_EXPORT definicioWidget:public QLineEdit { Q_OBJECT private: //AQUÍ LES VARIABLES DEL WIDGET 101 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer public: definicioWidget(QWidget* parent); public signals: //AQUÍ LA DEFINICÓ DELS SIGNALS public slots: //AQUÍ LA DEFINICIÓ DELS SLOTS }; Cal fer un include de la classe widget de la qual hereta el nou widget, com que per exemple s'ha dit que seria QLineEdit en l'apartat anterior, es fa l'include. Es declara també el constructor, les variables que es vulguin i la definició dels signals i slots. 5. Arxiu .pro adaptat. Aquest arxiu va encarat a la compilació. Es pot veure la seva definició a l'apartat de compilació del manual. El que cal fer per crear-lo, un cop s'han creat els arxius anteriors, és executar des de la consola la comanda qmake -project. 102 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer Això en generarà un d'automàtic, tenint en compte els 4 arxius anteriors que hi ha a la carpeta. Ara, el resultat no és el que ens convé per a crear un plugin, valdria en el cas d'una interfície, però en aquest cal modificar-lo lleugerament, així doncs cal editar-lo. Cal que el nou arxiu contingui la següent informació: TEMPLATE = lib Perquè ja no és per generar una aplicació, ara es vol un plugin, que actuï a mode llibreria. TARGET = DEPENDPATH += . INCLUDEPATH += . CONFIG += designer plugin debug_and_release 103 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer Immediatament, apareix una pantalla amb tots els signals i slots disponibles per cada element de manera predeterminada. Per tal que la interfície faci el que es proposa, cal agafar el signal clicked(), que indica clic 110 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer del botó, com a detonant, i l'slot clear(), que esborra l'etiqueta, com a conseqüència del clic al botó. A la següent imatge es pot veure la interfície amb la relació establerta i en el mode d'edició de signals i slots. La relació també es podria haver configurat a partir de la finestra de signals i slots. A la següent captura es pot veure com la nova relació hi apareix. Prement Ctrl+R es pot veure la previsualització de la interfície creada amb el seu funcionament. Es pot comprovar que, efectivament, quan es prem el botó el text de 111 Annex A. Tutorial de Qt4 Designer Tutorial de Qt4 Designer l'etiqueta desapareix. 112 Annex B Gnome-screenshot Aquest annex conté la referència del manual de Linux per la comanda gnomescreenshot. B.1 – Entrada del man de Linux per gnome-screenshot GNOME-SCREENSHOT(1) GNOME-SCREENSHOT(1) NAME gnome-screenshot - capture screen or window and save the image to a file. SYNOPSIS gnome-screenshot [ -w ] [ -d SECONDS ] [ -e EFFECT ] [ -i ] DESCRIPTION gnome-screenshot is a GNOME utility for taking screenshot of the entire screen or a window, with optional beutifying border effects. gnome-panel-screenshot is the same program. It is provided for back‐ ward compatibility, and is considered deprecated. OPTIONS -w, --window 113 Annex B. Gnome-screenshot Tutorial de Qt4 Designer Grab the current active window instead of the entire screen. -d SECONDS, --delay=SECONDS Take screenshot after specified delay [in seconds]. -e EFFECT, --border-effect=EFFECT Add effect to the outside of the screenshot border. EFFECT can be ‘‘shadow’’ (adding drop shadow), ‘‘border’’ (adding rectangu‐ lar space around the screenshot) or ‘‘none’’ (no effect). Default is ‘‘none’’. -i, --interactive Interactively set options in a dialog. -?, --help Show summary of options. In addition, the usual GTK+ and GNOME command line options apply. See the output of --help for details. SEE ALSO gnome-options(7), gtk-options(7) AUTHOR This manual page was written by Christian Marillat <maril‐ [email protected]g> for the Debian GNU/Linux system (but may be used by others). Updated by Theppitak Karoonboonyanan <[email protected]>. 23 mars 2007 GNOME-SCREENSHOT(1) 114 Annex C Estudi econòmic i planificació En aquest apartat es realitza una estimació del cost de dur a terme el projecte i la comparativa entre l'estimació d'hores dedicades a cada apartat en front de les que finalment han estat. C.1 – Estudi econòmic Donat que el projecte s'ha realitzat per a ser el tutorial successor d'un manual existent que era usat com a suport docent, he fet l'estudi econòmic des de la postura de becari del departament en quant a sou (Aproximadament 4,5 €/hora) i un horari de 6 hores al dia, és a dir 30 hores setmanals. El projecte ha trigat 4 mesos a ser efectuat. Així doncs, el seu cost econòmic total hauria estat: Total d'hores: 480 hores Cost per hora: 4,5 Euros _________________________________________ Cost total: 2160 Euros C.2 - Planificació En aquest apartat es veurà la planificació que ha acabat derivant de la que s'havia pensat en un principi: 115 Annex C. Estudi econòmic i planificació Tutorial de Qt4 Designer Tasques Planificades Planificació inicial Planificació final Documentació i exploració de l'aplicació 20 30 Apartats teòrics 100 110 Exemples bàsics 150 100 Exemples “difícils” No contemplats 150 Exemple de l'anterior manual 150 40 Revisió i proves 60 Total hores 480 480 Les variacions sobre la planificació inicial obeeixen al fet del canvi de plantejament sobre els exemples un cop es va decidir canviar el sistema en que es farien. La planificació es va ajustar a l'horari descrit a l'apartat anterior, ideat inicialment, i podem veure que realment s'ha pogut complir el projecte en el termini fixat i no han calgut hores extres. 116 Annex D Ús del DVD adjunt En aquest apartat es detalla l'ús del DVD . D.1 – Ús del DVD adjunt El DVD Conté dues carpetes bàsiques. ➢Memòria: Que conté la memòria en format PDF. ➢Tutorial: Que conté tots els arxius relacionats amb el tutorial pròpiament dit. Per executar-lo, només cal obrir amb l'explorador web que es vulgui l'arxiu index.html. 117 Annex D. Ús del DVD adjunt Tutorial de Qt4 Designer 118 Annex E Bibliografia Annex que mostra les referències bibliogràfiques usades en el desenvolupament del projecte. E.1 – Bibliografia ➢Web del l'aplicació http://www.qtsoftware.com/ ➢Web de documentació oficial de Qt4. http://doc.trolltech.com/4.0/ ➢Tutorial de Qt4 per usuaris novells http://sector.ynet.sk/qt4-tutorial/my-first-qt-gui-application.html 119