Basic Graphical User Interface GUI Components - PowerPoint PPT Presentation

1 / 61
About This Presentation
Title:

Basic Graphical User Interface GUI Components

Description:

A GUI component is a visual object with which the user interacts via the mouse or the keyboard ... A text field is a component that displays a line of text (or ... – PowerPoint PPT presentation

Number of Views:399
Avg rating:3.0/5.0
Slides: 62
Provided by: radidon
Category:

less

Transcript and Presenter's Notes

Title: Basic Graphical User Interface GUI Components


1
Basic Graphical User Interface (GUI) Components
2
Summary
  • Java GUI Components
  • Class Component
  • Button
  • Check Box
  • Check Box Group (Radio Button)
  • Choice
  • List
  • Label
  • Text Components
  • Layout Managers

3
Graphical User Interface (GUI)
  • A GUI is made up of components
  • A GUI component is a visual object with which the
    user interacts via the mouse or the keyboard
  • Each component has attributes such as
  • location
  • size
  • shape
  • colour, etc.
  • Example of GUI components
  • Buttons
  • Text Fields
  • Windows
  • Labels etc.
  • Components are defined in a class library
    contained in the package java.awt

4
GUI Example
5
GUI Development
  • To be able to create a Java GUI, you will need to
    understand
  • components
  • containers
  • events
  • listeners
  • layout managers
  • In this lecture we will cover components,
    containers and layout managers. There will be a
    separate lecture to cover events and listeners if
    time permits.

6
Java AWT GUI Components
7
Containers
  • A GUI component is a distinct element of a GUI,
    such as a button, text field, etc.
  • A container is a GUI component that can contain
    other components.
  • Class Component is a subclass of the class
    Container.

8
GUI Containers Examples
  • A frame is a container component used for
    stand-alone GUI-based applications
  • A panel is a container that cannot be displayed
    on its own e.g. it must be added to another
    container
  • A panel helps organize the components in a GUI
  • Applets, windows, etc.

9
Class Component (1)
  • All AWT GUI components (apart from Menu) are
    children (derived from) of the AWT Component
    Class
  • Therefore all the buttons, lists, check boxes,
    choices, etc. inherit class Component methods and
    constants

10
Class Component (2)
  • Color, Point, and Dimension are AWT classes.
  • Class Dimension encapsulates width and height.

11
Component Methods (1)
  • Background color
  • public Color getBackground() - returns the
    background colour of the component
  • public void setBackground(Color c) - sets the
    component background colour to the colour
    specified in c
  • Foreground color
  • public Color getForeground() - returns the
    colour of the component
  • public void setForeground(Color c) - sets the
    component colour to the colour specified in c

12
Component Methods (2)
  • Location
  • public Point getLocation() - returns an object
    of type Point which specifies the component
    location
  • public void setLocation(Point p) - sets the
    location of the component to Point p coordinates
  • public void setLocation(int x, int y) - sets the
    location of the component to coordinates (x, y)
  • Size
  • public Dimension getSize() - returns an object
    of type Dimension specifying the width and the
    height of the component in pixels
  • public void setSize(Dimension d) - sets the size
    of the component to the specified Dimension d
  • public void setSize(int height,int width)- sets
    the size of the component to the specified height
    and width

13
Component Methods (3)
  • Visible and Showing
  • public boolean isVisible()- returns true if the
    component is visible and false otherwise
  • public void setVisible(boolean visible) makes
    the component visible if the specified value is
    true and invisible if the specified value is
    false
  • Font
  • public Font getFont() returns the font used for
    the component
  • public void setFont(Font f) sets the text font
    to f
  • Graphics
  • public Graphics getGraphics() returns the
    graphics context

14
Creating GUIs (1)
  • To create a program with a GUI
  • define and set up the components
  • create listener objects
  • set up the relationships between the listeners
    and the components which generate events of
    interest
  • define what happens in response to each event
  • The init method of an applet can be used to set
    up the GUI and add each component to the applet
    container

15
An Example Using GUI
  • Design an applet using GUI components for user
    interface. Add two buttons to the applet with
    and - button labels and write the code to
    handle the push button event. When the user
    presses a button a message should appear on the
    status line You pressed followed by the button
    label ( or -).

16
GUI Design - on Paper
17
GUI Design - on Paper (2)
18
Coding Creating the Buttons
  • Our example GUI needs to display two push buttons
    on the applet
  • A button is a component that allows the user to
    initiate an action with the press of the mouse
    button
  • defined by the Button class in the awt library
  • generates an action event when pressed we will
    discuss events in more detail in the event
    lecture (two weeks time)
  • First we declare the button component object
  • Button buttonName
  • Then we allocate memory to it and initialise it
    using the Button class constructor to create a
    new button (but not to display it!)
  • buttonName new Button ( String buttonLabel)

19
Coding - Displaying the GUIs on the Screen
  • import java.applet.Applet
  • import java.awt.
  • public class TwoButtons extends Applet
  • Button addButton, subButton
  • public void init()
  • addButton new Button ( "" )
  • add( addButton )
  • subButton new Button ( "-" )
  • add( subButton )

20
Button
  • A button is a component that allows the user to
    initiate an action when pressing the mouse button
  • defined by the Button class
  • generates an action event
  • Button constructors
  • public Button ( ) - creates a button with no
    label
  • public Button ( String label) creates a button
    with the specified label
  • Button b1 new Button(Push me!)
  • Button b2 new Button()

21
Check Box
  • A check box allows the user to select it or
    unselect it by clicking on it thus specifying
    oneor more choices
  • You can select more than one check box
  • defined by the Checkbox class
  • generates item events
  • Check box constructors methods
  • public Checkbox()- creates a check box with no
    label
  • public Checkbox(String label)- creates a check
    box with the specified label
  • public boolean getState() returns the state of
    the check box

22
Check Box Example
23
Check Box Example Code
  • import java.awt.
  • import java.applet.
  • public class CheckboxApplet extends Applet
  • public void init()
  • setLayout(new GridLayout(5, 1))
  • add(new Checkbox("first", true))
  • add(new Checkbox("second"))
  • add(new Checkbox("third"))
  • add(new Checkbox("fourth"))
  • add(new Checkbox("fifth"))

24
Check Box Group (Radio Buttons)
  • A check box group is a group of check boxes
    (circles, not squares) that allows the user to
    select only one check box at a time by clicking
    on it
  • defined by the CheckboxGroup class
  • generates item events
  • Check box group constructors
  • public CheckboxGroup()- creates a check box group
  • Individual check boxes in the check box group are
    created using Checkbox constructor with an extra
    parameter the check box group it belongs to
  • public Checkbox(String label, CheckboxGroup g,
    boolean state)- creates a check box with the
    specified label within the CheckboxGroup g and
    sets the specified state (true on, false
    off)

25
Check Box Group (Radio Buttons) Example
26
Check Box Group (Radio Buttons) Example Code
  • import java.awt.
  • import java.applet.
  • public class RadioButtonApplet extends Applet
  • private CheckboxGroup c
  • public void init()
  • c new CheckboxGroup( )
  • setLayout(new GridLayout(5, 1))
  • add(new Checkbox("first", c, true))
  • add(new Checkbox("second", c, false))
  • add(new Checkbox("third", c, false))
  • add(new Checkbox("fourth", c, false))
  • add(new Checkbox("fifth", c, false))

27
Choice
  • A choice is a component that allows the user to
    initiate an action with the press of the mouse
    button
  • defined by the Choice class
  • generates item events
  • Choice Constructors Methods
  • public Choice() - creates a new choice menu. The
    menu initially has no items in it. By default,
    the first item added to the choice menu becomes
    the selected item, until a different selection is
    made by the user by calling one of the select
    methods.
  • public void add(String item) - adds an item to
    this Choice menu.

28
Choice Example
29
Choice Example Code
  • import java.awt.
  • import java.applet.
  • public class ChoiceApplet extends Applet
  • public void init()
  • Choice chooseColour new Choice()
  • chooseColour.add("White")
  • chooseColour.add("Green")
  • chooseColour.add("Red")
  • add(chooseColour)

30
List
  • A list is a component that allows the user to
    select either one item or multiple items. from a
    scrolling list of text items.
  • defined by the List class
  • generates action events and item events

31
List Constructors
  • public List() - creates a new scrolling list.
  • public List (int rows)- creates a new scrolling
    list initialized with the specified (in rows)
    number of visible lines.
  • public List(int rows, boolean multipleMode) -
    creates a new scrolling list initialized to
    display the specified number of rows and the user
    can make a multiple choice from the list.

32
List Methods
  • public void add(String item) - adds the specified
    item to the end of scrolling list. 
  • public void add(String item, int index) - adds
    the specified item to the scrolling list at the
    position indicated by the index.

33
List Example
34
List Example Code
  • import java.awt.
  • import java.applet.
  • public class ListApplet extends Applet
  • public void init()
  • List shapeList new List(3, false)
  • shapeList.add("Line")
  • shapeList.add("Oval")
  • shapeList.add("Rectangle")
  • add(shapeList)

35
Label
  • A label is a component that displays a line of
    text
  • defined by the Label class
  • no events associated with it

36
Label Constructors Constants
  • Label Constructors
  • public Label() - constructs an empty label
  • public Label(String text) - constructs a new
    label with the specified text, left justified
  • public Label(String text, int alignment) -
    constructs a new label that displays the
    specified text with the specified alignment
  • Label alignment constants
  • static int CENTER - indicates that the label
    should be centered
  • static int LEFT - indicates that the label should
    be left justified
  • static int RIGHT - indicates that the label
    should be right justified

37
Label Example
38
Label Example Code
  • import java.awt.
  • import java.applet.
  • public class LabelApplet extends Applet
  • public void init()
  • setLayout( new GridLayout( 3, 1 ) )
  • add( new Label( "A label is non-editable!",
    Label.CENTER ) )
  • add( new Label( "This is a default label" )
    )
  • add( new Label( "This label is right
    justified", Label.RIGHT ) )

39
Text Components
  • A text field is a component that displays a line
    of text (or an image, or both)
  • defined by the TextField class
  • generates key events and/or action events
  • A text area is a component that displays multiple
    lines of text
  • defined by the TextArea class
  • generates mouse events and/or key events

40
TextField Constructors
  • public TextField() - constructs a new text field
  • public TextField(int columns) - constructs a new
    empty text field with the specified number of
    columns
  • public TextField(String text) - constructs a new
    text field initialized with the specified text
  • public TextField(String text, int columns) -
    constructs a new text field initialized with the
    specified text to be displayed, and as wide as
    the specified number of columns

41
TextField Example
42
TextField Example Code
  • import java.awt.
  • import java.applet.
  • public class TextFieldApplet extends Applet
  • private TextField txtField1, txtField2,
    txtField3
  • public void init()
  • // a blank text field
  • txtField1 new TextField()
  • add( txtField1 )
  • // Hello displayed in the text field
  • txtField2 new TextField("Hello!")
  • add( txtField2 )
  • // Hello, Friends! Displayed in a text field
    of 20 columns
  • txtField3 new TextField("Hello, Friends!",
    20)

43
TextArea Constructors
  • public TextArea() - constructs a new text area
    with the empty string as text
  • public TextArea(int rows, int columns)
    -constructs a new text area with the specified
    number of rows and columns and the empty string
    as text
  • public TextArea(String text) - constructs a new
    text area with the specified text
  • public TextArea(String text, int rows,
    int columns) - constructs a new text area with
    the specified text, and with the specified number
    of rows and columns

44
Nested Containers
  • The GUI components are grouped into containers
    (e.g. windows, panels, etc.)
  • Containers can be nested within each other
  • Each container can have its own layout manager
  • The appearance of a GUI is determined by
  • the way the separate components are grouped
    together in each container and the way the
    containers are nested
  • the layout manager of each container
  • the properties of individual components (e.g.
    size, placement, appearance, etc.)

45
Nested Containers Example
46
More About GUIs
  • Apart from the components covered Java also
    supports menus and submenus, frames and dialogs
  • A frame is a a window with a title and a border
  • A dialog is a top-level window with a title and a
    border that is typically used to take some input
    from the user. The default layout for a dialog is
    Border layout.
  • We will cover these components in more details in
    the Swing lecture

47
Layout Managers
  • A LayoutManager is an object responsible for
    arranging and determining the exact position and
    size of every GUI component in a container
  • We will be using the following layout managers

48
Layout Managers
  • Every container has a default layout manager, but
    we can explicitly set the layout manager as well
  • Each layout manager has its own rules on how the
    components will be arranged
  • Some layout managers pay attention to a
    component's preferred size or alignment, while
    others do not
  • A layout manager adjusts the layout as components
    are added and as containers are resized

49
Changing Layout Managers
  • We can use the setLayout method of a container to
    change its layout manager
  • To change the default layout manager (FlowLayout)
    we type in
  • setLayout (new BorderLayout())

50
Flow Layout
  • Flow layout puts as many components as possible
    on a row, then moves to the next row
  • Rows are created as needed to accommodate all of
    the components and the components are displayed
    in the order they are added to the container
  • Each row of components is centered horizontally
    in the window by default, but could also be
    aligned left or right
  • The horizontal and vertical gaps between the
    components can be explicitly set also

51
Flow Layout Constructors
  • public FlowLayout( )
  • constructs a FlowLayout in which components are
    center aligned by default
  • public FlowLayout( int alignment )
  • alignment FlowLayout.RIGHT, FlowLayout.LEFT or
    FlowLayout.CENTER
  • public FlowLayout( int alignment,
  • int horizontal, int vertical
    )
  • horizontal and vertical specify the distance in
    pixels between components

52
Flow Layout Example
  • public class FlowLayoutDemo extends Applet
  • private Button left, center, right
  • public void init( )
  • left new Button ( "left" )
  • add( left )
  • center new Button ( "center" )
  • add( center )
  • right new Button ( "right" )
  • add( right )

53
Border Layout Constructors
  • Arranges components into 5 regions - up to 5
    components can be used - one for each position
  • public BorderLayout( )
  • constructs a BorderLayout with no pixel gaps
    between the components
  • public BoderLayout ( int horizontal,
  • int vertical )
  • horizontal and vertical specify the distance in
    pixels between components

54
Border Layout
  • Each area displays one component (which could be
    another container such as a Panel)
  • Each of the four areas enlarges as much as needed
    to accommodate the component added to it
  • If nothing is added to a particular area, it
    takes up no space and other areas expand to fill
    up the space
  • The center area expands to fill space as needed

55
Border Layout Example (1)
  • public class BorderLayout extends Applet
  • private Button b0,b1,b2,b3,b4
  • public void init( )
  • // set layout to border layout
  • setLayout( new BorderLayout( 5, 5 ) )
  • // instantiate button objects
  • b0 new Button( "Hide North" )
  • b1 new Button( "Hide South" )
  • b2 new Button( "Hide East" )
  • b3 new Button( "Hide West" )
  • b4 new Button( "Hide Center" )

56
Border Layout Example (2)
  • // order not important
  • add( b0, BorderLayout.NORTH )
  • add( b1, BorderLayout.SOUTH )
  • add( b2, BorderLayout.EAST )
  • add( b3, BorderLayout.WEST )
  • add( b4, BorderLayout.CENTER )

57
Grid Layout
  • A grid layout arranges the components in a
    rectangular grid of rows and columns
  • One component is placed in each cell of the grid,
    and all cells have the same size
  • As components are added to the container, they
    fill the grid from left-to-right and
    top-to-bottom (by default)
  • The size of each cell is determined by the
    overall size of the container

58
Grid Layout Constructors
  • public class GridLayout1 extends Applet
  • private Button b0,b1,b2,b3,b4,b5
  • public void init( )
  • // set layout to grid layout
  • setLayout( new GridLayout( 2,3,5,5 ) )
  • // instantiate buttons
  • b0 new Button("One") add( b0 )
  • b1 new Button("Two") add( b1 )
  • b2 new Button("Three") add( b2 )
  • b3 new Button("Four") add( b3 )
  • b4 new Button("Five") add( b4 )
  • b5 new Button("Six") add( b5 )

59
Panel
  • A panel is used as a place to put a collection of
    other components.
  • Complex GUIs consist of multiple panels with each
    panels components arranged in a specific layout
  • Panels are created with class Panel
  • Each panel can have its own layout - example
  • myPanel.setLayout( new BorderLayout (5, 5 ))

60
Panel Example (1)
  • public class PanelDemo extends Applet
  • private Panel buttonPanel
  • private Button b0, b1, b2, b3, b4
  • public void init( )
  • buttonPanel new Panel( )
  • // instantiate button objects
  • b0 new Button( "One" )
  • b1 new Button( "Two" )
  • b2 new Button( "Three" )
  • b3 new Button( "Four" )
  • b4 new Button( "Five" )

61
Panel Example (2)
  • // set the panel layout to grid layout
  • buttonPanel.setLayout( new GridLayout ( 1, 5
    ) )
  • // add the buttons to the panel
  • buttonPanel.add( b0 )
  • buttonPanel.add( b1 )
  • buttonPanel.add( b2 )
  • buttonPanel.add( b3 )
  • buttonPanel.add( b4 )
  • // set the applet layout to border layout
  • setLayout( new BorderLayout( ) )
  • // add the panel to the south of the applet
  • add( buttonPanel, BorderLayout.SOUTH )
Write a Comment
User Comments (0)
About PowerShow.com