17.11.2012 Views

Utilizzare il NetBeans GUI Builder

Utilizzare il NetBeans GUI Builder

Utilizzare il NetBeans GUI Builder

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

<strong>Ut<strong>il</strong>izzare</strong> <strong>il</strong> <strong>NetBeans</strong> <strong>GUI</strong> Bu<strong>il</strong>der<br />

Dott. Ing. M. Banci, PhD


Lavorare con i Beans<br />

� Queste slide ci guidano nel processo di<br />

creazione di un bean pattern nel<br />

progetto <strong>NetBeans</strong><br />

15 Giugno 2007 Esercitazione Java - 4 2


� In <strong>NetBeans</strong> IDE, si lavora sempre su un<br />

progetto in cui si inseriscono i f<strong>il</strong>e e i sorgenti.<br />

� Creiamo un progetto come abbiamo già fatto<br />

selezionando Java Application type.<br />

� Il nome del progetto sarà MyBean e indicare<br />

dove inseriremo <strong>il</strong> codice.<br />

� Non creare una classe Main, poiche<br />

creeremo una nuova classe nel progetto.<br />

� Premere <strong>il</strong> pulsante Finish.<br />

15 Giugno 2007 Esercitazione Java - 4 3


campi<br />

� Questa figura rappresenta l’estensione<br />

del nodo MyBean nel progetto.<br />

15 Giugno 2007 Esercitazione Java - 4 4


Creare un nuovo Form<br />

� Dopo aver creato un nuovo progetto, lo step<br />

successivo è la creazione di un form<br />

all’interno del quale i componenti JavaBeans<br />

ed altri componenti <strong>GUI</strong> saranno inseriti.<br />

� Per creare un nuovo form:<br />

– Nella lista del progetto espandere <strong>il</strong> nodo MyBean,<br />

tasto destro sul node e<br />

selezionare New > JFrame Form dal menu a<br />

popup.<br />

– Inserire <strong>il</strong> nome della classe MyForm.<br />

– Premere <strong>il</strong> pulsante Finish.<br />

15 Giugno 2007 Esercitazione Java - 4 5


�L’ambiente IDE crea <strong>il</strong> form MyForm e la classe<br />

MyForm all’interno della applicazione MyBean ed apre <strong>il</strong><br />

form MyForm nel <strong>GUI</strong> Bu<strong>il</strong>der. Vedi figura.<br />

15 Giugno 2007 Esercitazione Java - 4 6


The <strong>GUI</strong> Bu<strong>il</strong>der Interface<br />

� Dopo che <strong>il</strong> form JFrame è aggiunto<br />

all’applicazione, l’ambiente IDE apre the <strong>il</strong> form<br />

appena creato<br />

– Selection Mode : seleziona uno o più oggetti nella<br />

Design Area.<br />

– Connection Mode : permette di creare una connessione<br />

fra oggetti specificando un evento.<br />

– Preview Design : permette di avere una anteprima<br />

dell’interfaccia creata.<br />

– Align commands : allinea i comandi.<br />

– Change Resizab<strong>il</strong>ity : ab<strong>il</strong>ita <strong>il</strong> resizing verticale e<br />

orizzontale.<br />

� Quando <strong>il</strong> MyForm form si apre nel <strong>GUI</strong> Bu<strong>il</strong>der's<br />

Design view, 3 finestre aggiuntive appaiono,<br />

permettendoci di navigarle, organizzarle ed<br />

editarle.<br />

15 Giugno 2007 Esercitazione Java - 4 7


Le varie finestre<br />

� Design Area. The primary window for creating and editing Java <strong>GUI</strong><br />

forms. Source and Design toggle buttons enable you to switch between<br />

view a class's source code and a graphical view of the <strong>GUI</strong><br />

components. Click on an object to select it in the Design Area. For a<br />

multiple selection, hold down the Ctrl key wh<strong>il</strong>e clicking on objects.<br />

� Inspector. Representation of a tree hierarchy of all the components in<br />

your application. The Inspector highlights the component in the tree<br />

that is currently being edited.<br />

� Palette. A customizable list of ava<strong>il</strong>able components containing groups<br />

for Swing, AWT, Borders, and Beans components. This window<br />

enables you to create, remove, and rearrange the categories displayed<br />

in the palette using the customizer.<br />

� Properties Window. A display of the properties of the component<br />

currently selected in the <strong>GUI</strong> Bu<strong>il</strong>der, Inspector window, Projects<br />

window, or F<strong>il</strong>es window.<br />

� If you click the Source button, the IDE displays the application's Java<br />

source code in the editor. Sections of code that are automatically<br />

generated by the <strong>GUI</strong> Bu<strong>il</strong>der are indicated by blue areas. These blue<br />

areas are protected from editing in the Source view. You can only edit<br />

code appearing in the white areas of the editor when in Source view.<br />

When you make your changes in the Design View, the IDE updates the<br />

f<strong>il</strong>e's sources.<br />

15 Giugno 2007 Esercitazione Java - 4 8


Creare un Bean<br />

� Per creare un nostro oggetto bean ed<br />

aggiungerlo alla Palette per <strong>il</strong> gruppo bean,<br />

seguire la procedure:<br />

� Selezionare <strong>il</strong> node nel<br />

progetto MyBean.<br />

� Selezionare New > Java Class dal pop-up menu.<br />

� Specificare <strong>il</strong> nome per la nuova classe, ad<br />

esempio, MyBean, e premere <strong>il</strong> Finish button.<br />

� Espandere <strong>il</strong> MyBean.java e MyBean node e<br />

selezionare <strong>il</strong> Bean Patterns node.<br />

� Tasto destro sul Bean Patterns node e<br />

selezionare Add > Property dal pop-up menu.<br />

� Inserire YourName nel campo PropertyName<br />

come mostratoin figura, poi premere OK:<br />

15 Giugno 2007 Esercitazione Java - 4 9


15 Giugno 2007 Esercitazione Java - 4 10


Analiziamo <strong>il</strong> codice<br />

automaticamente generato<br />

public class MyBean {<br />

public MyBean() { }<br />

private String yourName;<br />

public String getYourName() {<br />

return this.yourName; }<br />

public void setYourName(String yourName)<br />

{<br />

this.yourName = yourName;<br />

}<br />

}<br />

15 Giugno 2007 Esercitazione Java - 4 11


� Tasto destro sul MyBean node nel MyBean project<br />

tree e selezionare Tools > Add to Palette dal popup<br />

menu.<br />

� Selezionare <strong>il</strong> Beans group nella Palette tree per<br />

aggiungere <strong>il</strong> bean.<br />

� Adesso si può passare alla finestra Palette<br />

selezionando Palette dal Windows menu e<br />

verificare che <strong>il</strong> MyBean sia stato aggiunto al<br />

Beans group.<br />

� Per adesso abbiamo creato un bean, settato la<br />

proprietà YourName, ed aggiunto come un<br />

componente alla palette.<br />

15 Giugno 2007 Esercitazione Java - 4 12


Aggiungere componenti al<br />

form<br />

� Adesso si può ut<strong>il</strong>izzare <strong>il</strong> Free Design del <strong>GUI</strong> Bu<strong>il</strong>der ed aggiungere <strong>il</strong><br />

MyBean component ed altri standard Swing components al MyForm.<br />

� Seelezionare <strong>il</strong> MyForm node nell’albero del progetto.<br />

� Trascinare la JLabel Swing component dalla finestra Palette fino<br />

all’area di Design. Fare doppio click sul componente e cambiare la<br />

proprietà Text in "Enter your name:".<br />

� Trascinare <strong>il</strong> JTextField dalla Palette window alla Design Area. Doppio<br />

click sul componente e e svuotale <strong>il</strong> campo del testo.<br />

� Trascinare <strong>il</strong> JButton component dalla Palette window alla Design Area.<br />

Doppio click sul componente e e inserire "OK" come text property.<br />

� Aggiungere un altro pulsante e inserire "Cancel" come text property.<br />

� Allineare i componenti.<br />

� Prima di trascinare <strong>il</strong> MyBean component dalla palette dobbiamo<br />

comp<strong>il</strong>are <strong>il</strong> progetto perché <strong>il</strong> MyBean component non è visuale e non<br />

può essere creato come un compoente visuale.<br />

� Quando si trascina <strong>il</strong> bean MyBean questo non apparirà nella Design<br />

Area. Comunque, possiamo vederlo nella Inspector window<br />

espandendo <strong>il</strong> Other Components node (vedi figura).<br />

15 Giugno 2007 Esercitazione Java - 4 13


crea i riferimenti nulli ai sotto<br />

oggetti<br />

15 Giugno 2007 Esercitazione Java - 4 14


� Abbiamo creato un progetto<br />

� Sv<strong>il</strong>uppato un form JFrame<br />

� Aggiunto un oggetto bean<br />

� Incluso <strong>il</strong> bean nel progetto come<br />

componente non-visuale.<br />

� Next steps:<br />

– Cambiare le properties per <strong>il</strong> componente bean<br />

– Maneggiare gli eventi usando <strong>il</strong> <strong>NetBeans</strong> <strong>GUI</strong><br />

Bu<strong>il</strong>der.<br />

15 Giugno 2007 Esercitazione Java - 4 15

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!