QT Giao diện đồ họa cho các ứng dụng CrossPlatform

[falleaf]

Hiện nay vấn đề lập trình nhúng, và cross platform đang bắt đầu phát triển khá tốt ở Việt Nam. Đồng thời với việc diễn đàn chủ trương phát triển Ubuntu, Việt Nam gia nhập liên minh mã nguồn mở Việt Trung Hàn Nhật, qua thời gian thảo luận khá nhiều về vấn đề phát triển mã nguồn mở, Ubuntu của diễn đàn.

Vậy bây giờ là lúc DTVN nên bắt đầu vọc QT thôi.

Rất mong được sự hỗ trợ của những người đi trước trong lĩnh vực này, đặc biệt là giới CNTT Việt Nam.

Chúc vui

Tài liệu tham khảo:
[0] Giới thiệu về QT (rất nên xem qua): http://trolltech.com/products/qt/lea.../presentations
[1] QT Demo thiết kế một giao diện web browser
[2] Ubuntu (và Linux nói chung) với dân điện tử
[3] First Time Linux C++ (Không biết anh em ở Việt Nam có xem được trang này không?)
[4] Các trang tham khảo hữu ích về C++: http://www.robertnz.net/cpp_site.html
[5] QT 4.3 Whitepapers: http://trolltech.com/pdf/qt43-whitepaper-a4.pdf

Nguồn: http://dientuvietnam.net/forums/showthread.php?t=10797
F chép bài này của F sang đây để bắt đầu viết tiếp về QT, bên dientuvietnam viết tới đó để khai mào và nhường chỗ cho các đồng chí cao thủ, còn bên này F vẫn chủ trương đi từ những gì cơ bản nhất.

[falleaf]

Cài đặt trên Ubuntu, các bạn vào Applications >> Add/Remove...

Tìm "qt" và đánh dấu cài đặt.

Sau khi cài đặt xong thì đây là kết quả

Chúc vui

[falleaf]

Cài đặt Eclipse vào Ubuntu thì các bạn có thể sử dụng ngay Synaptics để cài, ở đây không nhắc lại, nhưng các bạn chú ý cài bộ eclipse và bộ eclipse-cdt để phát triển ứng dụng C/C++

Hình ảnh về Eclipse, F đã giới thiệu ở trong phần giới thiệu về Ubuntu rồi, việc này cũng khá đơn giản, cho nên không nhắc lại nữa.

Vấn đề thứ hai, đó là các bạn cần kết nối Eclipse và QT. Đây là một việc làm tạm thời không còn là khó khăn sau khi đọc bài hướng dẫn tại đây:

http://trolltech.com/developer/downl...-installmanual

Tuy nhiên, cái thư mục được nhắc đến ở đây không phải là usr/local hay usr/lib, mà trong Ubuntu nó là usr/local/lib, các bạn chú ý điều này.

Các bạn có thể download file kết nối (integration) của QT tại đây:
http://trolltech.com/developer/downl...ation-download

Các bạn có thể download phiên bản gcc-4 bởi Ubuntu 7.10 có gcc-4 sẵn rồi.

Sau khi download nó về desktop các bạn thực hiện chuỗi lệnh sau:
- Copy file tải về vào thư mục usr/local/lib bằng lệnh

sudo cp /home/username/Desktop/qt-eclipse-integration-linux.x86-1.0.1.tar.gz /usr/local/lib

- Untar cái file này, bởi vì nếu bạn mở cái tar này ra, các bạn sẽ thấy nó có sẵn cái thư mục eclipse bên trong đó còn có eclipse/plugins và eclipse/features luôn rồi. Các bạn dùng lệnh:

cd usr/local/lib
sudo tar xzf qt-eclipse-integration-linux.x86-1.0.1.tar.gz

- Sau khi untar rồi, các bạn có thể xoá nó đi bằng lệnh:

sudo rm qt-eclipse-integration-linux.x86-1.0.1.tar.gz

Nói chung F thuộc dạng gà cho nên F cứ làm từng bước từng bước vậy, các bạn có thể sửa lại để làm cho nhanh hơn tuỳ theo mỗi người. Chỗ nào cần khai pw root thì các bạn khai vào.

Cuối cùng, bắt chước nó, các bạn chạy lệnh $eclipse -clean là xong.

Nhưng mà khi chạy lệnh từ terminal thì nó sẽ có cái cửa sổ terminal rất khó chịu. Sau khi chạy cái chú này xong, các bạn có thể tắt nó đi rồi mở eclipse bình thường từ Applications >> Programming >> Eclipse

Sau khi chạy nó thì các bạn sẽ thấy nó hiện ra cái Cheat Sheet này.

Những vấn đề sau đó F sẽ viết tiếp sau. Mục tiêu của chúng ta bây giờ sẽ là làm lại cái thí dụ QT Demo mà F đã gửi làm tài liệu tham khảo. Hiện tại thì F vẫn chưa có thời gian nhiều, nhưng sẽ cố gắng thử từng bước một để có thể triển khai được hệ thống này cơ bản nhất.

Sau khi hoàn thành các bước cơ bản này, có lẽ chúng ta sẽ có nhiều cái hơn để thảo luận và để "cãi lộn" hehe...

Chúc vui

[falleaf]

Đúng là cái kiểu đi câu bài của F đây mà . Đại khái là tạo một project QT giống như giao diện QT thông thường, nhưng mà ta hoàn toàn có thể làm việc trên Eclipse như với cái QT Designer ở ngoài kia.

Như vậy bắt đầu thấy nó giống Visual C++ rồi đây.

Chúc vui

[falleaf]

http://dientuvietnam.net/forums/showthread.php?t=6382

Bạn xem bài viết này, F vừa đưa nó vào phần tham khảo. Có đầy đủ hướng dẫn cài đặt cần thiết cho bạn.

Nhân trả lời bài này, các bạn thử làm một bài nhỏ như sau:

Tạo một file hello.cpp, đặt nó trong thư mục home/username/workspace/QT_Demo1

Nội dung của file như sau

#include <qapplication.h>
#include <qlabel.h>

int main(int argc, char *argv[])
{
   QApplication app(argc, argv);

   QLabel *hello = new QLabel("Hello world!", 0);
   app.setMainWidget(hello);

   hello->show();
   return app.exec();
}

Sau đó chuyển vào thư mục QT_Demo1 và thực hiện chuỗi lệnh sau:

$ qmake -project
$ qmake
$ make

Trong khi thực hiện lệnh này, các bạn mở cửa sổ thư mục QT_Demo1 ra để xem nó sẽ xuất hiện thêm những file nào, các bạn xem hình đính kèm.

Sau khi chạy lệnh $ make, các bạn sẽ thấy có một file QT_Demo1 ở dạng executable (file thực thi). Bây giờ các bạn click đúp vào nó, nó sẽ hiện ra một cái ô cửa sổ nhỏ với chữ Hello world! nhỏ xíu và cái ô cửa sổ cũng nhỏ xíu luôn. Các bạn có thể kéo cửa sổ cho nó to ra để xem. Hình cuối cùng mà F gửi chính là hình kết quả.

Ví dụ này được lấy trong tài liệu hướng dẫn sử dụng C++ lần đầu tiên trên Linux với giao diện đồ họa. Đây là điều đầu tiên các bạn có thể làm được với QT.

F xin phép chỉ khai mào cho box này đến đây, các phần sau F không biết có thời gian để làm chi tiết hơn không, hoặc là sẽ có những người làm tin học đã viết hướng dẫn sẵn, F sẽ dành thời gian để kiếm các tài liệu hướng dẫn đó, sẽ đỡ mất công viết hơn.

Chúc vui

Tài liệu tham khảo:
[1] Tutorial 1: http://doc.trolltech.com/4.3-snapshot/tutorial.html
[2] Tutorial 2: http://doc.trolltech.com/3.3/tutorial2.html
[3] QT Design Manual: http://doc.trolltech.com/3.3/designer-manual.html
[4] QT Object Model: http://doc.trolltech.com/4.3/object.html (khái niệm cần nắm)
[5] Signals and Slots: http://doc.trolltech.com/4.3/signalsandslots.html (khái niệm cần nắm)

[falleaf]

http://blog.falleaf.net/index.php/2008/02/15/98

Các bạn có thể xem cái này (nó là tài liệu [1] ở bài #1 nhưng vì thấy vui quá nên F đem lên blog để bỏ trên đó).

Như vậy ta sẽ thực hành theo cái Tutorial này, tất nhiên vấn đề của chúng ta là sử dụng Ubuntu, và không dùng gõ lệnh terminal mà dùng Eclipse CDT.

Như vậy, các bạn đã biết cách tạo ra một C/C++ Project và cách build nó như thế nào ở bài giới thiệu CDT.

Bây giờ chúng ta cũng tạo ra một dự án như vậy, và nội dung của file main.cpp cũng giống y như trong bài hướng dẫn QT Demo. F đặt tên dự án này là QTDemo1 (tại vì F cũng sợ có làm gì sai thì còn làm được cái 2, 3...)

#include "ui_browser.h"
#include <QtGui/QtGui>
#include <QApplication>

int main(int argc, char *argv[])
{
	QApplication app(argc, argv);
	app.setQuitOnLastWindowClosed(true);
	
	QMainWindow *form = new QMainWindow;
	Ui::MainWindow ui;
	ui.setupUi(form);
	
	ui.textBrowser->setSource(QString("index.php.html"));
	
	form->show();
	return app.exec();
}

Sau đó, khi tạo make target các bạn thực hiện add thêm 3 lệnh make như sau:

Các bạn copy file browser.ui và main.cpp vào một thư mục và lần lượt chạy qmakeproject, qmake và make.

Kết quả các bạn sẽ có một thư mục như thế này:

Bây giờ các bạn chỉ cần bấm File >> Save As cái diễn đàn của chúng ta lại với tên index.php.html rồi copy vào cùng thư mục với QTDemo1 (file chạy được tạo ra).

Như vậy các bạn đã có thể chạy ứng dụng QT Demo ngay trên Ubuntu. Các bạn đã thực sự làm được rồi đấy, hoàn toàn đơn giản.

F biết rằng có rất nhiều người gặp khó khăn với việc biết rằng phải dịch, nhưng dịch thế nào, debug thế nào, chạy thế nào,... Tất cả những cái này thực sự là cần phải tìm hiểu dần, không thể mới bắt đầu mà có thể hiểu hết mọi thứ và làm được hết. Trước tiên các bạn cứ thấy nó đơn giản như thế, theo một quy trình từ qmake -project (tạo ra project QT có đuôi .pro), sau đó chạy qmake, và cuối cùng là make.

Những options khác chúng ta sẽ tìm hiểu dần.

File đính kèm là file zip mà F đã gói lại tất cả, các bạn chỉ cần mở ra và chạy thử, và các bạn có thể thử thực hành thiết kế sử dụng QT Designer được nhúng trên Eclipse hoặc chạy riêng. F khuyên các bạn chạy riêng, Ubuntu nói riêng và Linux nói chung cho phép các bạn làm việc trên nhiều màn hình cùng lúc, vậy tại sao ta không làm việc riêng cho thoải mái.

Đây là kết quả F chạy và F thử với trang dientuvietnam.

Chúc vui

[bakabond]

em cũng đang thử dùng cái này . Nhưng trên Qt-designer em chưa biết cách thêm custom widget với file.h dựng sẵn . Nó connect tới slots và signals hỏng bét hết của em .
Bác hướng dẫn dùm.

[falleaf]

Thực chất là khi chạy cái qmake -project nó tạo ra cái file .pro. Đây là file Project của thằng QT. Khi chạy qmake-qt4 thì nó sẽ tạo ra cái project đầy đủ với file .h đi kèm.

Lệnh make chỉ là dịch cái C++ thôi.

Em theo dõi ví dụ trong tài liệu tham khảo [1] của bài #1 để làm theo.
Sau đó em đọc tài liệu [5] của bài #5 để hiểu rõ về Signals và Slots.

Em cứ làm theo bài hướng dẫn ngày của anh, giống y chang như cái QT demo của tụi nó. Bước đầu tiên theo anh nghĩ, em có thể copy lại 2 file .ui và .cpp của anh để chạy thử, tạo ra một project mới và thử dịch.

Sau khi hiểu được công đoạn biên dịch và chạy thử, việc còn lại của em chỉ là tìm cách làm sao để tạo ra file .ui.

Việc tạo ra file .ui đòi hỏi em phải hiểu biết các khái niệm của QT, đọc manual của nó kỹ hơn, thao tác từ bài tập đơn giản và cơ bản nhất để thực hành.

Nếu em nắm được thêm các lỗi vì sao em làm sai, làm sai thế nào, thì em cùng phân tích tiếp ở đây.

Chúc vui

[ngohaibac]

Tất cả các link download của bọn Trolltech đều bị thay đổi hết rồi. Em xin update lại:

1. Download eclipse integration: http://trolltech.com/developer/eclipse-integration
(chọn download cái tương ứng theo phiên bản ubuntu và gcc)
2. Hướng dẫn cài đặt cái trên: http://trolltech.com/developer/eclip...-linux-systems
3. Qt Eclipse Integration Documentation

Em cài đặt eclipse bằng synaptics thì thư mục của nó ở đây: /usr/lib/eclipse

Chúc mọi người thành công.