圖形界面應(yīng)用程序設(shè)計(jì)

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

2、示運(yùn)行結(jié)果）運(yùn)行qt/e自帶demo編寫、編譯、運(yùn)行小程序使用使用designer編編寫程序?qū)懗绦蚴褂胐esigner編輯控件使用uic工具生成源碼交叉編譯，在開交叉編譯，在開發(fā)板運(yùn)行發(fā)板運(yùn)行(使用tmake工具)編譯qt3圖形界面應(yīng)用程序設(shè)計(jì) 實(shí)驗(yàn)相關(guān)工具 tmake qt qt/embedded qvfb qt designer4圖形界面應(yīng)用程序設(shè)計(jì) 實(shí)驗(yàn)注意事項(xiàng) 實(shí)驗(yàn)指導(dǎo)書錯(cuò)誤糾正 p129/140設(shè)置環(huán)境變量tmakedir, qt2dir, qtedir 時(shí)分別去掉一個(gè)host/target,eg: export tmakedir=$pwd/host/tmake-1.13改為： ex

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

4、buffer顯示運(yùn)行結(jié)果 “hello embedded”程序的編寫、編譯和運(yùn)行6安裝與建立qt運(yùn)行環(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運(yùn)行環(huán)境解壓安裝包并設(shè)置環(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 /出現(xiàn)選項(xiàng)時(shí)都輸入yesmakecp arf bin/uic $qtedir/bin/qt/x11tmakeqt/embedded編譯會(huì)生成designer和uic8安裝與建立qt運(yùn)行環(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查看更多配置選項(xiàng)編譯為在宿主機(jī)運(yùn)行若要發(fā)布到開發(fā)版，需用linux-arm-g+9運(yùn)行qt/e自帶的demo設(shè)置環(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運(yùn)行qvfbqvfb -width 640 -height 480 &運(yùn)行qt

9、/e程序cd $qtedir/examples/launcher./launcher -qws-qws 表示作為服務(wù)器運(yùn)行10 執(zhí)行命令qvfb -width 640 -height 480 &后會(huì)出現(xiàn)左圖窗口，然后回到終端窗口回車再輸入命令./launcher qws執(zhí)行出現(xiàn)右圖運(yùn)行qt/e自帶的demo11編譯運(yùn)行“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運(yùn)行export path=$qtedir/bin:$pathexport ld_library_path=$qtedir/lib:$qt2dir/lib:$ld_library_pathqvfb &./hello -qws12編譯運(yùn)行“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 &后出現(xiàn)左圖，然后執(zhí)行./hello qws出現(xiàn)右圖編譯運(yùn)行編譯運(yùn)行“hello embedded”程序程序14使用qt de

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

13、，dial、lcdnumber和progressbar會(huì)隨其變化。15使用qt designer程序開發(fā)查看連接情況 點(diǎn)擊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文件參考實(shí)驗(yàn)指導(dǎo)書p132生成工程文件、makefile文件，編譯運(yùn)行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運(yùn)行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的交叉編譯解壓安裝包并設(shè)置環(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 /出現(xiàn)選項(xiàng)時(shí)都輸入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ù)制到開發(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不會(huì)正常結(jié)束，而是執(zhí)行到/root/2410sqt/target/qt-2.3.10/tutorial目錄下時(shí)會(huì)出錯(cuò)退出。實(shí)例部分并未執(zhí)行，不過此時(shí)已經(jīng)完成所需要的庫文件的編譯.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運(yùn)行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ù)制到開發(fā)板/mnt/yaffs/lib/fonts 下。cd /host./progressbar -qws需先刪除目錄下原有的,makefile,makefile.in三個(gè)文件22qt/e的交叉編譯目標(biāo)板上運(yùn)行常見問題1).如果執(zhí)行命令/host./progressbar -qws./progressbar: error while loading shared libraries: libstdc+.so.6: ca