Java GUI Design Concepts

1
Java GUI Design Concepts

• MINS 116
• Spring 2000
• Interface Implementation

2
Topics

• Logical system architecture
• Java GUI elements ( Swing Set )
• Layout Managers
• Events

3
From Salvo to Implementation

• SALVO gives us a method to use for specification
  of GUI look and feel.
• The next step is to use Java it implement this
  front end.

4
Remember the architectural layers...

• Architectural models
• 2-Tier -

Business logic must be embedded in the UI.
Changes to the UI effect the business logic and
vice-versa.
5
Remember the architectural layers...

• Architectural models
• 3-Tier -

Business logic is contained in a layer of
code logically detached from the underlying
business information. The two can evolve
independently.
6
Remember the architectural layers...

• Architectural models
• N-Tier -

Introduction of networks and information
distribution introduces more layers of
abstraction to effectively manage changes to the
distributed nature of the business processes.
7
Our current target -

• Our current target in dealing with is the UI
  portion of the Tiered Architecture.
• In this class, we will only create programs for a
  3-Tiered architectural model.

8
Java GUI Components

• JLabel - An area where uneditable text or icons
  can be displayed.
• JTextField - A area in which the user inputs data
  from the keyboard. The area can also display
  information.
• JButton - An area triggering an event when
  clicked.
• JCheckBox - A box either selected or not.
• JComboBox - A drop-down list of items from which
  the user can make a selection.
• JList - An area where a list of items is
  displayed from which the user can make a
  selection.
• JPanel - A GUI container in which GUI components
  can be placed.

9
Java GUI Components

• A quick example

10
Java GUI Components

• Components are placed in a frame.
• The frame makes up the container for the
  components and defines the boundaries of the
  components which make up the GUI.
• A Frame can also contain Panels which logically
  group components.
• Frames/Panels work in concert with a Layout
  Manager to control how GUI components are
  arranged on the GUI screen.

11
Layout Managers

• WSISYG GUI builders usually rely on layout
  managers that are proprietary to the IDE you are
  using.
• What do you think happens when you deploy a Java
  applet in an environment which does not support
  the layout manager you designed your applet in?

12
Layout Managers

• The three layout managers we will consider are
• Flow Layout
• Border Layout
• Grid Layout

13
Flow Layout

• In the Flow Layout manager, GUI components are
  placed on a container (e.g. a JFrame) from left
  to right in the order in which they are added to
  the container.

See FlowLayout in the Java documentation.
14
Border Layout

• In the Border Layout manager, GUI components are
  arranged in five regions
• North
• South
• East
• West
• Center

15
Border Layout
See BorderLayout in the Java documentation.
16
Grid Layout

• The Grid Layout divides the Java container into a
  defined grid.

See GridLayout in the Java documentation.
17
A Java Example

• public class FrameDemo extends JFrame // Demo
  extending JFrame
• private FlowLayout layout // Layout Manager
• private Container c // Layout
  Container
• private JButton left // A
  button to add to the container
• public FrameDemo( ) // Constructor
• layout new FlowLayout( ) // Create a
  layout manager
• c getContentPane( ) // Get the container
  getContentPane is a method of JFrame
• c.setLayout( layout ) // Assign the
  layout manager to the container for this JFrame
• left new JButton( Left) // Create the
  new button
• c.add( left ) // Add the button to the
  container - layout will control how this button
  is
• // placed on the screen.

18
From GUI components to events

• Up to this point, we have seen how to create a
  layout manager, assign it to a GUI frame, then
  create and add GUI components to the frame. The
  physical location of these components is then
  controlled by the layout manager we have created.
• Referring back to our 3-tier model, we need a way
  to get user desires into the underlying logic
  which will perform actions on the users behalf.
  This logic resides in the Business Layer.

19
Events

• Events will provide our programs with
• A nice mechanism to keep our business logic
  de-coupled from our GUI.
• The ability to receive commands from the GUI we
  have built.
• A structured framework in which to handle GUI
  behavior.

20
Event Creation and Assignment

• Event handlers are assigned to components.

21
Events.

• Standard events are set up to handle
• Key Stroke Events - Happens when the user types
  on the keyboard.
• Mouse Events - Happens associated with different
  uses of the mouse.
• Window Events - Window opening, closing, hide,
  etc.
• Paint Events - Screen refresh, etc.
• Focus Events - Action focus set to a component.

22
Summary

• SALVO helps with GUI design, Java has several
  components to help realize that design.
• The use of a 3-Tier architecture will be employed
  in our projects.
• The Java event model helps enforce the
  de-coupling of the GUIs we are building from the
  underlying business logic.