GUI Programming using NetBeans

GUI construction • We have previously talked about elements in a (simple) GUI – Frames, Panes and Dialogs – Text fields – Lists and Combo boxes – Check and Radio buttons

• We now look more closely at how to use GUI controls in an application 2

GUI construction • In general, we have two options when constructing a GUI – Build it ”by hand” using Swing API – Use the NetBeans GUI Builder

• Using the GUI Builder is usually much easier than hand-coding the GUI – Does not give you complete control

3

GUI construction

4

GUI construction • If you wish to construct a GUI manually, you usually begin by creating a JFrame • A JFrame object is essentially an empty window, into which you can add containers for GUI controls • Typically, you will add a JPanel to the frame – the JPanel object will contain the actual GUI controls 5

GUI construction public static void main(String[] args) { JFrame theFrame = new JFrame(); theFrame.setBounds(200, 200, 720, 450); theFrame.setVisible(true); JPanel thePanel = new JPanel(); theFrame.add(thePanel); } 6

GUI construction • On the JPanel object, various layout strategies can be used – Flow layout – left to right – Border layout – groups into areas – Grid layout – groups into a grid

• Border layout is default, and also most commonly used

7

More Layouts The following layout managers are supported by Java and NetBeans – – – –

Free Layout Null Layout Card Layout GridBag Layout

Some Common Layouts

GUI construction • Using border layout, the panel is divided into five areas – Center – North – South – East – West 10

GUI construction • If a control is put into an area, it will expand to fill out the area • Good when resizing, but may look weird… • If you need a finer level of control, put a panel inside a panel… • …or maybe consider a different layout

11

GUI construction public static void main(String[] args) { JFrame theFrame = new JFrame(); theFrame.setBounds(200, 200, 240, 150); theFrame.setVisible(true); JPanel thePanel = new JPanel(); thePanel.setLayout(new BorderLayout()); thePanel.add(new Button("Center"), BorderLayout.CENTER); theFrame.add(thePanel); }

12

Text field • Two common purposes: – Allow the user to enter data as text – Display text data to the user

• A text field can be ”enabled” or ”disabled” – Enabled: Data can be entered – Disabled: Data can only be displayed

• At some point we need to set or extract the text from the text field 13

Text field JFrame theFrame = new JFrame(); theFrame.setBounds(200, 200, 300, 300); JPanel thePanel = new JPanel(); thePanel.setLayout(new BorderLayout()); JTextField theTextField = new JTextField(); thePanel.add(theTextField, BorderLayout.NORTH); theFrame.add(thePanel); theFrame.setVisible(true);

14

Text field Text field

15

Text field • Enabling a text field theTextField.setEditable(true);

• Disabling a text field theTextField.setEditable(false);

• Setting the text in a text field theTextField.setText("Greeting earthlings!");

• Getting the text from a text field String s = theTextField.getText();

16

List box / Combo box • A list (or combo) box enables the user to choose an option between many alternatives • List box: User can only choose between specified alternatives • Combo box: User can choose between specified alternatives, or specify choice manually (type it in) 17

List box / Combo box Object[] choices = {"One", "Two", "Three", "Four"}; JComboBox theBox = new JComboBox(choices); theBox.setEditable(true); thePanel.add(theBox, BorderLayout.NORTH);

18

List box / Combo box Combo box (editable)

19

List box / Combo box • Enabling a Combo box theBox.setEditable(true);

• Disabling a Combo box theBox.setEditable(false);

• Setting the selection in a Combo box theBox.setSelectedItem(”Three");

• Getting the selection from a Combo box String s = (String)theBox.getSelectedItem();

20

Check boxes • In some cases, the set of possible choices is limited to two options • Often a case of either/or, or perhaps on/off • A Check box can only be in two states; checked or unchecked • Nice fit for binary choices

21

Check boxes JCheckBox theBBox = new JCheckBox("Bold"); JCheckBox theIBox = new JCheckBox("Italic"); JCheckBox theUBox = new JCheckBox("Underline"); thePanel.add(theBBox,BorderLayout.WEST); thePanel.add(theIBox,BorderLayout.NORTH); thePanel.add(theUBox,BorderLayout.EAST);

22

Check boxes

23

Check boxes • Enabling a Check box theCBox.setEnabled(true);

• Disabling a Check box theCBox.setEnabled(false);

• Setting the selection in a Check box theCBox.setSelected(isSelected);

• Getting the selection from a Check box boolean isSelected = theCBox.isSelected();

24

Radio buttons • If the number of choices is few, and they are mutually exclusive, use a group of Radio buttons • Only one button in a group of Radio buttons can be selected

25

Radio buttons JRadioButton small = new JRadioButton("Small"); JRadioButton medium = new JRadioButton("Medium"); JRadioButton large = new JRadioButton("Large"); ButtonGroup theGroup = new ButtonGroup(); theGroup.add(small); theGroup.add(medium); theGroup.add(large);

26

Radio buttons

27

Radio buttons • Enabling a Radio button theRB.setEnabled(true);

• Disabling a Radio button theRB.setEnabled(false);

• Setting the selection in a Radio button theRB.setSelected(isSelected);

• Getting the selection from a Radio button boolean isSelected = theRB.isSelected();

28

29

Designing the User Interface for a GUI Interface Various components in a GUI window

Designing the User Interface for a GUI Interface Component names are used to identify the components in the program, in the same way variable names are used Components and their names

The concept of events • On the inside (code), GUI code has a very different structure than ”usual” code • Usual code is driven by conditions and various control structures (if, while,…) • GUI code is driven by events

32

The concept of events • Execution of GUI code is much more unpredictable than for usual code • We cannot predict – or dictate – what the user does, so we must always handle any possible action the user can do • A user action related to the GUI is called an event

33

The concept of events

34

The concept of events • Almost all actions the user performs will ”trigger” an event for us to handle – Moving the mouse – Clicking on a button – Writing text in a text box – ….and so on

• There are hundreds of possible events!

35

The concept of events • Fortunately, is it optional to respond to an event • We only need to do so, if we want any special action to happen • If that is the case, we must write an event handler for that particular event 36

Events and event source • Events: mouse movements, mouse clicks, and keystrokes, or by the operating system, such as a timer. • Java has pre-defined classes to represent different kinds of events. Each kind of event is defined as a class. – For example, ActionEvent defines events such as pressing a button; WindowEvent defines events such as closing or opening a window;

Writing Event Handlers Event handlers are written to control the GUI – After the windows are designed, event handlers are coded to respond to events when an action occurs, such as clicking a button – Event: an action that takes place within a program – Event handlers: a module that automatically executes when a specific event occurs

Writing Event Handlers How to write the event handler module Module ComponentName_EventName() The statements that appear here are executed when the event occurs. End Module //an event handler that closes a window Module exitButton_Click() Close End Module