开始使用QML编程（4）

来源：互联网发布：怎么看淘宝的实名认证编辑：程序博客网时间：2024/06/03 04:56

我们完成一个简单的文本编辑器的UI的生成工作。UI完成了，我们可以继续往前走,使用正常的Qt和C++来实现程序逻辑了。QML是一个很好的原型设计工具，将UI设计和程序逻辑分割开来。

menubar3

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

[plain] view plaincopyprint?
  
[plain] view plaincopyprint?
<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

[cpp] view plaincopyprint?
In dialogPlugin.h:  
  
    #include <QtDeclarative/QDeclarativeExtensionPlugin>   
  
    class DialogPlugin : public QDeclarativeExtensionPlugin  
    {  
        Q_OBJECT  
  
        public:  
        void registerTypes(const char *uri);  
  
    };

我们的plugin程序中，DialogPlugin 是QDeclarativeExtensionPlugin的子类。我们需要实现继承来的registerTypes()函数。dialogPlugin.cpp 文件看起来这样：

[cpp] view plaincopyprint?
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来实现目录的读取和输入/输出流。

[cpp] view plaincopyprint?
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中存储了要加载/保存的文件内容。

 [cpp] view plaincopyprint?
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中。

[cpp] view plaincopyprint?
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标识符属性

[cpp] view plaincopyprint?
Directory{  
         id: directory  
  
         filesCount  
         filename  
         fileContent  
         files  
  
         files[0].name  
     }

QML使用JavaScript的语法和结构，我们可以迭代文件列表获取它的属性。我们可以调用files[0].name来获取第一个文件的名字。

正常的C++函数也可以在QML中访问。文件的加载和保存函数是用C++实现的，可以使用Q_INVOKABLE宏来声明它们。此外，我们也可以将它们声明为slot，这些函数也能够在QML中访问。

[cpp] view plaincopyprint?
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的实现为：

[cpp] view plaincopyprint?
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的定义匹配。

[cpp] view plaincopyprint?
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和其他资源的位置。

[javascript] view plaincopyprint?
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里实现的。

[javascript] view plaincopyprint?
FileMenu.qml:  
  
     Directory{  
         id:directory  
         filename: textInput.text  
         onDirectoryChanged: fileDialog.notifyRefresh()  
     }  
 
为保持我们的程序的简洁性，文本对话框总是可见的，并且不会显示名字不是.txt扩展的那些文本文件。

 [javascript] view plaincopyprint?
In FileDialog.qml:  
  
     signal notifyRefresh()  
     onNotifyRefresh: dirView.model = directory.files  
I

FileDialog元素读取叫files的list属性，来显示目录的内容。这些文件作为一个GridView元素的model，GridView元素依据delegate在一个网格中显示数据items。delegate处理model的外观，而我们的文件对话框简单的生成一个文本居中的网格。点击文件名字会有一个矩形高亮文件名。只要notifyReresh signal发出，FileDialog就会被通知到，然后重新载入目录下的文件。

[javascript] view plaincopyprint?
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和选择文本编辑器的全部文本。

menubar4

Text Editor Completion

menubar5

这个程序可以作为一个简单的文本编辑器，能输入文本，并保存为一个文件。它也可以加载文件，执行文本操作。

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