Tài liệu Qt Designer và KDevelop­3.0 cho người mới bắt đầu docx

KDevelop giúp chúng ta xây dưng một ứng dụng KDE hoàn chỉnh bằng cách tự động hoá một số khâu như: tạo ra một framework, các file cần thiết, dịch, chạy chương trình… Một dự án KDE sẽ sử

Trong distributionTarball

cvs HEADThuật ngữ

3. Xây dựng chương trình

Khởi tạo project

Tạo framework với KDevelopDùng Qt Designer

KDevelop giúp chúng ta xây dưng một ứng dụng KDE hoàn chỉnh bằng cách tự động hoá một số khâu như: tạo ra một framework, các file cần thiết, dịch, chạy chương trình… Một dự án KDE sẽ 

sử dụng các công cụ autoconf và automake. KDevelop sẽ tạo ra tất cả các file cần thiết cho chúng 

ta (admin directory, Makefile.cvs, Makefile.am, ). 

C hương 2. Yêu cầu

Để làm theo các hướng dẫn trong các chương sau, chúng ta cần có Qt Designer và KDevelop, và các thư viện KDE 3.2.x. Chúng ta sẽ xây dựng một chương trình KDE đơn giản, lấy đầu vào là tên, địa chỉ email và chú thích, sau đó xuất ra một chữ kí (Chương trình Signature Creater). 

Cài đặt Qt D esigner

Trong distribution của bạn

Qt Designer là một phần của gói qt­3.2.x. Nếu bạn có bản Qt cũ hơn thì nên update. Tại thời điểm viết bài này, bản mới nhất của Qt là 3.3.2. 

Tarball hoặc anony m ous cvs

Download tarball ở Trolltech website hoặc dùng cvs theo hướng dẫn ở đây. 

Sau đó phải set QTDIR  như ở trên. Dùng lệnh: 

Dịch KDevelop 3: cần qt­3.1.0 và kdelibs­3.1.0 trở lên. QTDIR  và KDEDIR trỏ tới thư mục cài 2 gói trên. 

Thuật ngữ

• Widget: là một thành phần của giao diện đồ hoạ (như cửa sổ, nút, ô nhập kí tự, …). 

• Layout management: miêu tả cách sắp xếp các widget trong một của sổ. Thông thường, các 

widget được đặt ở một vị trí nhất định. Khi user resize cửa sổ, các widget đó cần phải ở đúng vị trí và thay đổi kích thước cho phù hợp. Linux hỗ trợ tính năng này bằng cách đặt các widget trong layouts. 

• Signal and slot: Signals và slots dung để “liên lạc” giữa các đối tượng. Kĩ thuật signal/slot 

là điểm đặc trưng của Qt. Signals được objects phát ra khi nó thay đổi trạng thái. Slots dùng để nhận các signals, nó chỉ đơn giản là một member function. Nhiều signal có thể liên kết với một slot cũng như một signal có thể liên kết được với nhiều slot. (Xem thêm TrollTech documentation on signals and slots)

C hương 3. Xây dựng chương trình

K hởi tạo project

Tạo fra me work với K D evelop

Framework là cái khung chứa chương trình. Chúng ta sẽ dùng KDevelop để tạo framework. Chạy KDevelop, chọn New Project trong menu Project. Trong cửa sổ Application Wizard chọn C++ ­> KDE ­> Simple KDE Application. Điền  tên chương trình (SigCreate), tên tác giả,  email (như hình 1). 

Click Next. Click Finish. KDevelop sẽ tạo các file cần thiết để dịch project. Ta có thể dung file selector để xem code của 3 files which are main.cpp, sigcreate.cpp and sigcreate.h (hình 2). 

D ù ng Qt D esigner

Qt Designer là công cụ để thiết kế và sinh mã tạo giao diện chương trình. Dùng Qt Designer, có thể sắp xếp các widget, tạo layout một cách hợp lí (xem thêm Qt Designer manual). Qt Designer cũng có code editor nhưng chúng ta sẽ dùng KDevelop để edit và modify code. 

Bây giờ chúng ta sẽ tạo giao diện chương trình bằng Qt Designer. Các form của Qt Designer được save trong các file .ui và dùng chương trình uic để tạo các file .h và .cpp tương ứng (công việc này được KDevelop đảm nhiệm)

C h ú  ý

Mỗi khi add/remove một file trong KDevelop project, Makefile.am sẽ bị thay đổi bởi KDevelop. Ta phải  Run automake & friends sau mỗi thay đổi đó. 

Click the Ok button. The Automake manager dialog then pops up. 

ở đây). Bên phải, quan trọng nhất là Property Editor dialog để điều chỉnh các thuộc tính của widget (resize,  đổi màu, …). Ở giữa là cửa sổ thiết kế. 

C h ú  ý

Sau khi tạo file sigcreatedlg.ui, phải chạy Run Automake & friends và Run configure trước khi build, để chắc chắn là file Makefile.am mới đã được sử dụng. 

Thiết kế giao diện chương trình

Chúng ta sẽ thiết kế một chương trình có giao diện như hình dưới. Đó là một cửa sổ với một số widget để user điền các thông tin cần thiết. Khi thiết kế chương trình ta phải đứng trên quan điểm của user để tạo sự tiện lợi cho user khi sử dụng. 

Chương trình này sẽ tạo ra chữ kí và hiển thị trên màn hình. User điền tên, địa chỉ email và chọn comment. Sau đó click Create! và chương trình sẽ sinh chữ kí trong một MultiLineEdit widget. Click Cancel để thoát khỏi chương trình 

C h ú  ý

Chương trình này chỉ dùng để ví dụ, nó khác xa thực tế. 

• Chọn  trong  ToolBox:   Common   Widgets­>TextLabel   hoặc   trong  menu   Tools­>Display­

>TextLabel; 

• Sau khi vẽ khung cho label, bạn sẽ thấy một dòng text mặc định. 

• Để thay đổi dòng text mặc định đó, double click vào label và viết lại như ý muốn, chẳng hạn: "This program will create an email signature for you. Just fill in the boxes and hit the 

• Cuối cùng, chỉnh lại kích thước label và kéo label lên phía trên của form. Hiện tại ta phải sắp xếp label một cách thủ công. Trong phần sau chúng ta sẽ học kĩ thuật quản lý layout rất 

Để đưa thêm một widget vào form, thông thường phải qua ba bước: chọn, kéo ­ thả và cuối cùng là thay đổi thuộc tính, kích thước của widget. 

Trong Qt Designer một widget có thể đóng vai trò container, chứac các widget khác. Như trong hình dưới, chúng ta có một số label, một số textbox trong một frame. Frame này gọi là Group Box. Tạo Group Box bằng cách chọn trong Toolbox dialog­>Containers hoặc menu Tools­>Containers­

>GroupBox. Vẽ frame như làm với label ở trên. Trong Property Editor, gõ “Details”  trong trường title. 

­> Views ­> Object Explorer) các label vừa tạo trở thành các widget con của GroupBox frame. Xem hình dưới. 

Thay đổi text trong các label theo cách làm ở trên. 

Bây giờ, chúng ta tạo các text box để user điền các thông tin cần thiết. Text box đơn giản nhất là loại một dòng gọi là QLineEdit (menu Tools ­> Input ­> LineEdit). Ta sẽ vẽ 2 QLineEdit bên cạnh 

2 label vừa tạo ở trên. 

User sẽ chọn câu comment trong hộp ComboBox (Tools­> Input­> ComboBox). Vẽ ComboBox. Double click. Chọn 'New Item' và gõ dòng text. Làm tương tự để tạo thêm các lựa chọn khác. Khi 

đã vừa ý, click OK. 

Thay đổi kích thước của các widget và sắp xếp cho đẹp. 

Bây giờ, them label 'Generated Signature'. Dưới đó, tạo một TextEdit (Tools­>Input­>TextEdit) để hiển thị chữ kí được tạo ra. Đặt tên là 'sigBox'. Cuối cùng, tạo hai PushButtons ('Create!' and 'Cancel'). Hai nút bấm này không cần tên nhưng có thể đặt nếu muốn

Save lại. Chọn Save menu Preview­> Preview Form để xem kết quả. 

Picture 13: The Form before layout management

Bây giờ chúng ta sẽ học cách quản lý layout. Nếu thay đổi kích thước cửa sổ, có thể thấy là kích thước của các widget không được thay đổi tương ứng. Trong Qt, chúng ta sẽ dùng các spacer, có tác dụng như các lò xo, co giãn kích thước các widget cho phù hợp với kích thước cửa sổ. 

C h ú  ý

Thiết kế layout cẩn thận rất quan trọng khi chuyển ngữ. Chẳng hạn như một câu trong tiếng Việt có thể dài  hoặc ngắn hơn câu đó trong tiếng Anh. Trong quá trình thiết kế, chọn menu Preview­>Preview Form để thử  nghiệm. 

Kĩ năng sử dụng các spacer và quản lí layout được phát triển qua quá trình thử nghiệm và sửa sai. Cần chú ý một điều là nên xử lí các spacer theo chiều ngang trước, chiều dọc sau

Đầu tiên, chúng ta dùng spacer để canh cho label trên cùng luôn cân ở giữa cửa sổ. Bước thứ nhất, thay đổi kích thước label sao cho tất cả các chữ cùng ở trên một dòng. Sau đó, thêm hai spacer vào hai đầu bằng cách chọn icon 'spring' hoặc menu Layout­> Add Spacer. Click vào khoảng trông phía bên trái label và một khoảng màu xanh sẽ xuất hiện (xem hình dưới). Làm tương tự cho bên phải. Sau đó them một spacer vào bên phải của label 'Generated Signature' và cuối cùng, thêm một spacer vào bên trái nút 'Create!'

Bây giờ, sau khi đã đặt các spacer, chúng ta sẽ sử dụng công cụ quản lí layout để các widget tự điều chỉnh kích thước khi user điều chỉnh kích thước cửa sổ. Chúng ta có thể quản lí layout theo chiều ngang, chiều dọc hoặc kiểu lưới. Dòng đầu tiên có 3 widget (spacer + label + spacer) cho nên chúng ta dùng kiểu Horizontal: click vào biểu tượng lò xo đầu tiên, giữ phím Shift và đồng thời click   vào   3  widget   đó   Sau   đó   chọn   icon  Horizontal   Layout   hoặc   menu   Layout­>  Lay   Out Horizontally. Sau đó sẽ xuất hiện một viền đỏ bao quanh 3 object để chỉ ra rằng chúng đã được quản lí layout. Cuối cùng, chúng ta có thể thay đổi kích thước của viền đỏ đó nếu muốn

Chúng ta làm tương tự với 3 label trong GroupBox, nhưng lần này là kiểu vertical. Tương tự đối với 2 LineEdit và ComboBox. Sau đó sử dụng kiểu horizontal đối với 1 spacer và 2 nút bấm

Cuối cùng, chúng ta đặt tất cả trong một lưới (grid) bằng cách right click vào form và chọn "Lay Out in a Grid". Kết quả thu được sẽ trông giống như hình dưới. 

Signals và slots

Signals và slots được dung để liên lạc giữa các object trong Qt. Đây là kĩ thuật đặc trưng của Qt khi so với kĩ thuật callback của hầu hết các toolkit khác. Trong Qt, một signal sẽ được phát ra bởi một widget khi có một sự kiện nào đó xảy ra như click vào một nút bấm hay gõ một kí tự vào một LineEdit. Slot chỉ đơn giản là một hàm đáp ứng cho một signal nào đó

Bây giờ, sau khi đã tạo và sắp xếp các widget, tạo layout management, công việc cuối cùng của chúng ta là tạo các liên kết signal/slot. Ta có thể dung hàm connect() để thực hiện công việc này nhưng Qt Designer cung cấp cho ta một công cụ đơn giản nhưng rất hiệu quả bằng cách chọn Tools­> Connect Signals/Slots hoặc phím tắt F3. Để tạo một connection, click vào widget cần tạo slot, kéo ra khỏi form và thả chuột. 

Click vào biểu tượng Connect Signal/Slot hoặc chọn trong menu Tools hoặc dùng phím tắt  F3. Click nút Create! và kéo ra ngoài form. Sau khi thả chuột, cửa sổ của công cụ tạo connection xuất hiện như hình dưới. 

Chúng ta cần một slot sẽ tạo chữ kí sau khi click nút Create! Signal là hàm clicked() và chúng ta cần tạo một slot để hình thành một connection giữa chúng

Picture 16: Create a new slot 

Pr oject phải dịch được và có cửa sổ chính như trong hình 3. (creating.html). 

Chúng ta sẽ xoá class sigcreate (vì không dùng đến ) và   dùng   file  sigcreatedlg.ui  để tạo subclass. Trong tab Automake Manager, right click file  sigcreate.cpp  chọn   Remove. Check 'Also Remove it from disk'. Làm tương tự với file sigcreate.h. File Makefile.am sẽ được update 

tự động. Cần  chạy  run automake & friends và  run configure trước khi dịch lại chương trình. Tuy nhiên chúng  ta sẽ  làm  thế  sau khi tạo  subclass SigCreate. 

Trong tab Automake Manager, trong phần sigcreate, right click vào file sigcreatedlg.ui chọn Subclass Widget. Điền  tên subclass là SigCreate. Check: Reformat source và click OK. Chúng  ta không sử  dụng CVS nên chọn No

C h ú  ý

Khi tạo subclass, chúng ta sẽ thấy danh sách các slot đã tạo ở các bước trên. Check vào các slot cần dùng để  KDevelop tự động khởi t ạo cho chúng ta. 

Kĩ thuật signal/slot là type safe: kiểu của signal phải phù hợp với kiểu của slot tương ứng (ví dụ, chúng ta tạo connect giữa valueChanged(int) với slot có một tham số kiểu int). Chỉ các lớp kế thừa lớp QObject (hoặc các lớp con của QObject) mới có thể chứa các signal và slot.

• Trong KDevelop, chọn menu File­>New, chọn Widget (.ui) file, đặt tên (kprojectdlg chẳng hạn), check add to Project. Click OK. 

• Khởi động Qt Designer. Thiết kế form như ý muốn, save, và đóng Qt Designer. File thiết kế 

sẽ xuất hiện trong KDevelop trong phần User Interface (kprojectdlg.ui). 

• Tạo một class (đặt tên là KProject chẳng hạn) bằng cách chọn menu Project ­> New class ). Lớp này kế thừa dialog file (kprojectdlg) và là lớp con của lớp QWidget. 

• Thêm các slot và signal  trong lớp KProject. 

C hương 5. Tạo bản chuyển ngữ cho dự án kde

Sau đây là các bước cần thực hiện khi muốn chuyển phần GUI của chương trình sang một ngôn ngữ khác

C ài đặt gói gettext cho kde

Importing project vào K D E  C V S

Nếu chương trình của bạn hấp dẫn những người khác, nếu bạn cảm thấy muốn nhận thêm nhiều feedback để có thể phát triển chương trình và nếu đồng ý phát hành chương trình theo giấy phép GPL   hoặc   tương   đương,   bạn   có   thể   đăng   kí   một   cvs   account   để   import   trên   kdenonbeta. kdenonbeta module rất lớn nhưng không được phân phối trong bản KDE chính thức. Mục đích của 

nó là để mọi người cùng sử dụng và cùng phát triển ứng dụng với bạn. 

C h ú  ý

Nếu chương trình của bạn có các tính năng quan trọng và nó hoàn toàn tương thích với KDE (i18n, xml  GUI, ect.), có thể chương trình của bạn sẽ được đề nghị để đưa vào bản KDE chính thức. 

Để tạo cvs account, bạn có thể làm theo các hướng dẫn sau đây. Gửi email đề nghị tới địa chỉ sysadmin (at) office (dot) kde (dot) org. Nói rằng bạn muốn import chương trình (app_name) của mình trong kdenonbeta module. Nhớ cung cấp tên, nickname và email cho họ. Bạn có thể chọn giao thức standard non­encrypted CVS (pserver) hay encrypted CVS­over­ssh. Nếu chọn, pserver thì gửi kèm một encrypted password (ví dụ useradd dummy ; passwd dummy ; grep dummy /etc/passwd /etc/shadow). Nếu chọn CVS­over­ssh thì gửi kèm ssh key (e.g. ~/.ssh/id_dsa.pub). Sau đó chờ câu trả lời của KDE sysadmin. 

Sau khi đã có và dịch qt­copy, arts và kdelibs, bạn sẽ phải check out kdenonbeta files. Log in cvs server với username và password của bạn. 

    $ cvs co ­l kdenonbeta

    $ cd kdenonbeta

    $ cvs co admin  (or ln ­s  /kde­common/admin .admin)

You copy your project main dir with everything in kdenonbeta and then, in your project main dir,  you issue a: 

    $ make disclean

Các file .o sẽ bị xoá. Bạn có hể xoá các file Makefile, Makefile.in (không phải Makefile.am), các  file kdevelop. Xoá các folder admin, admin, autom4te.cache, debug, doc, po và templates. Bạn  chỉ cần giữ lại thư mục src. Sau đó dùng lệnh cd   để quay trở về thư mục kdenonbeta và chạy:      $ make ­f Makefile.cvs

Sau đó, trong thư mục kdenonbeta, chạy: 

    $ cvs add your_project_name

Thay replace kmyapp bằng tên chương trình và thay 0.1 bằng version. 

Lệnh này sẽ tạo ra 2 gói kmyapp­0.1.tar.gz và kmyapp­0.1.tar.bz2 trong thư mục hiện thời. 

M ột vài link hữu ích

Bạn có thể chạy thử chương trình để kiểm tra. (Build­>Run automake & friends, Build­> Run configure,   Build­>Build   Project,   Build­>Install   (hoặc   Install   as   root   user),   Build­>Execute Program (or Shift+F9)). Nếu user không được quyền ghi trong KDEDIR thì phải Install as root user thay vì Install. 

Khi dịch, nếu  gặp  lỗi: Syntax error before `{' token" referring to the opening brace right /before/ the Q_OBJECT line in sigcreate.h, thì  phải  thêm dòng: 

#include "sigcreatedlg.h"

hoặc cũng có thể do chưa tạo file  sigcreatedlg.h

Viết code cho slot

Chúng ta muốn chương trình tạo ra chữ kí trong TextEdit khi user click nút Create! Các signal và slot có thể dùng đều có trong Qt documentation. Chẳng hạn, xem phần  the QPushButton class documentation ta thấy nó kế thừa QButton và QButton có các signal: 

This documentation is licensed under the terms of the GNU Free Documentation License.