Design of Design of Graphical User Interfaces Graphical User Interfaces

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

3 Νοε 2013 (πριν από 3 χρόνια και 8 μήνες)

115 εμφανίσεις

1
1
2
2
GrfOb:
GrfOb:
javax
javax
.swing
.swing
Fachbereich Informationstechnik
Flandernstraße 101
73732 Esslingen
3
3
Topics
Topics
￿
Design of grafical user interfaces with Java
￿
Java Swing
￿
MVC
￿
Event handling
￿
Usage of Controls
￿
Prototyping
4
4
Literature
Literature
5
5
Terminology
Terminology
￿
Components (Widgets, Controls)
￿
Container
￿
Listener
￿
Java Foundation Classes
￿
AWT (Abstract Window Toolkit)
￿
Swing
￿
Java 2D
￿
Drag and Drop
￿
Accessibility
6
6
Terminology
Terminology
Overview JFC Java Foundation Classes
7
7
AWT (Abstract Window Toolkit)
AWT (Abstract Window Toolkit)
￿
Part of all Java implementations
￿
Adequate for many applications
￿
Uses the controls defined by your OS (whatever it is)
￿
therefore it's “least common denominator”
￿
Difficult to build an attractive GUI
￿
import java.awt.*;
import java.awt.event.*;
8
8
Architecture
Architecture
of AWT
of AWT
￿
Heavyweight Components
AWT
Slow
Access to operating system (OS)
Few components available since the have to fit to all different OS
no enhancements by developer
9
9
Swing
Swing
￿
Present in all modern Java implementations (since 1.2)
￿
More controls, and they are more flexible
￿
Gives a choice of “look and feel” packages
￿
Much easier to build an attractive GUI
￿
import javax.swing.*;
import javax.swing.event.*;
and
import java.awt.*;
import java.awt.event.*;
￿
You may not need all of these packages
10
10
Swing vs. AWT
Swing vs. AWT
￿
Swing is built “on top of” AWT
￿
Swing is bigger and slower
￿
Swing is more flexible and better looking
￿
Swing and AWT are incompatible--you can use either, but you
shouldn’t mix them
￿
Basic controls are practically the same in both
￿
AWT:
Button b = new Button ("OK");
￿
Swing:
JButton b = new JButton("OK");
￿
Swing gives far more options for everything (buttons with pictures
on them, etc.)
11
11
To build a GUI...
To build a GUI...
￿
Define an area to display things (a
Container
)
￿
Usually you would use a
JFrame
or a
JApplet
￿
Create some
Component
s (buttons, text areas, panels, etc.)
￿
It’s usually best to declare Components as instance variables,
and
￿
Define them in your applet’s
init()
method or in some
application method
￿
Choose a
layout manager
￿
Add your Components to your display area
￿
Add your Components to your
JFrame
or
JApplet
￿
Attach
Listeners
to your Components
￿
Interacting with a Component causes an
Event
to occur
￿
A Listener gets a message when an event occurs, and
executes some code to deal with it
12
12
Containers and Components
Containers and Components
￿
A GUI is built by putting
components
into
containers
￿
The job of a
Container
is to hold and display
Component
s
￿
Some frequently used types (subclasses) of
Component
are
JButton
,
JCheckbox
,
JLabel
,
JTextField
, and
JTextArea
￿
A
Container
is also a
Component
￿
This allows Containers to be nested
￿
Important
Container
classes are
JFrame
,
JApplet
, and
JPanel
￿
JFrame
and
JApplet
both contain other containers; use
getContentPane()
to get to the container you want
￿
You typically create and use
JPanel
s directly
13
13
Starting with a Container
Starting with a Container
￿
First, import some packages:
￿
import javax.swing.*;
import javax.swing.event.*;
import java.awt.*;
import java.awt.event.*;
￿
Second, extend a
Container
type:
￿
For an application, extend
JFrame
￿
public class MyClass extends JFrame { ... }
￿
For an applet, extend
JApplet
￿
public class MyApplet extends JApplet { ... }
￿
Neither of these returns a
Container
that you use directly; instead,
￿
Both
JFrame
and
JApplet
have a
getContentPane()
method that
returns a
Container
you can use:
￿
getContentPane( ).
doSomething( )
;
14
14
Container and
Container and
components
components
￿
A frame is a top level window which is a container for
graphical components (canvas, buttons, menus, etc.)
￿
Elements are not positioned on the frame directly
￿
Content Pane contains all interface components
￿
Menu Bar is optional
15
15
A
A
first example
first example
￿
A simple button JButton in a frame JFrame
16
16
Java
Java
code
code
// file: MySwingButtonTest.java
import java.awt.*;
import javax.swing.*;
public class MySwingButtonTest
{
public static void main (String[] args)
{
// create a window frame f
JFrame f = new JFrame ("MyJFrame");
// getContentPane() returns the content pane reference
// setLayout(new FlowLayout()) defines the
// Layout Manager of the ContentPane
f.getContentPane().setLayout (new FlowLayout());
// define JButton
JButton button = new JButton („Push me");
// add button to Jframe
f.getContentPane().add (button);
// set size of JFrame width 250 pixel, height 100 pixel
f.setSize (250,100);
// show JFrame
f.show();
}
}
import java.awt.*; needed for FlowLayout
17
17
Compile
Compile
and
and
run
run
javac -g MySwingButtonTest.java
-> MySwingButtonTest.class
java MySwingButtonTest
->
You can either start the program from the command prompt or (better) use an
IDE
18
18
IDE
IDE
19
19
20
20
21
21
22
22
Enter
Package name
Class name
23
23
Run as Java application
24
24
Lab 1
Lab 1
-
-
Assignment
Assignment
1
1
25
25
Lab 1
Lab 1
-
-
Assignment
Assignment
1
1
￿
1.1
￿
1.2