Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Contributor
Posts: 11
Registered: ‎02-22-2011
My Device: Not Specified

Dynamically add custom component, which is created in QML, with QML/C++?

Hi,

 

I have created a custom component in a QML file. Now, I am trying to add dynamically add the new component to the page in response to user clicking a button.

 

The way I can think of is to create a c++ function and hook it to the onClicked of the button. The sample function below is what I can find out from the document that would add a new "container" on the page

 

void App::injectContainer() {
  mRootContainer->add(Container::create())
}

However, I don't think there is a "create()" method for the custom component. Can anyone tell me how to create a custom component in C++?

Also, is it possible dynamically create a component in QML?

 

Thanks,

Developer
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: Dynamically add custom component, which is created in QML, with QML/C++?


defoo wrote:
Also, is it possible dynamically create a component in QML?

This http://qt-project.org/doc/qt-4.8/qml-qt.html#createComponent-method and this http://qt-project.org/doc/qt-4.8/qml-qt.html#createQmlObject-method may be of some use to you.  Note that it's possible those don't work under Cascades... I haven't tried them yet myself.

 


Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: Dynamically add custom component, which is created in QML, with QML/C++?

[ Edited ]

Just experimenting a bit with it here, without full success yet.

 

I defined a custom control in CustomControl.qml:

import bb.cascades 1.0

Container {
    id: root

    property alias text: button.text
    property string hint: "Click the nice button"

    signal customSignal()

    background: Color.create("#ffdddd")

    Label {
        text: root.hint + ':'
    }

    Button {
        id: button
        text: "Button"

        onClicked: root.customSignal()
    }
    onCreationCompleted: {
        console.log('custom component created, text is ' + text);
    }
}

In the main code, I have a button that triggers this in a handler:

var component = Qt.createComponent("CustomControl.qml");
var widget = component.createObject(parent, {text: "New Button"});
console.log('created! ' + widget + ' from ' + component);
console.log('parent ' + parent);
parent.add(widget);

It creates the component and a widget from it, but it looks like the add() has difficulties for some reason:

custom component created, text is New Button
created! CustomControl_QMLTYPE_1(0x984258) from QDeclarativeComponent(0x9590f8) parent bb::cascades::Container(0x2fd3f8) file:///...main.qml:45: Error: Unknown method parameter type: Control*

 

I have wanted to use this capability myself, so please let me know if you figure it out.


Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: Dynamically add custom component, which is created in QML, with QML/C++?

Okay, so after further digging including inspection of bb/cascades/controls/container.h, I conclude that we cannot do this from QML with the 10.0.6 release of Cascades.

 

It's clear that even if the add() could work, they haven't even marked insert() or remote() as Q_INVOKABLE, so they're not available at all.  The problem with add() may be apparent in the header to someone who knows this stuff better than I do (compare the function signature with that of insert() and see if the difference explains the error message above).

 

Unfortunately, although this could be done perfectly well with QtQuick, for the moment (if I'm right) we cannot do dynamic component creation without resorting to C++ code.

 

If someone else can confirm this conclusion and maybe refine my analysis on add(), I'll happily file another Jira ticket for the problem.


Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Highlighted
Developer
Posts: 1,746
Registered: ‎04-08-2010
My Device: Passport Silver, PRIV
My Carrier: Telekom.de, O2, Vodafone

Re: Dynamically add custom component, which is created in QML, with QML/C++?


peter9477 wrote:

Okay, so after further digging including inspection of bb/cascades/controls/container.h, I conclude that we cannot do this from QML with the 10.0.6 release of Cascades.

 

It's clear that even if the add() could work, they haven't even marked insert() or remote() as Q_INVOKABLE, so they're not available at all.  The problem with add() may be apparent in the header to someone who knows this stuff better than I do (compare the function signature with that of insert() and see if the difference explains the error message above).

 

Unfortunately, although this could be done perfectly well with QtQuick, for the moment (if I'm right) we cannot do dynamic component creation without resorting to C++ code.

 

If someone else can confirm this conclusion and maybe refine my analysis on add(), I'll happily file another Jira ticket for the problem.


Peter,

 

I already submited this JIRA ticket some time ago ;-)

 

https://www.blackberry.com/jira/browse/BBTEN-218

 

please vote - thx

 

ekke

 

-------------------------------------------------------------------------------
ekke (independent software architect, rosenheim, germany)

BlackBerry Elite Developer
BlackBerry Platinum Enterprise Partner
International Development native Mobile Business Apps
BlackBerry 10 | Qt Mobile (Android, iOS)
Workshops / Trainings / Bootcamps

blog: http://ekkes-corner.org
mobile-development: http://appbus.org Twitter: @ekkescorner