Utilizzare il NetBeans GUI Builder Dott. Ing. M. Banci, PhD Lavorare con i Beans ) Queste slide ci guidano nel processo di creazione di un bean pattern nel progetto NetBeans 15 Giugno 2007 Esercitazione Java - 4 2 In NetBeans IDE, si lavora sempre su un progetto in cui si inseriscono i file e i sorgenti. ) Creiamo un progetto come abbiamo già fatto selezionando Java Application type. ) Il nome del progetto sarà MyBean e indicare dove inseriremo il codice. ) Non creare una classe Main, poiche creeremo una nuova classe nel progetto. ) Premere il pulsante Finish. ) 15 Giugno 2007 Esercitazione Java - 4 3 campi ) Questa figura rappresenta l’estensione del nodo MyBean nel progetto. 15 Giugno 2007 Esercitazione Java - 4 4 Creare un nuovo Form Dopo aver creato un nuovo progetto, lo step successivo è la creazione di un form all’interno del quale i componenti JavaBeans ed altri componenti GUI saranno inseriti. ) Per creare un nuovo form: ) – Nella lista del progetto espandere il nodo MyBean, tasto destro sul <default package> node e selezionare New > JFrame Form dal menu a popup. – Inserire il nome della classe MyForm. – Premere il pulsante Finish. 15 Giugno 2007 Esercitazione Java - 4 5 )L’ambiente IDE crea il form MyForm e la classe MyForm all’interno della applicazione MyBean ed apre il form MyForm nel GUI Builder. Vedi figura. 15 Giugno 2007 Esercitazione Java - 4 6 The GUI Builder Interface ) Dopo che il form JFrame è aggiunto all’applicazione, l’ambiente IDE apre the il form appena creato – Selection Mode : seleziona uno o più oggetti nella Design Area. – Connection Mode : permette di creare una connessione fra oggetti specificando un evento. – Preview Design : permette di avere una anteprima dell’interfaccia creata. – Align commands : allinea i comandi. – Change Resizability : abilita il resizing verticale e orizzontale. Quando il MyForm form si apre nel GUI Builder's Design view, 3 finestre aggiuntive appaiono, permettendoci di navigarle, organizzarle ed 15 Giugno 2007 Esercitazione Java - 4 editarle. ) 7 Le varie finestre ) ) ) ) ) Design Area. The primary window for creating and editing Java GUI forms. Source and Design toggle buttons enable you to switch between view a class's source code and a graphical view of the GUI components. Click on an object to select it in the Design Area. For a multiple selection, hold down the Ctrl key while clicking on objects. Inspector. Representation of a tree hierarchy of all the components in your application. The Inspector highlights the component in the tree that is currently being edited. Palette. A customizable list of available components containing groups for Swing, AWT, Borders, and Beans components. This window enables you to create, remove, and rearrange the categories displayed in the palette using the customizer. Properties Window. A display of the properties of the component currently selected in the GUI Builder, Inspector window, Projects window, or Files window. If you click the Source button, the IDE displays the application's Java source code in the editor. Sections of code that are automatically generated by the GUI Builder are indicated by blue areas. These blue areas are protected from editing in the Source view. You can only edit code appearing in the white areas of the editor when in Source view. When you make your changes in the Design View, the IDE updates the file's sources. 15 Giugno 2007 Esercitazione Java - 4 8 Creare un Bean ) ) ) ) ) ) ) Per creare un nostro oggetto bean ed aggiungerlo alla Palette per il gruppo bean, seguire la procedure: Selezionare il <default package> node nel progetto MyBean. Selezionare New > Java Class dal pop-up menu. Specificare il nome per la nuova classe, ad esempio, MyBean, e premere il Finish button. Espandere il MyBean.java e MyBean node e selezionare il Bean Patterns node. Tasto destro sul Bean Patterns node e selezionare Add > Property dal pop-up menu. Inserire YourName nel campo PropertyName come mostratoin figura, poi premere OK: 15 Giugno 2007 Esercitazione Java - 4 9 15 Giugno 2007 Esercitazione Java - 4 10 Analiziamo il codice automaticamente generato public class MyBean { public MyBean() { } private String yourName; public String getYourName() { return this.yourName; } public void setYourName(String yourName) { this.yourName = yourName; } } 15 Giugno 2007 Esercitazione Java - 4 11 ) ) ) ) Tasto destro sul MyBean node nel MyBean project tree e selezionare Tools > Add to Palette dal popup menu. Selezionare il Beans group nella Palette tree per aggiungere il bean. Adesso si può passare alla finestra Palette selezionando Palette dal Windows menu e verificare che il MyBean sia stato aggiunto al Beans group. Per adesso abbiamo creato un bean, settato la proprietà YourName, ed aggiunto come un componente alla palette. 15 Giugno 2007 Esercitazione Java - 4 12 Aggiungere componenti al form ) ) ) ) ) ) ) ) ) Adesso si può utilizzare il Free Design del GUI Builder ed aggiungere il MyBean component ed altri standard Swing components al MyForm. Seelezionare il MyForm node nell’albero del progetto. Trascinare la JLabel Swing component dalla finestra Palette fino all’area di Design. Fare doppio click sul componente e cambiare la proprietà Text in "Enter your name:". Trascinare il JTextField dalla Palette window alla Design Area. Doppio click sul componente e e svuotale il campo del testo. Trascinare il JButton component dalla Palette window alla Design Area. Doppio click sul componente e e inserire "OK" come text property. Aggiungere un altro pulsante e inserire "Cancel" come text property. Allineare i componenti. Prima di trascinare il MyBean component dalla palette dobbiamo compilare il progetto perché il MyBean component non è visuale e non può essere creato come un compoente visuale. Quando si trascina il bean MyBean questo non apparirà nella Design Area. Comunque, possiamo vederlo nella Inspector window espandendo il Other Components node (vedi figura). 15 Giugno 2007 Esercitazione Java - 4 13 crea i riferimenti nulli ai sotto oggetti 15 Giugno 2007 Esercitazione Java - 4 14 Abbiamo creato un progetto ) Sviluppato un form JFrame ) Aggiunto un oggetto bean ) Incluso il bean nel progetto come componente non-visuale. ) Next steps: ) – Cambiare le properties per il componente bean – Maneggiare gli eventi usando il NetBeans GUI Builder. 15 Giugno 2007 Esercitazione Java - 4 15