GUI Programming using NetBeans

1
GUI Programming using NetBeans
2
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

3
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, however

4
GUI construction
5
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

6
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)

7
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

8
GUI construction

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

9
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

10
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)

11
Exercises

• Try out create an application which looks like
  the picture to the right, without using the GUI
  Builder.
• That is, create it only by using the Swing API
  methods as shown in the presentation.
• Remember that you can put panels within panels

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
Radio buttons

• Note that even though only one Radio button in a
  group can be selected, we must call isSelected()
  until we find it
• Putting Radio buttons in a group does not make
  them appear grouped visually

29
Exercises

• Try out create an applica-tion which looks like
  the picture to the right, without using the GUI
  Builder.
• Only one radio button should be selected at all
  times
• Font for a control can be set using the setFont
  method (see the docu-mentation)

30
The concept of events

• On the inside (code), GUI code has a very
  different structure than usual code
• Usual code is driven by con-ditions and various
  control structures (if, while,)
• GUI code is driven by events

31
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

32
The concept of events
33
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!

34
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

35
Relevant events

• Unless we need more sophisticated behavior, we
  only need to handle two types of events
• Choosing a menu item
• Clicking on a push button
• In both cases, we must create an object which can
  listen for events from the control in question

36
Relevant events

• An event listener class must implement a
  Listener interface (there are several)
• From pushbuttons and menu items, we get action
  events, so a listener class must implement the
  ActionListener interface
• This interface has a single method
  actionPerformed

37
Relevant events

• public class MyListener implements ActionListener
• public void actionPerformed(ActionEvent event)
• System.out.println("Button clicked")
• private ActionListener theListener
• theListener new MyListener()
• ...
• JButton theButton new JButton("Click Me!")
• theButton.addActionListener(theListener)

38
Relevant events

• A very common dialog construction
• Add an OK button
• In the event listener for the button
• Retrieve data from the relevant controls
• Process the data
• Close the dialog
• Pressing OK means Now my input is ready, do
  something with it!

39
Wrapping up

• GUI programming is somewhat difficult and tedious
• Unless you need something special, use the
  NetBeans GUI Builder!
• Always nice to know what does on under the hood
• You can to some degree mix manual coding and
  using the GUI Builder

40
Exercises

• Try out create an application which looks like
  the picture to the right, without using the GUI
  Builder.
• Create event listeners for the buttons, that
  print the texts
• Brrr for Arctic and Antarctic
• Puhh for America and Asia
• Wet! for Atlantic
• You should not write more than three event
  listeners!