在linux环境用Qt实现文本编辑器和网络通信

Qt GUI程序设计

Qt GUI Programing Design

摘要

Qt是诺基亚开发的一个跨平台的C++图形用户界面应用程序框架。它提供给应用程序开发者建立艺术级的图形用户界面所需的所用功能。Qt是完全面向对象的，很容易扩展，并且允许真正地组件编程。本文就是用Qt来实现文本编辑器和基于TCP协议的网络编程。其中文本编辑器可以实现新建文件，文件保存，文件另存为，打开，退出，复制，撤销，全选，粘贴，剪切，查找等功能有。另外还利用QtNetwork模块开发了一个Qt TCP的网络应用程序，实现了一个简单字符串的传输。在Qt中提供了QTcpSocket类来编写客户端程序，使用QTcpServer类编写服务器端程序。

本文首先分析了课题的背景，并对Qt，文本编辑器，基于TCP的Qt网络进行简要介绍。然后，给出了文本编辑器以及利用QtNetwork模块开发了一个Qt TCP的网络应用程序的原理和设计过程，并列出大量截图。最后，进行总结，并列出了自己在设计时遇到的问题。

关键词：Qt文本编辑器QTcpSocket TCP协议

目录

第1章绪论 (1)

1.1 课题研究的目的意义 (1)

1.2 Qt简介 (1)

1.3 文本编辑器 (2)

1.4 基于TCP的Qt网络 (3)

第2章文本编辑器的设计 (4)

2.1 记事本界面设计 (4)

2.2 记事本功能设计 (6)

2.2.1 新建文件，保存文件，和文件另存为 (6)

2.2.2实现打开，关闭，退出，撤销，复制，剪切，粘贴的功能 (9)

第3章 Qt TCP的网络应用程序设计 (13)

3.1 TCP socket 通信工作原理 (13)

3.2 设计过程 (13)

3.2.1 服务器端 (13)

3.2.2 客户端 (15)

3.2.3 结果 (17)

第4章总结 (19)

附录 (20)

附录A：文本编辑器代码 (20)

附录B：客户端代码 (27)

附录C：服务器端代码 (30)

第1章绪论

1.1 课题研究的目的意义

随着嵌入式产品的发展，往往要求嵌入式操作系统有网络和图形的功能。利用源代码开放的Linux搭建的嵌入式操作系统，由于强大的网络功能和低成本，近来得到了越来越多的应用。其能够提供全功能的桌面计算，定制非常方便并且支持大多数嵌入式系统上使用的芯片，包括Strong ARM，MIPS和Power PC等。在嵌入式Linux操作系统上使用一个功能完备的轻量级、高性能、高可靠、可配置的GUI系统成为可行的解决方案。

虽然市场上现在已经有了众多的优秀的GUI应用软件，但随着近年来计算机技术的迅速发展，当新硬件、新技术出现时，计算机的体系结构、指令系统和操作系统都可能发生相应的改变，这势必会导致一部分应用软件在新环境下无法正常运行。如果舍弃原有软件而重新开发，将会耗费大量的人力和资金，而且浪费了许多成熟的软件成果。

而Qt在源代码级上实现了跨平台特性，极大的支持了跨平台通用软件的开发。Qt可以用同一个源程序在不同平台上编译链接，生成目标代码，并取得相同的运行效果，称为“一次编写，随处编译”，利用这种方法充分实现了程序的跨平台运行。这种基于源代码的跨平台特性不仅解决了性能的问题，而且可以发挥各个平台的优势，充分利用每个平台自身的特点；并且即可以在新环境下实现原有软件的功能和特点，减少开发费用，还可以改进原有软件的不足，增加新的需求，从而提高软件的质量，延长软件生命期。

因此，利用Linux下基于Qt的嵌入式终端应用程序开发是一个非常有意义的课题，具有重要的研究和商业价值。

1.2 Qt简介

Qt是诺基亚开发的一个跨平台的C++图形用户界面应用程序框架。它提供给应用程序开发者建立艺术级的图形用户界面所需的所用功能。Qt是完全面向对象的，很容易扩展，并且允许真正地组件编程。

Qt是一个跨平台的C++图形用户界面应用程序框架。它提供给应用程序开发者建立艺术级的图形用户界面所需的所用功能。Qt是完全面向对象的，很容易扩展，并且允许真正地组件编程。

自从1996年早些时候，Qt进入商业领域，它已经成为全世界范围内数千种成功的应用程序的基础。Qt也是流行的Linux桌面环境KDE 的基础，KDE是所有主要的Linux发行版的一个标准组件。

Qt是诺基亚公司的一个产品。Qt 的良好封装机制使得Qt 的模块化程度非常高，可重用性较好，对于用户开发来说是非常方便的。Qt 提供了一种称为signals/slots 的安全类型来替代callback，这使得各个元件之间的协同工作变得十分简单。

Qt 有丰富的API ，包括多达250 个以上的C++ 类，还提供基于模板的collections，serialization，file，I/O device，directory management，date/time 类。甚至还包括正则表达式的处理功能。

1.3 文本编辑器

文本编辑器可以将目录下的记事本文件以文件名列表的形式显示出来，并可以实现记事本文件的新建、打开、编辑和删除等功能；文本编辑器也可以实现文字的剪切，复制，粘贴，查找等功能，并可以通过软键盘对文本进行编辑等。

（1）文件列表功能：记事本的文件列表用于显示记事本文件名，并且当记事本文件名过长时进行文件名长度显示的控制。

（2）新建文件功能：新建记事本文件时，提示输入文件名，如果没有输入文件名而选择直接进入文件编辑界面，系统则提供默认的文件名用于存储文件。编辑新建文件时，文件名在编辑界面上方显示。

（3）文本编辑功能：编辑文件时，可以实现文字的剪切，复制，粘贴，查找等功能。保存文件后，文件名立即显示在文件列表上。

（4）打开文件功能：根据文件列表选择打开指定的文件，打开指定文件时，显示打开文件的文件内容在文件编辑界面上，文件内容过多时可以滚动显示，并在文件编辑界面的上方滚动显示打开的文件的文件名。

（5）打开下一个文件功能：在当前打开文件列表界面，若选择“打开一个文件”功能，则显示下一个文件的内容在文件编辑区。

（6）文件内容修改提示功能：若在打开的文件中对其内容进行了修改，在关闭文件时将会提示文件的内容已经被修改的消息，用户可选择是否保存修改后的内容。

（7）删除文件功能：可以在文件列表上对指定文件进行删除操作，也可以打开文件后，对打开的文件进行删除操作。

（8）软键盘输入功能：软键盘支持英文输入，Cap键支持大小写英文切换，提供Shift键的上下字符切换功能，Enter可以进行回车换行，其ESC键执行软键盘退出功能。软键盘上的按键与物理键盘的按键位置相对应。

（10）给用户提供友好的图形用户界面，并合理安排界面元素布局，使其交互性好且方便用户操作。

1.4 基于TCP的Qt网络

TCP即Transmission Control Protocol，传输控制协议。与UDP不同，它是面向连接和数据流的可靠传输协议。也就是说，它能使一台计算机上的数据无差错的发往网络上的其他计算机，所以当要传输大量数据时，我们选用TCP协议。

TCP协议的程序使用的是客户端/服务器模式，在Qt中提供了QTcpSocket 类来编写客户端程序，使用QTcpServer类编写服务器端程序。我们在服务器端进行端口的监听，一旦发现客户端的连接请求，就会发出newConnection()信号，我们可以关联这个信号到我们自己的槽函数，进行数据的发送。而在客户端，一旦有数据到来就会发出readyRead()信号，我们可以关联此信号，进行数据的接收。其实，在程序中最难理解的地方就是程序的发送和接收了，为了让大家更好的理解，我们在这一节只是讲述一个传输简单的字符串的例子，在下一节再进行扩展，实现任意文件的传输。

第2章文本编辑器的设计

2.1 记事本界面设计

（1）新建Qt4 Gui Application工程，将工程命名为MainWindow，其他选项默认即可。打开工程中自带的ui文件，进行界面设计。首先我们在Type Here那里双击，并输入“文件(&F)”，这样便可将其文件菜单的快捷键设为Alt+F。在需要的地方加上分隔线。其余同理，制作出下图所示界面。

（2）在工程mainwindow2中新建一个images的文件夹，从网上下载图标，复制到images中。新建Qt Resources file，将它命名为menu。其他默认。在Qt Creator的menu.qrc文件中，我们点击Add下拉框，选择Add Prefix。我们可以将生成的/new/prefix前缀改为其他名字，如/File。然后再选择Add下拉框，选择Add Files。再弹出的对话框中，我们到新建的images文件夹下，将里面的图标文件全部添加过来。添加到资源，这时再打开资源选择器，可以看到我们的图标都在这里了，我们将new.png作为“新建”菜单的图标，然后点击Shortcut，并按下Crtl+N，便能将Crtl+N作为“新建”菜单的快捷键。

（3）对所有操作加上图标，快捷键，把常用图标拖到工具栏里。界面如下图所示：

（4）先在主窗口的中心拖入一个文本编辑器Text Edit。下面我们选中主窗口部件，然后在空白处点击鼠标右键，选择Layout->Lay Out in a Grid，使整个主窗口的中心区处于网格布局管理器中。

2.2 记事本功能设计

2.2.1 新建文件，保存文件，和文件另存为

在开始正式写程序之前，我们先要考虑一下整个流程。因为我们要写记事本一样的软件，所以最好先打开windows中的记事本，进行一些简单的操作，然后考虑怎样去实现这些功能。再者，再强大的软件，它的功能也是一个一个加上去的，不要设想一下子写出所有的功能。我们这里先实现新建文件，保存文件，和文件另存为三个功能，是因为它们联系很紧，而且这三个功能总的代码量也不是很大。

新建文件，那么如果有正在编辑的文件，是否需要保存呢？如果需要进行保存，那这个文件以前保存过吗？如果没有保存过，就应该先将其另存为。

（1）添加“新建”操作的函数定义。

void MainWindow::do_file_New() //实现新建文件的功能

{ do_file_SaveOrNot();

isSaved = false;

curFile = tr(“未命名.txt”);

setWindowTitle(curFile); ui->textEdit->clear(); //清空文本编辑器ui->textEdit->setVisible(true); //文本编辑器可见

}

新建文件，先要判断正在编辑的文件是否需要保存。然后将新建的文件标志为未保存过状态。

(2)再添加do_file_SaveOrNot函数的定义。

void MainWindow::do_file_SaveOrNot() //弹出是否保存文件对话框

{

if(ui->textEdit->document()->isModified()) //如果文件被更改过，弹出保存对话框

{

QMessageBox box;

box.setWindowTitle(tr("警告"));

box.setIcon(QMessageBox::Warning);

box.setText(curFile + tr("尚未保存，是否保存？"));

box.setStandardButtons(QMessageBox::Yes | QMessageBox::No);

if(box.exec() == QMessageBox::Yes) //如果选择保存文件，则执行保存操作

do_file_Save();

}

}

这个函数实现弹出一个对话框，询问是否保存正在编辑的文件。

(3)再添加“保存”操作的函数定

void MainWindow::do_file_Save() //保存文件

{

if(isSaved)

{ //如果文件已经被保存过，直接保存文件

saveFile(curFile);

}

else{

do_file_SaveAs(); //如果文件是第一次保存，那么调用另存为

}

}

（4）下面是“另存为”操作的函数定义

void MainWindow::do_file_SaveAs() //文件另存为

{

QString fileName = QFileDialog::getSaveFileName(this,tr("另存为"),curFile);

//获得文件名

if(!fileName.isEmpty()) //如果文件名不为空，则保存文件内容

{ saveFile(fileName); }

}

（5）双击mainwindow.ui文件，在图形界面窗口下面的Action Editor 动作编辑器里，我们右击“新建”菜单一条，选择Go to slot，然后选择triggered（），进入其触发事件槽函数。同理，进入其他两个菜单的槽函数，将相应的操作的函数写入槽函数中。如下。

void MainWindow::on_action_New_triggered() //信号和槽的关联{ do_file_New(); }

void MainWindow::on_action_Save_triggered() { do_file_Save(); } void MainWindow::on_action_SaveAs_triggered()

{ do_file_SaveAs(); }

2.2.2实现打开，关闭，退出，撤销，复制，剪切，粘贴的功能

（1）打开，关闭，退出功能

先在mainwindow.h文件中加入函数的声明。 void do_file_Open(); //打开文件和bool do_file_Load(const QString& fileName); //读取文件。

再在mainwindow.cpp文件中写函数的功能实现。程序见附录

最后按顺序加入更菜单的关联函数，如下。

void MainWindow::on_action_N_triggered()

{

do_file_New();

}

void MainWindow::on_action_O_triggered()

{

do_file_Open();

}

void MainWindow::on_action_S_triggered()

{

do_file_Save();

}

void MainWindow::on_action_A_triggered()

{

do_file_SaveAs();

}

void MainWindow::on_action_X_triggered()

{

on_action_C_triggered(); //先执行关闭操作

qApp->quit(); //再退出系统，qApp是指向应用程序的全局指针

}

（2）撤销，复制，剪切，粘贴的功能

因为复制，撤销，全选，粘贴，剪切等功能，是TextEdit默认就有的，所以我们只需调用一下相应函数就行。

撤销

void MainWindow::on_action_Z_triggered()

{

ui->textEdit->undo();

}

剪切

void MainWindow::on_action_X_2_triggered()

{

ui->textEdit->cut();

}

复制

void MainWindow::on_action_C_3_triggered()

{

ui->textEdit->copy();

}

粘贴

void MainWindow::on_action_V_triggered()

{

ui->textEdit->paste();

}

2.2.3实现文本查找功能

（1）在mainwindow.h中加入#include 的头文件包含，在private中添加 QLineEdit *find_textLineEdit;声明一个行编辑器，用于输入要查找的内容。在private slots中添加 void show_findText(); 在该函数中实现查找字符串的功能。

（2）我们进入查找菜单的触发事件槽函数void MainWindow:: on_action_Find_triggered()，这里我们直接用代码生成了一个对话框，其中一个行编辑器可以输入要查找的字符，一个按钮可以进行查找操作。我们将这两个部件放到了一个垂直布局管理器中。然后显示这个对话框。并设置了那个按钮单击事件与show_findText()函数的关联。然后开始写实现查找功能的show_findText()函数。

void MainWindow::show_findText()//“查找下一个”按钮的槽函数

{

QString findText = find_textLineEdit->text();

//获取行编辑器中的内容

if(!ui->textEdit->find(findText,QTextDocument::FindBackward)) {

QMessageBox::warning(this,tr("查找"),tr("找不

到 %1") .arg(findText);

}

}

（3）结果

第3章 Qt TCP的网络应用程序设计

3.1 TCP socket 通信工作原理

网络程序是软件开发的主要方面之一．传统方法是利用套接字(Socket)进行编程。由于套接字包含了众多的函数和数据结构，因此较难掌握与使用。Qt把网络编程有关的函数和数据结构封装成各种类．使得程序的开发更加简洁与高效。本文将对Qt中与TCP网络编程进行分析，并通过一个简单的客户端，服务器程序展示如何利用这些类开发支持TCP协议的程序。

客户端：

（1）创建TCP套接口。客户端也是通过调用socket()函数来创建套接口。

（2）指定服务器IP地址和端口

（3）建立与服务器的链接。通过调用connect()函数与服务器取得链接。

(4)读入并输出服务器的应答

（5）终止程序

服务器：

（1）创建TCP套接口。客户端也是通过调用socket()函数来创建套接口。

（2）通过bind函数把socket的与主机的信息进行绑定。

（3）通过listen的函数监听客户端的连接。

（3）通过accept接受客户端的连接。

(4)读入并输出服务器的应答。

（5）终止程序。

3.2 设计过程

3.2.1 服务器端

(1)我们新建Qt4 Gui Application，工程名为“TCPSEVER”，选中QtNetwork 模块，Base class选择QWidget（说明：如果一些Qt Creator版本没有添加模块

一项，我们就需要在工程文件tcpServer.pro中添加一行代码：QT += network）

(2)我们在widget.ui的设计区添加一个Label，更改其objectName为statusLabel，用于显示一些状态信息。

(3)在widget.h文件中做以下更改。

添加头文件：#include

添加private对象：QTcpServer *tcpServer;

添加私有槽函数： private slots: void sendMessage();

(4)在widget.cpp文件中进行更改。在其构造函数中添加代码：

tcpServer = new QTcpServer(this);

if(!tcpServer->listen(QHostAddress::LocalHost,6666))

{ //监听本地主机的6666端口，如果出错就输出错误信息，并关闭qDebug() << tcpServer->errorString();

close();

}

connect(tcpServer,SIGNAL(newConnection()),this,SLOT(sendMessage()));

//连接信号和相应槽函数

我们在构造函数中使用tcpServer的listen()函数进行监听，然后关联了newConnection()和我们自己的sendMessage()函数。

下面我们实现sendMessage()函数。

void Widget::sendMessage()

{

QByteArray block; //用于暂存我们要发送的数据

QDataStream out(&block,QIODevice::WriteOnly);

//使用数据流写入数据

out.setVersion(QDataStream::Qt_4_6);

//设置数据流的版本,客户端和服务器端使用的版本要相同

out<<(quint16)0;

out<

out.device()->seek(0);

out<<(quint16)(block.size() - sizeof(quint16));

QTcpSocket *clientConnection = tcpServer->nextPendingConnection();

//我们获取已经建立的连接的子套接字

connect(clientConnection,SIGNAL(disconnected()),clientConnection

,SLOT(deleteLater()));

clientConnection->write(block);

clientConnection->disconnectFromHost();

ui->statusLable->setText("send message successful!!!");

}

这个是数据发送函数，我们主要介绍两点：(1)为了保证在客户端能接收到完整的文件，我们都在数据流的最开始写入完整文件的大小信息，这样客户端就可以根据大小信息来判断是否接受到了完整的文件。而在服务器端，我们在发送数据时就要首先发送实际文件的大小信息，但是，文件的大小一开始是无法预知的，所以我们先使用了out<<(quint16) 0;在block的开始添加了一个quint16大

小的空间，也就是两字节的空间，它用于后面放置文件的大小信息。然后out<seek(0)；返回到block的开始，加入实际的文件大小信息，也就是后面的代码，它是实际文件的大小:out<<(quint16) (block.size()-sizeof(quint16))；(2)在服务器端我们可以使用tcpServer的nextPendingConnection()函数来获取已经建立的连接的Tcp 套接字，使用它来完成数据的发送和其它操作。比如这里，我们关联了disconnected()信号和deleteLater()槽函数，然后我们发送数据clientConnection->write(block); 然后是clientConnection->disconnectFro mHost()；它表示当发送完成时就会断开连接，这时就会发出disconnected()信号，而最后调用deleteLater()函数保证在关闭连接后删除该套接字clientConnection。

3.2.2 客户端

我们在客户端程序中向服务器发送连接请求，当连接成功时接收服务器发送的数据。

(1)我们新建Qt4 Gui Application，工程名为“tcpclient”，选中QtNetwork 模块，Base class选择QWidget。我们在widget.ui中添加几个标签Label和两个Line Edit以及一个按钮Push Button。

其中“主机”后的Line Edit的objectName为hostLineEdit，“端口号”后的为portLineEdit。“收到的信息”标签的objectName为messageLabel 。

(2)在widget.h文件中做更改。

添加头文件：

#include

添加private变量：

QTcpSocket *tcpSocket; QString message; //存放从服务器接收到的字符串 quint16 blockSize; //存放文件的大小信息

添加私有槽函数：

private slots: void newConnect();//连接服务器

void readMessage(); //接收数据

void displayError(QAbstractSocket::SocketError); //显示错误

（3）在widget.cpp文件中做更改。

在构造函数中添加代码：

tcpSocket = new QTcpSocket(this);

connect(tcpSocket,SIGNAL(readyRead()),this,SLOT(readMessage()));

connect(tcpSocket,SIGNAL(error(QAbstractSocket::SocketError)),

this,SLOT(displayError(QAbstractSocket::SocketError)));

这里关联了tcpSocket的两个信号，当有数据到来时发出readyRead()信号，我们执行读取数据的readMessage()函数。当出现错误时发出error()信号，我们执行displayError()槽函数。

(4)实现newConnect()函数。

void Widget::newConnect()

{

blockSize = 0; //初始化其为0

tcpSocket->abort(); //取消已有的连接

tcpSocket->connectToHost(ui->hostLineEdit->text(),

ui->portLineEdit->text().toInt());

//连接到主机，这里从界面获取主机地址和端口号

}

这个函数实现了连接到服务器，下面会在“连接”按钮的单击事件槽函数中调用这个函数。

（5）实现readMessage()函数

void Widget::readMessage()

{

QDataStream in(tcpSocket);

in.setVersion(QDataStream::Qt_4_6);

if(blockSize==0) //如果是刚开始接收数据

{

//判断接收的数据是否有两字节，也就是文件的大小信息 //如果有则保存到blockSize 变量中，没有则返回，继续接收数据 if(tcpSocket->bytesAvailable() < (int)sizeof(quint16)) return;

in >> blockSize;

}

if(tcpSocket->bytesAvailable() < blockSize) return;

//如果没有得到全部的数据，则返回，继续接收数据

in >> message;

//将接收到的数据存放到变量中

ui->messageLabel->setText(message);

//显示接收到的数据

}

这个函数实现了数据的接收，它与服务器端的发送函数相对应。首先我们要获取文件的大小信息，然后根据文件的大小来判断是否接收到了完整的文件。

(6)实现displayError()函数

void Widget::displayError(QAbstractSocket::SocketError)

{

qDebug() << tcpSocket->errorString(); //输出错误信息

}

这里简单的实现了错误信息的输出。

（7）我们在widget.ui中进入“连接”按钮的单击事件槽函数，然后更改如下。

void Widget::on_pushButton_clicked() //连接按钮

{

newConnect(); //请求连接

}

这里直接调用了newConnect()函数。

3.2.3 结果

我们运行程序，同时运行服务器程序，然后在“主机”后填入“localhost”，在“端口号”后填入“6666”，点击“连接”按钮，效果如下。

可以看到我们正确地接收到了数据。因为服务器端和客户端是在同一台机子上运行的，所以我这里填写了“主机”为“localhost”，如果你在不同的机子上运行，需要在“主机”后填写其正确的IP地址。到这里我们最简单的TCP应用程序就完成了。