CBOP3203
Graphical User Interface (GUI) components in Java Applets. With Abstract Window Toolkit (AWT) we can build an applet that has the basic GUI components like button, text input, scroll bar and others. Swing class library have many advantages and choices in terms of different types of GUI components, characteristic and running in different computer environment.
Provides graphical user interface (GUI) components that are used in all Java applets and applications Contains classes that can be extended and their properties inherited; classes can also be abstract Ensures that every GUI component that is displayed on the screen is a subclass of the abstract class Component or MenuComponent Has Container, which is an abstract subclass of Component and includes two subclasses: Panel Window
Part of the AWT Class Hierarchy Object Component Button Checkbox TextComponent Choice List Container Label Canvas ScrollBar TextArea TextField Panel Window ScrollPane Applet Dialog Frame
Add components with the add() method. The two main types of containers are Window and Panel. A Window is a free floating window on the display. A Panel is a container of GUI components that must exist in the context of some other container, such as window or applet.
The position and size of a component in a container is determined by a layout manager. You can control the size or position of components by disabling the layout manager. You must then use setlocation(), setsize(), or setbounds() on components to locate them in the container.
import javax.swing.*; import java.awt.*; public class AppletSwing extends JApplet { public void init() { Container conpane=getcontentpane(); conpane.setbackground(color.blue); conpane.setlayout(new FlowLayout()); Components are placed in a container Provides work space for JApplet
Control components are very important for the communication between the user and the machine. There are many control components in Java that offer different types of services.
JButton JCheckBox JComboBox JList JMenu JRadioButton
JSlider JSpinner JTextField JPasswordField
JColorChooser JEditorPane and JTextPane
JFileChooser JTree
JTable JTextArea
JProgressBar JSeparator JLabel JToolTip
A button in Swing library is known as JButton as in javax.swing.jbutton Normally a button is used as a control component to: Start an action. Change a form or character. Display a menu. Display another window.
import javax.swing.*; import java.awt.*; public class TestButton extends JApplet { private JButton btnyes, btnno; public void init(){ Container conpane=getcontentpane(); conpane.setlayout(new FlowLayout()); btnyes=new JButton("Yes"); conpane.add(btnyes); btnno=new JButton("No"); conpane.add(btnno); Adding button to the container Declare the button Using FlowLayout Creating and Labeling
If we want the program to receive input from the user, we need to use the text field component. In Swing, the component used to receive the input from the user is called JTextField.
import javax.swing.*; import java.awt.*; public class TestTextField extends JApplet { public void init(){ Container conpane=getcontentpane(); conpane.setlayout(new FlowLayout()); JTextField txtname=new JTextField(20); conpane.add(txtname);
Like JTextField, JPasswordField are single-line areas in which text entered by the user from keyboard will be displayed. A JPasswordField will hide the data that is been entered assuming the data entered is secret is only known to the user.
import javax.swing.*; import java.awt.*; public class TestPasswordField extends JApplet { public void init(){ Container conpane=getcontentpane(); conpane.setlayout(new FlowLayout()); JPasswordField pwd =new JPasswordField(); pwd.setechochar('*'); conpane.add(pwd);
If we want to label the container, we must build an object JLabel. Generally the object JTextField and JLabel are created together. The following lines will add a label to the container conpane. JLabel lblname=new JLabel( Name: ); conpane.add(lblname);
import javax.swing.*; import java.awt.*; public class TestTextLabel extends JApplet { private JLabel lblname; private JTextField txtname; public void init(){ Container conpane=getcontentpane(); conpane.setlayout(new FlowLayout()); txtname=new JTextField(20); conpane.add(lblname); lblname=new JLabel("Name:"); conpane.add(txtname);
We have discussed earlier the use of text field to input data but this is not suitable if we want the user to choose from a list of choices. Swing has a component that is more suitable for this type of job that is the JRadioButton. If the user wants to choose only one from a list of choices, JRadioButton component can be used.
import javax.swing.*; import java.awt.*; public class ChooseTVChannels extends JApplet { private JCheckBox tv1,tv2,tv3, ntv7; public void init(){ Container conpane = getcontentpane(); conpane.setlayout(new FlowLayout()); tv1 = new JCheckBox("TV1", false); conpane.add(tv1); tv2 = new JCheckBox("TV2", true); conpane.add(tv2); tv3 = new JCheckBox("TV3", false); conpane.add(tv3); ntv7 = new JCheckBox("NTV7", true); conpane.add(ntv7); User can chose more than one favorite channels
import javax.swing.*; import java.awt.*; public class RadioButtonExample extends JApplet { private JRadioButton tv1,tv2,tv3,ntv7; private ButtonGroup tv; public void init( ){ Container conpane = getcontentpane( ); conpane.setlayout(new FlowLayout()); tv = new ButtonGroup( ); tv1 = new JRadioButton("TV1",false); tv.add(tv1); conpane.add(tv1); tv2 = new JRadioButton ("TV2",false); tv.add(tv2); conpane.add(tv2); tv3 = new JRadioButton ("TV3",false); tv.add(tv3); conpane.add(tv3); ntv7 = new JRadioButton ("NTV7",true); tv.add(ntv7); conpane.add(ntv7); Adding radio button to the logical group tv Creating a logical identifier for JRadioButton group user is allowed to choose only one from the list at one time
If we have many choices to choose from (maybe more than 5), radio button component is not a good choice. It would be better to use a list or what is known in Swing as JList.
import javax.swing.*; import java.awt.*; public class mylist extends JApplet { private JList TVList; private String[] item={"tv1","tv2","tv3","ntv7"; public void init( ){ Container conpane = getcontentpane(); conpane.setlayout(new FlowLayout()); TVList = new JList(item); TVList.setVisibleRowCount(3); Creating a list object with a array data (above) as the parameter TVList.setSelectionMode(ListSelectionModel.SINGLE_SELECTION); JScrollPane scrollpane = new JScrollPane(TVList); conpane.add(scrollpane);
Combo box is a component like the list component (JList) where the user has a multiple choices to make at one time. Combo box component in Swing is known as JComboBox. JComboBox is different from JList because it hides the list. When combo box is displayed the user needs to click the arrow displayed before the user can see the list. Then the user can choose one item from the list.
import javax.swing.*; import java.awt.*; public class combobox extends JApplet { private JComboBox cmbtv; private String [] item={"tv1","tv2","tv3","ntv7"; public void init( ){ Container conpane= getcontentpane(); conpane.setlayout(new FlowLayout()); cmbtv = new JComboBox(item); conpane.add(cmbtv);
In Swing, Panel is known as JPanel. Panel is a container-like content pane where you can place and arrange any Swing components in a particular window. Panel will act as a sub-container. Component arrangement is done by dividing the window space into groups of components. For example, we can build a Panel for the button and others for the list or combo box. Provide a space for components. Allow subpanels to have their own layout manager.
import javax.swing.*; import java.awt.*; public class TestPanel extends JApplet { public void init( ){ Container conpane= getcontentpane(); conpane.setlayout(new FlowLayout()); JPanel panel=new JPanel(); //creating the JPanel Object JButton btnyes = new JButton("Yes"); JButton btnno = new JButton("No"); panel.add(btnyes); //adding object JButton Yes to the Panel panel.add(btnno); //adding object JButton No to the Panel conpane.add(panel); //adding object JPanel to the main container
In Swing, text area is known as JTextArea. The function is the same as JTextField. The difference is in the usage, where the height is more than a line. When a user places the JTextArea to a program, the user must state the number of line used.
import javax.swing.*; import java.awt.*; public class TextArea extends JApplet { private JTextArea teks; public void init( ){ Container conpane = getcontentpane(); conpane.setlayout(new FlowLayout()); JPanel panel = new JPanel(); teks = new JTextArea(10,10); JScrollPane skrol = new JScrollPane(teks, JScrollPane.VERTICAL_SCROLLBAR_ALWAYS, JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS); teks.setlinewrap(true); panel.add(skrol); conpane.add(panel);
Slider in Swing component is known as JSlider. Two very common usages for slider are: 1. Using slider as a control, when the bar is moved, it represents a value. 2. A replacement to the text field when the maximum and minimum input range is known.
import javax.swing.*; import java.awt.*; public class myslider extends JApplet { public void init( ){ Container conpane = getcontentpane( ); conpane.setlayout(new FlowLayout( )); JSlider skrol = new JSlider(JSlider.HORIZONTAL,0, 100,50); skrol.setmajortickspacing(50); skrol.setminortickspacing(5); skrol.setpaintticks(true); skrol.setpaintlabels(true); conpane.add(skrol); orientation and the specified minimum, maximum, and initial values The number of values between the major tick marks -- the larger marks that break up the minor tick marks. The number of values between the minor tick marks -- the smaller marks that occur between the major tick marks.
Layout manager is used to arrange the GUI components in the container. Each container (such as Panel or Frame) has a default layout manager associated with it, which you can change by calling setlayout. Layout manager is responsible for deciding the layout policy and size of each of its container s child components.
The layout manager is in java.awt package. There are eight-layout managers. Some of them are: FlowLayout: This is the easiest layout manager. The components are arranged horizontally until there is no more space, then a new line is added for the next component.
BorderLayout Divides the container into five areas that is north, south, east, west and center.
GridBagLayout GridBagLayout is a sophisticated, flexible layout manager. It aligns components by placing them within a grid of cells, allowing components to span more than one cell. The rows in the grid can have different heights, and grid columns can have different widths.
GridLayout Arranges all the components into rows and columns. It aligns components by placing them within a grid of cells, allowing components to span more than one cell. The rows in the grid can have different heights, and grid columns can have different widths.
CardLayout This layout is also known as tabbed. Each component is piled on top so that only one component is displayed at one time. The CardLayout class lets you implement an area that contains different components at different times.
BoxLayout The BoxLayout class puts components in a single row or column. It respects the components' requested maximum sizes and also lets you align components.
Null Places the components into the container without a layout manager. We use the NULL layout manager when placing the component on the applet physical location. This is not recommended for application where the window always changes.
import javax.swing.*; import java.awt.*; public class BorderLayout extends JApplet { private JButton north,south,east,west,center; public void init( ){ Container conpane = getcontentpane( ); //conpane.setlayout(new BorderLayout( )); north = new JButton("North"); south = new JButton("South"); east = new JButton("East"); west = new JButton("West"); center = new JButton("Center"); conpane.add("north",north); conpane.add("south",south); conpane.add("east",east); conpane.add("west",west); conpane.add("center",center);
import java.awt.*; import javax.swing.*; public class Calculator extends JApplet { private JButton b0, b1, b2, b3, b4; private JButton b5, b6, b7, b8, b9; private JButton b10, b11, b12, b13, b14, b15; public void init( ) { Container conpane = getcontentpane( ); conpane.setbackground(color.white); JPanel panel = new JPanel( ); panel.setlayout(new GridLayout(4,4)); b7 = new JButton("7"); panel.add(b7); b8 = new JButton("8"); panel.add(b8); b9 = new JButton("9"); panel.add(b9); b10 = new JButton("/"); panel.add(b10); b4 = new JButton("4"); panel.add(b4); b5 = new JButton("5"); panel.add(b5); b6 = new JButton("6"); panel.add(b6); b11 = new JButton("*"); panel.add(b11); b1 = new JButton("1"); panel.add(b1); b2 = new JButton("2"); panel.add(b2); b3 = new JButton("3"); panel.add(b3); b12 = new JButton("-"); panel.add(b12); b0 = new JButton("0"); panel.add(b0); b13 = new JButton("."); panel.add(b13); b14 = new JButton("+"); panel.add(b14); b15 = new JButton("="); panel.add(b15); conpane.add("center",panel);
Q1. Create an applet that can display the following component. No event handling is needed for the components. name address e-mail
Q2. Create an applet that can display the following component. No event handling is needed for the components.
Q3. Create an applet that can display the following component. No event handling is needed for the components.
Q4. Create an applet with the following GUI. You do not have to provide any functionality.
Q5. Create an applet with the following GUI. You do not have to provide any functionality.