28
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM SINH VIÊN THỰC HIỆN: 1. BÙI TÁ HẬU 07520467 2. PHẠM VIỆT SƠN 07520496 ĐỀ TÀI GIỮA KÌ. LAYOUT MANAGER. MÔN:LẬP TRÌNH JAVA.

Thuyet Trinh Layout Manager

  • Upload
    phamvis

  • View
    546

  • Download
    2

Embed Size (px)

Citation preview

Page 1: Thuyet Trinh Layout Manager

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

SINH VIÊN THỰC HIỆN:

1. BÙI TÁ HẬU 075204672. PHẠM VIỆT SƠN 07520496

ĐỀ TÀI GIỮA KÌ.

LAYOUT MANAGER.

MÔN:LẬP TRÌNH JAVA.

Page 2: Thuyet Trinh Layout Manager

MỤC LỤC:

I.LAYOUT MANAGER.

I.1 CÁC LOẠI LAYOUT MANAGER. 1. FlowLayout. 2. BorderLayout. 3. CardLayout. 4. GridLayout. 5. GridBagLayout. 6. BoxLayout. 7. GroupLayout. 8. NullLayout.

II. THAM KHẢO.

Page 3: Thuyet Trinh Layout Manager

I.Layout Manager ?

Layout manager được cung cấp để sắp xếp các GUI component trong 1 container cho những mục đích trình bày. Các lập trình viên có thể sử dụng các layout manager cho những khả năng bố trí cơ bản thay vì xác định chính xác vị trí và kích thước của mỗi GUI component. Chức năng này cho phép các lập trình viên tập trung trên cơ sở look-and-feel và cho phép các layout manager xử lý hầu hết các chi tiết bố trí. Tất cả các layout manager implement interface LayoutManager(trong gói java.awt). method setLayout của lớp Container có một đối tượng implement interface LayoutManager làm tham số.

I.1 Các loại layout manager:

1) Flow layout:- FlowLayout là layout manager mà trong đó các thành phần được sắp xếp từ góc

trái trên đến góc phải dưới màn hình.Khi một số thành phần được tạo ,chúng được sắp xếp theo hàng từ trái sang phải.

- Các tham số kèm theo: int align : vị trí liên kết .

Giá trị của align phải là một trong các giá trị sau : FlowLayout.LEFT, FlowLayout.RIGHT, FlowLayout.CENTER, FlowLayout.LEADING, FlowLayout.TRAILING.

int hgap : khoảng cách hở từ lề vào theo chiều ngang, giữa các thành phần và các biên của container(tính bằng unit)

int vgap: khoảng cách hở từ trên xuống theo chiều dọc ,giữa các thành phần và các biên(tính bằng unit)

- Cú pháp: FlowLayout() : Tạo FlowLayout mặc định FlowLayout(int align) :Tạo FlowLayout với align đã biết,mặc định vgap

= hgap = 5 unit FlowLayout(int align,int hgap,int vgap):Tạo FlowLayout với align ,

hgap ,vgap đã biết- Demo:

- Code:

Page 4: Thuyet Trinh Layout Manager

Trong flowlayout.java:

package frame;

import java.awt.*;

public class flowlayout extends Frame

{

Button a = new Button("button 1");

Button b = new Button("button 2");

Button c = new Button("button 3");

public frame(String title)

{

super(title);

FlowLayout l1 = new FlowLayout(FlowLayout.LEFT);

setLayout(l1);

add(a);

add(b);

add(c);

}

}

Trong main.java:

package main;

import frame.*;

public class main

{

public static void main(String[] args)

{

frame t = new frame("flow layout");

t.setSize(400,400);

Page 5: Thuyet Trinh Layout Manager

t.show();

}

}

2) BorderLayout:- BorderLayout là layout manager mặc định của frame.- Các tham số kèm theo:

Bố trí các component theo dạng ra biên của khung .Những thành phần này được đặt ở 5 vị trí : EAST,WEST,SOUTH,NORTH,CENTER

EAST : đặt phía bên phải của khung(container) WEST : đặt phía bên trái của khung SOUTH :đặt ở phía dưới của khung NORTH :đặt ở đỉnh của khung CENTER :đặt ở giữa của khung

Nếu frame chỉ có 1 component và đặt nó ở vị trí CENTER thì component này phủ kín frame

- Cú pháp: BorderLayout b1 = new BorderLayout(); setLayout(b1); add(componentname,BorderLayout.NORTH);

Tương tự cho EAST,WEST,SOUTH,CENTER

Khi thay đổi kích thứơc của container ,các component vẫn giữ nguyên vị trí tương đối của chúng . Các thành phần vẫn giữ nguyên vị trí tương đối của chúng kể cả khi container bị thay đổi kích thước. Các thành phần được đặt trong vùng ‘North’, ‘South’ được dàn nằm ngang trong khi đó các thành phần đặt trong vùng ‘East’ và ‘West’ lại được dàn thẳng đứng. Các thành phần được đặt trong vùng ‘center’ sẽ được dàn đều vào những khu vực nằm giữa của container.

- Demo:

Page 6: Thuyet Trinh Layout Manager

- Code:

Trong borderlayout.java:

package frame;

import java.awt.*;

public class borderlayout extends Frame

{

Button a = new Button("NORTH");

Button b = new Button("WEST");

Button c = new Button("SOUTH");

Button d = new Button("EAST");

Button e = new Button("CENTER");

public borderlayout(String title)

{

super(title);

setLayout(new BorderLayout());

add(a,BorderLayout.NORTH);

add(d,BorderLayout.EAST);

add(b,BorderLayout.WEST);

add(c,BorderLayout.SOUTH);

add(e,BorderLayout.CENTER);

Page 7: Thuyet Trinh Layout Manager

}

}

Trong main.java:

package main;

import frame.*;

public class main

{

public static void main(String[] args)

{

borderlayout t = new borderlayout("borderlayout");

t.setSize(400,400);

t.show();

}

}

3) CardLayout:- CardLayout bố trí các component thành từng lóp như các quân bài trong bộ bài.Để

chứa các component ta thường dùng các Panel.Tại một thời điểm chỉ có 1 panel hiện hành(quân bài trên cùng)

Đầu tiên ,chúng ta bố trí tập hợp các thành phần được yêu cầu trên các panel tương ứng .Mỗi panel sẽ được bố trí vào các layout khác nhau.

Có một panel chính sẽ chứa các panel này.Các hàm trong frame sẽ điều khiển các panel phụ thông qua panel chính

- Cú pháp:

Chúng ta thiết lập layout của panel chính là CardLayout :

CardLayout card = new CardLayout();

Panel 1 với Layout1 và các component

Panel 2 với Layout2 và các componen

Panelmain với CardLayout

Frame

Cơ chế điều khiển

Page 8: Thuyet Trinh Layout Manager

panelmain.setLayout(card);

Bước kế tiếp là thêm các panel khác vào panel chính

panelmain.add(“panelone”,panelone);

panelmain.add(“paneltwo”,paneltwo);

Phương thức add sử dụng 2 tham số.Tham số đầu tiên là một String làm nhãn của panel,tham số thứ hai là tên đối tượng panel.

Hoặc có thể sử dụng trực tiếp

panelmain.add(panelone);

- Demo:

- Code:

Trong cardlayout.java:

package frame;

import java.awt.*;

public class cardlayout extends Frame

{

Label l1,l2;

Panel p1,p2,p3;

CardLayout c1;

public cardlayout(String title)

{

super(title);

c1 = new CardLayout();

p1 = new Panel();

Page 9: Thuyet Trinh Layout Manager

p1.setLayout(c1);

l1 = new Label("CardLayout 1");

l2 = new Label("cardlayout 2");

p2 = new Panel();

p2.add(l1);

p3 = new Panel();

p3.add(l2);

p1.add("2",p2);

p1.add("3",p3);

add(p1);

}

}

Trong main.java:

package main;

import frame.*;

public class main

{

public static void main(String[] args)

{

cardlayout t = new cardlayout("cardlayout");

t.setSize(400,400);

t.show();

}

}

4) GridLayout Manager- Bố trí các component thành dạng lưới với các dòng và các cột đều nhau.Mỗi

khung lưới nên chứa ít nhất 1 thành phần- Cú pháp:

Page 10: Thuyet Trinh Layout Manager

Tạo layout mặc định là 1x1:

GridLayout gl = new GridLayout();

Tạo layout với số dòng và số cột

GridLayout gl = new GridLayout(int row,int col);

add(componentname);

Với row :số dòng

col :số cột

Chú ý : các component được add vào theo thứ tự từ trái sang phải và từ trên xuống dưới

- Demo:

- Code:

Trong gridlayout.java:

package frame;

import java.awt.*;

public class gridlayout extends Frame

{

Button bt[];

String st[]={"1","2","3","4","5","6","7","8","9"};

public gridlayout(String title)

{

super(title);

Page 11: Thuyet Trinh Layout Manager

setLayout(new GridLayout(3,3));

bt = new Button[st.length];

for(int i = 0;i<st.length;i++)

{

bt[i] = new Button(st[i]);

add(bt[i]);

}

}

}

Trong main.java:

package main;

import frame.*;

public class main {

public static void main(String[] args)

{

gridlayout t = new gridlayout("gridlayout");

t.setSize(400,400);

t.show();

}

}

5) GridBagLayout Manager- GridBagLayout là layout dạng lưới cho phép 1 component chiếm 1 số ô kề nhau

theo cả 2 chiều.Nó hiệu quả và phức tạp hơn các layout khác.Nó đặt chính xác component vào frame.Các thành phần trong GridBagLayout không có cùng kích thước

Page 12: Thuyet Trinh Layout Manager

Nó tương tự như GridLayout Manager khi các thành phần được sắp xếp trong lưới theo dòng và cột.Tuy nhiên,thứ tự đặt các thành phần không theo nguyên tắc từ trái sang phải và từ trên xuống dưới

- Cú pháp:

GridBagLayout gbl = new GridBagLayout();

FrameName.setLayout(gbl);

PanelName.setLayout(gbl);

Tuy nhiên ,1 component vào một vị trí nhưng không ở 1 ô mà trải dài trên nhiều ô kề nhau.Một đối tượng thuộc lớp GridBagConstraints sẽ giải quyết việc này.Lớp GridBagConstraints nắm giữ tất cả thông tin về kích thứơc ,vị trí và layout của mỗi component để lớp GridBagLayout cần để bố trí và định kích thước mỗi thành phần.

Danh sách các biến thành viên của lớp GridBagConstraints

gridx,gridy: ô sẽ đặt component vào.Khi thiết lập giá trị của gridx là “GridBagConstraints.RELATIVE” thì thành phần được thêm sẽ nằm ở vị trí bên phải của thành phần cuối cùng

gridwidth,gridheight:số ô sẽ phủ theo 2 chiều khi add component vào ô <gridx,gridy>

weightx,heighty :sự phân phối của các khỏang trống trong GridBagLayout hay khỏang hở của lưới.Giá trị mặc địng cho các biến này là 0

anchor:cách sắp xếp các thành phần hoặc vị trí đặt component.Giá trị mặc định là giữa cell(CENTER).Các thành viên dữ liệu tĩnh có thể được sử dụng: GridBagConstraints.NORTH GridBagConstraints.EAST GridBagConstraints.WEST GridBagConstraints.SOUTH GridBagConstraints.NORTHEAST

Page 13: Thuyet Trinh Layout Manager

GridBagConstraints.SOUTHEAST GridBagConstraints.NORTHWEST GridBagConstraints.SOUTHWEST

fill :xác định kiểu đặt khi component có kích thước lớn hơn ô sẽ được đặt vào.Mặc định kích thước thành phần lúc đó không thay đổi(NONE).Các hằng đượcdùng: GridBagConstraints.NONE:Mặc định không thay đổi GridBagConstraints.HORIZONTAL:Tăng chiều rộng của

component theo chiều ngang để khớp với vùng GridBagConstraints.VERTICAL :Tăng chiều dài của componet

theo chiều dọc để khớp với vùng GridBagConstraints.BOTH:Tăng cả 2 chiều để khớp với vùng

insets :đặc tả khỏang hở <top,buttom,left,right> giữa các phần tử được đưa vào,mặc định là 0

- Cú pháp:GridBagConstraints();

GridBagConstraints(int gridx,int gridy,int gridwidth,int gridheight,double weightx,double weighty,int anchor,int fillm,Insets insets);

Kết hợp GridBagLayout và GridBagConstraints

GridBagLayout gbl = new GridBagLayout();

GridBagConstraints gbc = new GridBagConstraints();

Gbl.setConstraints(gbc);

addcomponent(Component c,int row,int col,int nrow,int ncol);

Hàm addcomponent:

void addcomponent (Component c,int row,int col,int nrow,int ncol)

{

gbc.gridx = col;

gbc.gridy = row;//định vị ô sẽ thao tác

gbc.gridwidth = ncol;

gbc.gridheight = nrow;//định vùng tràn

gbl.setConstraints(c.gbc);//ràng buộc c vào lưới thông qua gbc

Page 14: Thuyet Trinh Layout Manager

add(c);

}

- Demo

- Code :

Trong gridbaglayout.java:

package frame;

import java.awt.*;

public class gridbaglayout extends Frame

{

Button b1,b2;

Label l1,l2,l3;

TextField tf1,tf2;

CheckboxGroup cbg;

Checkbox cb1,cb2;

GridBagLayout gbl;

GridBagConstraints gbc;

public gridbaglayout(String title)

{

super(title);

gbl = new GridBagLayout();

setLayout(gbl);

gbc = new GridBagConstraints();

Page 15: Thuyet Trinh Layout Manager

b1 = new Button("Ok");

b2 = new Button("Cancel");

l1 = new Label("Name");

l2 = new Label("Age");

l3 = new Label("Sex");

cbg = new CheckboxGroup();

cb1 = new Checkbox("Male",cbg,false);

cb2 = new Checkbox("Female",cbg,false);

tf1 = new TextField("enter your name");

tf2 = new TextField("age");

gbc.fill = GridBagConstraints.HORIZONTAL;

addcomponent(l1,1,0,1,1);

gbc.fill = GridBagConstraints.HORIZONTAL;

addcomponent(l2,2,0,1,1);

gbc.fill = GridBagConstraints.HORIZONTAL;

addcomponent(l3,4,0,1,1);

gbc.fill = GridBagConstraints.HORIZONTAL;

addcomponent(tf1,0,1,2,1);

gbc.fill = GridBagConstraints.HORIZONTAL;

addcomponent(tf2,2,1,2,1);

gbc.fill = GridBagConstraints.HORIZONTAL;

addcomponent(cb1,4,1,1,1);

gbc.fill = GridBagConstraints.HORIZONTAL;

addcomponent(cb2,4,2,1,1);

gbc.fill = GridBagConstraints.HORIZONTAL;

addcomponent(b1,6,0,1,1);

gbc.fill = GridBagConstraints.HORIZONTAL;

Page 16: Thuyet Trinh Layout Manager

addcomponent(b2,6,2,2,1);

}

public void addcomponent(Component a,int row,int col,int nrow,int ncol)

{

gbc.gridx = col;

gbc.gridy = row;

gbc.gridwidth = ncol;

gbc.gridheight = nrow;

gbl.setConstraints(a, gbc);

add(a);

}

}

Trong main.java

package main;

import frame.*;

public class main

{

public static void main(String[] args)

{

gridbaglayout t = new gridbaglayout("gridbaglayout");

t.setSize(400,400);

t.show();

}

}

6) BoxLayout- BoxLayout là layout trong thư viện javax.swing.Nó đặt các component theo các

dòng và các cột xếp liên tiếp nhau.Có thể nói rằng nó là sự phát triển từ

Page 17: Thuyet Trinh Layout Manager

BorderLayout.Trong BoxLayout thường sử dụng các panel để hiển thị.Nó có thể hiển thị nhiều panel khác nhau.

- Cú pháp: Add BoxLayout vào container

Container.setLayout(new BoxLayout(container,int));

Giá trị int có thể là một trong các giá trị sau:

BoxLayout.PAGE_AXITS :các component được sắp xếp từ trên xuống(mới bắt đầu từ JDK version 1.4)

BoxLayout.LINE_AXITS : các component được sắp xếp từ trái qua phải(mới bắt đầu từ JDK version 1.4)

BoxLayout.X_AXITS : các component được sắp xếp từ trên xuống(cũ trước JDK version 1.4)

BoxLayout,Y_AXITS : : các component được sắp xếp từ trái qua phải(cũ trước từ JDK version 1.4)

Tạo khỏang cách(hở) giữa các container Từ trái sang phải

container.add(firstComponent);

Container.add(Box.createRigidArea(new Dimension(int ,int)));

Sang hai bên theo chiều ngang

container.add(firstComponent);

Container.add(Box.createHorizontalGlue());

Sang hai bên theo chiều dọc

container.add(firstComponent);

Page 18: Thuyet Trinh Layout Manager

Container.add(Box.createVerticalGlue());

Sang hai bên theo chiều dọc và chiều ngang

container.add(firstComponent);Dimension minSize = new Dimension(5, 100);Dimension prefSize = new Dimension(5, 100);Dimension maxSize = new Dimension(Short.MAX_VALUE, 100);container.add(new Box.Filler(minSize, prefSize, maxSize));

Tạo boxlayout trong đó các component được sắp xếp theo chiều từ trái sang phải

Container.add(container,Box.createHorizontalBox());

Tạo boxlayout trong đó các component được sắp xếp theo chiều từ trên sang xuống

Container.add(container,Box.createVerticalBox());

Thay đổi để cho các component thẳng hàng

Component.setAlignmentY(float);

Gía trị float có thể là một trong các giá trị sau : BUTTON/CENTER/LEFT/RIGHT/TOP_ALIGNMENT

- Demo:

Page 19: Thuyet Trinh Layout Manager

- Code:

Trong boxlayout.java:

package frame;

import java.awt.*;

import javax.swing.*;

import javax.swing.Box;

public class boxlayout extends Frame

{

Button b1,b2,b3,b4;

JPanel p1,p2;

public boxlayout(String title)

{

super(title);

b1 = new Button("button 1");

b2 = new Button("button 2");

b3 = new Button("button 3");

b4 = new Button("button 4");

b5 = new Button("button 5");

p1 = new JPanel();

p2 = new JPanel();

p1.setLayout(new BoxLayout(p1,BoxLayout.PAGE_AXIS));

Page 20: Thuyet Trinh Layout Manager

Dimension d1 = new Dimension (50,50);

Dimension d2 = new Dimension (50,50);

Dimension d3 = new Dimension (Short.MAX_VALUE,50);

p1.add(new Box.Filler(d1,d2,d3));

p1.add(b1);

p1.add(Box.createRigidArea(new Dimension(10,5)));

p1.add(b2);

add(p1,BorderLayout.CENTER);

p2.setLayout(new BoxLayout(p2,BoxLayout.LINE_AXIS));

p2.add(b3);

p2.add(b4);

l2.setAlignment(100);

l2.setAlignment(Component.WIDTH);

add(p2,BorderLayout.PAGE_END);

}

}

Trong main.java:

package main;

import frame.*;

public class main

{

public static void main(String[] args)

{

boxlayout t = new boxlayout("boxlayout");

t.setSize(400,400);

t.show();

}

Page 21: Thuyet Trinh Layout Manager

}

7) GROUPLAYOUT.

Là 1 loại layout manager.

Đặc điểm:

1. GroupLayout thực hiện với chiều ngang và chiều dọc 1 cách riêng biệt. Sự sắp xếp được định nghĩa theo mỗi độc lập. chúng ta không cần phải lo lắng về kích thước theo chiều dọc khi xác định bố trí nằm ngang, và ngược lại, là bố trí dọc theo trục từng là hoàn toàn độc lập với bố trí dọc theo trục khác.

2. GroupLayout sử dụng hai loại sắp xếp - tuần tự và song song, kết hợp với thành phần thứ bậc.+ Với sự sắp xếp tuần tự, các thành phần chỉ đơn giản là đặt cái khác, giống như BoxLayout hoặc FlowLayout sẽ làm gì dọc theo một trục. Vị trí của mỗi thành phần được định nghĩa như là tương đối so với thành phần trước đó.+ Cách thứ hai nơi các thành phần song song, trên đầu trang của mỗi khác trong cùng một không gian. Chúng có thể được cơ sở-, đầu, hoặc cuối liên kết dọc theo trục thẳng đứng. Dọc theo trục ngang, chúng có thể được trái, phải, hoặc trung tâm liên kết nếu các thành phần không phải là tất cả cùng một kích cỡ.

3. Grouplayout thêm các khoảng cách giữa các component 1 cách tự động, những khoảng cách này được tính toán tự động dựa theo look-and-feel thực sự. Chúng ta vẫn có thể thêm những tùy chọn khoảng cách.

4. Tất cả các thành phần được lưu giữ trong kích thước mặc định của họ. Không có số tuyệt đối, ngoại trừ list box(trong 1 sroll pane) được thiết lập kích thước ban đầu.

5. Không có những sub-panel được dùng để xây dựng sự sắp xếp này.

Constructor và các method được dùng trong ví dụ.

GroupLayout(Container host) => tạo GroupLayout với Container được chỉ định.Các method trong ví dụ:1. void setAutoCreateGaps(boolean ) : khoảng cách giữa các component có nên được tự

động được tạo hay không.2. void setAutoCreateContainerGap(boolean autoCreate) : khoảng cách giữa các

container và các component nên được thiết lập tự động hay không.3. void setHorizontalGroup(GroupLayout.Group ) :bố trí vị trí và kích thước của các

component theo chiều ngang.4. GroupLayout.SequentialGroup createSequentialGroup() : tạo và trả về

SequencetialGroup.5. void linkSize(Component….components):ép các component được chỉ định cùng kích

thước bất chấp độ ưu tiên của chúng, cực tiểu hay cực đại của chúng.

Page 22: Thuyet Trinh Layout Manager

6. void VerticalGroup(GroupLayout.Group group): thiết lập vị trí và kích thước các component theo chiều dọc.

7. GroupLayout.ParallelGroup createParallelGroup(GroupLayout.Alignment alignment): tạo và trả về 1 sự sắp xếp parallelGroup được chỉ định.

Các lớp đi kèm để thực hiện các thao tác trên:

Class GroupLayout.Group.

Method:

1. GroupLayout.Group addComponent(Component ) : thêm 1 component đến Group.2. GroupLayout.Group addGroup(int size) : thêm 1Group tới Group.

Class GroupLayout.SequentialGroup

Method:

GroupLayout.SequentialGroup addPreferredGap(LayoutStyle.ComponentPlacement type) : thêm 1 thành phần đại diện cho khoảng cách giữa các thành phần ưa thích gần nhất.

8)NULL LAYOUT

Giao diện Không, mục phải được bố trí và sắp xếp bằng tay. Bố trí này chỉ nên được sử dụng nếu cửa sổ sẽ không và không thể thay đổi kích thước, như mục trong cửa sổ sẽ ở lại nơi chúng được đặt.

Page 23: Thuyet Trinh Layout Manager

II. THAM KHẢO:

1. http://java.sun.com/

2. Java™ How to Program, Sixth EditionBy H. M. Deitel -  Deitel & Associates, Inc., P. J. Deitel -  Deitel & Associates, Inc.