第27章 【综合实例】多功能文档查看器

第27章【综合实例】多功能文档查看器——核心功能界面演示核心功能界面演示该程序可用于浏览网页、阅读文本和查看图片，并支持对文本进行编辑以及对图片进行缩放、旋转等操作，运行效果如图27.1～图27.4所示。核心功能界面演示图27.3查看图片图27.4缩放与旋转图片第27章【综合实例】多功能文档查看器——界面与程序框架界面与程序框架设计新建QtQuickControls应用程序，项目名为“MultiDocViewer”。这个文档查看器的界面菜单系统及工具栏的设计如图27.5所示，其中还展示了程序的“关于”对话框（单击主菜单“帮助”→“关于...”项打开），内有软件功能简介及版权声明信息。01准备应用资源1．图片资源2．网页资源3．测试用文件1．图片资源程序运行时要显示在各菜单项前和工具栏按钮上的图标，必须以图片资源的形式载入项目中方可正常使用。这里为项目准备的资源图片都放在项目工程目录的images文件夹中，如图27.6所示，总共有11个尺寸为32像素×32像素的PNG格式图片。2．网页资源程序启动时初始打开的网页（如图27.1所示）也要作为资源事先载入项目中，准备网页文件easybooks.htm及其资源文件夹easybooks（如图27.7所示），将它们一起复制到项目工程目录下。3．测试用文件为方便测试程序的功能，还要在计算机上创建一些文件和准备一些图片，如图27.8所示。02主程序代码框架主程序代码框架本例程序主体部分的代码写在main.qml文件中，代码量较多，为了给读者一个总体印象以便于理解，这里先只给出程序整体的代码框架。其中，(a)Action：Action是QtQuick为菜单式桌面应用开发提供的一种特殊元素，它的主要作用是将界面上UI控件之间的关联属性及需要完成的动作单独分离出来并重新封装成为一个实体，以便用户在设计界面时可以随时引用。Action的功能相当强大，Action类有text、iconSource、iconName、shortcut等属性及triggered信号，因为几乎所有MenuItem里的属性在Action里都能找到对应的成员，故MenuItem的text、iconSource、trigger信号等实现的效果都可以通过Action来实现，这两种方式是等同的。例如，本例中定义的一个Action（“打开图片”Action）代码为：Action{id:imgOpenAction //Action标识名iconSource:"images/fileimage.png" //图标来源iconName:"image-open" //图标名text:"打开图片" //提示文本onTriggered:imgDlg.open() //触发动作}这样定义后，在设计菜单项时就可直接引用该Action的标识名，如下：MenuItem{text:"图片..."action:imgOpenAction //指定所用Action的标识名}主程序代码框架如此一来，该菜单项就具备了这个Action的全部功能。若有需要，用户还可以只定义一个Action而在多个预设功能完全相同的子菜单项中重复多次使用（提高代码复用性）。使用Action还有一大好处，即在设计工具栏时只须指定工具按钮ToolButton的action属性为之前定义的某个Action的标识，就能很容易将它与对应菜单项关联起来，如本例中的语句：ToolButton{action:imgOpenAction}就生成了一个“打开图片”工具按钮，其上的图标、功能都与“图片...”菜单项相同，如图27.9所示的效果。主程序代码框架(b)ToolSeparator{}：因QtQuick中并没有提供工具栏分隔条元素，故需要用户自己定义。本例采用自定义组件的方式来设计工具栏上按钮间的分隔条，代码在ToolSeparator.qml文件中，如下：importQtQuick2.4Item{width:8anchors.top:parent.topanchors.bottom:parent.bottomanchors.margins:6Rectangle{width:1height:parent.heightanchors.horizontalCenter:parent.horizontalCentercolor:"#22000000"}Rectangle{width:1height:parent.heightanchors.horizontalCenterOffset:1anchors.horizontalCenter:parent.horizontalCentercolor:"#33ffffff"}}主程序代码框架(c)/*定义界面主显示区域的元素*/：界面中央是主显示区，用于显示打开文档的。根据打开文档的类型不同，本例定义了不同的组件元素来加以显示，它们都包含在统一的Item元素中，作为其子元素存在，并以控制可见性的方式分别显示和隐藏。(d)/*定义各种文档处理器对象*/：处理打开的文档内容，有两种方式。第一种是在主程序（main.qml）中直接编写文件处理函数。第二种是通过自定义的文档处理器对象。本例定义了两个处理器对象（HtmlHandler和TextHandler），分别用来处理网页和文本格式的文档。第27章【综合实例】多功能文档查看器——浏览网页功能实现01实现HtmlHandler处理器实现HtmlHandler处理器具体实现步骤如下：（1）右击项目视图的项目名“MultiDocViewer”→“添加新文件...”项，弹出“新建文件”对话框，如图27.10所示，选择文件和类“C++”下的“C++HeaderFile”（C++头文件）模板。实现HtmlHandler处理器单击“Choose…”按钮，在“Location”页的“名称”栏中输入“htmlhandler”，如图27.11所示。单击“下一步”按钮，再单击“完成”按钮，就创建好了一个C++头文件（后缀为.h），系统会自动在项目视图中生成一个“头文件”节点以存放该文件。实现HtmlHandler处理器（2）在htmlhandler.h文件中编写如下代码。（3）创建htmlhandler.cpp源文件，方法同第（1）步创建头文件的方法，不同的仅仅是在选择模板时要选“C++SourceFile”（C++源文件）。（4）编写htmlhandler.cpp文件，代码。（5）处理器编写完成后，要注册为QML类型的元素才能使用，注册语句写在main.cpp中：qmlRegisterType<HtmlHandler>("org.qtproject.easybooks",1,0,"HtmlHandler");注册之后，再在main.qml开头导入命名空间：importorg.qtproject.easybooks1.0这样就可以在QtQuick编程中直接使用HtmlHandler处理器元素了。02编写Action编写Action与网页浏览功能相对应的是“打开网页”Action，其代码（在main.qml中）如下：Action{id:htmlOpenAction //Action标识名iconSource:"images/filehtml.png" //图标来源iconName:"html-open" //图标名text:"打开网页" //提示文本onTriggered:htmlDlg.open() //触发动作}Action的text属性为提示性文本，在该Action与工具栏按钮绑定后，程序运行时，鼠标放在按钮上就会出现这个提示文字。该Action触发的动作是打开标识为htmlDlg的对话框（“打开网页”对话框）。03定义主显示区元素定义主显示区元素主显示区元素是一个TextArea，用于显示网页，定义（在main.qml中）如下：TextArea{id:htmlArea //显示区标识anchors.fill:parentreadOnly:true //网页为只读模式frameVisible:falsebaseUrl:"qrc:/" //默认载入项目qrc:/路径下的网页资源text:htmldoc.text //设置网页文档内容的来源textFormat:Qt.RichText //以富文本呈现}04实现“打开网页”对话框实现“打开网页”对话框“打开网页”对话框的实现代码（在main.qml中）。程序运行时，“打开网页”对话框的效果如图27.12所示。第27章【综合实例】多功能文档查看器——阅读文本功能实现01实现TextHandler处理器实现TextHandler处理器源文件texthandler.h的代码。源文件texthandler.cpp的代码。这样，本例用到的两个处理器都已经用C++实现了，它们全都注册在项目main.cpp文件中，为方便读者编程，这里给出注册了处理器的完整main.cpp代码：#include<QApplication>#include<QQmlApplicationEngine>#include"htmlhandler.h" //包含头文件#include"texthandler.h" //包含头文件#include<QtQml/qqml.h>#include<QIcon>intmain(intargc,char*argv[]){QApplicationapp(argc,argv);app.setWindowIcon(QIcon(":/images/vieweye.png")); //设置主窗口标题栏图标/*注册网页处理器*/qmlRegisterType<HtmlHandler>("org.qtproject.easybooks",1,0,"HtmlHandler");/*注册文本处理器*/qmlRegisterType<TextHandler>("org.qtproject.easybooks",1,0,"TextHandler");QQmlApplicationEngineengine;engine.load(QUrl(QStringLiteral("qrc:/main.qml")));returnapp.exec();}02编写Action编写Action打开文本后，可对其进行剪切、复制、粘贴操作，实现这些功能的Action代码。此外，还有一个实现打开文本功能的Action，其代码为：Action{id:txtOpenActioniconSource:"images/filetext.png"iconName:"text-open"text:"打开文本"onTriggered:txtDlg.open()}03定义主显示区元素定义主显示区元素文本的主显示区元素也是一个TextArea，定义如下：TextArea{id:textArea //显示区标识anchors.fill:parentvisible:falseframeVisible:falsewrapMode:TextEdit.WordWrap //显示模式：单词自动换行font.pointSize:12 //设置字号text:textdoc.text //设置文本文档内容的来源style:TextAreaStyle{ //样式定制backgroundColor:main.textBackgroundColortextColor:main.textColorselectedTextColor:"red"selectionColor:"aqua" //水绿色}Component.onCompleted:forceActiveFocus() //自动获取焦点}这里应用样式定制的方法设定文本显示区为黑底白字，鼠标选中的文字则呈现红色并衬以水绿色的背景，十分醒目易读，效果如图27.13所示。04实现“打开文本”对话框实现“打开文本”对话框“打开文本”对话框的实现代码。程序运行时，“打开文本”对话框的效果如图27.14所示。第27章【综合实例】多功能文档查看器——查看图片功能实现01编写Action编写Action图片打开后可支持缩放和旋转操作，实现这些功能的Action代码。此外，还有一个实现打开图片功能的Action，其代码为：Action{id:imgOpenActioniconSource:"images/fileimage.png"iconName:"image-open"text:"打开图片"onTriggered:imgDlg.open()}02定义主显示区元素定义主显示区元素图像的主显示区元素是一个Image，定义如下：Image{id:imageArea //显示区标识anchors.fill:parentvisible:falseasynchronous:true //异步传输数据fillMode:Image.PreserveAspectFit //填充模式为自适应onStatusChanged:{if(status===Image.Loading){ //正在加载大图像时呈现忙等待标志busy.running=true;}elseif(status===Image.Ready){ //载入完成busy.running=false;}elseif(status===Image.Error){ //载入图像出错busy.running=false;mainStatusBar.text="图片无法显示"}}}03实现“打开图片”对话框实现“打开图片”对话框“打开图片”对话框的实现代码如下：FileDialog{id:imgDlg //对话框标识title:"打开图片" //对话框标题nameFilters:["图像文件(*.jpg*.png*.gif*.bmp*.ico)"] //限定可选的图片格式onAccepted:{varfilepath=newString(fileUrl); //获取图片路径mainStatusBar.text=filepath.slice(8); //状态栏同步显示当前打开的图片路径 /*以下为截取图片文件名的操作*/vardot=filepath.lastIndexOf(".");varsep=filepath.lastIndexOf("/");if(dot>sep){varfilename=filepath.substring(sep+1);main.processFile(fileUrl,filename); //对图片路径和文件名做进一步处理}else{mainStatusBar.text="出错！MultiDocViewer不支持此格式的图片";}}}实现“打开图片”对话框程序运行时，“打开图片”对话框的效果如图27.15所示。04对图片的处理对图片的处理与网页和文本不同，本例对图片的处理采用在main.qml中直接编写文件处理函数的方式来实现。文件处理函数processFile的代码如下：functionprocessFile(fileUrl,name){/*控制各显示区元素的显隐状态*/if(centralArea.current!=imageArea){if(centralArea.current!=null){centralArea.current.visible=false;}imageArea.visible=true;centralArea.current=imageArea;}imageArea.source=fileUrl; //获取图片源main.title=name+"-多功能文档查看器" //设置主窗口标题/*设置系统各功能项的可用性*/copyAction.enabled=falsecutAction.enabled=falsepasteAction.enabled=falseimgRotaleftAction.enabled=trueimgRotarightAction.enabled=trueimgZoominAction.enabled=trueimgZoomoutAction.enabled=true}