第十章GUI编程.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,第十章嵌入式,GUI,一,GUI,的概念,GUI,是,Graphical User Interface,的简称，即图形用户接口，通常人机交互图形化用户界面设计经常读做“,goo-ee,”,，准确来说,GUI,就是屏幕产品的视觉体验和互动操作部分。,GUI,是一种结合计算机科学、美学、心理学、行为学，及各商业领域需求分析的人机系统工程，强调人,机,环境三者作为一个系统进行总体设计。这种面向客户的系统工程设计其目的是优化产品的性能，使操作更人性化，减轻使用者的认知负担，使其更适合用户的操作需求，直接提升产品的市场竞争力。,GUI,准则：减少用户的认知负担、保持界面的一致性、满足不同目标用户的创意需求、用户界面友好性、图标识别平衡性、图标功能的一致性、建立界面与用户的互动交流。,GUI,应用领域：手机通讯移动产品、电脑操作平台、软件产品、,PDA,产品、数码产品、车载系统产品、智能家电产品、游戏产品、产品的在线推广。,二,GUI,的主要种类,（一）,.,Microwindows,Microwindows,是一个典型的基于,Server/,Clinent,体系结构的,GUI,系统 他分为三层 显示设备、输入设备，窗口管理硬件抽象层，,Nano,-X,、,ECMA APIW,。最底层是面向图形显示和键盘、鼠标或触摸屏的驱动程序；中间层提供底层硬件的抽象接口，并进行窗口管理；最高层分别提供兼容于,X Window,和,ECMA APIW,（,Win32,子集）的,API,。其中使用,Nano,-X,接口的,API,与,X,接口兼容，但是该接口没有提供窗口管理，如窗口移动和窗口剪切等高级功能，系统中需要首先启动,nano,-X,的,Server,程序,nanoxserver,和窗口管理程序,nanowm,。用户程序连接,nano,-X,的,Server,获得自身的窗口绘制操作。使用,ECMA APIW,编写的应用程序,无需,nanox,-server,和,nanowm,，可直接运行。,Microwindwos,系统提供了相对完善的图形功能和一些高级的特性，如,Alpha,混合、三维支持,和,TrueType,字体支持等。该系统为了提高运行速度，也改进了基于,Socket,套接字的,X,实现模式，采用了基于消息机制的,Server/Client,传输机制。,Microwindows,也有一些通用的窗口控件，但其图形引擎存在许多问题，可以归纳如下：,1,、无任何硬件加速能力；,2,、图形引擎中存在许多低效算法，如在圆弧图函数的逐点判断剪切的问题。,3,、由于该项目缺乏一个强有力的核心代码维护人员，,2003,年,Microwindows,推出版本,0.90,后，该项目的发展开始陷于停滞状态。,（二）,.,miniGUI,MiniGUI,是由国内自由软件开发人员设计开发,的，目标是为基于,Linux,的实时嵌入式系统提供一个轻量级的图形用户界面支持系统。,MiniGUI,的体系架构分为,GAL,层和,IAL,层、,Mini-thread,，,Mini-,lite,层、,ECMA APIW,三层。,MiniGUI,分为最底层的,GAL,层和,IAL,层，向上为基于标准,POSIX,接口中,pthread,库的,Mini-thread,架构 和基于,Server/Client,的,Mini-,Lite,架构。其中前者受限于,thread,模式对于整个系统的可靠性影响,进程中某个,thread,的意外 错误可能导致整个进程的崩溃，该架构应用于系统功能较为单一的场合。,Mini-,Lite,应用于多进程的应用场合，采用多进程运行方式设计的,Server/Client,架构能够较好地解决各个进程之间的窗口管理、,Z,序剪切等问题。,MiniGUI,还有一种从,Mini-,Lite,衍生出的,standalone,运行模式。与,Lite,架构不同的是，,standalone,模式一次只能以窗口最大化的方式显示一个窗口。这在显示屏尺寸较小的应用场合具有一定的应用意义。,MiniGUI,的,GAL,层技术,SVGA lib,、,LibGGI,、基于,framebuffer,的,native,图形引擎以及哑图形引擎等，对于,Trolltech,公司的,QVFB,在,X Window,下也有较好的支持。,IAL,层则支持,Linux,标准控制台下的,GPM,鼠标服务、触摸屏、标准键盘等。,MiniGUI,下丰富的控件资源也是,MiniGUI,的特点之一。当前,MiniGUI,的最新版本是,1.3.3,。该版本的控件中已经添加了窗口皮肤、工具条等桌面,GUI,中的高级控件支持。,（三）,.QT/Embedded,Qt/Embedded,是著名的,Qt,库开发商,Trolltech,公司开发的面向嵌入式系统的,Qt,版本。因为,Qt,是,KDE,等项目使用的,GUI,支持库，许多基于,Qt,的,X Window,程序因此可以非常方便地移植到,Qt/Embedded,上。,Qt/Embedded,同样是,Server/Client,结构。,Qt/Embedded,延续了,Qt,在,X,上的强大功能，在底层摒弃了,X lib,，仅采用,framebuffer,作为底层图形接口。同时，将外部输入设备抽象为,keyboard,和,mouse,输入事件，底层接口支持键盘、,GPM,鼠标、触摸屏以及用户自定义的设备等。,Qt/Embedded,类库完全采用,C+,封装。丰富的控件资源和较好的可移植性是,Qt/Embedded,最为优秀的一方面。它的类库接口完全兼容于同版本的,Qt-X11,，使用,X,下的开发工具可以直接开发基于,Qt/Embedded,的应用程序,QUI,界面。与前两种,GUI,系统不同的是，,Qt/Embedded,的底层图形引擎只能采用,framebuffer,。这就注定了它是针对高端嵌入式图形领域的应用而设计的。由于该库的代码追求面面俱到，以增加它对多种硬件设备的支持，造成了其底层代码比较凌乱，各种补丁较多的问题。,Qt/Embedded,的结构也过于复杂臃肿，很难进行底层的扩充、定制和移植，尤其是用来实现,signal/slot,机制的,moc,文件。,以上是常用的三种系统的介绍。在正常的应用中，应该考虑后两种系统,因为由于,microwindows,项目规模较小、功能较为薄弱，缺乏第三方软件开发的支持等诸多原因，在比较高级的手持或移动终端设备,(,如,PDA,、,Smart-Phone,、车载导航系统,),中应用较少。,MiniGUI,和,QTE,这两种系统的都具有免费版本和授权版本（收费），以下是两种系统的比较。,MiniGUI,应用前景,MiniGUI,的应用前景是很明显的，就是为,Linux,控制台提供一个简单可行的,GUI,支持系统，,MiniGUI,可以应用在,Windows CE,可以应用的任何场合，例如：上网机，或电视置顶盒；实时控制系统；个人电脑助理；掌上型电脑；等等，就让你自己去想象吧。当然，,MiniGUI,仍然能够在普通的,Linux,机器上运行，可作为一些小型游戏的支持平台，也可为控制台的小型应用提供图形界面支持，比如,一个简单的文字录入程序、小型浏览器、证券,资讯,分析程序等等。在,MiniGUI,的开发过程中，应始终强调一个,“,小,”,字，因为这才是,MiniGUI,真正的特色所在。,MiniGUI,已经具备了最初的雏形，我们将在后面内容中公布我们已经完成的工作和,MiniGUI,整体结构的介绍，也将为所有参加开放的人员提供,Maillist,的联系手段，以方便我们之间的讨论。那么我们在,MiniGUI,上还需要做一些什 么工作呢？,MiniGUI,的近期开发内容包括：,基于,Linux 2.2,FrameBuffer,的,GDI,（图形设备接口）；标准控件；,字体，包括,HBF,点阵字体和,TTF,字体支持；多内码支持；高级输入法支持。同时，我们打算在,MiniGUI,基础上开发出一些小型应用，可考虑的有：终端仿真程序。编写类似,Windows,cterm,一样的,BBS,专用,软件,；类似,chpower,的多字节字处理,软件,；基于,GNU,开发工具的集成开发环境。,安装与建立,Qt,桌面运行环境,一、实验目的,1.,了解在,Linux,下安装,Qt,以及,Qt/Embedded,的基本步骤；,2.,学会在,Qt/E,平台下使用,Virtual,framebuffer,显示程序结果；,二、实验内容,1.,了解在,Linux,下安装,Qt,以及,Qt/Embedded,的基本步骤；,2.,学会在,Qt/E,平台下使用,Virtual,framebuffer,显示程序结果,:,三、预备知识,1.,熟悉使用,C+,语言程序设计；,2.,掌握,Linux,下常用编辑器的使用；,3.,掌握,Linux,下程序编译；,4.,熟悉,Qt,程序设计；,实验步骤,在,Trolltech,公司的网站上可以下载该公司所提供的,Qt/Embedded,的免费版本,本次实,验目录下已有要下载的文件，在做实验前把本次实验用到的三个文件拷贝到,/root/2410sQt,目录下，以下的步骤是假设你在,/root/2410sQt,下操作的。,Qt/Embedded,平台的搭建需要以下几步：,第一步，解压安装包并设置环境变量,1,安装,Tmake,cd,/2410sQt,tar,xzf,tmake-1.13.tar.gz,export TMAKEDIR=$PWD/tmake-1.13,2,安装,Qt 2.3.2,cd,/2410sQt,tar,xzf,qt-x11-2.3.2.tar.gz,export QT2DIR=$PWD/qt-2.3.2,3,安装,Qt/Embedded,cd,/2410sQt,tar,xzf,qt-embedded-2.3.10-free.tar.gz,export QTEDIR=$PWD/qt-2.3.10,环境变量的设置是非常重要的，它关系到能否正确的安装及编译这些安装包，下面介,绍一下这些环境变量：,TMAKEDIR:,指向用于编译,Qt/Embedded,的,Tmake,工具,QT2DIR:,指向,Qt-X11 2.3.2,的文件夹,QTEDIR:,指向,Qt-Embedded 2.3.10,的文件夹,第二步，编译,Qt/Embedded,。,1,Build Qt2.3.2,cd,$QT2DIR,export TMAKEPATH=$,TMAKEDIR/lib/linux-g,+,export QTDIR=$QT2DIR,export PATH=$QTDIR/,bin:$PATH,export LD_LIBRARY_PATH=$QTDIR/,lib:$LD_LIBRARY_PATH,./configure-no-,xft,make,mkdir,$QTEDIR/bin,cp bin/,uic,$QTEDIR/bin/,./configure,是对,Qt,进行配置，它包括很多选项，例如可以通过添加“,-no-,opengl,”,等，如果想要,进一步了解可以通过键入,./configure-help,来获得更多的帮助信息。编译完成后需要将生成的,/bin/,uic,复制到,$QTEDIR,下新创建的目录,bin,中，因为在随后编译,Qt/Embedded,的时候会用到这个工具。,2.Build,Qvfb,export TMAKEPATH=$,TMAKEDIR/lib/linux-g,+,export QTDIR=$QT2DIR,export PATH=$QTDIR/,bin:$PATH,export LD_LIBRARY_PATH=$QTDIR/,lib:$LD_LIBRARY_PATH,cd,$QTEDIR/tools/,qvfb,tmake,-o,Makefile,qvfb.pro,make,mv,qvfb,$QTEDIR/bin/,这一步,build,qvfb,并建立了从,Qt/Embedded 2.3.10,到,Qt 2.3.2,的静态库的链接。其中,qvfb,工具用来生成,Virtual,framebuffer,，这是一个非常有用的工具，它可以模拟在开发板上,的显示情况，如果在,Virtual,framebuffer,中运行没有问题的话，可以直接通过交叉编译在开,发板上运行。,3.Build Qt/Embedded,cd,$QTEDIR,export TMAKEPATH=$TMAKEDIR/lib/qws/linux-x86-g+,export QTDIR=$QTEDIR,export PATH=$QTDIR/,bin:$PATH,export LD_LIBRARY_PATH=$QTDIR/,lib:$LD_LIBRARY_PATH,./configure-no-,xft,-,qvfb,-depths 4,8,16,32,make,在配置,./configure,中,-,qvfb,用来支持,Virtual,framebuffer,，,-depths 4,8,16,32,支持,4,位，,8,位，,16,位，,32,位的显示深度，此外还可以添加如,-,syestem,-jpeg,和,-gif,来提供对,jpeg,和,gif,的支持。配置系统同时还支持对特定平台系统选项的添加，但一般来讲，凡是支持,framebuffer,的,Linux,系统都可以使用“,linux-generic-g,+”,平台。详细的配置信息可以通过,运行,./configure-help,命令来查看。,第四步，查看运行结果，如果上面各步都能够成功的编译通过，下面就可以通过运行,Qt/Embedded,自带的,demo,来查看运行结果。,在宿主机（本机）的,framebuffer,上运行：,cd,$QTEDIR/examples/launcher,./launcher-,qws,在,Virtual,framebuffer,上运行：,export QTDIR=$QTEDIR,export PATH=$QTEDIR/,bin:$PATH,export LD_LIBRARY_PATH=$QTEDIR/lib:$QT2DIR/lib:$LD_LIBRARY_PATH,cd,$QTEDIR/examples/launcher,qvfb,-width 640-height 480&,sleep 10,./launcher-,qws,运行结果如下：,将上面的步骤完成后，我们就已经建立好了在本机上开发,Qt,应用程序的环境，下面,我们通过编写一个“,Hello Embedded”,的程序来了解,Qt,程序设计。程序代码如下：,/,hello.cpp,1#include,2#include,3,int,main(int,argc,char*,argv,),4,5,QApplication,app(,argc,argv,);,6,QLabel,*hello=new,QLabel(Hello,Qt/Embedded!,0);,7,app.setMainWidget(hello,);,8 hello-show();,9 return,app.exec,();,10,现在开始逐行讲解一下每一句是什么意思，掌握了这些以后可以帮助我们更加了解,Qt,的程序设计。,第,1,行和第,2,行包含了两个头文件，这两个头文件中包含了,QApplication,和,QLabel,类的定义。,第,5,行创建了一个,QApplication,对象，用于管理整个程序的资源，它需要,2,个参数，,因为,Qt,本身需要一些命令行的参数。,第,6,行创建了一个用来显示,Hello Qt/Embedded!,的部件。在,Qt,中，部件是一个可视化,用户接口，按钮、菜单、滚动条都是部件的实例。部件可以包含其它部件，例如，一个应,用程序窗口通常是一个包含,QMenuBar,、,QToolBar,、,QStatusBar,和其它部件的一个部件。,在,QLabel,函数中的参数,0,表示，这是一个窗口而不是嵌入到其它窗口中的部件。,第,7,行设置,hello,部件为程序的主部件，当用户关闭主部件后，应用程序将会被关闭。,如果没有主部件的话，即使用户关闭了窗口程序也会在后台继续运行。,第,8,行使,hello,部件可视，一般来说部件被创建后都是被隐藏的，因此可以在显示前根,据需要来订制部件，这样的好处是可以避免部件创建所造成的闪烁。,第,9,行把程序的控制权交还给,Qt,，这时候程序进入就绪模式，可是随时被用户行为,激活，例如点击鼠标、敲击键盘等。,下面我们要让我们的程序跑起来，首先要让它能够在,Virtual,framebuffer,中显示出来，,然后再通过交叉编译在开发板上运行。,要在本机的,Virtual,framebuffer,中显示结果，下面几步是必须的：,1,生成工程文件（,.pro,）,每一个,Qt,程序都对应着一个工程文件，因为,tmake,工具要借此工程生成相应的,Makefile,文件。生成工程文件需要使用,progen,工具，它的位置在,$TMAKEDIR/bin,下，使,用,progen,生成工程文件的方法如下：,生成的这个,hello.pro,工程文件是可以被修改的，可以编辑里面的头文件、源文件等内,容。,2,生成,Makefile,文件,Qt,提供了生成,Makefile,文件的工具,tmake,，这极大地方便了应用程序的开发，节省了,大量的时间，而且还可根据不同平台的需要生成适合于不同平台的,Makefile,文件。,在使用,tmake,工具前，必须查看相应的环境变量是否正确，由于我们要编译在本机上,运行的,Qt,程序，所以指定的编译器应该为“,linux-x86-g+”,，在命令行中输入下面的命令,来检查环境变量是否正确,查看返回的结果的结尾字符是否是“,/qws/linux-x86-g+”,，如果不是的话需要在,命令行中重新设置,TMAKEPATH,此外还要使,QTDIR,指向,Qt/Embedded,的安装路径，如：,export QTDIR=$QTEDIR,或者直接指定路径,export QTDIR=/qt-2.3.10,完成了上面的环境变量的设置，并用,echo,命令检查无误以后，就可以使用,tmake,工,具来生成我们需要的,Makefile,文件，在命令行中输入如下命令：,tmake,o,Makefile,hello.pro,完成上面的步骤以后就可以在当前的目录中生成一个,Makefile,文件，关于,Makefile,文件的功能和结构这里就不再做过多的介绍了，可以参考前面的章节来了解,Makefile,。,最后在命令行中输入,“,make”,命令就可以对整个程序进行编译链接了，最终生成了一个二进制的可执行文件,hello,。用,Virtual,framebuffer,显示效果如下,我们可以通过对,QLabel,*hello=new,QLabel(Hello,Qt/Embedded!,0),这句进行修改，,使我们的程序显示起来更为美观，修改如下：,QLabel,*hello=new,QLabel,(Hello,Qt/Embedded!,0);,修改后显示效果如图所示：,3.2 Qt Designer,简介以及,Qt/E,的交叉编译,一、实验目的,1.,了解,Qt Designer,的使用方法以及,Qt/Embedded,交叉编译的基本步骤；,2.,学会在使用,Qt Designer,编写程序，交叉编译，在开发板上运行；,二、实验内容,1.,在,Linux,下使用,Qt Designer,；,2.,在,Qt Designer,下编写程序，完成交叉编译并在开发板上运行；,三、预备知识,1.,熟悉使用,C+,语言程序设计；,2.,掌握,Linux,下常用编辑器的使用；,3.,掌握,Linux,下程序编译；,4.,熟悉,Qt,程序设计；,实验步骤,Qt,提供了非常强大的,GUI,编辑工具,Qt Designer,，它的操作界面类似于,Windows,下,的,Visual Studio,，而且它还提供了相当多的部件资源。,