Qt Quick 译05 - 开始使用QML编程（4）

Where to Go from Here

我们完成一个简单的文本编辑器的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的位置。

 

对我们的程序，我们需要创建下面的项：

1. Directory 类会处理目录相关的操作。
2. File 类是一个QOjbect，模拟一个目录下的文件列表。
3. plugin类将这个类注册到QML上下文。
4. 编译这个plugin用到的Qt 项目文件.
5. 一个告诉qmlviewer工具何处可以加载这个plugin的qmldir 文件.

Building a Qt Plugin

为生产一个plugin，我们需要在Qt项目文件中做如下设置。第一，必需的源文件，头文件和Qt模块。所有的C++代码和项目文件都在filedialog 目录下。

 

 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

尤其是我们要编译带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 )

         ...

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 )

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)

         ...
     };

 

这样的话这些属性可以在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和其他资源的位置。

 

In 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里实现的。

 

In FileMenu.qml:

     Directory{
         id:directory
         filename: textInput.text
         onDirectoryChanged: fileDialog.notifyRefresh()
     }

为保持我们的程序的简洁性，文本对话框总是可见的，并且不会显示名字不是.txt扩展的那些文本文件。

 

 In FileDialog.qml:

     signal notifyRefresh()
     onNotifyRefresh: dirView.model = directory.files

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()
         }
     }

我们的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目录下。