Annexos

Un dels avantatges principals de l’IDE Netbeans respecte a altres entorns integrats per al desenvolupament d’aplicacions en Java és la seva incorporació d’un editor d’interfícies gràfiques. D’aquesta manera, és possible generar i ubicar components de manera visual, sense haver de generar manualment tot el codi, com si es tractés d’un editor gràfic. Aquest text només intenta ser una petita introducció a les opcions més bàsiques de l’editor d’interfícies, ja que la quantitat d’opcions de què disposa és immensa. També cal que tingueu en compte que, depenent de la versió usada de Netbeans, poden haver petites variacions. Per exemple, les imatges d’aquest exemple estan extretes de la versió en anglès per Linux.

El codi associat a la instanciació i inicialització de tots els components es genera automàticament dins les classes generades. Ara bé, cal tenir en compte que aquesta eina no evita haver de realitzar algunes tasques de codificació manualment, tot i que sí que pot estalviar una quantitat enorme de temps al desenvolupador, especialment respecte a la gestió de layouts.

Per iniciar un projecte basat en una interfície gràfica, cal crear un nou projecte normalment amb l’opció de menú File - New Project i a continuació seleccionar, dins la categoria Java el tipus “Java Desktop Application”.

Un cop seleccionades les opcions estàndard per a una aplicació (nom de la classe principal i del package, si volem que sigui el projecte principal, etc.), Netbeans generarà automàticament una interfície mínima sobre la qual es pugui començar a treballar.

Important: Un cop s’ha iniciat un projecte d’interfície gràfica amb el Netbeans, mai, en cap concepte, s’han d’editar les classes que conformen la GUI amb un altre editor que no sigui el Netbeans. En cas contrari, hi ha moltes probabilitats que, en tornar a obrir el projecte més endavant, el Netbeans no el reconegui i ja no sigui possible utilitzar l’editor gràfic d’interfícies. A partir d’aquest moment, només es podrà modificar la GUI mitjançant codi. Un cop arribats a aquest punt, el procés és irreversible, fins i tot si s’esborren les modificacions fetes.

La pantalla de disseny

La pantalla en què s’edita gràficament la interfície s’anomena la pantalla de disseny, i és molt similar a qualsevol aplicació de dibuix i força intuïtiva. En la part central de la pantalla, on normalment apareixeria el codi de l’aplicació, es troba la finestra principal. A mà dreta hi ha una barra d’eines (anomenada la paleta, palette) amb tots els components gràfics que es poden utilitzar. Per incorporar un element a la interfície, és suficient de seleccionar un element i pitjar sobre la finestra en la ubicació desitjada.

Nota: Si per error es tanca la paleta, es pot obrir de nou amb l’opció de menú Window - Palette.

Per defecte, el Netbeans usa un GroupLayout, però cal tenir present que la ubicació final del component pot variar, i no ajustar-se exactament al lloc indicat, segons el layout del contenidor en què s’ubica el component.

A mesura que s’afegeixen nous components, el Netbeans mostra un seguit de línies d’ajut que permeten filtrar millor la ubicació de cadascun respecte a altres elements que ja hi ha en la interfície.

Els components ubicats es poden seleccionar simplement prement-hi a sobre. Això permet modificar-ne les característiques. D’una banda, és possible modificar-ne la posició simplement deixant en botó esquerre del ratolí pitjat i arrossegant-lo dins la interfície fins a la nova ubicació. També se’n pot modificar la mida arrossegant algun dels quadres que envolten el component quan se selecciona.

Per modificar qualsevol propietat d’un component, com el color, el text associat i la justificació, el layout d’un contenidor, etc., cal pitjar sobre el component amb el botó dret i, en el menú contextual, seleccionar l’opció “Properties” (que és la darrera, a baix de tot). Això obre una pantalla en què és possible modificar cada propietat vinculada a aquest component.

La pantalla de codi font

Des de la pantalla de disseny, en qualsevol moment podem anar a la pantalla de codi font, on es pot inspeccionar tot el codi font de la classe. Per fer-ho, cal seleccionar l’opció “Source” de la barra d’eines immediatament superior a la pantalla d’edició. Per tornar a la pantalla de disseny de nou, només cal seleccionar l’opció “Design”.

Un cop en el codi font, el comportament del Netbeans és exactament el mateix que en generar qualsevol altre tipus d’aplicació, només que es por apreciar el codi generat automàticament a causa dels components gràfics associats a la interfície. Aquest es caracteritza perquè està ressaltat en fons blau i no es pot editar quan s’ubica el cursor a sobre. Tot el codi font que no està remarcat en blau es pot editar. Això inclou afegir noves variables, mètodes, atributs, etc. d’acord amb les necessitats del desenvolupador.

Tot i així, en cas que sigui necessari, és possible modificar indirectament alguns aspectes de les zones de codi generat automàticament des de la finestra de propietats de cada component (accessible per la pantalla de disseny). Concretament, dins l’apartat anomenat “Code”.

D’una banda, es pot definir un nou nom per a la variable modificant l’opció “Variable Name”. D’altra banda, es pot inserir codi tot just abans o desprès de llocs específics de les zones remarcades en blau amb les diferents opcions “Pre/Post”. Per exemple:

• Pre/Post Adding Code: respecte a la línia en què es crida el mètode add per afegir el component a la interfície.
• Pre/Post Creation Code: respecte a la línia en què s’instancia l’objecte.
• Pre/Post Declaration Code: respecte a la línia en què es declara l’objecte.
• Pre/Post Init Code: respecte la línia es on s’ubica el conjunt de mètodes que inicialitzen les propietats de l’objecte.

Seleccioneu alguna d’aquestes opcions, pitjant sobre el quadre amb tres punts suspensius en l’extrem oposat, s’obre un quadre de text titulat “Insert Code” en què podem escriure qualsevol codi. En tancar-lo, automàticament s’afegirà la zona indicada.

al tenir present que el quadre d’inserció de codi no fa absolutament cap comprovació sobre la seva correcció. Qualsevol cosa que s’escrigui s’ubicarà en la posició corresponent del codi remarcat en blau. El resultat de la imatge anterior, en què només s’ha escrit un comentari seleccionant l’opció “Post Creation Code”, seria:

Listeners i esdeveniments

El Netbeans també permet gestionar automàticament la generació de codi relatiu a la captura d’esdeveniments. Per fer aquesta acció, cal obrir el menú contextual pitjant amb el botó dret sobre el component que es vol controlar, i seleccionar l’opció “Events”. Això desplega un nou menú contextual en què es poden triar tots els tipus d’esdeveniment capturables per aquest component.

En fer-ho, en el codi font es genera un mètode que serà el cridat sempre que es produeixi el tipus d’interacció seleccionat. Tots els detalls de la definició del Listener i el seu registre són gestionats pel codi generat automàticament pel Netbeans. La capçalera del mètode no es pot editar, però si el seu cos.

Evidentment, el Netbeans no pot generar de manera automàtica tot el codi, ja que una part important és específic de l’aplicació i no genèric. Per tant, a l’hora de gestionar esdeveniments no queda altre remei que entrar en la pantalla de Font i fer la codificació manualment.

Alternativament, també es pot entrar en la finestra de propietats d’un component i, en aquest cas, anar a l’opció “Events”. Des d’aquesta finestra es poden realitzar accions més complexes, com assignar el nom del mètode que gestiona les interaccions, eliminar mètodes que finalment s’ha decidit no usar o afegir més d’un Listener a un mateix tipus d’esdeveniment.