Layouts Flow Layout Border Layout Gridbag Layout Card

  • Slides: 21
Download presentation
Layouts • • • Flow. Layout Border. Layout Gridbag. Layout Card. Layout

Layouts • • • Flow. Layout Border. Layout Gridbag. Layout Card. Layout

Flow. Layout • Arranges components from left-to-right and top-to -bottom, centering components horizontally. •

Flow. Layout • Arranges components from left-to-right and top-to -bottom, centering components horizontally. • There is five pixel gap between the components arranged in this layout. • The default layout for the Applet.

Example import java. applet. Applet; import java. awt. *; public class Flow. Layout. Demo

Example import java. applet. Applet; import java. awt. *; public class Flow. Layout. Demo extends Applet { Layout. Manager flow. Layout; Button [] Buttons; public Flow. Layout. Demo() { int i; flow. Layout = new Flow. Layout (); set. Layout (flow. Layout); Buttons = new Button [6]; for (i = 0; i < 6; i++) { Buttons[i] = new Button(); Buttons[i]. set. Label("Button" + (i + 1)); add (Buttons[i]); } } }

The Output

The Output

Border. Layout • This is the default layout of the Frame. • There can

Border. Layout • This is the default layout of the Frame. • There can be only one component in each region and the regions are identified as constants: - NORTH, SOUTH, EAST, WEST, and CENTER. • Any of these five constant names can be used while adding a component to a container. - Panel pnl = new Panel(); - pnl. set. Layout(new Border. Layout()); - pnl. add(new Button(“submit”), Border. Layout. NORTH);

Example import java. awt. *; public class BLayout. Demo extends Frame { public BLayout.

Example import java. awt. *; public class BLayout. Demo extends Frame { public BLayout. Demo(String title) { super(title); add(new Button(“North”), Border. Layout. NORTH); add(new Button(“South”), Border. Layout. SOUTH); add(new Button(“East”), Border. Layout. EAST); add(new Button(“West”), Border. Layout. WEST); add(new Button(“Center”), Border. Layout. CENTER); set. Size(400, 270); set. Visible(true); } public static void main(String[] args) { BLayout. Demo blaypout = new BLayout. Demo(“Border Layout Example”); }}

The Output

The Output

Grid. Layout • As the name indicates the container is divided into a grid

Grid. Layout • As the name indicates the container is divided into a grid of cells dictated by rows and columns. Each cell accommodates one component. • As the rows and columns are fixed, components addition goes one after another automatically. Following is an example of Grid. Layout of 3 rows and 4 columns (12 cells). • The default gap between the components is 0 pixels which can be changed explicitly.

Example import java. awt. event. *; import java. awt. *; class Grid. Layout. Demo

Example import java. awt. event. *; import java. awt. *; class Grid. Layout. Demo extends Frame { public Grid. Layout. Demo() { super("Laying Out Components using Grid. Layout"); Panel p = new Panel(new Grid. Layout(5, 2, 20, 50)); p. add(new Label("Name")); p. add(new Text. Field(5)); p. add(new Label("Roll No")); p. add(new Text. Field(3)); p. add(new Label("Class")); p. add(new Text. Field(3)); p. add(new Label("Total Marks")); p. add(new Text. Field(3)); p. add(new Button("Submit")); p. add(new Button("Cancel")); add(p); set. Size(400, 400); set. Visible(true); } public static void main(String[] args) { Grid. Layout. Demo g=new Grid. Layout. Demo(); } }

The Output

The Output

Grid. Bag. Layout 1. We can arrange components in horizontal as well in vertical

Grid. Bag. Layout 1. We can arrange components in horizontal as well in vertical direction or by positioning them within a cell of a grid. 2. Components need not be of same size in a row. 3. Component can occupy one or more cells, a. k. a its display area. 4. Each row can contain dissimilar number of columns. 5. We need to customize Grid. Bag. Constraints objects to use Grid. Bag. Layout effectively associated with its components. 6. Customization of a Grid. Bag. Constraints object can be done by setting one or more of its instance variables. - gridx & gridy • The initial address of cell of a grid is gridx = 0 and gridy = 0. - gridwidth & gridheight • gridwidth constraint specifies the number of cells in a row and gridheight specifies number of columns in display area of the components. The default value is 1.

Grid. Bag. Layout (contd. ) - fill • Grid. Bag. Constraints. NONE (default value–does

Grid. Bag. Layout (contd. ) - fill • Grid. Bag. Constraints. NONE (default value–does not grow when the window is resized). • Grid. Bag. Constraints. HORIZONTAL (this value fills all the horizontal display area of a component, but it does not change height). • Grid. Bag. Constraints. VERTICAL (it changes the height of a component, but does not change its width). • Grid. Bag. Constraints. BOTH (makes the component fill its display area horizontally and vertically, both). - ipadx and ipady • for internal padding of components in given layout. - Insets • used for spacing between the component and the edges of its display area.

import java. awt. *; import java. awt. event. *; public class Awt. Layout. Demo

import java. awt. *; import java. awt. event. *; public class Awt. Layout. Demo extends Frame{ Awt. Layout. Demo(){ Panel panel = new Panel(); panel. set. Background(Color. dark. Gray); panel. set. Size(300, 300); Grid. Bag. Layout layout = new Grid. Bag. Layout(); panel. set. Layout(layout); Grid. Bag. Constraints gbc = new Grid. Bag. Constraints(); gbc. fill = Grid. Bag. Constraints. HORIZONTAL; gbc. gridx = 0; gbc. gridy = 0; panel. add(new Button("Button 1"), gbc); gbc. gridx = 1; gbc. gridy = 0; panel. add(new Button("Button 2"), gbc);

 gbc. fill = Grid. Bag. Constraints. HORIZONTAL; gbc. ipady = 20; gbc. gridx

gbc. fill = Grid. Bag. Constraints. HORIZONTAL; gbc. ipady = 20; gbc. gridx = 0; gbc. gridy = 1; panel. add(new Button("Button 3"), gbc); gbc. gridx = 1; gbc. gridy = 1; panel. add(new Button("Button 4"), gbc); gbc. gridx = 0; gbc. gridy = 2; gbc. fill = Grid. Bag. Constraints. HORIZONTAL; gbc. gridwidth = 2; panel. add(new Button("Button 5"), gbc); add(panel); set. Size(400, 400); set. Visible(true); } public static void main(String[] args){ Awt. Layout. Demo a = new Awt. Layout. Demo(); } }

The Output

The Output

Card. Layout • Each component is treated as a card by card. Layout object.

Card. Layout • Each component is treated as a card by card. Layout object. • Each card kept on another like a stack and only one card can be visible at a time. • When the container is displayed after adding the first component, then the first component is visible. • The ordering of cards is determined by the container’s own internal ordering of its component objects. • Card. Layout defines a set of methods that allow an application to flip through these cards sequentially, or to show a specified card.

Example import java. awt. *; import java. awt. event. *; public class Card. Demo

Example import java. awt. *; import java. awt. event. *; public class Card. Demo extends Frame implements Action. Listener { Panel card. Panel; Panel button. P; Panel p 1, p 2; Button B 1, B 2; Card. Layout c. Layout; public void card. Demo() { card. Panel = new Panel(); c. Layout = new Card. Layout(); card. Panel. set. Layout(c. Layout); p 1 = new Panel(); p 1. set. Background(Color. red); p 2 = new Panel(); p 2. set. Background(Color. yellow); B 1 = new Button("Red"); B 1. add. Action. Listener(this); B 2 = new Button("Yellow"); B 2. add. Action. Listener(this);

Example (contd. ) button. P = new Panel(); button. P. add(B 1); button. P.

Example (contd. ) button. P = new Panel(); button. P. add(B 1); button. P. add(B 2); } } card. Panel. add(p 1, "B 1"); card. Panel. add(p 2, "B 2"); set. Layout(new Border. Layout()); add(button. P, Border. Layout. SOUTH); add(card. Panel, Border. Layout. CENTER); set. Size(300, 200); set. Visible(true); public void action. Performed(Action. Event e) { if (e. get. Source() == B 1) c. Layout. show(card. Panel, "B 1"); if (e. get. Source() == B 2) c. Layout. show(card. Panel, "B 2"); } public static void main(String a[]) { Card. Demo demo=new Card. Demo(); demo. card. Demo(); }

Example (contd. ) add(button. P, Border. Layout. SOUTH); add(card. Panel, Border. Layout. CENTER); set.

Example (contd. ) add(button. P, Border. Layout. SOUTH); add(card. Panel, Border. Layout. CENTER); set. Visible(true); set. Size(300, 200); set. Title(“Demo. Card”); add. Window. Listener(new Window. Adapter(){ public void window. Closing(Window. Event we){ System. exit(0); }}); } public void action. Performed(Action. Event e){ if (e. get. Source() == B 1) c. Layout. show(card. Panel, “B 1”); if (e. get. Source() == B 2) c. Layout. show(card. Panel, “B 2”); if (e. get. Source() == B 3) c. Layout. show(card. Panel, “B 3”); } public static void main(String a[]){ Card. Demo demo=new Card. Demo(); demo. card. Demo(); } }