本文介绍如何使用QML和C++构建一个简单的文本编辑器。通过将UI设计与程序逻辑分离，利用QML进行原型设计，再通过C++实现文件加载与保存功能。文章详细介绍了构建Qt插件的过程，以及如何在QML中暴露C++类。
我们完成一个简单的文本编辑器的UI的生成工作。UI完成了，我们可以继续往前走,使用正常的Qt和C++来实现程序逻辑了。QML是一个很好的原型设计工具，将UI设计和程序逻辑分割开来。
Extending QML using Qt C++
现在我们有了文本编辑器的布局，可以在C++中实现功能了。使用带C++的QML使我们可以用Qt创建程序逻辑。我们可以使用Qt的declarative类在C++程序中创建一个QML上下文，使用图形场景来显示QML元素。或者也可以将我们的C++代码导出到qmlviewer工具可以读的plugin中。对于我们的程序，我们将在C++中实现load和save功能，并导出为一个plugin。这样，我们只需要直接加载这个QML文件，而不需要运行一个可执行程序。
Exposing C++ Classes to QML
我们会使用Qt和C++来实现文件的加载和保存。注册了C++类和函数，它们就可以在QML中使用。这个类也需要编译成一个Qt的plugin，QML文件还需要知道这个plugin的位置。
对我们的程序，我们需要创建下面的项：
- Directory 类会处理目录相关的操作。
- File 类是一个QOjbect，模拟一个目录下的文件列表。
- plugin类将这个类注册到QML上下文。
- 编译这个plugin用到的Qt 项目文件.
- 一个告诉qmlviewer工具何处可以加载这个plugin的qmldir 文件.
Building a Qt Plugin
为生产一个plugin，我们需要在Qt项目文件中做如下设置。第一，必需的源文件，头文件和Qt模块。所有的C++代码和项目文件都在filedialog 目录下。
- <PRE class=javascript name="code"><PRE class=javascript name="code"><PRE class=html name="code">In filedialog.pro:
- TEMPLATE = lib
- CONFIG += qt plugin
- QT += declarative
- DESTDIR += ../plugins
- OBJECTS_DIR = tmp
- MOC_DIR = tmp
- TARGET = FileDialog
- HEADERS += directory.h \
- file.h \
- dialogPlugin.h
- SOURCES += directory.cpp \
- file.cpp \
- dialogPlugin.cpp
- </PRE><BR></PRE>
- <BR>
- <PRE></PRE>
- <BR>
- <PRE></PRE>
- <PRE></PRE>
- <PRE></PRE>
- <PRE></PRE>
- <PRE></PRE>
- </PRE>
尤其是我们要编译带declarative模块的Qt，并且配置成一个plugin，我们就需要一个lib模板。我们将这个编译过的plugin放到它的父亲的plugin目录下。
Registering a Class into QML
- In dialogPlugin.h:
- #include <QtDeclarative/QDeclarativeExtensionPlugin>
- class DialogPlugin : public QDeclarativeExtensionPlugin
- {
- Q_OBJECT
- public:
- void registerTypes(const char *uri);
- };
我们的plugin程序中，DialogPlugin 是QDeclarativeExtensionPlugin的子类。我们需要实现继承来的registerTypes()函数。dialogPlugin.cpp 文件看起来这样：
- DialogPlugin.cpp:
- #include "dialogPlugin.h"
- #include "directory.h"
- #include "file.h"
- #include <QtDeclarative/qdeclarative.h>
- void DialogPlugin::registerTypes(const char *uri){
- qmlRegisterType<Directory>(uri, 1, 0, "Directory");
- qmlRegisterType<File>(uri, 1, 0,"File");
- }
- Q_EXPORT_PLUGIN2(FileDialog, DialogPlugin);
registerTypes() 函数将我们的File和Directory类注册到QML中。这个函数需要以下参数：模板用到的类名，主版本号，小版本号和类名。我们使用Q_EXPORT_PLUGIN2宏导出plugin。注意在dialogPlugin.h 文件里，我们把Q_OBJECT宏放在了类的顶部。同样到，我们需要运行qmake来生成必需的meta-object代码。
Creating QML Properties in a C++ class
我们可以使用C++和Qt的Meta-Object系统来创建QML元素和属性。我们能用slots和signals实现属性，只要让Qt知道它们。这样这些属性就能在QML中使用了。
对我们的编辑器，我们要加载和保存文件。典型地，这些特性都包含在文件对话框中。幸运的是，我们可以使用QDir，QFile和QTextStream来实现目录的读取和输入/输出流。
- class Directory : public QObject{
- Q_OBJECT
- Q_PROPERTY(int filesCount READ filesCount CONSTANT)
- Q_PROPERTY(QString filename READ filename WRITE setFilename NOTIFY filenameChanged)
- Q_PROPERTY(QString fileContent READ fileContent WRITE setFileContent NOTIFY fileContentChanged)
- Q_PROPERTY(QDeclarativeListProperty<File> files READ files CONSTANT )
- ...
class Directory : public QObject{ Q_OBJECT Q_PROPERTY(int filesCount READ filesCount CONSTANT) Q_PROPERTY(QString filename READ filename WRITE setFilename NOTIFY filenameChanged) Q_PROPERTY(QString fileContent READ fileContent WRITE setFileContent NOTIFY fileContentChanged) Q_PROPERTY(QDeclarativeListProperty<File> files READ files CONSTANT ) ...
Directory 类使用Qt的Meta-Object系统来注册完成文件操作需要的属性。Directory 类导出为一个plugin，作为一个Directory元素在QML中使用。每一个使用Q_PROPERTY宏列出来的属性都是一个QML属性。
Q_PROPERTY声明一个属性和他的读写函数到Qt的Meta-Object系统。例如，filename 属性的类型是QString，可以使用filename()函数来读取，使用seetFilename()函数来写。另外还有一个与文件名属性关联的signal，叫filenameChanged()，当这个属性改变时，就会被发出去。读写操作在头文件中声明为plblic。
同样地，根据它们的用途，我们还声明了其他属性。filesCount 属性表示一个目录下的文件数量。filename属性设置为当前选中的文件的名字。fileContent中存储了要加载/保存的文件内容。
- Q_PROPERTY(QDeclarativeListProperty<File> files READ files CONSTANT )
Q_PROPERTY(QDeclarativeListProperty<File> files READ files CONSTANT )
files属性是目录中过滤过的文件列表。Directory 类实现来过滤掉不合法的文本文件，只有扩展名为.txt的文件是有效的。深入一步来说，通过在C++中声明为QDeclarativeListProperty，QList可以在QML文件中使用。这个模板对象继承自QObject，因此，File类也必须继承自QObject。在Directory类中，File对象的列表被保存到一个叫m_fileList的QList中。
- class File : public QObject{
- Q_OBJECT
- Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
- ...
- };
class File : public QObject{ Q_OBJECT Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged) ... };
这样的话这些属性可以在QML中作为Directory元素的属性来使用。注意，我们不需要在我们的C++代码中创建一个id标识符属性
- Directory{
- id: directory
- filesCount
- filename
- fileContent
- files
- files[0].name
- }
QML使用JavaScript的语法和结构，我们可以迭代文件列表获取它的属性。我们可以调用files[0].name来获取第一个文件的名字。
正常的C++函数也可以在QML中访问。文件的加载和保存函数是用C++实现的，可以使用Q_INVOKABLE宏来声明它们。此外，我们也可以将它们声明为slot，这些函数也能够在QML中访问。
- In Directory.h:
- Q_INVOKABLE void saveFile();
- Q_INVOKABLE void loadFile();
当目录的内容改变时，Directory类也必须通知其他的对象。这个功能是通过signal来实现的。前面提到过，QML的signals有一个对应的handler，即一个on在他们的名字前面。当目录刷新时，这个叫directoryChanged 的signal被发出。这个刷新只是重新加载一下目录中的内容，并更新有效的文件列表。通过附加一个动作到onDirectoryChanged 这个signal handler，QML的items就能被通知到。
list属性需要进一步开发。因为它使用callback来访问和修改文件内容。list属性是QDeclarativeListProperty<File>类型的。当访问这个列表时，访问函数需要返回一个QDeclarativeListProperty<File>。模板类型File，需要从QObject派生。进一步来说，为了创建QDeclarativeListProperty，列表的访问者和修改者都必须作为函数指针传递进来。这个列表，在我们的实例中是一个QList，也需要是一个File指针的列表。
QDeclarativeListProperty的构造函数和Directory的实现为：
- QDeclarativeListProperty ( QObject * object, void * data, AppendFunction append, CountFunction count = 0, AtFunction at = 0, ClearFunction clear = 0 )
- QDeclarativeListProperty<File>( this, &m_fileList, &appendFiles, &filesSize, &fileAt, &clearFilesPtr );
构造函数传递了一些函数指针，包括：附加列表的函数，计算列表的函数，使用index获取item的函数和清空list的函数。只有append函数是强制的。注意，这些函数指针必须与AppendFunction，CountFunction， AtFunction或者ClearFunction的定义匹配。
- void appendFiles(QDeclarativeListProperty<File> * property, File * file)
- File* fileAt(QDeclarativeListProperty<File> * property, int index)
- int filesSize(QDeclarativeListProperty<File> * property)
- void clearFilesPtr(QDeclarativeListProperty<File> *property)
为了简化我们的文本对话框，Directory 类过滤掉了一些不合法的文本文件，只保留了扩展名为.txt的文件。如果一个文件名没有.txt扩展名，我们的文件对话框里就看不到这个文件。而且，这样的实现也保证了保存的文件的文件名也是以.txt为扩展名的。Directory 使用QTextStream来读取文件和输入一个文件的内容到另外一个文件。
使用Directory元素，我们可以获得一个文件列表，知道有多少个文件在程序目录下，得到文件名字和内容的字符串，只要目录内容改变时就可以得到通知。
对filedialog.pro 运行qmake命令，然后运行make来生成这个plugin并将它转移到plugins目录下。
Importing a Plugin in QML
qmlviewer工具导入相同目录下的文件作为一个程序。我们也可以穿件一个qmldir文件来包含我们想要导入的QML文件的位置。qmldir也可以存储plugin和其他资源的位置。
- qmldir:
- Button ./Button.qml
- FileDialog ./FileDialog.qml
- TextArea ./TextArea.qml
- TextEditor ./TextEditor.qml
- EditMenu ./EditMenu.qml
- plugin FileDialog plugins
我们刚才创建的plugin叫FileDialog，即在项目文件里TARGET指定的域。编译成的plugin在plugins目录下。
Integrating a File Dialog into the File Menu
我们的FileMenu要显示FileDialog元素，包含一个目录下的文本文件列表，因此允许用户通过点击列表来选择文件。哦买也需要指定save，load和新的按钮到各自的动作上。FileMenu包含一个可编辑的文本输入区，允许用户使用键盘输入文件名。
Directory 在FileMenu.qml中使用，它会同通知FileDialog元素目录内容刷新了。这个通知是在onDirectoryChanged，这个signal handler里实现的。
- FileMenu.qml:
- Directory{
- id:directory
- filename: textInput.text
- onDirectoryChanged: fileDialog.notifyRefresh()
- }
为保持我们的程序的简洁性，文本对话框总是可见的，并且不会显示名字不是.txt扩展的那些文本文件。
- In FileDialog.qml:
- signal notifyRefresh()
- onNotifyRefresh: dirView.model = directory.files
I
FileDialog元素读取叫files的list属性，来显示目录的内容。这些文件作为一个GridView元素的model，GridView元素依据delegate在一个网格中显示数据items。delegate处理model的外观，而我们的文件对话框简单的生成一个文本居中的网格。点击文件名字会有一个矩形高亮文件名。只要notifyReresh signal发出，FileDialog就会被通知到，然后重新载入目录下的文件。
- In FileMenu.qml:
- Button{
- id: newButton
- label: "New"
- onButtonClick:{
- textArea.textContent = ""
- }
- }
- Button{
- id: loadButton
- label: "Load"
- onButtonClick:{
- directory.filename = textInput.text
- directory.loadFile()
- textArea.textContent = directory.fileContent
- }
- }
- Button{
- id: saveButton
- label: "Save"
- onButtonClick:{
- directory.fileContent = textArea.textContent
- directory.filename = textInput.text
- directory.saveFile()
- }
- }
- Button{
- id: exitButton
- label: "Exit"
- onButtonClick:{
- Qt.quit()
- }
- }
I
我们的FileMenu现在连接到了各自的行为上。saveButton会传送TextEdit里的text到目录的的属性，然后从可编辑的文件输入区拷贝文件名。最终，这个按钮调用saveFile()函数保存文件。loadButton有一个类似的执行。另外，New行为会清空TextEdit的内容。
更进一步，EditMenu 按钮连接到了TextEdit的函数去copy，paste和选择文本编辑器的全部文本。
Text Editor Completion
这个程序可以作为一个简单的文本编辑器，能输入文本，并保存为一个文件。它也可以加载文件，执行文本操作。
Running the Text Editor
在运行文本编辑器前，我们需要编译文本对话框这个C++plugin。进入gsQml目录，然后运行qmake，再使用make或者namke（取决于你的平台）来编译。运行qmlviewer，打开texteditor.qml文件来运行文本编辑器。
源代码在examples/tutorials/gettingStarted/gsQml目录下。
转自 http://www.cnblogs.com/smoozer/archive/2011/03/28/1997987.html
扫一扫
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
