图形界面应用程序设计

1、1图形界面应用程序设计 实验目的 了解在linux下安装qt以及qt/embedded的基本步骤 学会在qt/e平台下使用virtual framebuffer显示程序结果 学会使用qt designer编写程序，交叉编译，在开发板上运行 实验内容 3.1 安装与建立qt桌面运行环境 3.2 qt designer简介及qt/e的交叉编译 3.3 建立本机qtopia虚拟平台（选做） 3.4 qtopia在2410-s上的移植（选做）2图形界面应用程序设计 实验过程建立建立qt运行环境运行环境(使用tmake工具)编译qt编译qvfb编译qt/e运行图形界面程序运行图形界面程序（使用qvfb显

2、示运行结果）运行qt/e自带demo编写、编译、运行小程序使用使用designer编编写程序写程序使用designer编辑控件使用uic工具生成源码交叉编译，在开交叉编译，在开发板运行发板运行(使用tmake工具)编译qt3图形界面应用程序设计 实验相关工具 tmake qt qt/embedded qvfb qt designer4图形界面应用程序设计 实验注意事项 实验指导书错误纠正 p129/140设置环境变量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 设置环境变量的命令可写在一个文件里，用source filename来执行 检查环境变量的设置是否正确 echo $tmakedir cd $tmakedir5安装与建立qt运行环境 实验步骤 拷贝所需文件 编译qt2.3.2 编译qvfb 编译qt/embedded 运行qt/e自带demo，使用virtual frame

4、buffer显示运行结果 “hello embedded”程序的编写、编译和运行6安装与建立qt运行环境拷贝所需文件到/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运行环境解压安装包并设置环境变量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运行环境编译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查看更多配置选项编译为在宿主机运行若要发布到开发版，需用linux-arm-g+9运行qt/e自带的demo设置环境变量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 执行命令qvfb -width 640 -height 480 &后会出现左图窗口，然后回到终端窗口回车再输入命令./launcher qws执行出现右图运行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 执行命令qvfb &后出现左图，然后执行./hello qws出现右图编译运行编译运行“hello embedded”程序程序14使用qt de

12、signer程序开发运行designer$qt2dir/bin/designer使用designer编辑程序控件创建和初始化子部件新建一个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程序开发查看连接情况 点击edit|connections16使用qt designer程序开发将窗体保存为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程序开发编译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的交叉编译解压安装包并设置环境变量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将库文件复制到开发板上mount t nfs o nolock 6:/root/share /host /在开发板端cp arf /$qtedir/lib libqte.so* /root/share /在pc 端cp arf /host/libqte.so* /usr/lib /在开发板端注意：该make不会正常结束，而是执行到/root/2410sqt/target/qt-2.3.10/tutorial目录下时会出错退出。实例部分并未执行，不过此时已经完成所需要的库文件的编译.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+”生成可执行文件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端在开发板端：/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 下的所有文件复制到开发板/mnt/yaffs/lib/fonts 下。cd /host./progressbar -qws需先删除目录下原有的,makefile,makefile.in三个文件22qt/e的交叉编译目标板上运行常见问题1).如果执行命令/host./progressbar -qws./progressbar: error while loading shared libraries: libstdc+.so.6: ca