csc Basic Graphical User Interface (GUI) Components

csc Summary Java GUI Components Class Component Button Check Box Check Box Group (Radio Button) Choice List Label Text Components Layout Managers

csc 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

csc GUI Examplemenus button label text field

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

csc Java AWT GUI Components

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

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

csc 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

csc Class Component (2) Color, Point, and Dimension are AWT classes. Class Dimension encapsulates width and height. height width Dimesion(width,height) (0, 0) Y axis X axis Point (x, y) y x

csc 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

csc 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

csc 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

csc 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

csc 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 ‘-’).

csc GUI Design - on Paper

csc GUI Design - on Paper (2)

csc 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 b uttonLabel );

csc 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 ); } }

csc 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();

csc 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

csc Check Box Example

csc 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")); }

csc 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”)

csc Check Box Group (Radio Buttons) Example

csc 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)); }

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

csc Choice Example

csc 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); }

csc 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

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

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

csc List Example

csc 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); }

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

csc 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

csc Label Example

csc 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 ) ); }

csc 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

csc 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

csc TextField Example

csc 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); add( txtField3 ); }

csc 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

csc 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.)

csc Nested Containers Example

csc 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

csc 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

csc 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

csc 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());

csc 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

csc 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

csc 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 ); } }

csc 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

csc 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

csc 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" );

csc 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 ); } }

csc 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

csc 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 ); } }

csc Panel A panel is used as a place to put a collection of other components. Complex GUIs consist of multiple panels with each panel’s 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 ));

csc 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" );

csc 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 ); } }