黑莓OS10开发(4) 在QML中添加对象(上)

在QML文件中添加附属对象，需要遵循以下几个步骤

本例将示范如何在QML中添加一个DataModel对象

1.增加添加对象的.h(.hpp)文件

ListData.h
#ifndef LISTDATA_H_
#define LISTDATA_H_

#include <bb/cascades/DataModel>
#include <bb/data/DataAccessReply.hpp>

using namespace bb::data;
using namespace bb::cascades;

class ListData : public DataModel{
Q_OBJECT
public:
	ListData();
	virtual ~ListData();

	Q_INVOKABLE	int childCount(const QVariantList &indexPath);
	Q_INVOKABLE	bool hasChildren(const QVariantList &indexPath);
	Q_INVOKABLE	QVariant data(const QVariantList &indexPath);

	Q_INVOKABLE	void loadData();

private:
	int i;
	QVariantList modelList;
};



#endif /* LISTDATA_H_ */

注意，当派生自DataModel时，需要默认实现三个方法：

childCount,hasChildren,data

当需要声明为attachedObjects时，需要添加Q_OBJECT关键字，当未添加则会在运行时出现以下错误

TypeError: Result of expression 'XXX' [undefined] is not a function

2.添加.cpp文件。

cpp实现和一般化没有什么区别。这里是一个例子

#include "ListData.h"

ListData::ListData() {
	i=0;
}
ListData::~ListData() {
}

int ListData::childCount(const QVariantList &indexPath){
	return 0;
}
bool ListData::hasChildren(const QVariantList &indexPath){
	return false;
}
QVariant ListData::data(const QVariantList &indexPath){
	return modelList.at(0);
}

void ListData::loadData(){
	fprintf(stderr,"loaddata");
}

3.在qml使用前注册该Object

在你调用该qml文件前的cpp文件中，附加上以下代码

#include "ListData.h"
...

onSystemLanguageChanged();


    qmlRegisterType<ListData>("custom",1,0,"ListData");

注意此处的custom为qml中使用的namespace,ListData为你需要映射的对象，1和0分别是版本号(maybe，没研究过)

4.接下来需要在config.pri文件中添加编译路径

例如

 SOURCES +=  $$quote($$BASEDIR/src/applicationui.cpp) \
                 $$quote($$BASEDIR/src/main.cpp)
需要改变为

 SOURCES +=  $$quote($$BASEDIR/src/ListData.cpp) \
                 $$quote($$BASEDIR/src/applicationui.cpp) \
                 $$quote($$BASEDIR/src/main.cpp)

这里没什么特别大的问题，记得都加上就可以了。

OK。准备工作完成。现在是在QML中引用了

import bb.cascades 1.2
import custom 1.0

NavigationPane {
    id: navigationPane
    
    // The initial page
    Page {
        content: Container {
            Button {
                text: "Display first Page"
                
                onClicked: {
                    navigationPane.push(firstPage);
                }
            }
            
            Button {
                text: "Display second Page"
                
                onClicked: {
                    navigationPane.push(secondPage);
                }
            }
            Button{
                text:"onload"
                onClicked: {
                    listdata.loadData();//引用对象的loadData()方法
                }
            }
            
            ListView {
                id: messagelist
                dataModel: listdata
                
            }
        } // end of Container
    } // end of Page
    
    attachedObjects: [
        ListData {
            id:listdata
        },
        Page {
            id: firstPage
            content: Container {
                Label {
                    text: "First attachedObjects Page"
                }
            }
        },
        Page {
            id: secondPage
            content: Container {
                Label {
                    text: "Second attachedObjects Page"
                }
            }
        } // end of Page
    ] // end of attachedObjects list
} // end of NavigationPane

至此attachedObjects步骤完毕。下一篇将讲述如何将数据填充到ListView中