gui programming using netbeans
DESCRIPTION
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. GUI construction. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/1.jpg)
GUI Programming using NetBeans
![Page 2: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/2.jpg)
RHS – SOC 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
![Page 3: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/3.jpg)
RHS – SOC 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…
![Page 4: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/4.jpg)
RHS – SOC 4
GUI construction
![Page 5: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/5.jpg)
RHS – SOC 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
![Page 6: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/6.jpg)
RHS – SOC 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);
}
![Page 7: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/7.jpg)
RHS – SOC 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
![Page 8: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/8.jpg)
RHS – SOC 8
GUI construction
• Using border layout, the panel is divided into five areas– Center– North– South– East– West
![Page 9: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/9.jpg)
RHS – SOC 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
![Page 10: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/10.jpg)
RHS – SOC 10
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);
}
GUI construction
![Page 11: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/11.jpg)
RHS – SOC 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…
![Page 12: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/12.jpg)
RHS – SOC 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
![Page 13: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/13.jpg)
RHS – SOC 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);
![Page 14: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/14.jpg)
RHS – SOC 14
Text field
Text field
![Page 15: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/15.jpg)
RHS – SOC 15
Text field
• Enabling a text fieldtheTextField.setEditable(true);
• Disabling a text fieldtheTextField.setEditable(false);
• Setting the text in a text fieldtheTextField.setText("Greeting
earthlings!");
• Getting the text from a text fieldString s = theTextField.getText();
![Page 16: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/16.jpg)
RHS – SOC 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)
![Page 17: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/17.jpg)
RHS – SOC 17
List box / Combo box
Object[] choices =
{"One", "Two", "Three", "Four"};
JComboBox theBox = new JComboBox(choices);
theBox.setEditable(true);
thePanel.add(theBox, BorderLayout.NORTH);
![Page 18: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/18.jpg)
RHS – SOC 18
List box / Combo box
Combo box (editable)
![Page 19: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/19.jpg)
RHS – SOC 19
List box / Combo box
• Enabling a Combo boxtheBox.setEditable(true);
• Disabling a Combo boxtheBox.setEditable(false);
• Setting the selection in a Combo boxtheBox.setSelectedItem(”Three");
• Getting the selection from a Combo boxString s = (String)theBox.getSelectedItem();
![Page 20: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/20.jpg)
RHS – SOC 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
![Page 21: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/21.jpg)
RHS – SOC 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);
![Page 22: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/22.jpg)
RHS – SOC 22
Check boxes
![Page 23: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/23.jpg)
RHS – SOC 23
Check boxes
• Enabling a Check boxtheCBox.setEnabled(true);
• Disabling a Check boxtheCBox.setEnabled(false);
• Setting the selection in a Check boxtheCBox.setSelected(isSelected);
• Getting the selection from a Check boxboolean isSelected = theCBox.isSelected();
![Page 24: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/24.jpg)
RHS – SOC 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
![Page 25: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/25.jpg)
RHS – SOC 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);
![Page 26: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/26.jpg)
RHS – SOC 26
Radio buttons
![Page 27: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/27.jpg)
RHS – SOC 27
Radio buttons
• Enabling a Radio buttontheRB.setEnabled(true);
• Disabling a Radio buttontheRB.setEnabled(false);
• Setting the selection in a Radio buttontheRB.setSelected(isSelected);
• Getting the selection from a Radio buttonboolean isSelected = theRB.isSelected();
![Page 28: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/28.jpg)
RHS – SOC 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
![Page 29: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/29.jpg)
RHS – SOC 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)
![Page 30: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/30.jpg)
RHS – SOC 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
![Page 31: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/31.jpg)
RHS – SOC 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
![Page 32: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/32.jpg)
RHS – SOC 32
The concept of events
![Page 33: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/33.jpg)
RHS – SOC 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!
![Page 34: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/34.jpg)
RHS – SOC 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
![Page 35: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/35.jpg)
RHS – SOC 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
![Page 36: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/36.jpg)
RHS – SOC 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
![Page 37: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/37.jpg)
RHS – SOC 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);
![Page 38: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/38.jpg)
RHS – SOC 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!”
![Page 39: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/39.jpg)
RHS – SOC 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
![Page 40: GUI Programming using NetBeans](https://reader036.vdocument.in/reader036/viewer/2022081416/5681447b550346895db1125e/html5/thumbnails/40.jpg)
RHS – SOC 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!