Intro to Spatial Interfaces - Applied HCI

titteringcluckΛογισμικό & κατασκευή λογ/κού

10 Νοε 2012 (πριν από 4 χρόνια και 1 μήνα)

170 εμφανίσεις

Applied HCI

Week Five

Intro to Spatial Interfaces



Pass out attendance roll

Questions regarding Project 2

Lecture on Implementing a Spatial

Critique and Lab time.

Implementing a Spatial Interface

Overview of Classes

Detailed discussion of classes




Spatial GUI tips

HCI theory

Fitt’s Law

Sample Spatial UML



Space Canvas

a JFrame
responsible for
layout of major

a JPanel class
responsible for
creating and
object in the
spatial canvas

Drawing Object:
a Java Class
responsible for
drawing the
object, etc.

Three separate classes:

Creating a drawing object (Ball)

In NetBeans, create a new java class (e.g. Ball).

For the Ball we will have three properties: x and y will represent the
location; and diameter with represent the diameter of the ball. You
may set the diameter to a constant (e.g. 50 pixels)

Create the getters and setters for these properties. This is easily done
in NetBeans by right clicking in the editor box and selecting
“Refactor”, then selecting “Encapsulate Fields”. In these methods it
may be appropriate to set the objects x and y values to be sure the
item is centered on the mouse click’s x and y values. For example:

public void setX(int x) {

// offset to center ball on mouseclick

this.x = x

diameter / 2;


Create a constructor to at least set the x and y values.

Create a public void paint(Graphics g) method that will draw the Ball.
For example:

public void paint(Graphics g){

g.drawOval(x, y, diameter, diameter);


Creating a drawing object (Ball)

Depending on your needs you may wish to create the following

A method for repositioning the object. This method simply sets
the x and y values. For example:

public void moveIt(int x, int y){




A method to determine if the user clicked inside the object. For

public boolean contains(int mousex, int mousey) {

return mousex >= x && mousex <= x + diameter

&& mousey >= y && mousey <= y+ diameter;


Creating your Space

Create a new “canvas” class, which extends JPanel.

In the new canvas class provide a reference back to the
main JFrame class. This will be used to call the
JFrame’s repaint() method.

In NetBeans, in the Projects window, right click on the
new canvas class, select “tools”, then “add to palette”,
finally select “Beans”. This should cause the canvas that
you created to become a bean in the palette when in
design view.

Congratulations, you just created your first widget!!!

Once you add a class to the palette, you may modify it
just as you would any other class, there is no need to
remove and add it to the palette when you modify it.


To be sure everything is relative to
your canvas make sure mouse events are placed in the
canvas, NOT in the JFrame.

Using images

The following sample code demonstrates how to
place/add an image in your draw method.

BufferedImage img = null;

try {

img = File(“

g.drawImage(img, x, y, 100, 150, null);

} catch (IOException e) {

System.out.println("file not found");


Image I/O has built
in support for GIF, PNG, JPEG, BMP, and WBMP. Image
I/O is also extensible so that developers or administrators can "plug
support for additional formats. For example, plug
ins for TIFF and JPEG
2000 are separately available.

Drawing on the canvas


You have two choices here:

(easiest) Create a public void paint (Graphics g)
method which will call the Ball objects paint (not
repaint) method and call the parent JFrame’s repaint()
method, which automatically calls all of the members
repaint methods

Create a public void draw(Graphics g) method and call
the parent JFrame’s repaint() method, which must be
overridden to call the draw method for its members.

Please Note! Failure to do this will result in residual
objects in your canvas pane.

Sample paint Method

public void paint(Graphics g) {

/* This code makes sure that the panel is painted with the

* background color properly. Not sure why, but the

* documentation says so :<(



// if there is a ball draw it!

if (myball != null) {

myball.paint(g); // please note not a call to repaint()



Creating your Spatial Application

Create your own extension of the JFrame class.
This class will be the holder of everything.

Layout your components as you have done in
earlier projects. Treat the Spatial/Canvas widget
as any other component.

If you did not create a paint method in your
canvas widget you must override the paint
method and make a call to canvas draw method

Spatial GUI tips

For an involved spatial interface which may include
several objects and connections:

Optionally create an interface for each broad

objects : this consists of any objects you wish to
include in the space

connectors : lines used to connect two objects

Create an abstract class: to implement the
above interface; or if no interface is created to
declare and define as many of the methods as
possible and declare the rest abstract.

Multiple Drawing Objects


Object interface


A java interface is a pseudo class consisting of abstract

Abstract methods are methods that are declared but
have no body ex:

public boolean contains(int x, int y);

Note the lack of braces in the method, instead there is a
semicolon (;). Also note the lack of the word abstract in
declaring the method. By definition, all methods in an interface
are considered abstract.

Any subclass of the interface must define the procedures
for each of the methods declared in the interface. If a
class does not define all of the methods in the interface
the class must be declared abstract.

Object interface

Create a list of all of the actions that a drawable
object should have:



Object abstract class

In this abstract class which will implement the
aforementioned interface, try to define as many
of the methods declared in the interface as
possible. In addition, declare any common
properties in this class. For example the x and y
coordinate properties can be declared and the
getters can be defined. The setter may not be
able to be defined as that may differ from object
to object.

This abstract class is important for holding all of
the polymorphic objects in the space.

Define Specialized Drawable

For each specific type of drawable object,
create a new Java class that will extend
the abstract class described previously.

These classes must at least define all of
the abstract methods declared in the
interface and not defined in the abstract


Connectors are simply lines that connect
two drawable objects to depict a
relationship between those drawable

Connectors should be implemented using
the same techniques as a drawable object.

create an interface

create an abstract class

create the various connectors

HCI Theory

Fitt’s Law

Fitt’s Law



Time to complete the action


distance to travel


size of targets

Simply put, the time to move from one target to
another is directly proportional to the distance
one must travel and inversely proportional to
the size of the target you wish to reach.

Implication of Fitt’s Law

In spatial contexts, the user will want to
move objects around and perhaps connect
objects together. Make sure the target is of
sufficient size to ensure hitting it.

When connecting two components,
provide targets for the source and
destination that are not distracting but are
large enough to hit.

GUI Implications of Fitt’s Law

It may or may not be desirable to see the
targets in the final result. If it is not
desirable to see the targets, then you must
provide a mechanism to show and hide
them as necessary.

Target Showing/hiding

Review of Spatial Interfaces

Review of Classes

Review Spatial GUI tips

Review of HCI theory

Fitt’s Law

Applied HCI

Week Five

Intro to Spatial Interfaces