Events

1
CSC 335 Object-Oriented Programming and Design
Presentation 10 More Graphical Components Layout
Managers Font Composite Design
Pattern DocumentListener
2
Outline

• JList and DefaultListModel
• JScrollPane
• DocumentListener
• Fonts
• Layout Managers
• BorderLayout
• FlowLayout
• GridLayout
• JPanel
• Sizing issues

3
More GUI Components

• There are many javax.swing graphical components
  that permit different user interactions
• You've seen and used these
• JFrame, JButton, JLabel, JMenuItem, JMenu,
  JTextField
• We will consider two new ones needed in your
  current project
• JList
• JScrollBar

4
JList Objects

• A JList, in the Java GUI sense, represents a view
  of a list
• User can select single or multiple selections
• Can find which list elements are selected
• Has these methods (and more)
• public JList(ListModel dataModel)
•  
• // Returns the index of the selected
  (highlighted)
• // item in the JList or returns -1 if none
  selected.
• public int getSelectedIndex()
•  
• // Set the highlighted index
• public void setSelectedIndex(int index)

5
What can JList hold

• The underlying model can be an array or a Vector
• However, to ensure the view gets updated
  immediately when the model changes, you must send
  a repaint message to the JList
• When a JList contains a DefaultListModel
• any change to the list automatically tells the
  JList to update the view
• The JList is "listening" to the DefaultListModel

6
javax.swing.DefaultListModel

• DefaultListModel
• is like a Vector or ArrayList
• Has these methods (and more)
• // Constructor
• public DefaultListModel()
•  
• // Insert element at the end of this list.
• public void addElement(Object element)
•  
• // Returns the element at index.
• public Object get(int index)
•  
• // Return the number of elements in this list
• public int size()

7
Showing a changing list

• Construct a DefaultListModel object
• Pass it as an argument to the JList constructor
• Put the JList into the GUI

Demo ChangingList,java (one of today's handout)
8
Scrollbars

• If you want scrollbars, you can place a JList
  into a JScrollPane
• JScrollPane scroller new JScrollPane(view)
• cp.add(scroller, BorderLayout.CENTER)
• You can have the scrollbars visible always with
  the scrollbar policy
• scroller.setVerticalScrollBarPolicy(
• JScrollPane.VERTICAL_SCROLLBAR_AL
  WAYS)
• scroller.setHorizontalScrollBarPolicy(
• JScrollPane.HORIZONTAL_SCROLLBAR_
  ALWAYS)

9
JPanel

• The program handout used a JPanel to help arrange
  three components
• A JPanel
• is a container
• can hold any graphical component
• helps organize several components into one
• Example put two buttons into a JPanel and then
  add the JPanel to the cp
• which by the way is a JPanel

10
Deep Inheritance Hierarchy

• There is a hierarchy of containers.
• java.lang.Object
• --java.awt.Component
• --java.awt.Container
• --javax.swing.JComponent
• --javax.swing.JPanel
• JPanel Methods are implemented anywhere from
  class JPanel all the way up to Object

11
Layout Managers

• As GUIS get more complex, so do layouts
• Containers (JFrame, JPanel) have a layout manager
  object to arrange components
• There are many predefined layout managers in the
  java.awt package, here are a few
• FlowLayout default for JPanel
• BorderLayout default for JFrame's content pane
• GridLayout just used and also in your
  projects
• You can create you own layout managers
• You can change layout managers with setLayout

12
Border Layout

• A BorderLayout object deals with five locations
  where components or other containers can be added
• North, South, East, West, and Center
• JButton aButton new JButton("Click Me")
• Container cp aWindow.getContentPane()
• cp.add(aButton, BorderLayout.NORTH)
• The programmer specifies the area in which a
  component should appear

13
Border Layout
North
West
East
Center
South
14
Flow Layout

• Components are placed in a row from left to right
  in the order in which they are added
• A new row is started when no more components can
  fit in the current row
• Components are centered in each row by default
  (but you can set them left or right)
• Programmers can specify size of vertical and
  horizontal gaps between the components
• Flow layout is the default layout for JPanels

15
Example of FlowLayout in a JFrame

• import javax.swing.
• import java.awt.event.
• import java.awt.
• public class FrameWithFlowLayout extends JFrame
• public static void main(String args)
• new FrameWithFlowLayout().show()
• public FrameWithFlowLayout()
• this.setDefaultCloseOperation(EXIT_ON_CLOSE)
• this.setTitle("A Frame with six components")
• this.setSize(300, 200)
• Container cp this.getContentPane()
• cp.setLayout(new FlowLayout())
• cp.add(new JTextArea("11111111111"))
• cp.add(new JButton("2"))

16
Demo previous code

• Should see all six components at top
• Resizing a Component with FlowLayout has the
  following characteristics
• Could see six rows when made skinny
• Could see six columns when made wide
• Component sizes do not change
• May not see any of the graphical components

17
Grid Layout

• Components are placed in a grid with a
  user-specified number of columns and rows
• Each component occupies exactly one grid cell
• Grid cells are filled left to right and top to
  bottom
• All cells in the grid are the same size

18
Sizing is an issue

• Change the layout strategy to
• cp.setLayout(new GridLayout(2, 3))

19
Change Size

• When the frame is resized and the GridLayout is
  being used
• the graphical components
• resize themselves (all get bigger and smaller)
• can look strange
• can disappear
• To set the frame so it can not be resized
• JFrame f new FrameWithGridLayout()
• f.setResizable(false)
• f.show()

20
Can set gaps between components

• // Arguments rows, columns, hgap, vgap
• cp.setLayout(new GridLayout(2, 3, 12, 48))

21
Active Learning

• Describe the following in terms of containers and
  layout

22
Active Learning

• Describe the following in terms of containers and
  layout The Composite Pattern
• A Frame with
• JTextField north
• JPanel added to the center
• has 4 x 4 JButtons in GridLayout
• see next slide
• JPanel to the south in FlowLayout
• has two JButtons
• The Composite Pattern

23
Just witnessed a Design Pattern Composite

• Name Composite
• Problem You want to compose objects into tree
  structures to represent part-whole hierarchies.
  Composite lets clients treat individual objects
  and compositions of individual objects in the
  same way
• Solution Allow any component to contain any
  other component.

24
Pattern Composite

• Consequences
• Primitive objects can be composed into more
  complex objects, which can in turn be composed
  into more complex objects recursively.
• Makes the client simple. Clients treat composite
  structures uniformly
• Makes it easier to add new components

25
Uses

• Known uses
• SmallTalk MVC (the first GUI system) was a
  composite
• And most GUIs that follow such as Java's AWT 1.1
• Java A Container can contain Components and
  other Containers. A JPanel might have several
  components and containers. Another container
  could contain four of these containers.
• Financial domain A portfolio aggregates
  individual assets, where an asset could be a
  portfolio that conforms to the interface of an
  individual asset

26
Composite in Calculator

• The JFrame container contains 3 containers
• A JTextField to north
• An instance of the previous class CalculatorPanel
  as a JPanel that
• contains 16 buttons
• A JPanel to the South that
• contains two JButtons
• but there could have also been four panels
  containing other panels, ...

27
JButtons resized to JFrame Center

• BTW You have to watch size of the JFrame the
  JPanel gets added to
• Previous JFrame was sizes to look nice
• calcFrame.setSize(170, 220)
• Try the following code and see what you get
• CalculatorApplication calcFrame new
  CalculatorApplication()
• calcFrame.setSize(200, 100)

28
Design Patterns in General

• Pattern A proven design solution that can be
  used in different applications
• Like data structures and GUI components, they
  dissuade reinventing the wheel
• Useful for communicating ideas at a high level of
  abstraction just use the name like Go to
  college
• Started when OO Software developers read
  Christopher Alexander's work
• The book that kicked it off is by four authors
  Gamma, Helm, Johnson, Vlissides (The Gang of
  Four). Referred to as the GoF book Design
  Patterns Elements of Reusable Object-Oriented
  Software (has 23 patterns)

29
Fonts

• A Font object is constructed with 3 arguments to
  indicate the
• font types "Monospaced" "SansSerif" "Serif"
• dont use "Symbol" in JList (won't works as tabs
  don't)
• style such as Font.PLAIN and Font.BOLD
• font size (10 is small, 30 is big)
• Examples
• Font aFont new Font("Monospaced", Font.BOLD,
  24)
• view.setFont(aFont)

30
Events

• Java can handle many types of events
• You have only experienced ActionEvent
• For each event, there is a listener interface
• Java's event model
• Have a class implement the correct interface
• Register an instance of that class to "listen"
  for the correct event
• You need DocumentEvent right away

31
DocumentEvent

• You can addDocumentListener to a JTextField
• Check the API
• Demonstrate that a new character was entered and
  an existing character was deleted start with
  this
• import javax.swing.
• import java.awt.
• public class MyFrame extends JFrame
• public static void main(String args)
• new MyFrame().show()
• private JTextField editor
• public MyFrame( )
• this.setDefaultCloseOperation(JFrame.EXIT_ON_C
  LOSE)
• this.setSize(200, 60)
• editor new JTextField()
• getContentPane().add(editor,
  BorderLayout.NORTH)

32
Answer

• editor.getDocument().addDocumentListener(new
  EditorListener())
• private class EditorListener implements
  DocumentListener
• // Gives notification that an attribute or
  set of attributes changed.
• public void changedUpdate(DocumentEvent e)
• // do nothing in this example
• // Gives notification that there was an insert
  into the document.
• public void insertUpdate(DocumentEvent e)
• System.out.println("inserted")
• // Gives notification that a portion of the
  document has been removed.
• public void removeUpdate(DocumentEvent e)