GUI සැකසීම සඳහා Basic Layouts යොදාගන්නා අයුරු

අපි මෙම පාඩමෙන් සාකච්ඡා කරන්න යන්නේ ජාවා වැඩසටහන් සඳහා අතුරුමුහුනත් සැකසීමේදී components සුදුසු පරිදි ස්ථානගත කිරීම සඳහා layouts යොදාගන්නා ආකාරයයි. මෙම layouts java.awt පැකේජයේ අන්තර්ගත වනවා. අප මෙම පාඩමේදී මූලික වශයෙන් පහත දැක්වෙන layouts භාවිතා කරන අයුරු සලකා බලමු.

• FlowLayout
• BorderLayout
• GridLayout

අපි මුලින්ම බලමු ජාවා අතුරුමුහුණතකට Layout manager එකක් set කරන්නේ කොහොමද කියලා.

syntax:

void setLayout(LayoutManager layoutObj);

උදා:

this.setLayout(new FlowLayout());

දැන් අපි ඉහත සඳහන් කල layouts විස්තරාත්මකව සලකා බලමු

FlowLayout

Panel class එකෙහි සහ එහි සියලුම child classes (උදා:Applet,JApplet,JPannel,.. ) වල default layout එක වන්නේ මෙයයි. සාමාන්‍යයෙන් components place(ස්ථානගත) කරනුයේ වමේ සිට දකුණට සහ උඩ සිට පහලට යන ආකාරයෙනි(left to right and top to bottom).

constructor:

FlowLayout(int align, int hgap, int vgap);

align: මෙමගින් සඳහන් කරනුයේ components ස්ථානගත කරනුයේ මොන පැත්තෙන් ආරම්භ වන පරිදිද යන්නයි

FlowLayout.LEFT

FlowLayout.CENTER

FlowLayout.RIGHT

hgap, vgap : මෙමහින් සඳහන් කරනුයේ components අතර horizontal gap එක සහ vertical gap එකයි මෙය pixels වලින් ලබාදිය යුතුය.

දැන් අපි FlowLayout එක යොදාගෙන සරල  චිත්‍රකමුහුනතක් (GUI )සකසන අයුරු බලමු.

Code:

import java.awt.FlowLayout;
import javax.swing.*;

public class FlowLayoutDemo extends JFrame{

 public FlowLayoutDemo(){
  setTitle("FlowLayoutDemo Demo");  
  JPanel myPanel=new JPanel();
  myPanel.setLayout(new FlowLayout(FlowLayout.CENTER,5,5));
  //creating JButton objects
  JButton btn1=new JButton("Component1");
  JButton btn2=new JButton("Component2");
  JButton btn3=new JButton("Component3");
  JButton btn4=new JButton("Component4");
  JButton btn5=new JButton("Component5");
  JButton btn6=new JButton("Component6");
  //adding JButton objects to the panel
  myPanel.add(btn1);
  myPanel.add(btn2);
  myPanel.add(btn3);
  myPanel.add(btn4);
  myPanel.add(btn5);
  myPanel.add(btn6);
  this.add(myPanel);
  this.setSize(492,100);
  this.setDefaultCloseOperation(3);
  this.setVisible(true);
 }

 public static void main(String args[]){
  new FlowLayoutDemo();
 }
}

BorderLayout

Window සහ එහි sub class සඳහා default layout එක වේ. මෙහිදී container එක කලාප 5 කට බෙදනු ලැබේ ඒවා නම්

1. North
2. South
3. East
4. West
5. Center

components place කරනුයේ මෙම කලාප 5 ට වේ.

Constructor:

BorderLayout(int hgap, int vgap) 

hgap, vgap : මෙමහින් සඳහන් කරනුයේ components අතර horizontal gap එක සහ vertical gap එකයි මෙය pixels වලින් ලබාදිය යුතුය.

දැන් අපි BorderLayout එක යොදාගෙන සරල චිත්‍රකමුහුනතක් (GUI )සකසන අයුරු බලමු.

Code:

import java.awt.BorderLayout;
import javax.swing.*;

public class BorderLayoutDemo extends JFrame{

 public BorderLayoutDemo(){
  setTitle("BorderLayout Demo");  
  JPanel myPanel=new JPanel();
  myPanel.setLayout(new BorderLayout(5,5));
  //creating JButton objects
  JButton btn1=new JButton("North");
  JButton btn2=new JButton("East");
  JButton btn3=new JButton("South");
  JButton btn4=new JButton("West");
  JButton btn5=new JButton("Center");
  //adding JButton objects to the panel
  myPanel.add(btn1,BorderLayout.NORTH);
  myPanel.add(btn2,BorderLayout.EAST);
  myPanel.add(btn3,BorderLayout.SOUTH);
  myPanel.add(btn4,BorderLayout.WEST);
  myPanel.add(btn5,BorderLayout.CENTER);

  this.add(myPanel);
  this.pack();
  this.setDefaultCloseOperation(3);
  this.setVisible(true);
 }

 public static void main(String args[]){
  new BorderLayoutDemo();
 }
}

output:

GridLayout

මෙම layout එක බොහෝ දුරට FlowLayout එකට සමානය නමුත්  components place කරනුයේ සමාන cell sizes ඇති virtual grid එකක් තුලටය. මෙහිදී අදාල component එකෙහි preffered size එක නොසලකා හැරේ.

Constructor: 

GridLayout(int rows, int cols, int hgap, int vgap) ;

rows, cols : මෙමගින් දැක්වෙන්නේ components add කරනු ලබන virtual grid එකෙහි rows සහ columns ප්‍රමාණයයි.

hgap, vgap : මෙමහින් සඳහන් කරනුයේ components අතර horizontal gap එක සහ vertical gap එකයි මෙය pixels වලින් ලබාදිය යුතුය.
Code:

import java.awt.GridLayout;
import javax.swing.*;

public class GridLayoutDemo extends JFrame{

 public GridLayoutDemo(){
  setTitle("GridLayoutDemo Demo");  
  JPanel myPanel=new JPanel();
  myPanel.setLayout(new GridLayout(2,3,5,5));
  //creating JButton objects
  JButton btn1=new JButton("Component1");
  JButton btn2=new JButton("Component2");
  JButton btn3=new JButton("Component3");
  JButton btn4=new JButton("Component4");
  JButton btn5=new JButton("Component5");
  JButton btn6=new JButton("Component6");
  //adding JButton objects to the panel
  myPanel.add(btn1);
  myPanel.add(btn2);
  myPanel.add(btn3);
  myPanel.add(btn4);
  myPanel.add(btn5);
  myPanel.add(btn6);

  this.add(myPanel);
  this.pack();
  this.setDefaultCloseOperation(3);
  this.setVisible(true);
 }

 public static void main(String args[]){
  new GridLayoutDemo();
 }
}

output:

අපි ඉහත සාකච්ඡා කල layout managers කිහිපය GUI සෑදීමේදී බහුල වශයෙන් යෙදේ.

වඩාත් සංකීර්ණ GUI සෑදීම
මෙහිදී සිදු කෙරෙනුයේ Layouts කිහිපයක් සංයුක්ත කොට කොට භාවිතා කිරීමය. Panel objects කිහිපක් සුදුසු පරිදි යෙදවීමෙන් අපට වඩාත් සංකීර්ණ GUI සකසාගත හැකිය.
දැන් අපි Windows calculator එකෙහි අනුරුවක් අප ඉගෙනගත් LayoutManagers යොදාගෙන සෑදීමට උත්සාහ කරමු.
Output:

code:

import java.awt.*;
import javax.swing.*;

public class ComplexGUIDemo extends JFrame{

 public ComplexGUIDemo(){
  //this.setLayout(new GridLayout(3,1));
  this.setLayout(new FlowLayout(FlowLayout.RIGHT));
  //main panels
  JPanel txtPanel=new JPanel();
  JPanel numPanel1=new JPanel();
  JPanel numPanel2=new JPanel();
  //sub panels of numPanel2
  JPanel numPanel2Sub1=new JPanel();
  JPanel numPanel2Sub2=new JPanel();
  
  JTextField textBox=new JTextField("0",33);
  textBox.setHorizontalAlignment(JTextField.RIGHT);
  txtPanel.setLayout(new GridLayout(1,1));
  txtPanel.add(textBox);
  
  numPanel1.setLayout(new FlowLayout(FlowLayout.RIGHT));
  JButton btnbacksp=new JButton("Backspace");
  JButton btnce=new JButton("CE");
  JButton btnc=new JButton("C");
  numPanel1.add(btnbacksp);
  numPanel1.add(btnce);
  numPanel1.add(btnc);
  
  numPanel2Sub1.setLayout(new GridLayout(4,1,5,5));
  JButton btnMC=new JButton("MC");
  JButton btnMR=new JButton("MR");
  JButton btnMS=new JButton("MS");
  JButton btnMPl=new JButton("M+");
  numPanel2Sub1.add(btnMC);
  numPanel2Sub1.add(btnMR);
  numPanel2Sub1.add(btnMS);
  numPanel2Sub1.add(btnMPl);
  
  numPanel2Sub2.setLayout(new GridLayout(4,5,5,5));
  JButton btn7=new JButton("7");
  JButton btn8=new JButton("8");
  JButton btn9=new JButton("9");
  
  JButton btndv=new JButton("/");
  JButton btnsqrt=new JButton("sqrt");
  numPanel2Sub2.add(btn7);
  numPanel2Sub2.add(btn8);
  numPanel2Sub2.add(btn9);
  numPanel2Sub2.add(btndv);
  numPanel2Sub2.add(btnsqrt);
  
  JButton btn4=new JButton("4");
  JButton btn5=new JButton("5");
  JButton btn6=new JButton("6");
  
  JButton btnmul=new JButton("*");
  JButton btnperc=new JButton("%");
  numPanel2Sub2.add(btn4);
  numPanel2Sub2.add(btn5);
  numPanel2Sub2.add(btn6);
  numPanel2Sub2.add(btnmul);
  numPanel2Sub2.add(btnperc);
  
  JButton btn1=new JButton("1");
  JButton btn2=new JButton("2");
  JButton btn3=new JButton("3");
  
  JButton btnmin=new JButton("-");
  JButton btn1bx=new JButton("1/x");
  numPanel2Sub2.add(btn1);
  numPanel2Sub2.add(btn2);
  numPanel2Sub2.add(btn3);
  numPanel2Sub2.add(btnmin);
  numPanel2Sub2.add(btn1bx);
  
  JButton btn0=new JButton("0");
  JButton btnPM=new JButton("+/-");
  JButton btnpt=new JButton(".");
  
  JButton btnpl=new JButton("+");
  JButton btneq=new JButton("=");
  numPanel2Sub2.add(btn0);
  numPanel2Sub2.add(btnPM);
  numPanel2Sub2.add(btnpt);
  numPanel2Sub2.add(btnpl);
  numPanel2Sub2.add(btneq);
  
  numPanel2.setLayout(new FlowLayout());
  numPanel2.add(numPanel2Sub1);
  numPanel2.add(numPanel2Sub2);
  
  this.add(txtPanel);
  this.add(numPanel1);
  this.add(numPanel2);
  
  this.setTitle("My Calculator");
  this.setDefaultCloseOperation(3);
  this.setVisible(true);
  this.setSize(390,235);
 }

 public static void main(String args[]){
  new ComplexGUIDemo();
 }
}

GUI සම්බන්ද තවත් කරුණු අපි ඉදිරි පාඩම්වලදී සාකච්ඡා කරමු.

මෙම පාඩමට සම්බන්ද source codes බාගත කරගැනීම සඳහා සඳහා පහත ලින්ක් එක භාවිතා කරන්න.