Panels
Up to this point you have been writing applets which are a subclass of a panel that run in a browser rather than as a stand-alone application. You have placed different components on this panel or applet which utilized the default layout for an applet. In order to write more sophisticated applets, it will be necessary to create layouts on your panels to divide them up into different regions. Panels enable you to do this and they can be nested within other panels to help organize your layout.
Consider the applet below:
Choose values that range between 0 and 255, pushing enter after each input. The colors will be mixed and painted on the applet canvas on the right.
The applet itself is a panel. In fact, it extends the panel class so that the panel will run in a browser. The applet or panel is then divided into two sections. It's layout is set for 1 row and 2 columns with 10 pixels between each row and column. The left side of this applet is a panel that has a layout of its own. The right side is a canvas. A canvas is a component that is used for creating custom graphic components. In this applet it is used to paint a background color based on the user's input values for red, green, and blue. (These values may range from 0 to 255). Let's return to the left panel again. It's layout is set for 3 rows and two columns with 10 pixels between each row and column. The following components are added: label, textbox, label, textbox, label, and textbox. They are added from left to right, top to bottom.
When you add components to a container, layout managers are used to tell the AWT where to place your components relative to the others. This allows your applet or application to be platform-independent which is an important feature of the Java language. There are five different types of layout managers in the AWT which are explained in the glossary so you can access them easily whenever you need them. They are FlowLayout, GridLayout, BorderLayout, CardLayout, and GridBagLayout. There is an applet to illustrate all five layout managers on the "frames" page.
Panels are used to organize the components on the main panel (or applet if it will be run in a browser).
Additional panels can be nested in the main panel or applet in the layout of your choice.
Components are then added to these panels. In this example, 3 labels and 3 textboxes have been added to a panel. Then this panel plus a canvas have been added to the applet (panel).
Layout managers determine where the components will be placed in relation to one another. If the platform is changed for the applet or application, the layout manager takes care of the necessary adjustments.
| import java.applet.*; import java.awt.*; public class panels Applet { Panel values; TextField red = new TextField(5); TextField green = new TextField(5); TextField blue = new TextField(5); Canvas mixture; |
Import all the facilities of the AWT and applet that Java has
to offer. Create an applet called panels. Declare the global variables values and mixture which are a panel and canvas respectively. Create 3 instances of the class textfield called red, green, and blue. |
| public void init() { setLayout(new GridLayout(1,2,10,10)); mixture = new Canvas(); mixture.setBackground(new Color(0,0,0)); red.setText("0"); green.setText("0"); blue.setText("0"); values = new Panel(); values.setLayout(new GridLayout(3,2,10,10)); values.add(new Label("Red Value:")); values.add(red); values.add(new Label("Green Value:")); values.add(green); values.add(new Label("Blue Value:")); values.add(blue); add(values); add(mixture); } |
The init method sets the layout for the applet. The GridLayout is set
for 1 row, 2 columns, with 10 pixels between rows and columns. The 3 labels and 3 textboxes are added to the values Panel. Then the values panel and mixture canvas are added to the applet.. |
| public boolean action(Event evt, Object whatAction) { if((evt.target instanceof TextField)) { setcolor(); return true; } return false; } |
When an action takes place this method tests for it. If the action was an instance of TextField, setcolor is called and true is returned, otherwise return false. |
| public void setcolor() { String r = red.getText(); String g = green.getText(); String b = blue.getText(); Color c = new Color(Integer.parseInt(r),Integer.parseInt(g),Integer.parseInt(b)); mixture.setBackground(c); mixture.repaint(); } |
The setcolor method retrieves the strings that were input in the red,
green, and blue textboxes A new color is created by combining the values (after being converted to integers.) The background of the canvas is set to this new color. To work universally in every browser, the canvas must be repainted. |
| public Insets insets() { return new Insets(10,10,10,10); } } |
This method overrides the inset method whose default is 0 to inset the panel and canvas 10 pixels from the outside border. |
The easiest way to obtain the code for this Applet is to click here and copy the contents of the screen that loads in your browser , paste it in a text editor and save it in a file called "panels.java".
After compiling this program we need to create an HTML page with a reference to the class file. It will require a graphic window that is large enough to contain the panel (with its labels and textboxes) and the canvas. (width-400 and height-150).
Save the HTML code in the same directory as the class file.
When you load the HTML file in your browser the applet will execute as below.