1 Bùi Việt Dũng - Motaz Abdel Azeem Bắt đầu lập trình với Object Pascal Phần 3: Giao diện người dùng thân thiện - Cách tạo Unit nâng cao - Xây dựng giao diện đẹp. - Làm việc với nhiều cửa sổ. Giới thiệu tác giả bản tiếng Anh: Motaz Abdel Azeem Người Su-đăng, học tại Đại học Khoa học Công nghệ Su-đăng vào năm 1991 và học Pascal và Delphi tại đó. Anh hiện giờ là lập trình viên Bản quyền Bản tiếng Anh Bản tiếng Việt This work is licensed under the Creative Commons Attribution - NonCommercial - ShareAlike 3.0 Việt Nam License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/vn/. Giới thiệu Giao diện người dùng thân thiện (GUI) là một giao diện sử dụng các hình ảnh đồ họa. Nó bao gồm cửa sổ, nút bấm, hộp thoại, trình đơn, hộp đánh dấu, Người dùng sẽ dễ dàng sử dụng chương trình với giao diện này hơn. GUI được dùng trong chương trình kế toán, hệ điều hành, trò chơi và các công cụ phát triển phần mềm như Lazarus, và nhiều chương trình khác. Chương trình GUI đầu tiên Để tạo một chương trình GUI, ta vào thanh trình đơn của Lazarus, rồi làm như sau: Sau đó lưu lại chương trình luôn bằng cách Chúng ta có thể tạo một thư mục, ví dụ firstgui, để lưu dự án vào. Sau đó ta nên lưu thư viện chính, ví dụ, main.pas, rồi ta chọn tên dự án, ví dụ firstgui.lpi. Trong thư viện chính, ta nhấn F12 để thấy giao diện chương trình đang thiết kế. Chương trình có giao diện như sau: Nhưng khi chạy chương trình, bạn sẽ có cửa sổ như sau. 2 Sau đó, ta đóng chương trình để quay trở về màn hình thiết kế Sau đó, ta kéo thả một phím bấm từ thanh đối tượng cơ bản vào cửa sổ. Chúng ta có thể xem cấu tạo phím bấm (như tên hiển thị, diện tích, ) trong cửa sổ Object Inspector. Nếu cửa sổ không xuất hiện, vào Window/Object Inspector bằng phím F11. Màn hình cửa sổ như sau: 3 Chú thích: Properties: Cấu tạo Action: Hành động Align: Căn Anchors: Di chuyển AutoSize: Tự động điều chỉnh (diện tích) BidiMode: Chưa có nghĩa tiếng Việt phù hợp BorderSpacing: Cách lề Cancel: Hủy Caption: Tên hiển thị Color: Màu Constraints: Hạn chế Cursor: Con trỏ Default: Mặc định Chúng ta cần biết chắc chắn rằng mình chọn nút bấm hay cửa sổ trước khi sửa đổi bất cứ thành phần cấu tạo nào. Lưu ý rằng Inspector có nhiều tab, tab Cấu tạo và tab Sự kiện (Event). Mỗi tab có cách hiển thị khác nhau. Sau đó ta có thể đổi tên hiển thị thành Click như trong hình trên. Sau đó, chọn tab Sự kiện để hiển thị trang Sự kiện. Chọn sự kiện OnClick, chương trình sẽ tạo các dòng lệnh như sau ở thư viện chính. Sau đó ta điền vào như sau: 4 Sau đó, khi chạy chương trình, nhấn vào nút, ta thấy chương trình hiển thị hộp thoại có lời chào của mình. Trong Linux, ta thấy một chương trình ở trong cùng thư mục bạn viết dự án. Tương tự, trong Windows, ta thấy tệp firstgui.exe. Trong ví dụ trước, ta thấy được các vấn đề quan trọng: 1, Tệp chương trình chính: Được lưu trữ trong tệp firstgui.lpi. Chúng ta có thể xem mã nguồn tại Project/Source.Đoạn mã đó như sau: Chúng ta có thể điều chỉnh đoạn mã này cho các mục đích cần thiết, nhưng phải rất cẩn thận. 2, Thư viện chính: Thư viện đặc biệt này sẽ chứa các lệnh được dùng trong ứng dụng. Đây là mã của ứng dụng trên sau khi viết sự kiện OnClick: 5 Trong phần thư viện chính, ta thấy khai báo kiểu TForm1 như một bản ghi, nhưng ở đây ta gọi là lớp. Ta sẽ nói về chuyện này sau. Ta còn thấy Button1 được khai báo trong TForm1. Chúng ta có thể hiển thị mã thư viện bằng cách nhấn Ctrl+F12 rồi chọn thư viện. 3, Object Inspector/ Properties: Trong tab này, ta có thể sửa đổi tên hiển thị, kích cỡ, màu sắc, Cho đối tượng. Mỗi đối tượng được coi là một bản ghi, và mỗi thành phần là trường của bản ghi. 4, Object Inspector/ Events: Trong tab này, ta có thể thêm phản ứng cho một hành động như On Click cho phím bấm, Key Press để chuyển con trỏ tới một ô hay Double Click cho một nhãn. Khi ta thêm một hành động, Lazarus sẽ thêm vào một mẫu và ta chỉ việc viết các câu lệnh Pascal giữa hai phần begin end, ví dụ như sau: Thủ tục này được gọi khi người dùng nhấn chuột vào nút và được gọi là móc hành động. Chương trình GUI thứ hai Trong ví dụ này, người dùng sẽ nhập tên vào ô trống, khi nhấn nút thì chương trình sẽ đưa ra một lời chào có tên của họ trong đó. Để viết chương trình này ta phải: - Tạo một chương trình mới và lưu nó thành inputform. Lưu thư viện chính main.pas, rồi kéo các đối tượng sau vào trong cửa sổ: Bố cục đối tượng như sau: 6 Nhập mã sau vào móc hành động On Click: Sau đó ta chạy chương trình rồi nhấn nút. Trong ví dụ trước, ta dùng trường Text để đọc xâu trong hộp edName mà người dùng nhập vào. Đó là các nhận xâu từ người dùng trong môi trường đồ họa hiện đại. Chúng ta cũng đã dùng trường Caption của nhãn laYourName để hiển thị thông điệp. Đây coi như là lệnh writeln trong GUI. Chương trình Danh sách Trong chương trình này, chúng ta sẽ quản lí một danh sách, bao gồm thêm, xóa, sửa,. Các mục trong danh sách. Để tạo chương trình này, ta làm như sau: - Đặt 4 nút, 1 ô nhập, và một hộp danh sách vào cửa sổ - Đổi tên đối tượng trong chương trình thành - Đổi tên hiển thị thành như sau. - Viết các móc hành động On Click như sau: 7 Nhấn nút Add, sẽ có một mục mới trong danh sách có tên như trong hộp. Nhấn Delete, chương trình sẽ xóa các mục được chọn. Nhấn Clear, tất cả các mục bị xóa. Nhấn Close, chương trình đóng lại. NotePad Trong ví dụ này, ta sẽ học cách tạo một ứng dụng giống NotePad của Windows. Làm như sau - Đặt 1 thanh trình đơn, 1 ô nhớ (TMemo, căn Align thành alCilent và đổi thanh kéo ScrollBars thành ssBoth), hộp mở TOpenDialog và hộp lưu TSaveDialog ở tab Dialog. - Nhấp đôi vào trình đơn, tạo trình đơn con File và trình đơn “cháu” Open File, Save File và Close. Cửa sổ sẽ trông giống như sau: Móc hành động của Open File như sau: Móc hành động của Save File như sau: 8 Móc hành động của Close: Sau khi chạy chương trình, ta có thể tạo bất cứ kiểu tệp ASCII nào, kể cả tệp .pas: Chương trình Bản tin Bây giờ ta có thể viết chương trình lưu giữ thông tin như sau: - Tạo chương trình mới tên gnews - Tạo 2 nút TButton - Tạo hộp văn bản TEdit - Tạo hộp nhớ TMemo - Thay đổi cấu tạo các đối tượng như sau: Và ta sẽ có một cửa sổ như sau: 9 Móc hành động On Click của Add Title Móc hành động On Click của Save Móc hành động On Close của cửa sổ Móc hành động On Create của cửa sổ để nhận tin tức đã có từ trước đó Chương trình có nhiều cửa sổ 7 bước đơn giản 1, Tạo một chương trình 2, Lưu lại cả chương trình 3, Nhấn File/ New Form. Bạn nhận được một thư viện thứ hai. 4, Đổi các cấu tạo cho phù hợp 5, Thiết kế cửa sổ chính 6, Thêm dòng này vào phần implementation Thêm dòng này vào móc hành động phù hợp . sổ. Giới thiệu tác giả bản tiếng Anh: Motaz Abdel Azeem Người Su-đăng, học tại Đại học Khoa học Công nghệ Su-đăng vào năm 1991 và học Pascal và Delphi tại đó. Anh hiện giờ là lập trình viên Bản quyền Bản. 1 Bùi Việt Dũng - Motaz Abdel Azeem Bắt đầu lập trình với Object Pascal Phần 3: Giao diện người dùng thân thiện - Cách tạo Unit nâng cao - Xây dựng giao diện đẹp. - Làm. Commons Attribution - NonCommercial - ShareAlike 3. 0 Việt Nam License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa /3. 0/vn/. Giới thiệu Giao diện người dùng thân