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

Chia sẻ: Le Manh Toan | Ngày: | Loại File: PDF | Số trang:33

0
228
lượt xem
65
download

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

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Qt là bộ công cụ được phát triển bởi dụ án KDE để phát triển các ứng dụng đồ họa. Tài liệu này hướng dẫn cho những người mới bắt đầu cách tạo ra các ứng dụng đơn giản bằng cách kết hợp hai công cụ Qt Designer 3.2 và KDevelope-3.0. Hướng dẫn tạo một chương trình dựa trên một chương trình của Jono Bacon và đã được duyệt bởi Daniel Molkentin và Thomas Nagy.

Chủ đề:
Lưu

Nội dung Text: Qt Designer và KDevelop­3.0 cho người mới bắt đầu

  1. Qt Designer và KDevelop­3.0 cho người mới bắt đầu Anne­Marie Mahfouf  Bản tiếng Đức : Andreas Nicolai Bản tiếng Nga : Marina Soboleva Bản tiếng Pháp : Julien Pluton Bản tiếng Ý : Andrea Benazzo Bản tiếng Rumani : Laura Afrasine and Claudiu Costin Phiên bản 0.4 (2004­06­24) Copyright 2001, 2004 Anne­Marie Mahfouf Sao chép, phân phối, chỉnh sửa tài liệu này phải tuân theo giấy phép “GNU Free Documentation License”, Version  1.1 trở lên. Có thể xem bản sao của giấy phép này ở the section entitled "GNU Free Documentation License". Qt là bộ công cụ được phát triển bởi dự án KDE để phát triển các ứng dụng đồ họa. Tài liệu này  hướng dẫn cho những người mới bắt đầu cách tạo ra các ứng dụng đơn giản bằng cách kết hợp hai  công cụ Qt Designer 3.2 (hoặc 3.3) và KDevelop­3.0. Hướng dẫn tạo một chương trình dựa trên  một chương trình của Jono Bacon và đã được duyệt bởi Daniel Molkentin và Thomas Nagy. Mục lục 1. Gới thiệu 2. Yêu cầu Cài đặt Qt Designer Trong distribution Tarball hoặc anonymous cvs Cài đặt KDevelop 3 Trong distribution Tarball cvs HEAD Thuật ngữ 3. Xây dựng chương trình Khởi tạo project Tạo framework với KDevelop Dùng Qt Designer Thiết kế giao diện Đặt widget Spaced out Signal và slot Sinh mã Viết mã cho slot 4. Tóm tắt
  2. 5. Tạo bản chuyển ngữ cho các dự án KDE đơn giản Cài đặt gettext patched cho kde Chuẩn bị dịch Make Biên dịch và cài đặt các file đã được dịch Tham khảo 6. Một số hướng dẫn Một vài gợi ý Đặt tên chương trình Thực hành Import dự án vào KDE CVS Làm thế nào để phát hành chương trình dưới dạng tarball? Một vài link hữu ích 7. Sinh mã (bổ sung)  KDevelop không hỗ trợ subclassing Viết code cho các slot 8. Credits and License C h ương  Giới thiệu 1.  Chúng ta sẽ xây dựng một chương trình đơn giản để mô tả cách kế hợp hai công cụ Qt Designer và  KDevelop. Qua đó xây dựng được các ứng dụng KDE thực sự. Nếu đã sử dụng quen KDevelop và Qt Designer và chỉ muốn biết làm thế nào để kết hợp chúng lại  với nhau thì bạn có thể lướt nhanh qua một số chương đầu.  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  Yêu  ầ u 2.  c Để 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). 
  3. C ài  ặt   D esigner đ Qt  Trong distribution  ủ a  ạ n c b 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.  Ngoài ra cần cài đặt tất cả các gói liên quan như: qt headers (thường có trong gói devel), Qt  Designer để thiết kế giao diện (trong một số distribution, phải cài đặt Qt Designer riêng). Kiểm tra quá trình cài đặt, gõ lệnh shell:  locate qstring.h  Nếu thấy /usr/lib/qt3/include/qstring.h là OK Sau đó, set QTDIR thành /usr/lib/qt3/. Dùng lệnh: export QTDIR= /usr/lib/qt3  Tarball  oặc   h anony m o us 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:  export QTDIR= /usr/local/qt  giả sử /usr/local/qt là thư mục cài Qt. Xem thêm file INSTALL. Dùng lênh sau để dịch:  ./configure ­system­zlib ­qt­gif ­system­libpng ­system­libjpeg \   ­plugin­imgfmt­mng ­thread ­no­exceptions ­debug ­fast  make Không cần dùng lệnh make install.  Chạy Qt Designer, dùng lệnh:  /usr/local/qt/bin/designer  Xem thêm hướng dẫn dịch từ tarball ở đây. 
  4. C ài  ặt   Develop  đ K 3 Trong distribution KDevelop­3 thường có sẵn trong distribution. Bản KDevelop trước 3 có tên Gideon.. Nếu chưa có sẵn trong distribution thì bản download source và dịch theo hướng dẫn sau đây.  tarball Download KDevelop tại KDevelop website. Khi viết bài này, bản KDevelop mới nhất là 3.0 và  source version là 3.0.4. Packages mới nhất là kdevelop­3.0.4.tar.bz2, có thể download ở đây.  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.  Set biến path cho KDE và Qt: export PATH=$QTDIR/bin:$KDEDIR/bin:$PATH export LD_LIBRARY_PATH=$QTDIR/lib:$LD_LIBRARY_PATH Nếu không khởi động được KDevelop, giải pháp có thể có ở forum của KDevelop website.  Nếu chưa từng sử dụng KDevelop, hãy làm quen với giao diện của KDevelop bằng cách thử tạo và  dịch một chương trình.  cvs  E A D H Dùng cvs để có bản mới nhất của KDevelop.  mkdir KdevelopCVS  cd KDevelopCVS  export CVSROOT=:pserver:anonymous@anoncvs.kde.org:/home/kde  cvs login  (enter for password)  cvs co kdevelop Sau khi download xong:   make ­f Makefile.cvs  ./configure ­­prefix='kde­config ­­prefix'  make  make install (as root)
  5. Xem thêm hướng dẫn dịch ở  KDevelop website. T hu ậ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.  ây  ự ng  ương trình X d ch K h ởi t o    ạ project T ạ o fra me work  ới K D evelop v   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). 
  6. 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). 
  7. Dịch thử chương trình: Chọn Build ­> Run automake & friends rồi Build ­> Run configure. Nếu trong của  sổ Messages output window có dòng sau là được:  " Good ­ your configure finished. Start make now * * *** Success ***
  8. Khi đó có thể "make" bằng cách chọn Build ­> Build Project (hoặc F8). Rồi chọn Build ­> Install. Rồi Build  ­> Execute program (or F9). Khi chương trình chạy, ta có thể thấy cửa sổ như hình 3.  Picture 3: The KDE Simple Application  Bây giờ, sau khi đã có framework, chúng ta bắt tay vào viết chương trình Có thể set QTDIR và KDEDIR trong menu Project ­> Project Options... ­> Configure Options. 
  9. Picture 6: Project Options  D ù ng  D esigner Qt  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 đó. 
  10. Trong KDevelop, chọn File ­> New. Điền tên file: sigcreatedlg, chọn Widget (.ui) trong combo  box. Check "Add to project" để KDevelop tự động update file Makefile.am.  Click the Ok button. The Automake manager dialog then pops up. 
  11. Click the OK button.  Nếu file  sigcreatedlg.ui  không được mở trong Qt Designer, chọn Automake Manager, right­ click file và chọn Open With, chọn Qt Designer.  C hú ý Về cách đặt tên: tên của một dialog nên kết thúc bằng dlg. sigcreatedlg cho biết rằng nó là một  dialog và chỉ là một lớp tạo giao diện.
  12. Giao diện của Qt Designer có thể chia ra làm 3 khu vực chính. Bên trái là toolbox (ta có thể chọn các widget  ở đâ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ế. 
  13. 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.  T hiế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ế. 
  14. Trong Qt Designer, trong property editor có đầy đủ về form mà chúng ta vừa tạo. Trường đầu tiên  là   tên   form.   Chúng   ta   sẽ   đổi   từ   “Form1”   thành   “SỉgCeateDlg”.   Sau   đó   đổi   caption   thành  "SigCreateDlg v.01".  Sau đây chúng ta sẽ thêm các widgets.  T hê m  widgets Ban đầu, chúng ta sẽ đưa vào một dòng hướng dẫn sử dụng như trong hình dưới. Ta sẽ dùng một  loại widget gọi là Label:  • 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  Create!   button."   Chọn   canh   lề   giữa   cho   đẹp. 
  15. • 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  tiện   lợi.  Để đư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. 
  16. Sau khi đã tạo frame, tạo them 3 label bên trong. Bây giờ trong Object Explorer (Windows menu  ­> 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. 
  17. Đặt tên widget: Chúng ta sẽ đặt tên gợi nhớ cho các widget mà chúng ta cần xử lý dữ liệu trên đó.  Trong trường hợp này là 2 input box và 1 combo box lần lượt là nameBox, mailbox và commBox.  Chúng ta sẽ truy cập vào các thong tin mà người dùng gõ vào thông qua các tên này. Đổi tên cho  nameBox bằng cách click, thay đổi trường name trong Property Editor.  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
  18. Spaced out 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!'.
  19. Picture 14: Adding the spacers  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. 
  20. Picture 15: The complete layout management Signals  s và  lots 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.

CÓ THỂ BẠN MUỐN DOWNLOAD

Đồng bộ tài khoản