Intro to Spatial Interfaces - Applied HCI

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

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

170 εμφανίσεις

Applied HCI

Week Five

Intro to Spatial Interfaces

Overview


Announcements


Pass out attendance roll


Questions regarding Project 2


Lecture on Implementing a Spatial
Interface.


Critique and Lab time.


Implementing a Spatial Interface


Overview of Classes


Detailed discussion of classes


Ball


SpaceCanvas


SpatialDemo


Spatial GUI tips


HCI theory
-

Fitt’s Law

Sample Spatial UML

Ball

SpatialDemo

Space Canvas

SpatialDemo:
a JFrame
application
responsible for
layout of major
components.


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

Drawing Object:
a Java Class
responsible for
property
maintenance,
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)
(cont)


Depending on your needs you may wish to create the following
methods:



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

public void moveIt(int x, int y){


setX(x);


setY(y);


}


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

public boolean contains(int mousex, int mousey) {

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


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


}

Creating your Space
(SpaceCanvas)


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.


IMPORTANT NOTE!

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 = ImageIO.read(new File(“
pic1.gif
"));


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
-
in"
support for additional formats. For example, plug
-
ins for TIFF and JPEG
2000 are separately available.

Drawing on the canvas

(SpaceCanvas)

You have two choices here:

1.
(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

2.
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
(SpaceCanvas)


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 :<(


*/


super.paintComponent(g);



// if there is a ball draw it!


if (myball != null) {


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


}


}

Creating your Spatial Application
(SpatialDemo)


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
type:


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

Optional

Object interface

Review:


A java interface is a pseudo class consisting of abstract
methods.


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:

Method

Description

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
objects


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
class.

Connectors


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


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







where:

T


Time to complete the action

D


distance to travel

W


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