1. 1 Object-Oriented Software Engineering CS288

2. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical steps for building GUI in NetBeans

3. 3 GUI, Graphical User Interface 1.For the course assignment you will be creating a Java application with GUI. 2.GUIs are laborious and complex. 3.NetBeans Provides a useful GUI builder tool with drag and drop form creation. 4.This presentation gives a crash course in using the tool. 5.The underlying concepts of GUIs and how they work in Java will be discussed in depth in later lectures.

4. 4 What's in a GUI Any application involving a human needs to allow them to –input data, –ask for methods to be executed –and get meaningful responses.

5. 5 What's in a GUI JTextFields JComboBox JButton JLabel shows the main elements that we will include in our GUI to provide user interaction. This whole GUI will be provided by a new class that we will implement: FormJFrame

6. 6 What's in a GUI Results displayed in separate window using a table format.

7. 7 The Building class again Methods Signatures: –public void addRoom(Room newRoom) –public String[ ][ ] roomsToArrayArray() –public void setRoom(Vector newRooms) Fields –private Vector rooms This lists the methods and fields we want to use for this exercise. The lab sessions so far have been building up an enhanced version of this class.

8. 8 Room Class, with Enum Type For this exercise we will add a new Enum Type internally to the Room Class: public enum Use { HALL, LOUNGE, BEDROOM, KITCHEN, BATHROOM } This will hold the use to which a room will be put.

9. 9 The Room Class again, with Enum Type Methods: –Constructor: Room(Double newArea, int newDoors, int newWindows, String room_type) –String[ ] toStringArray() Fields: –private Double area; –private int doors; –private int windows; –private Use room_type; This lists the methods and fields we want to use for this exercise. The lab sessions so far have been using a different version of this class.

10. 10 Add Room Scenario

11. 11 Where is the Room Class This scenario requires the FormJFrame class to construct a Room object. In early versions of Building we wrote Room as an inner class. If we want a Room object to be constructed by other classes we need to convert it into a stand-alone class in a file Room.java Fortunately the structure of the Building class means we only need remove the Room code and move it to a new file Room.java in the same folder. No other changes are needed to the Building class for it to still work.

12. 12 Creating Java Forms in NetBeans NetBeans allows us to construct GUIs via a drag and drop tool that integrates with existing code.

13. 13 Creating Java Forms in NetBeans From the existing project that contains the Building class, and Room class add a new JFrom:

14. 14 Creating Java Forms in NetBeans Choose some suitable name or other Click Package

15. 15 Creating Java Forms in NetBeans Choose the package where the other source files live. Click Finish

16. 16 Design-time, graphical view Netbeans opens a drag and drop GUI design tool for FormJFrame

17. 17 Design-time, graphical view Note NetBeans has created a whole new class at this point: First task is to add three text boxes to input data.

18. 18 Design-time, graphical view JTextFields are a Java class specifically designed for GUIs as a place holder for strings typed in by users. These will be covered in depth in later lectures. Drag relevant icon onto the blank form. Doing so creates a new Java object of the relevant class. It automatically creates code within that class to cause the object to appear when the code is run.

19. 19 Design-time, graphical view List of available graphical elements for draging onto form

20. 20 Design-time, graphical view Visual representation of object. Java properties of jTexField1 object. Lists fields of that object which we can modify

21. 21 Design-time, graphical view Rename field value with inspector Right click object Change name to something meaningful.

22. 22 Design-time, graphical view Change default value in design view. Double click text in field and type in new value, say 12.

23. 23 Design-time, graphical view Repeat till we have three JTextField objects with suitable names and default values.

24. 24 Design-time, graphical view Follow same process to drag three new JLabel objects onto the form and give them suitable names and default values:

25. 25 Design-time, graphical view Resize one TextField Control click on each TextField Right click and choose same size:

26. 26 Design-time, graphical view Drag over two JButton object Change the fields names as before Change the display text as before

27. 27 Design-time, graphical view Register action listener to JButton objects Action listners will be covered in depth in later lectures

28. 28 Source view of FormJFrame object Large amounts of code have now been included in the FormJFrame source file FormJFrame.java. The only parts of this that we need worry about are the two new methods: private void showRoomsButtonActionPerformed(java.awt.event.ActionEvent evt) {/* TODO add your handling code here: */ } private void addRoomButtonActionPerformed(java.awt.event.ActionEvent evt) {/* TODO add your handling code here: */ }

29. 29 New Code for JButtons private void addRoomButtonActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here: String areaString = areaTextField.getText(); String doorString = doorsTextField.getText(); String windowString = windowsTextField.getText(); String roomTypeString = (String)roomTypeComboBox.getSelectedItem(); Double rmArea = new Double(areaString); int numDoors = (int)(new Integer(doorString)); int numWin = (int)(new Integer(windowString)); Room newRoom = new Room(rmArea, numDoors, numWin, roomTypeString); frame_building.addRoom(newRoom); frame_building.showRoomsTable(); } private void showRoomsButtonActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here: frame_building.showRoomsTable(); }