圖形界面應用程序設計

1、1圖形界面應用程序設計 實驗目的 了解在linux下安裝qt以及qt/embedded的基本步驟 學會在qt/e平臺下使用virtual framebuffer顯示程序結果 學會使用qt designer編寫程序，交叉編譯，在開發(fā)板上運行 實驗內容 3.1 安裝與建立qt桌面運行環(huán)境 3.2 qt designer簡介及qt/e的交叉編譯 3.3 建立本機qtopia虛擬平臺（選做） 3.4 qtopia在2410-s上的移植（選做）2圖形界面應用程序設計 實驗過程建立建立qt運行環(huán)境運行環(huán)境(使用tmake工具)編譯qt編譯qvfb編譯qt/e運行圖形界面程序運行圖形界面程序（使用qvfb顯

2、示運行結果）運行qt/e自帶demo編寫、編譯、運行小程序使用使用designer編編寫程序寫程序使用designer編輯控件使用uic工具生成源碼交叉編譯，在開交叉編譯，在開發(fā)板運行發(fā)板運行(使用tmake工具)編譯qt3圖形界面應用程序設計 實驗相關工具 tmake qt qt/embedded qvfb qt designer4圖形界面應用程序設計 實驗注意事項 實驗指導書錯誤糾正 p129/140設置環(huán)境變量tmakedir, qt2dir, qtedir 時分別去掉一個host/target,eg: export tmakedir=$pwd/host/tmake-1.13改為： ex

3、port tmakedir=$pwd/tmake-1.13 qt designer啟動方法 任意路徑輸入designer, 啟動linux中預先安裝的qt 3.1 啟動本次實驗中安裝的qt 2.3.2自帶designer cd $qt2dir/bin ./designer 設置環(huán)境變量的命令可寫在一個文件里，用source filename來執(zhí)行 檢查環(huán)境變量的設置是否正確 echo $tmakedir cd $tmakedir5安裝與建立qt運行環(huán)境 實驗步驟 拷貝所需文件 編譯qt2.3.2 編譯qvfb 編譯qt/embedded 運行qt/e自帶demo，使用virtual frame

4、buffer顯示運行結果 “hello embedded”程序的編寫、編譯和運行6安裝與建立qt運行環(huán)境拷貝所需文件到/root/2410sqt目錄下 cd /root mkdir 2410sqt cd 2410sqt mkdir host cd /arm2410s/gui/qt/src cp arf tmake-1.13.tar.gz qt-embedded-2.3.10-free.tar.gz qt-x11-2.3.2.tar.gz /root/2410sqt/host或/mnt/hgfs/arm/gui/qt/src7安裝與建立qt運行環(huán)境解壓安裝包并設置環(huán)境變量cd /2410sqt/

5、hosttar xzf tmake-1.13.tar.gzexport tmakedir=$pwd/tmake-1.13tar xzf qt-x11-2.3.2.tar.gzexport qt2dir=$pwd/qt-2.3.2tar xzf qt-embedded-2.3.10-free.tar.gzexport qtedir=$pwd/host/qt-2.3.10編譯qt2.3.2cd $qt2direxport tmakepath=$tmakedir/lib/linux-g+export qtdir=$qt2direxport path=$qtdir/bin:$pathexport ld

6、_library_path=$qtdir/lib:$ld_library_path./configure -no-xft /出現選項時都輸入yesmakecp arf bin/uic $qtedir/bin/qt/x11tmakeqt/embedded編譯會生成designer和uic8安裝與建立qt運行環(huán)境編譯qvfbexport tmakepath=$tmakedir/lib/linux-g+export qtdir=$qt2direxport path=$qtdir/bin:$pathexport ld_library_path=$qtdir/lib:$ld_library_pathcd

7、 $qtedir/tools/qvfb/root/2410sqt/host/tmake-1.13/bin/tmake -o makefile makemv qvfb $qtedir/bin/編譯qt/embeddedcd $qtedirexport tmakepath=$tmakedir/lib/qws/linux-x86-g+export qtdir=$qtedirexport path=$qtdir/bin:$pathexport ld_library_path=$qtdir/lib:$ld_library_path./configure -no-xft -qvfb -de

8、pths 4,8,16,32yes5make使用./configure -help查看更多配置選項編譯為在宿主機運行若要發(fā)布到開發(fā)版，需用linux-arm-g+9運行qt/e自帶的demo設置環(huán)境變量export qt2dir=qt2的安裝路徑export qtedir=qte的安裝路徑export qtdir=$qtedirexport path=$qtedir/bin:$pathexport ld_library_path=$qtedir/lib:$qt2dir/lib:$ld_library_path運行qvfbqvfb -width 640 -height 480 &運行qt

9、/e程序cd $qtedir/examples/launcher./launcher -qws-qws 表示作為服務器運行10 執(zhí)行命令qvfb -width 640 -height 480 &后會出現左圖窗口，然后回到終端窗口回車再輸入命令./launcher qws執(zhí)行出現右圖運行qt/e自帶的demo11編譯運行“hello embedded”程序使用vi編寫文件hello.cppmkdir expcd expvi hello.cpp生成工程文件（.pro）export tmakedir= tmake 的安裝路徑$tmakedir/bin/progen t app.t o hel

10、生成makefile文件export tmakepath=$tmakedir/lib/qws/linux-x86-g+export qtedir=qte的安裝路徑export qtdir=$qtedir$tmakedir/bin/tmake o makefile 編譯make運行export path=$qtedir/bin:$pathexport ld_library_path=$qtedir/lib:$qt2dir/lib:$ld_library_pathqvfb &./hello -qws12編譯運行“hello embedded”程序/hello.

11、cpp 1 #include 2 #include 3 int main (int argc, char *argv) 4 5 qapplication app (argc, argv); 6 qlabel *label = new qlabel (“hello qt/embedded!”,0); 7 app.setmainwidget(label); 8 label-show (); 9 return app. exec (); 10 13 執(zhí)行命令qvfb &后出現左圖，然后執(zhí)行./hello qws出現右圖編譯運行編譯運行“hello embedded”程序程序14使用qt de

12、signer程序開發(fā)運行designer$qt2dir/bin/designer使用designer編輯程序控件創(chuàng)建和初始化子部件新建一個dialog窗體添加一些幾個部件：一個checkbox,一個pushbutton,一個slider,一個dial,一個lcdnumber,一個progressbar設置子部件的布局使用lay out in a grid自動實現布局設置tab 鍵的次序tools|tab order建立信號與插槽的連接使用connect signal/slots(f3)點擊后用鼠標連接兩個部件建立連接實現功能：點擊pushbutton會選中checkbox；拖動slider同時

13、，dial、lcdnumber和progressbar會隨其變化。15使用qt designer程序開發(fā)查看連接情況 點擊edit|connections16使用qt designer程序開發(fā)將窗體保存為win.ui cd /root/2410sqt/host mkdir exp2將win.ui保存到exp2目錄使用uic工具生成.h文件和.cpp文件cd exp2uic o win.h win.uiuic o win.cpp -impl win.h win.ui編輯main.cpp文件參考實驗指導書p132生成工程文件、makefile文件，編譯運行export tmakedir= tmak

14、e 的安裝路徑$tmakedir/bin/progen t app.t o 修改將interfaces= win.ui修改為：interfaces=export tmakepath=$tmakedir/lib/qws/linux-x86-g+export qtedir=qte的安裝路徑export qtdir=$qtedir$tmakedir/bin/tmake o makefile 17使用qt designer程序開發(fā)編譯make運行export path=$qtedir/bin:$pathexport ld_library_path=$qtedi

15、r/lib:$qt2dir/lib:$ld_library_pathqvfb width 640 height 480 &./win -qws18qt/e的交叉編譯拷貝所需文件到/root/2410sqt/target目錄下cd /root/2410sqtmkdir targetcd /mnt/hgfs/arm/gui/qt/srccp arf tmake-1.13.tar.gz qt-embedded-2.3.10-free.tar.gz qt-x11-2.3.2.tar.gz /root/2410sqt/target安裝編譯器arm-linux-gcc-3.4.1cd /arm24

16、10s/gui/qt/toolscp arm-linux-gcc-3.4.1.tar.bz2 /optcd /opttar xjvf arm-linux-gcc-3.4.1.tar.bz2 c ./vi /root/.bashi_profile /打開文件在path后面加上:/opt/usr/local/arm/3.4.1/binsource /root/.bash_profile19qt/e的交叉編譯解壓安裝包并設置環(huán)境變量cd /2410sqt/targettar xzf tmake-1.13.tar.gzexport tmakedir=$pwd/tmake-1.13tar xzf qt-

17、x11-2.3.2.tar.gzexport qt2dir=$pwd/qt-2.3.2tar xzf qt-embedded-2.3.10-free.tar.gzexport qtedir=$pwd/qt-2.3.10編譯qt2.3.2cd $qt2direxport tmakepath=$tmakedir/lib/linux-g+export qtdir=$qt2direxport path=$qtdir/bin:$pathexport ld_library_path=$qtdir/lib:$ld_library_path./configure -no-xft /出現選項時都輸入yesmak

18、ecp arf bin/uic $qtedir/bin/20qt/e的交叉編譯編譯qvfbexport tmakepath=$tmakedir/lib/linux-g+export qtdir=$qt2direxport path=$qtdir/bin:$pathexport ld_library_path=$qtdir/lib:$ld_library_pathcd $qtedir/tools/qvfb/root/2410sqt/target/tmake-1.13/bin/tmake -o makefile makemv qvfb $qtedir/bin/編譯qt/embedd

19、edcd $qtedirexport tmakepath=$tmakedir/lib/qws/linux-arm-g+export qtdir=$qtedirexport path=$qtdir/bin:$pathexport ld_library_path=$qtdir/lib:$ld_library_path./configure xplatform linux-arm-g+ -no-xft -qvfb -depths 4,8,16,32make查看生成的庫文件libqte.so, libqte.so.2, libqte.so.2.3, libqte.so.2.3.10cd $qtedir

20、/libfile libqte.so.2.3.10將庫文件復制到開發(fā)板上mount t nfs o nolock 6:/root/share /host /在開發(fā)板端cp arf /$qtedir/lib libqte.so* /root/share /在pc 端cp arf /host/libqte.so* /usr/lib /在開發(fā)板端注意：該make不會正常結束，而是執(zhí)行到/root/2410sqt/target/qt-2.3.10/tutorial目錄下時會出錯退出。實例部分并未執(zhí)行，不過此時已經完成所需要的庫文件的編譯.21qt/e的交叉編譯修改tmake配置文

21、件vi $tmakedir/lib/qws/linux-arm-g+/tmake.conf將其中“tmake_link= arm-linux-gcc”“tmake_link_shlib= arm-linux-gcc”修改為：“tmake_link= arm-linux-g+”“tmake_link_shlib= arm-linux-g+”生成可執(zhí)行文件cd $qtedir/examples/progressbar$tmakedir/bin/progen t app.t o export tmakepath=$tmakedir/lib/qws/linux-arm-g

22、+export qtdir=$qtedir$tmakedir/bin/tmake o makefile make運行cp progressbar /root/share/在pc端在開發(fā)板端：/mnt/yaffs#mount t nfs 6:/root/share /host/mnt/yaffs#cd /host/host#export qtdir=/usr/host#cd /usr/lib/mnt/yaffs/lib#mkdir fonts將pc 端$qtedir/lib/fonts 下的所有文件復制到開發(fā)板/mnt/yaffs/lib/fonts 下。cd /host./progressbar -qws需先刪除目錄下原有的,makefile,makefile.in三個文件22qt/e的交叉編譯目標板上運行常見問題1).如果執(zhí)行命令/host./progressbar -qws./progressbar: error while loading shared libraries: libstdc+.so.6: ca