The main difference between an applet and a regular command-line executed program is that applets allow for extensible Graphical User Interfaces (GUI).

Since applets provide for the ability to create complex GUI, it is important for developers to know how to create such programs.

In Java applets, graphical portions are initialized and added in two different areas. While objects are initialized in the main class, they are added to the layout of the applet in theinit() method. This is done using the syntax ofadd(<object>). A typicalinit() method looks something like this:

Code section 9.8: A typicalinit() method ...publicvoidinit(){setFont(newFont("Times New Roman",Font.PLAIN,24));setForeground(Color.white);setBackground(Color.black);setLayout(newGridLayout);...add(label);add(button);}

The different aspects of this method will be covered below.

Lots of applets use buttons. There are only a few ways to have contact between the applet and the user, and the use of buttons is one of those ways. Buttons are created the same way as most other Java applet objects:

Code section 9.9: Button creation ButtonsubmitButton=newButton("Submit");

When initializing a button, it is necessary to define what text will appear on that button in the given parameter. In this example, the button is initialized with the word "Submit" printed on it. Adding the button to the actual layout is done in theinit() method, as described above.

Code section 9.10: Button display publicvoidinit(){...add(submitButton);}

Allowing buttons to carry out tasks or utilize a user's input is a bit more complicated. These functions require anActionListener, and will be discussed inActionListener section.

Labels are areas in applets that contain text which can not be edited by the user. This is usually ideal for descriptions (i.e. "Insert name:"). Labels are initialized and added to applet layouts in the same way as buttons. Also, like buttons, the text inside labels must be identified at initialization. If, however, the label will receive its text as the cause of a later function and should start off blank, no text should be placed between the quotation marks.

Code section 9.11: Label display LabelnameLabel=newLabel("Name: ");...publicvoidinit(){add(nameLabel);}

TextFields are areas in applets that allow users to insert text. The two parameters, which are optional, for TextFields can set predefined text in the field or set the number of columns allowed in the TextField. Here are a few examples:

Code section 9.12: Text field creation TextFieldt1=newTextField();// BlankTextFieldt2=newTextField(5);// Blank in 5 columnsTextFieldt3=newTextField("Input here");// Predefined textTextFieldt4=newTextField("Input here",5);// Predefined text in 5 columns...publicvoidinit(){add(t1);add(t2);add(t3);add(t4);...}

Using stylish fonts in your Java applets may be necessary to help keep your Java applets attractive. ThesetFont() allows for either the font used throughout the applet to be defined or for one element's font to be set at a time.

The syntax for setting a font issetFont(<fontName>, <fontStyle>, <fontSize>).

To make every font in the applet plain, size 24 Times New Roman, the following code should be used:

Code section 9.13: Font setting Fontf=newFont("Times New Roman",Font.PLAIN,24);setFont(f);

It is not necessary to initialize the font and set the font through two different lines of code.

Code section 9.14: Direct font setting setFont(newFont("Times New Roman",Font.PLAIN,24));

However, to make the font of elementa plain, size 24 Times New Roman, and elementb italicized, size 28 Times New Roman, the following code should be used:

Code section 9.15: Object font setting a.setFont(newFont("Times New Roman",Font.PLAIN,24));b.setFont(newFont("Times New Roman",Font.ITALIC,28));

To set the color of the fonts used in an applet, thesetForeground(<color>) method is used. This method already includes some predefined colors which can be used by calling, for example,setForeground(Color.white). Here are all of the predefined colors:

• Color.black
• Color.blue
• Color.cyan
• Color.darkGray
• Color.gray
• Color.green
• Color.red
• Color.white
• Color.yellow

To create a custom color, the RGB values of the color can be passed in as the color parameter. For example, if red were not a predefined color, one could usesetForeground(new Color(255, 0, 0)) to define red.

Just as font styles, font colors can be applied to separate elements. The syntax follows the same pattern:a.setForeground(Color.white).

Layouts are what make applets visible. Without a layout, nothing would display. There are five different types of layouts to choose from — some are very simple while others are complex.

This layout places components left to right, using as much space as is needed. The Flow Layout is the default layout for applets and, therefore, does not need to be set. However, for clarity, one can specify the applet layout as a Flow Layout by placing this line of code at the top of theinit() method:

Code section 9.16: Flow Layout setLayout(newFlowLayout());

The added components to the layout that follow will be placed on screen in order of which they are added.

Code section 9.17: Component display publicvoidinit(){setLayout(newFlowLayout());add(nameLabel);add(t1);add(submitButton);}

Assuming that these variables are defined the same as above, these lines of code will create the layout of an applet that is composed of a label, a text field, and a button. They will all appear on one line if the window permits. By changing the width of window, the Flow Layout will contract and expand the components accordingly.

This layout arranges components in the form of the table (grid). The number of rows and columns in the grid is specified in the constructor. The other two parameters, if present, specify vertical and horizontal padding between components.

Code listing 9.4: GridLayoutApplet.java importjava.applet.Applet;importjava.awt.Button;importjava.awt.GridLayout;importjava.awt.Label;importjava.awt.TextField;publicclassGridLayoutAppletextendsApplet{ButtonsubmitButton=newButton("Submit");TextFieldt1=newTextField();// BlankTextFieldt2=newTextField(5);// Blank in 5 columnsTextFieldt3=newTextField("Input here");// Predefined textTextFieldt4=newTextField("Input here",5);// Predefined text in 5 columnsLabelnameLabel=newLabel("Name: ");/** * Init. */publicvoidinit(){// 3 rows, 4 columns, 2 pixel spacingsetLayout(newGridLayout(3,4,2,2));add(nameLabel);add(t1);add(t2);add(t3);add(t4);add(submitButton);}}

The items have been displayed in this order:

We see that the layout has been configured to fill the grid left-to-right and then top-to-bottom and that the two last columns have been ignored (they don't even exist). They have been ignored because there are not enough items to fill them and the number of rows is prior to the number of columns. This means that when you specify a number of rows that is not zero, the number of columns is simply ignored. You should specify zero rows in order that the number of columns is taken into account.

A grid layout creates cells with equal sizes. So it can be used not only to display items as a grid but also to display two items with the same width or height.

This layout places one big component in the center and up till four components at the edges. When adding to the container with this layout, you need to specify the location as the second parameter likeBorderLayout.CENTER for the center or one of the world directions for the edge (BorderLayout.NORTH points to the top edge).

Code section 9.19: Border layout importjava.awt.*;Containercontainer=getContentPane();container.setLayout(newBorderLayout());JButtonb2=newJButton("two");// Add the button to the right edge.container.add(b2,BorderLayout.EAST);...

If you have two components, it is not the same to put the first in the north and the second to the center as to put the first in the center and the second to the south. In the first case, the layout will calculate the size of the component and the second component will have all the space left. In the second case, it is the opposite.

The card layout displays only one item at a time and is only interesting with interactivity. The other items are stored in a stack and the displayed item is one of the items of the stack. The name of the card layout is a reference to a playing card deck where you can see the card at the top of the stack and you can put a card on the top. The difference in the card layout is that the items in the stack keeps their order. When you use this layout, you must use this method to add items to the container, i.e. the applet:

The card layout has several methods to change the currently displayed item:

Code listing 9.5: CardLayoutApplet.java importjava.applet.Applet;importjava.awt.CardLayout;importjava.awt.Label;publicclassCardLayoutAppletextendsApplet{staticfinalStringCOMPONENT_POSITION_TOP="TOP";staticfinalStringCOMPONENT_POSITION_MIDDLE="MIDDLE";staticfinalStringCOMPONENT_POSITION_BOTTOM="BOTTOM";LabeltopLabel=newLabel("At the top");LabelmiddleLabel=newLabel("In the middle");LabelbottomLabel=newLabel("At the bottom");/** * Init. */publicvoidinit(){setLayout(newCardLayout());add(COMPONENT_POSITION_TOP,topLabel);add(COMPONENT_POSITION_MIDDLE,middleLabel);add(COMPONENT_POSITION_BOTTOM,bottomLabel);((CardLayout)getLayout()).show(this,COMPONENT_POSITION_MIDDLE);}}

The main benefit of the layouts is that you can combine them one into another and you can do that with a panel. A panel is a component that has other components inside. A panel can then be added to the top component (frame or applet) or to another panel and be placed itself as defined by layout and constraints of this parent component. It has its own layout and is normally used to place a group of related components like buttons, for instance:

Test your knowledge

Question 9.5: We want to create a basicFTP (File Transfer Protocol) software which looks like this:

Application name
Tool Tool Tool Tool Tool Tool Tool Tool Tool
Local folder	Remote folder
Status bar

On the top, it should display the name of the software. Under the name, it should display tool buttons that are displayed from the left to the right and the sequence of buttons is wrapped if it reaches the right border. Under the buttons, it should display two lists of files. The widths of these two lists should be the same and they should use all the width of the application. Under these two lists, it should display a status bar.

Create this display on an applet.

Answer

First, we have to analyze the display. We have four separate areas of components:

• The name area
• The tool area
• The folder area
• The status area

So we have to first separate these areas and then we will split these areas into components.

Answer 9.5: Answer5.java importjava.applet.Applet;importjava.awt.BorderLayout;importjava.awt.Button;importjava.awt.FlowLayout;importjava.awt.GridLayout;importjava.awt.Label;importjava.awt.Panel;publicclassAnswer5extendsApplet{LabelapplicationNameLabel=newLabel("Wikibooks FTP");Buttontool1Button=newButton("Tool");Buttontool2Button=newButton("Tool");Buttontool3Button=newButton("Tool");Buttontool4Button=newButton("Tool");Buttontool5Button=newButton("Tool");Buttontool6Button=newButton("Tool");Buttontool7Button=newButton("Tool");Buttontool8Button=newButton("Tool");Buttontool9Button=newButton("Tool");LabellocalFolderLabel=newLabel("5 files");LabelremoteFolderLabel=newLabel("3 files");LabelstatusBarLabel=newLabel("Available");/** * Init. */publicvoidinit(){setLayout(newBorderLayout());// The application nameadd(applicationNameLabel,BorderLayout.NORTH);// The centerPanelcenterPanel=newPanel();centerPanel.setLayout(newBorderLayout());// The buttonsPanelbuttonPanel=newPanel();buttonPanel.setLayout(newFlowLayout(FlowLayout.LEFT));buttonPanel.add(tool1Button);buttonPanel.add(tool2Button);buttonPanel.add(tool3Button);buttonPanel.add(tool4Button);buttonPanel.add(tool5Button);buttonPanel.add(tool6Button);buttonPanel.add(tool7Button);buttonPanel.add(tool8Button);buttonPanel.add(tool9Button);centerPanel.add(buttonPanel,BorderLayout.CENTER);// The local and remote foldersPanelfolderPanel=newPanel();folderPanel.setLayout(newGridLayout(0,2,2,2));folderPanel.add(localFolderLabel);folderPanel.add(remoteFolderLabel);centerPanel.add(folderPanel,BorderLayout.SOUTH);add(centerPanel,BorderLayout.CENTER);// The status baradd(statusBarLabel,BorderLayout.SOUTH);}}

1. The totality of the components is put in a border layout so that we have three vertical areas of elements.
2. The area in the north is the area of the title.
3. The area in the center contains the buttons and the folders and will be split later.
4. The area in the south is the area of the status bar.
5. The area in the center is now split with a border layout into a button area in the center and a folder area in the south.
6. The button area is then split with a flow layout.
7. The folder area is now split with a grid layout.

We use a grid layout to display the folders to have the same width between the two components. We can't use a grid layout to separate the name, the buttons, the folders and the status bar as these areas have not the same height. The buttons must be at the center of the border layout as the number of row of buttons would be badly calculated and the last rows of buttons would not appear.

• Book:Java Programming
• Book:Java Programming/Applets

• Pages using the JsonConfig extension
• Pages with deep filing