gui programming using netbeans (1).pptx
Post on 15-Jul-2015
169 Views
Preview:
TRANSCRIPT
GUI Programming using NetBeans
SWING API
GUI construction
• Elements in a (simple) GUI
– Frames, Panes and Dialogs
– Text fields
– Lists and Combo boxes
– Check and Radio buttons
• How to use GUI controls in an application?
RHS – SOC 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, however…
RHS – SOC 3
GUI construction
RHS – SOC 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
RHS – SOC 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);
}
RHS – SOC 6
GUI construction
• On the JPanel object, various layout strategiescan 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
RHS – SOC 7
GUI construction
• Using border layout, the panel is divided into five areas
– Center
– North
– South
– East
– West
RHS – SOC 8
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
RHS – SOC 9
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);
}
RHS – SOC 10
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…
RHS – SOC 11
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
RHS – SOC 12
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);
RHS – SOC 13
Text field
RHS – SOC 14
Text
field
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();
RHS – SOC 15
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)
RHS – SOC 16
List box / Combo box
Object[] choices =
{"One", "Two", "Three", "Four"};
JComboBox theBox = new JComboBox(choices);
theBox.setEditable(true);
thePanel.add(theBox, BorderLayout.NORTH);
RHS – SOC 17
List box / Combo box
RHS – SOC 18
Combo box
(editable)
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();
RHS – SOC 19
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
RHS – SOC 20
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);
RHS – SOC 21
Check boxes
RHS – SOC 22
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();
RHS – SOC 23
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
RHS – SOC 24
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);
RHS – SOC 25
Radio buttons
RHS – SOC 26
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();
RHS – SOC 27
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
RHS – SOC 28
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)
RHS – SOC 29
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
RHS – SOC 30
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
RHS – SOC 31
The concept of events
RHS – SOC 32
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!
RHS – SOC 33
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
RHS – SOC 34
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
RHS – SOC 35
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
RHS – SOC 36
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);
RHS – SOC 37
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!”
RHS – SOC 38
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
RHS – SOC 39
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!
RHS – SOC 40
top related