95
GUI Programming using NetBeans

GUI Programming using NetBeans

  • Upload
    kaethe

  • View
    49

  • Download
    1

Embed Size (px)

DESCRIPTION

GUI Programming using NetBeans. What is a GUI ?. GUI – Graphical User Interface The (visual) interface between humans and computers Ranging from command lines to ”Minority Report” – style GUI Why? Makes interfaces more intuitive – most humans don’t like command lines…. GUI Programming. - PowerPoint PPT Presentation

Citation preview

Page 1: GUI Programming  using NetBeans

GUI Programming using NetBeans

Page 2: GUI Programming  using NetBeans

SWC

What is a GUI ?• GUI – Graphical User Interface• The (visual) interface between humans and

computers• Ranging from command lines to ”Minority

Report” – style GUI• Why? Makes interfaces more intuitive – most

humans don’t like command lines…

Page 3: GUI Programming  using NetBeans

SWC

GUI Programming• Creating a proper GUI can be as important –

and large – a task as creating the logic• Quite a lot of topics in GUI programming

– Human perception– Task analysis– User analysis– Actual programming

Page 4: GUI Programming  using NetBeans

SWC

Simple GUI - example

Text label

Text Field(input)

Pushbutton

Text Field(output)

Page 5: GUI Programming  using NetBeans

SWC

Elements in a GUI

• A GUI is usually composed by controls• A control can be a

– Text field (enabled, disabled)– Pushbutton (OK, Cancel,…)– List box (multiple items to choose from)– Check box (yes-or-no)– …

• Many types of GUI controls

Page 6: GUI Programming  using NetBeans

SWC

Starting simple…• For now, we will limit

ourselves to just a few GUI controls:– Text label– Text field– List– Check box– Pushbutton– Picture

Page 7: GUI Programming  using NetBeans

SWC

Text labels

• Probably the simplest control of all…• Usually just used for adding ”static” text – text

that does not change – to the GUI• Such texts will typically be ”helper text” for

other controls• No code needed!

Page 8: GUI Programming  using NetBeans

SWC

Text labels

Page 9: GUI Programming  using NetBeans

SWC

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 10: GUI Programming  using NetBeans

SWC

Text field

Page 11: GUI Programming  using NetBeans

SWC

List box

• Essentially serves the same purpose as a text field – get text input from user

• However, in some situations we may only allow certain inputs, for instance members of a set of legal input

• When using a list control, the user can only select an item from the list

Page 12: GUI Programming  using NetBeans

SWC

List box

Page 13: GUI Programming  using NetBeans

SWC

Check box

• In some cases, the set of possible choices is limited to two options

• Often a case of either/or, or perhaps on/off• A Checkbox can only be in two states; checked

or unchecked• Nice fit for binary choices

Page 14: GUI Programming  using NetBeans

SWC

Check box

Page 15: GUI Programming  using NetBeans

SWC

Pushbutton

• A pushbutton is usually used to start some kind of processing of data

• The ”input” is simply the user clicking on the pushbutton!

• Typical use: ”Now my input is ready, do something with it!”

• We all know the ”OK” button

Page 16: GUI Programming  using NetBeans

SWC

Pushbutton

Page 17: GUI Programming  using NetBeans

SWC

Picture

• Related to text labels – does not really have any functionality, but should be helpful for the user

• Increases ”recognisability” – the user can see that (s)he is at the right place

• When programming in NetBeans, a picture is just a special kind of text label…

Page 18: GUI Programming  using NetBeans

SWC

Picture

Page 19: GUI Programming  using NetBeans

SWC

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 20: GUI Programming  using NetBeans

SWC

GUI construction

• Swing is a class library for creating GUIs in Java• Quite large…• API: See package javax.swing in the Java

documentation• Tutorial:

http://docs.oracle.com/javase/tutorial/uiswing/components/index.html

• Most classes begin with ”J”…

Page 21: GUI Programming  using NetBeans

SWC

GUI construction

• If you wish to construct a GUI manually using Swing, 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 add a JPanel to the frame – the JPanel object contains the actual GUI controls

Page 22: GUI Programming  using NetBeans

SWC

GUI constructionpublic 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 23: GUI Programming  using NetBeans

SWC

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 24: GUI Programming  using NetBeans

SWC

GUI construction

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

Page 25: GUI Programming  using NetBeans

SWC

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 26: GUI Programming  using NetBeans

SWC

GUI constructionpublic 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);

}

Page 27: GUI Programming  using NetBeans

SWC

Exercise time

Page 28: GUI Programming  using NetBeans

SWC

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 29: GUI Programming  using NetBeans

SWC

Text fieldJFrame 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 30: GUI Programming  using NetBeans

SWC

Text field

Text field

Page 31: GUI Programming  using NetBeans

SWC

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 32: GUI Programming  using NetBeans

SWC

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 33: GUI Programming  using NetBeans

SWC

List box / Combo box

Object[] choices = {"One", "Two", "Three", "Four"};

JComboBox theBox = new JComboBox(choices);theBox.setEditable(true);thePanel.add(theBox, BorderLayout.NORTH);

Page 34: GUI Programming  using NetBeans

SWC

List box / Combo box

Combo box (editable)

Page 35: GUI Programming  using NetBeans

SWC

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 36: GUI Programming  using NetBeans

SWC

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 37: GUI Programming  using NetBeans

SWC

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 38: GUI Programming  using NetBeans

SWC

Check boxes

Page 39: GUI Programming  using NetBeans

SWC

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 40: GUI Programming  using NetBeans

SWC

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 41: GUI Programming  using NetBeans

SWC

Radio buttonsJRadioButton 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);

JPanel theRadioPanel = new JPanel();theRadioPanel.setLayout(new FlowLayout());

theRadioPanel.add(small);theRadioPanel.add(medium);theRadioPanel.add(large);

thePanel.add(theRadioPanel, BorderLayout.NORTH);

Page 42: GUI Programming  using NetBeans

SWC

Radio buttons

Page 43: GUI Programming  using NetBeans

SWC

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 44: GUI Programming  using NetBeans

SWC

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 45: GUI Programming  using NetBeans

SWC

Exercise time

Page 46: GUI Programming  using NetBeans

SWC

Menus

• Pull-down menu is a classic choice for choosing between options that have a hierarchical structure – menus form a hierarchy

• Usually only one main menu in an application; possible choices may vary depending on current circumstances

Page 47: GUI Programming  using NetBeans

SWC

Menus

• Swing menu classes: • JMenuBar – the actual menu bar, attached to

a frame window• JMenu – an element in the menu bar, with

other menus or menu items in it.• JMenuItem – a specific choice, with no sub-

choices

Page 48: GUI Programming  using NetBeans

SWC

Menus

• ”A menu bar contains menus”

• ”A menu contains other menus and menu items”

• ”A menu item just contains itself”

Page 49: GUI Programming  using NetBeans

SWC

Menus

Page 50: GUI Programming  using NetBeans

SWC

Menus

• How to create a menu bar– Create a JMenuBar object

• JMenuBar theMenuBar = new JMenuBar();– Add all relevant menus to the menu bar– Attach the menu bar to the main frame of the

application• frame.setJMenuBar(theMenuBar);

Page 51: GUI Programming  using NetBeans

SWC

Menus

• How to add menus to the menu bar– Create relevant menus, like

• JMenu borrowerMenu = new JMenu(”Borrower”);

– Add other menus or menu item to the menu– Add the menu to the menu bar

• theMenuBar.add(borrowerMenu);

Page 52: GUI Programming  using NetBeans

SWC

Menus

• How to add other (sub)menus to a menu– Create relevant menus, like

• JMenu borrowerManageMenu = new JMenu(”Manage Borrower”);

– Add other menus or menu item to the menu– Add the menu to the relevant menu

• borrowerMenu.add(borrowerManageMenu);

Page 53: GUI Programming  using NetBeans

SWC

Menus

• How to add menu items to a menu– Create relevant menu items, like

• JMenuItem borrowerDeleteMenuItem = new JMenuItem(”Delete Borrower”);

– Add the menu item to the relevant menu• borrowerManageMenu.add(borrowerDeleteMenuItem);

Page 54: GUI Programming  using NetBeans

SWC

Menus

• You can do some more ”fun” – and maybe even useful – things with menus:– Add images– Define accelerator keys– Use controls in menus (radio buttons, check boxes,

…)• Explore the documentation, but only use

features that are indeed useful…

Page 55: GUI Programming  using NetBeans

SWC

Exercise time

Page 56: GUI Programming  using NetBeans

SWC

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 57: GUI Programming  using NetBeans

SWC

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 58: GUI Programming  using NetBeans

SWC

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 59: GUI Programming  using NetBeans

SWC

The concept of events

Page 60: GUI Programming  using NetBeans

SWC

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 61: GUI Programming  using NetBeans

SWC

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 62: GUI Programming  using NetBeans

SWC

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 63: GUI Programming  using NetBeans

SWC

Relevant eventspublic 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 64: GUI Programming  using NetBeans

SWC

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 (maybe)

• Pressing ”OK” means: ”Now my input is ready, do something with it!”

Page 65: GUI Programming  using NetBeans

SWC

Exercise time

Page 66: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

• Manual GUI programming is somewhat difficult and tedious

• Unless you need something special, use the NetBeans GUI Builder!

• Enables you to ”drag-and-drop” controls into a pane, create event handler methods almost automatically, etc.

Page 67: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

• We will often start out by creating a ”main” frame for the application

• This frame could be called e.g. AppFrame• This frame will only contain a menu, to open

other – use-case specific – frames• Could e.g. also contain a logo, but should not

contain controls as such

Page 68: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

Choose New | JFrame Form

Page 69: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

Name, etc as usual…

Page 70: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

Graphical view of frame

Palette of controls

Frame properties

Page 71: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

You can switch between ”Design” view and

”Source” view

Page 72: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

Page 73: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

Page 74: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

• Looks somewhat confusing at first…• Good news is: You can literaly drag controls

onto the frame, move them around, adjust their size, alignment, etc.

• Code that implements your ”design” is automatically generated!

Page 75: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

• Once we add a control, we can– Give the variable representing the control a

suitable name– Graphically move, resize, etc. the control– Set various properties for the control– Also, we can add event handlers to a control

• While all this goes on, Java code is being generated for us

Page 76: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

Choosing this will generate an (empty)

event handler method

Page 77: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

As said, fill in the code to execute when the

button is clicked!

Page 78: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

• Once we add the event handler, it cannot be removed!

• However, we can always change the code• In a sense, the event handler is always there;

we just make it visible…• In general, we are not allowed to change the

automatically generated code

Page 79: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans• Simplistic GUIs often work as follows:

– Fill in data in the controls– Press the OK button– Data is ”dealt with” (sent to a handler, etc.)

• The only code we need to write is the event handler for pressing the OK button

• In the event handler, data is retrieved from the other controls

Page 80: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

Page 81: GUI Programming  using NetBeans

SWC

GUI Development in NetBeans

Page 82: GUI Programming  using NetBeans

RHS – SOC 82

GUI Development in NetBeansprivate void jButtonDoneActionPerformed(

java.awt.event.ActionEvent evt) { String name = jTextFieldName.getText(); String job = jListJob.getSelectedValue().toString(); boolean isMale = jCheckBoxMale.isSelected();

String gender; if (isMale) gender = "Male"; else gender = "Female";

String announce = name + " , " + gender + " , " + job; JOptionPane.showMessageDialog(null, announce);}

Page 83: GUI Programming  using NetBeans

SWC

Exercise time

Page 84: GUI Programming  using NetBeans

GUI Development guide

• No two applications will need the same GUI…

• ..but a typical 1. or 2.semester application will usually follow a certain pattern

SWC

Page 85: GUI Programming  using NetBeans

SWC

GUI Development guide

• What should the application be able to do…?– Probably some generic tasks (Quit, Help,…)– General data management (Load, Save,…)– Implement use cases!– Uses cases often fall in groups according to their

purposes (maybe a Customer-related group, a Boat-related group, etc.)

Page 86: GUI Programming  using NetBeans

SWC

GUI Development guide

• The set of tasks can be used to outline a menu structure, like e.g.– File (Load, Save, Quit,…)– Customer (Register, Delete, View All, …)– Boat (Register, Delete, View All)– Rental (Create, Delete, View All,…)

Page 87: GUI Programming  using NetBeans

SWC

GUI Development guide

• Create a main frame for the application, and add a menu bar with proper menus

• Do this using the Net-Beans GUI builder

Page 88: GUI Programming  using NetBeans

SWC

GUI Development guide

• Create an event handler for each menu item, create and display the proper frame in the event handler

private void jMenuItemRegisterBoatActionPerformed(java.awt.event.ActionEvent evt) { JFrame theRegBoatFrame = new RegisterBoatFrame(); theRegBoatFrame.setVisible(true);}

Page 89: GUI Programming  using NetBeans

SWC

GUI Development guide

• Create frames with controls for each of the Use Cases, again using the GUI builder

• Remember to give the control variables proper names

Page 90: GUI Programming  using NetBeans

SWC

GUI Development guide

• In each Use Case – specific frame, retrieve data from controls, do e.g. conversions and validation if needed, and forward data to business logic

• The above is usually done when the user clicks an ”OK”/”Register”/”Done” button

Page 91: GUI Programming  using NetBeans

SWC

GUI Development guide

• Create an event handler for the button, and do data retrieval, conversion, validation and forwarding in the event handler

private void jButtonRegisterBoatActionPerformed(java.awt.event.ActionEvent evt) { // Retrieve data from controls, etc..}

Page 92: GUI Programming  using NetBeans

SWC

GUI Development guide

• Remember that even though the code for a frame is auto-generated, you can still e.g. add instance fields to the class and parameters to the constructor

Page 93: GUI Programming  using NetBeans

SWC

GUI Development guide

• Typical use: Give a reference to the ”System” class to the frame in its constructor, so it can be used for calling a proper method in the ”System” class with the retrieved data

Page 94: GUI Programming  using NetBeans

SWC

GUI Development guide// Code in red added manuallypublic class RegisterBoatFrame extends javax.swing.JFrame { private BoatRentalSystem theSystem;

public RegisterBoatFrame(BoatRentalSystem theSystem) { this.theSystem = theSystem; initComponents(); }

...

Page 95: GUI Programming  using NetBeans

SWC

GUI Development guideprivate void jButtonRegisterBoatActionPerformed(java.awt.event.ActionEvent evt) { // Retrieve data from controls, etc.. theSystem.registerBoat(...);}

GUI App.System Handler