Layout manager trong C sharp

LAYOUT MANAGER TRONG C SHARP. 26/08/2007 11:07 PM Bất cứ khi nào người lập trình ngồi xuống thiết kế một giao diện, anh ta sẽ phải đối mặt với một số vấn đề liên quan đến việc thiết kế: yêu cầu thẩm mỹ, khả năng mở rộng, có thể chuyển đổi kích thước và dễ chỉnh sửa... Layout managers sẽ giúp bạn giải quyết những vấn đề đó bằng việc thiết lập những kích cỡ, vị trí của các đối tượng table layout (bố cục bảng). Chèn các thành phần mà layout quản lý, tất cả các layout đều có khả năng mở. Trong lập trình Java, chúng ta đã quá quen với những khái niệm về quản lý Layout. Tuy nhiên các lập trình viên khi chuyển từ các ngôn ngữ lập trình khác sang C Sharp, đều cần phải có thời gian làm quen với chúng. Nếu bạn bắt đầu từ nền tảng Java, bạn nên tìm hiểu sự khác nhau giữa cách quản lý Layout trong Java và sự thực thi chúng trong C Sharp. Nếu bạn vẫn chưa quen với cách quản lý Layout thì hãy bắt đầu tìm hiểu từ cơ bản. 1. Layout Manager là gì? - Là bất kì cái gì có thể quyết định vị trí và kích cỡ của các đối tượng Bố cục bảng và cũng có thể chính là Bố cục bảng. Chúng có thể được sử dụng trong mọi tình huống, tuy nhiên chủ yếu chúng được dùng trong Giao diện đồ họa người dùng (GUI - Graphical User Interfaces). Những ai đã từng biết lập trình đều có thể nhận biết được sự rắc rối của nó. Những năm gần đây người ta đã phát triển một số công cụ hỗ trợ, hầu hết đều được viết bằng ngôn ngữ C++, làm cho việc thiết kế giao diện trở nên dễ dàng hơn. Nhưng cho dù có những công cụ tinh vi như vậy thì Các GUIs vẫn là một vấn đề phức tạp. 2. Layout Manager giữa Java và C Sharp: - Có 2 điểm khác biệt giữa Layout Manager trong Java và Thực Thi Layout Manager trong C Sharp. - Thứ Nhất: trong Java, Layout Manager được loại bỏ hoàn toàn trong khu vực GUIs. Hay nói theo cách khác, những thứ duy nhất mà có thể được quản lý bởi Layout Manager trong Java là các thành phần của chúng (Components). Còn Trong C Sharp, Bất cứ cái gì mà thực thi giao diện Bố cục thì đều có thể được quản lý. Điều này mở thêm những khả năng tương tác thú vị trong khu vực đồ họa, thiết kế bản đồ... - Sự khác biệt thứ 2 liên quan đến điều đầu tiên: Sự thực thi Layout Managers trong Java không được gắn liền với các đối tượng GUIs nhưng nó lại là khái niệm trừu tượng đối với việc sắp xếp các bố cục bảng, điều này có thế có nhiều Layout Manager cho một khu vực riêng biệt của điều khiển Cha. Bạn có thể khoanh một vùng chữ nhật đặc biệt trong điều khiển Cha và thao tác Layout Manager, đưa các thành phần điều khiển con cho nó. Hơn nữa, với những thao tác chuẩn về Layout Manager mà bạn biết trong Java sẽ mang lại cho bạn những sức mạnh kì lạ trong việc thiết kế giao diện. 3. Thư viện Layout: - Từ sự thực thi các Layout Manager mà tôi giới thiệu trong bài này, ta thấy thư viện Layout này khá quen với các nhà lập trình Java quen thuộc, và hy vọng sẽ dễ hiểu đối với những người mới bắt đầu. Cơ bản chỉ xung quanh 2 Giao diện: ILayoutable và ILayoutManager mà kế thừa từ ILayoutable. Phần còn lại của thư viện bao gồm sự thực thi của 2 giao diện trên đối với các vấn đề của việc thiết kế giao diện. + Control Box: Về cơ bản là những cấu trúc điều khiển Layout và làm việc như lớp điều khiển đóng gói cơ bản. + ContainerBox: Được kế thừa từ ControlBox, nhưng nó có thể chèn thêm các ControlBox và sắp xếp chúng. + AreaPane: Được kế thừa từ ContainerBox, nhưng hoạt động như một điều khiển cấp độ cao. Nó có một khung hình chữ nhật, trong đó nó quản lý các điều khiển khác nhau mà mới chèn thêm vào. + RezizeablePane: được kế thừa từ AreaPane. Điều khác nhau duy nhất là nó có thể thay đổi kích cỡ của các đối tượng con trong điều khiển cha. Nó cũng cung cấp thêm một số Layout mẫu trong thư viện: BorderLayout: Bao gồm 5 đối tượng Layoutable khác nhau, mỗi đối tượng tương ứng với các hướng Bắc, Nam, Đông, Tây và một đối tượng ở giữa. Tất cả những thành phần về kích cỡ đều được nén theo chiều của các hướng, Bắc và Nam cao bằng chiều thẳng đứng, rộng bằng chiều ngang có thể. Còn Đông và Tây thì ngược lại, có chiều rộng theo chiều ngang và chiều dọc theo chiều thẳng đứng. Đối tượng Layoutable trung tâm chiếm tất cả khoảng trống còn lại. GridLayout: Gồm một số các dòng, các cột và tạo thành một các lưới(Grid) để người sử dụng có thể chèn các điều khiển vào. Mỗi một thành phần trong Grid được tạo với cùng kích cỡ và được sắp xếp từ trái qua phải theo thứ tự được chèn vào. FlowLayout: Chèn các điều khiển theo dòng nằm ngang. Mỗi khi dòng đó quá rộng với độ rộng của Vùng chứa (Container), thì nó sẽ bắt đầu một dòng mới. Nó có thể được định dạng theo lề trái, phải và giữa theo vùng chứa. Ảnh trên là một ví dụ về phát triển GUI sử dụng thư viện Layout. Đoạn mã sau thể hiện việc sắp xếp các điều khiển. public class CalculatorForm : Form { public CalculatorForm() { Size = new Size(200, 250); Text = "Calculator"; myCalculator = new Calculator(); //Đây sẽ là khung có cấp cao nhất mà tất cả các điều khiển khác sẽ được chèn vào. //Và cũng có thể thay đổi kích cỡ theo. AreaPane controlPane = new ResizeablePane(this, ClientRectangle, new BorderLayout()); myTextBox = new TextBox(); myTextBox.Text = "0"; // Chú ý rằng: Với các điều khiển được chèn vào khung, các ContainerBoxes sẽ. //Chèn tất cả các điều khiển mà gắn với chúng một cách tự động. controlPane.Add(myTextBox, BorderLayout.Direction.North); Panel p = new Panel(); //Mỗi khi các buttonPane có các điều khiển khách thêm vào nó. //Nó sẽ tự đóng gói trong một ContainerBox. ContainerBox buttonPane = new ContainerBox(p); addButtons(buttonPane); Button clearB = new Button(); clearB.Text = "Clear"; clearB.Click += new EventHandler(clear); controlPane.Add(clearB, BorderLayout.Direction.South); controlPane.Add(buttonPane, BorderLayout.Direction.Center); } private void addButtons(ContainerBox pane) { pane.layoutManager = new GridLayout(4, 3); for(int i=1; i<10; i++){ Button b = getDigitButton(i); pane.Add(b); } Button zero = getDigitButton(0); Button plus = getButton("+"); Button minus = getButton("-"); plus.Click += new EventHandler(action); minus.Click += new EventHandler(action); pane.Add(plus); pane.Add(zero); pane.Add(minus); } // Những hàm riêng sẽ gọi cac Contructor. //... }