Applied HCI

entomologistsamoanSoftware and s/w Development

Aug 15, 2012 (4 years and 11 months ago)

441 views

Applied HCI

Week Two

Java Swing Basics

Overview


Announcements


ACM Meeting this Wednesday


Suggestions for Projects


Form based


Spatial


Hybrid


Using NetBeans with Java Swing


Critiquing the project

Using Netbeans


Creating a new GUI application


NetBeans Windows


Java GUI interface


Palette Widgets


Event Handling

Creating a new GUI application


New Project


New Package


New Applications


JFrame Class

NetBeans Windows


Design/Source View


Navigator


Projects


Files


Palette (only in design view)


Output, Tasks


Properties, Binding, Events, Code


NetBeans Windows (cont.)




Design/Source View

Navigator

Projects

Files

Properties,
Binding, Events,
Code

Palette (only in design view)

Output, Tasks

Java GUI interface


Layout managers


Palette Widgets


Event Handling

Layout managers

Layout managers indicate the placement of elements into a container
such as:


JFrame



JPanel



JDialog


The following layout managers are supported by Java and NetBeans


Free Layout (default)


Absolute Layout


Null Layout


Border Layout


Card Layout


Grid Layout


GridBag Layout


Flow Layout


Box Layout

Some Common Layouts

Free Layout (default)


Free Design has the following capabilities:


To lay out your form using visual guidelines that
automatically suggest optimal alignment and
spacing of components.


Whenever you resize the form or switch locales
the GUI adjusts to accommodate your changes
without changing the relationships between
components.

taken from NetBeans Help: About Layout Managers

Absolute Layout

Absolute Layout has the following capabilities:


Enables components to be placed exactly where
you want them in the form, move them around in
the IDE, and resize them using their selection
borders


Is particularly useful for making prototypes since
there are no formal limitations and you do not
have to enter any property settings.


It is not recommended for production applications since the
fixed locations and sizes of components do not change with
the environment.


Null Layout

Similar to absolute layout:


Enables components to be placed exactly where
you want them in the form, move them around in
the IDE, and resize them using their selection
borders


Is particularly useful for making prototypes since
there are no formal limitations and you do not
have to enter any property settings.


It is not recommended for production applications since the
fixed locations and sizes of components do not change with
the environment.


Border Layout

Border Layout has the following capabilities:


Arranges components along the edges or the
middle of their container.


Whenever you resize the form or switch locales
the GUI adjusts to accommodate your changes
without changing the relationships between
components.


center

west

north

east

south

Card Layout

Card Layout has the following capabilities:


Each component is like a card in a deck, where
all cards are the same size and only the top card
is visible at any time.



Usually, card layout is best implemented by
using the TabbedPane instead. This allows
visibility to change “cards”.


Grid Layout

GridLayout has the following capabilities:


Places components in a grid of rows and
columns of equally sized cells


Elements are added to the grid from left to right
and top to bottom

GridBag Layout

GridBag Layout has the following capabilities:


Provides precise control over all aspects of the
layout, using a complex set of component
properties called "constraints."


Places components in a grid of rows and
columns in which grid cells do not all have to be
the same size. Components can span multiple
rows, columns, or both.


Whenever you resize the form or switch locales
the GUI adjusts to accommodate your changes
without changing the relationships between
components.

Flow Layout

Flow Layout has the following capabilities:


Places components from top to bottom with auto
wrapping.


Components can be left, center, or right justified


Whenever you resize the form or switch locales
the GUI adjusts to accommodate your changes
by wrapping or unwrapping the components..


Box Layout

Box Layout has the following capabilities:


Components are arranged either vertically or
horizontally, but not both in the order they are
added to the container.


Components do not wrap to a second row or
column when more components are added or
even when the container is resized.

Suggested Layouts

Layout

Usage

Free Design

Useful for laying out components
in a free form, predetermined,
location.

Border Layout

Useful for establishing
prepositioned panels.

Flow Layout

Useful if consistent positioning is
not required and application will
be resized.

Sizing the Application Display

The application display can be sized by dragging the edges
of the JFrame component.To make the display the size of
the entire screen use the following code:




initComponents(); // normal NetBeans init call


Toolkit mytool = getToolkit(); // obtain display parameters


setSize(mytool.getScreenSize()); // set this component

































// to screensize


The screen size will be determined by the display setting
for that particular display. See:
http://java.sun.com/javase/6/docs/api/java/awt/Toolkit.html


Intro to NetBeans

Palette Widgets


Selected Containers


Selected Controls


Selected Menus


Selected Swing Windows


Java Beans
-

user created widgets

Selected Containers


JScrollPane


Useful if insufficient room to
include all of content. JScrollPane adds scroll
bars (verically and horizontally) as needed.


Tabbed Pane


Useful if content should be
placed on separate “cards”.


Split Pane


Useful for resizable panes either
side by side or top and bottom.


JPanel


Useful as a container for other
components (for grouping) or as a “canvas” for
drawing.

Selected Controls


JLabel


a text field used for labeling but not for
text entry (can be modified by code).


JTextfield


A single line text entry box.


JTextArea


A multiline text entry box.


JEditorPane


A multiline editor/browser box.


JButton (including Toggle)


JTable


A table of data (very powerful, but very
complex).


JComboBox


A dropdown textbox with choices.

Menus


Menu Bar


Add menu bar to top of
JFrame.


Menu Item (including checkbox & radio
button)


specific menu selections.


Menu


Used to create a new menu (in
menu bar) or a menu within menu items.


Separator


A horizontal bar useful for
grouping menu items or other menus.

Selected Pop
-
up Swing Windows


JOptionPane


A simple pop
-
up dialog box


JDialog (modal & non
-
modal)


A more complex
dialog box with a user defined frame. Can be:
modal, requiring action prior to continuing; or
non
-
modal, not requiring a response.


JFileChooser


A pop
-
up window that allows the
user to select a file from a directory tree. Can
have a “save” or “open” file title.


JColorChooser


A pop
-
up window that allows
user to select color from a color palette.

JOptionPane

Message Type

Icon

ERROR_MESSAGE


INFORMATION_ MESSAGE


PLAIN_MESSAGE


(no icon)

QUESTION_MESSAGE


WARNING_MESSAGE


http://java.sun.com/docs/books/tutorial/uiswing/components/dialog.html

A simple pop
-
up dialog box offering many message types.

JOptionPane

Examples:



Show an error dialog that displays the message, 'alert':

JOptionPane.showMessageDialog(null, "alert", "alert",
JOptionPane.ERROR_MESSAGE);


Show an internal information dialog with the message, 'information':

JOptionPane.showInternalMessageDialog(frame, "information",

"information", JOptionPane.INFORMATION_MESSAGE);


Show an information panel with the options yes/no and message 'choose one':

JOptionPane.showConfirmDialog(null,

"choose one", "choose one", JOptionPane.YES_NO_OPTION);


Show an internal information dialog with the options yes/no/cancel and message 'please
choose one' and title information:

JOptionPane.showInternalConfirmDialog(frame, "please choose one", "information",

JOptionPane.YES_NO_CANCEL_OPTION,
OptionPane.INFORMATION_MESSAGE );

http://java.sun.com/javase/7/docs/api/javax/swing/JOptionPane.html

JOptionPane

Examples (cont):



Show a warning dialog with the options OK, CANCEL, title 'Warning', and message 'Click
OK to continue':

Object[] options = { "OK", "CANCEL" };

JOptionPane.showOptionDialog(null, "Click OK to continue", "Warning",

JOptionPane.DEFAULT_OPTION, JOptionPane.WARNING_MESSAGE,

null, options, options[0]);


Show a dialog asking the user to type in a String:

String inputValue = JOptionPane.showInputDialog("Please input a value");


Show a dialog asking the user to select a String:

Object[] possibleValues = { "First", "Second", "Third" };

Object selectedValue = JOptionPane.showInputDialog(null,

"Choose one", "Input",

JOptionPane.INFORMATION_MESSAGE, null,

possibleValues, possibleValues[0]);



http://java.sun.com/javase/7/docs/api/javax/swing/JOptionPane.html

JDialog


A JDialog window is a user defined,
independent subwindow meant to provide
or elicit more detail.


The constructor requires a reference to an
instance of Frame and a boolean
(minimum).


Dialogs in general should be used sparingly,
because they may cause cognitive interrupts.

Creating a JDialog in NetBeans


Right click on the package icon for the
project, then select new JDialog form.


Design screen as was done for JFrame.


Once completed with the new dialog,
switch back to the JFrame document.

Communications between Main
Screen and JDialog

Main Screen Code



// instantiate dialog

mydial = new MyDial(this,
true);

// make it show

mydial.setVisible(true);



JDialog Code



// accessing main data

mdfield1=


parent.getFieldX();



// modifying main data

parent.setFiledX(mdfield1)



//close dialog

setVisible(false);

reference to main screen object

JFileChooser: Open File

jFileChooser1.setCurrentDirectory(new File(".
\
\
imports")); // give starting directory


int returnVal = jFileChooser1.show
Open
Dialog(this); // open the “open” dialog


if (returnVal == JFileChooser.APPROVE_OPTION) { // if file entered or selected


try {


// get selected directory and file name


fileselected = jFileChooser1.getSelectedFile().getParent() + "
\
\
"




+ jFileChooser1.getSelectedFile().getName();





} catch (FileNotFoundException ex) {


statusline.setText(“File “+fileselected+” not found!”);


}


} else {


System.out.println(“no file selected”);


}


Note: a JFileChooser called jFileChooser1 has been placed under
“Other Components” in NetBeans

JFileChooser: Save File

jFileChooser1.setCurrentDirectory(new File(".
\
\
imports")); // give starting directory


int returnVal = jFileChooser1.show
Save
Dialog(this); // open the “open” dialog


if (returnVal == JFileChooser.APPROVE_OPTION) { // if file entered or selected



// get selected directory and file name


fileselected = jFileChooser1.getSelectedFile().getParent() + "
\
\
"




+ jFileChooser1.getSelectedFile().getName();






} else {


System.out.println(“no file selected”);


}


Note: a JFileChooser called jFileChooser1 has been placed under
“Other Components” in NetBeans

For further information see:

http://java.sun.com/docs/books/tutorial/uiswing/components/filechooser.html

JFileChooser: Examples

Open:

Save:

JColorUser Example

jColorChooser1 = new
JColorChooser(mycomponent.getForeground());

mycomponent.setForground(jColorChooser1.getColor());

Event Handling


Event handling is essential in the GUI environment, since the user
controls the application by his/her actions. Since an applicationis
typically a GUI interface, we will need to handle events. The following
steps show how to handle events in Java.


Listen for Events.

In order to listen for events, we must add a listener using the format:


mycomponent
.add
xxx
Listener(
eventobject
)

where:


mycomponent

is the component you wish to listen for the event


xxx
is the event type (e.g. Action, Window, etc.)


eventobject
is the listener object that will contain the methods that will
handle the events.


Generation of Events.

An event is generated by an action (such as pressing the return key, a
mouse click, or a keystroke). If the event is being listened to by the
component, Java will instantiate the event class, specific to the type of
event, and send this object to the class indicated to handle the event (in
the example above
classhandler
)


Responding to Events.

For each type of event there is a corresponding method to be called when
the event occurs. This method will have the instructions on how to respond
to the event.

Listener Object Usage

Listener objects may be declared in several
ways, using instances of:


class listening for the event (this)


separate class


named inner class


anonymous inner class

class listening for the event (this)


Pros
-

no separate class required, all class
properties and methods accessible.


Cons
-

not specific to any component, since
many components may add this. Must define
each method in the Listener interface.


Implementation:

import java.awt.event.*;

have class implement
xxx
Listener

mycomponent.add
xxx
Listener(this);

then each of the Listener methods must be provided

class listening for the event (this)

Implementing a Listener interface
-

this
makes MyApplet a xxx Listener type



Applet

xxxListener

(interface)

public class MyApplet


extends Applet

implements xxxListener

{…

[comp.]addxxxListener(this);



all methods in interface


defined.

}

separate class


Pros
-

Abstraction in event handling. Class may extend "adapter"
classes (which do not require definition of all methods).


Cons
-

Not knowing about any of the methods and properties of the
class originating the event


Implementation:

import java.awt.event.*;

mycomponent.add
xxx
Listener(new
MyEventClass
([
params
]));

have the
MyEventClass


import java.awt.event.*;

have class implement
xxx
Listener

then define each of the Listener methods

or

have class extend xxxAdapter override the Listener methods required


named inner class


Pros
-

may be reused and access to the properties and the methods
of the outer class.


Cons
-

Not knowing about any of the methods and properties of the
class originating the event


Implementation:

import java.awt.event.*;

mycomponent.add
xxx
Listener(new
MyEventClass
([
params
]));

have the
MyEventClass

placed inside the outer class (before the closing
brace (}) of the outer class)

import java.awt.event.*;

have class implement
xxx
Listener

then define each of the Listener methods

or

have class extend xxxAdapter

override the Listener methods required



named inner class

Using named inner classes (NIC) and Adapter classes
-

this utilizes the Adapter class
(which defines all methods as empty {}) of the Listener Interface . Since a class may only
extend one class, MyApplet cannot extend Applet
and
the Adapter Class

Applet

xxxListener

(interface)

public class MyApplet


extends Applet

implements xxxListener

{…

[comp.]addxxxListener(NI
C);




public class NIC extends


xxxAdapter


{


override listener


event handlers


}

}


xxxAdapter

anonymous inner class


Pros
-

responds directly to the component
listening. Code is next to the component
responding to the event


Cons
-

redundant code possible


Implementation:

import java.awt.event.*;

mycomponent.add
xxx
Listener(new
xxx
Listener()


{


place Listener methods here


});


anonymous inner class

Anonymous Inner Classes
-

this uses unnamed inner classes that can
be attached to the component. Each inner class will be given the
name of the outerclass with $x (where x is 1, 2 , 3, etc, representing
a unique name for the anonymous inner class)

Applet

public class MyApplet


extends Applet

{





[comp.]addxxxListener(new
xxxListener()


{override listener


event handlers


});




}


Using Netbeans


Creating a new GUI application


NetBeans Windows


Java GUI interface


Palette Widgets


Event Handling

Critiquing my project


Let’s review my solution to the project and
see how I did!

Project Critique

Usability Measures

30%

Gestalt: Proximity
-

Objects placed close to each other perceived as a
group.[1]

5%

Affordance
-
Does form invite function (e.g. Does a button look like a
button (to be pushed)?)

5%

Visibility
-
A control such as a button on a product should appear to be
obvious about how it is used.[2] (e.g. A button may look like a button, but
may not be obvious what happens when the button is pushed.)

5%

Feedback
-

A response to an action indicating that the action has been
taken/is taking place.

15%

Cognitive Interrupt

10%

Time taken from primary task. [3]

10%

Learnability

10%

Ease/time to learn how to use the interface.

10%

Project Critique

Ease of use

13%

Ease/difficulty to use system after learning

13%

Efficiency

12%

Amount of time to perform a particular task.

12%

User Satisfaction

25%

Likeability
-

How well do the users enjoy using the system?

13%

Beneficial
-

How well does the system satisfy their needs?

12%

Critiquing your projects


Let form into groups of two, not with
someone you are friendly with.


Show each other’s project and critique
progress so far.


Be critical but friendly, please.

Review


Using NetBeans with Java Swing


Critiquing the project