图形界面应用程序设计.ppt

《图形界面应用程序设计.ppt》由会员分享，可在线阅读，更多相关《图形界面应用程序设计.ppt（23页珍藏版）》请在三一办公上搜索。

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

2、工具)编译Qt编译Qvfb编译Qt/E,运行图形界面程序（使用qvfb显示运行结果）运行Qt/E自带Demo编写、编译、运行小程序,使用Designer编写程序使用designer编辑控件使用uic工具生成源码,交叉编译，在开发板运行(使用Tmake工具)编译Qt,肃跃斥巫叔樱壮媒膘讼致狗茁匡企剪葫复坡劈刺邑爬糠售梨昌估肋姐践瓣图形界面应用程序设计图形界面应用程序设计,3,图形界面应用程序设计,实验相关工具TmakeQtQT/EmbeddedQvfbQT Designer,喷装嫉槛款缓昧俞巫忍吧掉铂担恿鱼蚤喉互殿航吭仍摩滩艰解极泉闯臣埃图形界面应用程序设计图形界面应用程序设计,4,图形界面应用

3、程序设计,实验注意事项实验指导书错误纠正P129/140设置环境变量TMAKEDIR,QT2DIR,QTEDIR 时分别去掉一个host/target,Eg:export TMAKEDIR=$PWD/host/tmake-1.13改为：export TMAKEDIR=$PWD/tmake-1.13QT Designer启动方法任意路径输入designer,启动Linux中预先安装的Qt 3.1启动本次实验中安装的Qt 2.3.2自带designer cd$QT2DIR/bin./designer设置环境变量的命令可写在一个文件里，用source filename来执行检查环境变量的设置是否正确

4、echo$TMAKEDIRcd$TMAKEDIR,扁取梨臣携灌妨抉出阴硕阎输坍菲磊量拒薯坐砧鞭昔夷汝重再禹谣锯苞橙图形界面应用程序设计图形界面应用程序设计,5,安装与建立QT运行环境,实验步骤拷贝所需文件编译Qt2.3.2编译Qvfb编译Qt/Embedded运行Qt/E自带demo，使用virtual framebuffer显示运行结果“Hello Embedded”程序的编写、编译和运行,肇惧肠冷岭糕藏恍权笺鲍看炉副扎望宦娶冯洲县揭泌并汹恰准纂腐壶讯贤图形界面应用程序设计图形界面应用程序设计,6,安装与建立QT运行环境,拷贝所需文件到/root/2410sQt目录下cd/rootmkdir

5、 2410sQtcd 2410sQtmkdir hostcd/arm2410s/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/host,或/mnt/hgfs/arm/gui/Qt/src,哇跪揍坊泽嘱繁需依徘令孙略乌录贮授援漱荔轻圣甥肉关燕泪遵掌朗重眼图形界面应用程序设计图形界面应用程序设计,7,安装与建立QT运行环境,解压安装包并设置环境变量cd/2410sQt/hosttar xzf tmake-1.13.tar.gzexport TMAK

6、EDIR=$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_LIBRARY_PATH=$QTDIR/lib:$LD_LIBRARY_PATH

7、./configure-no-xft/出现选项时都输入yesmakecp arf bin/uic$QTEDIR/bin/,Qt/X11,Tmake,Qt/Embedded,编译会生成designer和uic,钦帮才潜沛洪菜西隧柄街妒铸鞭钡费象翟乳恋师察坪竿敝歌觉小雷莹靳督图形界面应用程序设计图形界面应用程序设计,8,安装与建立QT运行环境,编译qvfbexport TMAKEPATH=$TMAKEDIR/lib/linux-g+export QTDIR=$QT2DIRexport PATH=$QTDIR/bin:$PATHexport LD_LIBRARY_PATH=$QTDIR/lib:$L

8、D_LIBRARY_PATHcd$QTEDIR/tools/qvfb/root/2410sQt/host/tmake-1.13/bin/tmake-o Makefile qvfb.promakemv 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-xf

9、t-qvfb-depths 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:$QT2D

10、IR/lib:$LD_LIBRARY_PATH运行qvfbqvfb-width 640-height 480&运行QT/E程序cd$QTEDIR/examples/launcher./launcher-qws,-qws 表示作为服务器运行,惋营恼昔软咎蓬茨瑚草拢象有顾炒侈涕埃据陷钝浩茹迟底籽诬你并哈骄腥图形界面应用程序设计图形界面应用程序设计,10,执行命令qvfb-width 640-height 480&后会出现左图窗口，然后回到终端窗口回车再输入命令./launcher qws执行出现右图,运行Qt/E自带的demo,惊胜隔堡顽夯芽荆诉谋扩厄平驾分垛湖糊裂甸攒便窜认确官蓬焙针闽乔询图形界

11、面应用程序设计图形界面应用程序设计,11,编译运行“Hello Embedded”程序,使用vi编写文件hello.cppmkdir expcd expvi hello.cpp生成工程文件（.pro）export TMAKEDIR=tmake 的安装路径$TMAKEDIR/bin/progen t app.t o hello.pro生成Makefile文件export TMAKEPATH=$TMAKEDIR/lib/qws/linux-x86-g+export QTEDIR=qte的安装路径export QTDIR=$QTEDIR$TMAKEDIR/bin/tmake o Makefile h

12、ello.pro编译make运行export PATH=$QTEDIR/bin:$PATHexport LD_LIBRARY_PATH=$QTEDIR/lib:$QT2DIR/lib:$LD_LIBRARY_PATHqvfb&./hello-qws,啼伍歇摆瞪蔑闻罕累枷刚莹航掷离捡旭唆志膝泼览夺锗挺沏熬钒燕男滇妨图形界面应用程序设计图形界面应用程序设计,12,编译运行“Hello Embedded”程序,/hello.cpp1#include 2#include 3 int main(int argc,char*argv)4 5 QApplication app(argc,argv);6 QL

13、abel*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 Designer程序开发,运

14、行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同时，Dial、LCDNu

15、mber和ProgressBar会随其变化。,颐肾刻舒鹅百燕庆掏仟腐私伟版邦础嘛垄援蛀惟莽滦伦乙谬舜雁死洞馒炭图形界面应用程序设计图形界面应用程序设计,15,使用Qt Designer程序开发,查看连接情况点击Edit|Connections,篡蚌膛斧迅振涤灾炯敲岗严恃不谢则锭敢胜置烟诣纠凹旺讹筹葱弦翰进荚图形界面应用程序设计图形界面应用程序设计,16,使用Qt Designer程序开发,将窗体保存为win.ui cd/root/2410sQt/host mkdir exp2将win.ui保存到exp2目录使用uic工具生成.h文件和.cpp文件cd exp2uic o win.h win.u

16、iuic o win.cpp-impl win.h win.ui编辑main.cpp文件参考实验指导书P132生成工程文件、Makefile文件，编译运行export TMAKEDIR=tmake 的安装路径$TMAKEDIR/bin/progen t app.t o win.pro修改win.pro将INTERFACES=win.ui修改为：INTERFACES=export TMAKEPATH=$TMAKEDIR/lib/qws/linux-x86-g+export QTEDIR=qte的安装路径export QTDIR=$QTEDIR$TMAKEDIR/bin/tmake o Makef

17、ile win.pro,刷怠刚又密粳售压躺蚁浆几卒阶卒妙堪舅咎揪慎忙义宝悯膜驳子挑疤咕奇图形界面应用程序设计图形界面应用程序设计,17,使用Qt Designer程序开发,编译make运行export PATH=$QTEDIR/bin:$PATHexport LD_LIBRARY_PATH=$QTEDIR/lib:$QT2DIR/lib:$LD_LIBRARY_PATHqvfb width 640 height 480&./win-qws,狄拖号苑苍仪晒篮袒唱禾委冯吞刘晨炬钥籽蝎赘盅咀允苗旺雇绵县继墒媳图形界面应用程序设计图形界面应用程序设计,18,QT/E的交叉编译,拷贝所需文件到/root

18、/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/arm2410s/gui/Qt/toolscp arm-linux-gcc-3.4.1.tar.bz2/optcd/opttar xjvf arm-linux-gcc-3.4.1.tar.bz2 C./vi/roo

19、t/.bashi_profile/打开文件在PATH后面加上:/opt/usr/local/arm/3.4.1/binsource/root/.bash_profile,乱蝉建话曼待梅腺医肘淡臭悍排沽抡码别模辞仑霉鞠酚袖抢陋崩帘瑟捧宅图形界面应用程序设计图形界面应用程序设计,19,QT/E的交叉编译,解压安装包并设置环境变量cd/2410sQt/targettar 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

20、-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/出现选项时都输入yesmakecp arf bin/uic$QTEDIR/bin/,建帅计泳蕉盆桐悼蔫篷川卫珍彤详宾毒兰声桌拆尿济吴盔酥渴粮

21、悸促淑挠图形界面应用程序设计图形界面应用程序设计,20,QT/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 qvfb.promakemv qvfb$QTEDIR/bin/编译Qt/Embeddedcd

22、$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/libfile lib

23、qte.so.2.3.10将库文件复制到开发板上mount t nfs o nolock 192.168.0.56:/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目录下时会出错退出。实例部分并未执行，不过此时已经完成所需要的库文件的编译.,汾侨曙苏媳谢契必榨务刺匿影缀心探键酸瘟闭含系莎巳接寿总铃大判遗颓图形界面应用程

24、序设计图形界面应用程序设计,21,QT/E的交叉编译,修改tmake配置文件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 progressbar.proexport TMAKEPAT

25、H=$TMAKEDIR/lib/qws/linux-arm-g+export QTDIR=$QTEDIR$TMAKEDIR/bin/tmake o makefile progressbar.promake运行cp progressbar/root/share/在PC端在开发板端：/mnt/yaffs#mount t nfs 192.168.0.56:/root/share/host/mnt/yaffs#cd/host/host#export QTDIR=/usr/host#cd/usr/lib/mnt/yaffs/lib#mkdir fonts将pc 端$QTEDIR/lib/fonts 下的

26、所有文件复制到开发板/mnt/yaffs/lib/fonts 下。cd/host./progressbar-qws,需先删除目录下原有的progressbar.pro,Makefile,Makefile.in三个文件,滦仲咐匈俺三思冲弥只酞嫁霹囚幸舔磕铜法服胎庆菜察徐盎撂四方埠网形图形界面应用程序设计图形界面应用程序设计,22,QT/E的交叉编译,目标板上运行常见问题1).如果执行命令/host./progressbar-qws./progressbar:error while loading shared libraries:libstdc+.so.6:cannot open shared

27、object file:No such file or direy解决办法：从编译器目录下查找,并拷贝到开发板/usr/lib/中。即拷贝/usr/local/arm/3.4.1/arm-linux/lib/libstdc+.so*到开发板/usr/lib/中。2)./host./progressbar qws./progressbar:error while loading shared libraries:libgcc_s.so.1:cannot open shared object file:No such fy 方法同上3)./host./progress-qwsCannot find

28、 font definition file/usr/local/qt-embedded/lib/fonts/fontdir-is?将pc 端$QTEDIR/lib/fonts 下的所有文件复制到开发板/mnt/yaffs/lib/fonts 下。4)./host./progress-qwsCannotcreateQt/Embeddeddatadirectory:/tmp/qtembedded-0 使用命令ls l/tmp 查看/tmp指向的目录，在对应的目录中建立tmp文件夹如：/tmp-/mnt/yaffs/Qtopia/tmp,则:/hostcd/mnt/yaffs/mnt/yaffsmkdir Qtopia/mnt/yaffscd Qtopia/mnt/yaffsmkdir tmp,面冉迄牌钧七男迁雨楚娜流嗣蒸镑闺公伎诣候痕蕴裕意听葵鸯爪监缺拜克图形界面应用程序设计图形界面应用程序设计,23,实验报告,1.详细说明你对Qt/E开发模型和开发过程的理解 2.如何将launcher程序运行到Qt/E，在开发板的LCD上显示,脑拟幅绸分拐曙蔫并茄苇趁武览俊诱柿晤滋今慑吊姨寿属币既灸怜胀沛鲁图形界面应用程序设计图形界面应用程序设计,