1 object-oriented software engineering cs288. 2 gui building with netbeans contents user interaction...

29
1 Object-Oriented Software Engineering CS288

Upload: veronica-dixon

Post on 13-Jan-2016

233 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

1

Object-Oriented Software Engineering

CS288

Page 2: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

2

GUI building with NetBeans

Contents• User Interaction• JButtons• JTextFields• JLabels• JForms in NetBeans• Practical steps for building GUI in NetBeans

Page 3: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

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.

Page 4: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

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.

Page 5: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

5

What's in a GUI

JTextFields

JComboBox

JButton

JLabel

shows the main elementsthat we will include in ourGUI to provide user interaction.

This whole GUI will be providedby a new class that we will implement:FormJFrame

Page 6: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

6

What's in a GUI

Results displayed in separate windowusing a table format.

Page 7: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

7

The Building class again

• Methods Signatures:– public void addRoom(Room newRoom)– public String[ ][ ] roomsToArrayArray()– public void setRoom(Vector<Room> newRooms)

• Fields– private Vector<Room> 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 versionof this class.

Page 8: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

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.

Page 9: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

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 versionof this class.

Page 10: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

10

Add Room Scenario

Page 11: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

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.

Page 12: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

12

Creating Java Forms in NetBeans• NetBeans allows us to construct GUIs via a drag and

drop tool that integrates with existing code.

Page 13: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

13

Creating Java Forms in NetBeans

• From the existing project that contains the Building class, and Room class add a new JFrom:

Page 14: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

14

Creating Java Forms in NetBeans

• Choose some suitable name or other

• Click Package

Page 15: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

15

Creating Java Forms in NetBeans

• Choose the package where the other source files live.

• Click Finish

Page 16: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

16

Design-time, graphical view

Netbeans opens a drag and dropGUI design tool for FormJFrame

Page 17: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

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.

Page 18: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

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.

Page 19: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

19

Design-time, graphical view

List of available graphical elementsfor draging onto form

Page 20: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

20

Design-time, graphical view

Visual representationof object.

Java properties of jTexField1 object.Lists fields of that object which we can modify

Page 21: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

21

Design-time, graphical view

• Rename field value with inspector

• Right click object• Change name to

something meaningful.

Page 22: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

22

Design-time, graphical view

• Change default value in design view.• Double click text in field and type in new value,

say 12.

Page 23: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

23

Design-time, graphical view

• Repeat till we have three JTextField objects with suitable names and default values.

Page 24: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

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:

Page 25: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

25

Design-time, graphical view

• Resize one TextField • Control click on each TextField• Right click and choose same size:

Page 26: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

26

Design-time, graphical view

• Drag over two JButton object

• Change the fields names as before

• Change the display text as before

Page 27: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

27

Design-time, graphical view

• Register action listener to JButton objects• Action listners will be covered in depth in later lectures

Page 28: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

28

Source view of FormJFrame objectLarge amounts of code have now been included in the FormJFramesource 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: */ }

Page 29: 1 Object-Oriented Software Engineering CS288. 2 GUI building with NetBeans Contents User Interaction JButtons JTextFields JLabels JForms in NetBeans Practical

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(); }