Java Layout Manager – Webpage Layout Tutorials

Webpage Layout – The arrangement of various components within a container (window, applet, etc.) is called a webpage layout. The components are label, button, textbox, text fields, menus, etc.

When you design a webpage first you need to decide the arrangement of various components on the page. Java supports following webpage layouts –

Flow webpage layout
Grid webpage layout
Border webpage layout
Card webpage layout
Gridbag webpage layout

For all these five webpage layout java provide the following five classes –

FlowLayout class for flow webpage layout
GridLayout class for grid webpage layout
BorderLayout for Border webpage layout
CardLayout for card webpage layout
GridBagLayout for grid bag webpage layout

All these are subclasses of the LayoutManager class. LayoutManagr class is present in java.awt package.

You can set a webpage layout with the help of the setLayout() method.

Flow Webpage Layout

The flow webpage layout arranges all the components from the upper left portion, left to right, and top to bottom.

When no more components possible to fit in the same line, the next one is placed in the next line.

A small space is left between each component on each side on the webpage.

The following constructors are there for Flow webpage layout –

FlowLayout()
FlowLayout(int align)
FlowLayout(int align, int horizontal, int vertical)

FlowLayout()

It is a default webpage layout. FlowLayout() centers components and leaves 5 pixels of space between the components.

FlowLayout(int align)

It aligns components left center and right as motioned below –

FlowLayout.LEFT

FlowLayout.CENTER

FlowLayout.RIGHT

FlowLayout(int align, int horizontal, int vertical)

FlowLayout(int align, int horizontal, int vertical) constructor specify horizontal and vertical spaces between the components according to given parameter values.

Java Tutorials of Flow Webpage Layout

// Example for Flow webpage layout

import java.awt.*;

import java.io.*;

class bf extends Frame

{

Bf(String s)

{

super(s);

setSize(300,200);

setLayout(new FlowLayout);

for(int i=1, i<=9;i++)

add(new Button(“Button No ”+i));

setVisible(true);

}

class test1

{

Public static void main(String arg[])

{

bf b =new bf(“Flow Layout”);

}

Compile and run the program test1.java

Javac test1.java

Java test1

Java Tutorials – Java Grid Webpage Layout

The Grid Webpage Layout organize components into a rectangular component.

It places components into left to right and top to bottom order. The GridLayout class has the following constructor-

GridLayout(int rows, int cols)

This constructor creates a grid of the given number of rows and columns. All the components have equal size.

The following

Java Tutorials – Program uses a grid layout and paces buttons in three rows and three columns.

import java.awt.*;

import java.io.*;

class gl extends Frame

{

gl(String s)

{

super(s)

setSize(300,200);

setLayout(new GridLayout(3,4));

for(int i=1;i<=12;i++)

add(new Button(“Button no ”+i));

setVisible(true);

}

class test2

{

public static void main(String arg[])

{

Gl g=new gl(“Grid layout”);

}

Compile and run test2.java

Javac test2.java

Java test2

Java Tutorials – Java Border Webpage Layout

The border layout allows you to place components in different directions NORT, EAST, WEST, SOUTH and in the center.

The border layout class ha following constructors –

BorderLayout()

It is the default layout.

BorderLayout(int Horizontal, int Vertical)

This layout allows you to leave given spaces horizontally and vertically between the components.

Example Program for Border layout

import java.awt.*;

import java.io.*;

class bl extends Frame

{

Bl(String s)

{

setSize(300, 140);

add(new Button(“NORTH”), BorderLayout.NORTH);

add(new Button(“EAST”), BorderLayout.EAST);

add(new Button(“WEST”), BorderLayout.WEST);

add(new Button(“SOUTH”), BorderLayout.SOUTH);

add(new Button(“CENTER”), BorderLayout.CENTER);

setVisible(true);

}

class test3

{

Public static void main (String arg[])

{

Bl b=new bl(“Border layout”);

}

Compile and run test3.java

Javac test3.java

Java test3

Java Tutorials – Java Insets Webpage Layout

If you want to leave a small space between the container that holds your components and the window that contains it.

To implement this override the getInsets() method that is defined by the container in the following ways-

Insets(int top, int left, int bottom. Int right);

The values passed in the top, left, bottom and right provide the amount of space between the container and its enclosing window.

Example of its program is as below-

import java.applet.*;

import java.awt.*;

public class insetExmp extends Applet

{

Button b1,b2,b3;

public void init()

{

setBackground(Color.cyan);

setLayout(new BorderLayout());

add(new Button(“RMI”), BorderLayout.NORTH);

add(new Button(“SERVLET”), BorderLayout.EAST);

add(new Button(“JDBC”), BorderLayout.SOUTH);

add(new Button(“BEANS”), BorderLayout.WEST);

add(new Button(“JAVA”), BorderLayout.CENTER);

}

Public Insets getInsets()

{

Return new Insets(10,20,10,20);

}

</applet>

Compile and run the program insetExmp.java

javac insetExmp.java

appletviewer insetExmp

Note – Programs developed using applet can be executed with appletviewer tool, after compilation through javac java compiler.

Java Tutorials – Java Canvas Webpage Layout

A Canvas is a webpage component that has no default appearance. Users can create canvas for drawing regions and work areas.

Canvas can receive input from the mouse and the keyboard. You can use the setSize() method to make the preferred size of the canvas. The example of the program is as follows-

import java.applet.*;

import java.awt.*;

public class CanExmp extends Applet

{

Public void init()

{

setLayout(new FlowLayout(FlowLayout.RIGHT));

setBackground(Color.cyan);

Canvas c=new Canvas();

c.setBackground(Color.blue);

c.setSize(100,50);

add(c);

}

</applet>

Compile and run the program insetExmp.java

javac CanExmp.java

appletviewer CanExmp

Program to make Calc using Applet

// Program to make a simple Calculator

import java.awt.*;

import java.awt.event.*;

import.java.applet.Applet;

public class calculator extends Applet implements ActionListener

{

Label l1,l2;

TextField t1,t2,t3;

Button add1,sub,mul,div;

public void init()

{

l1=new Label(“First No.”);

add(l1);

l2=new Label(“Secibd No.”);

add(l2);

t1=new TextField(12);

add(t1);

t2=new TextField(12);

add(t2);

add1=new Button(“+”);

add(add1);

add1.addActionListener(this);

sub=new Button(“-”);

add(sub);

sub.addActionListener(this);

mul=new Button(“*”);

add(mul);

mul.addActionListener(this);

div=new Button(“/”);

add(div);

div.addActionListener(this);

t3=new TextField(12);

add(t3);

}

public void actionPerformed(ActionEvent e)

{

if(e.getSource()==add1)

{

int sum=Integer.parseInt(t1.getText())+Integer.parseInt(t2.getText());

t3.setText(String.valueOf(sum));

}

if(e.getSource()==sub)

{

int sum=Integer.parseInt(t1.getText())-Integer.parseInt(t2.getText());

t3.setText(String.valueOf(sum));

}

if(e.getSource()==mul)

{

int sum=Integer.parseInt(t1.getText())*Integer.parseInt(t2.getText());

t3.setText(String.valueOf(sum));

}

if(e.getSource()==div)

{

int sum=Integer.parseInt(t1.getText())/Integer.parseInt(t2.getText());

t3.setText(String.valueOf(sum));

}

</applet>

Save, Compile and run program – calculator.java

javac calculator.java

appletviewer calculator.java

Note – Programs developed using applet can be executed with appletviewer tool, after compilation through the javac Java compiler.

Java Layout Manager – Webpage Layout Tutorials