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
Developer
Posts: 580
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA
Accepted Solution

Custom QML components: Handling events of child controls

The tutorial here:

 

https://developer.blackberry.com/cascades/documentation/ui/custom_components/custom_components_tutor...

 

Demonstrates how to use aliases so that you can read property values of child controls.

 

It would be great to have a code sample that demonstrates how to hook into child change events. For example, if your custom control has a segment control, how to have the user of the custom control be notified when there is a click event on the segment control or when the value of that control changes.

Developer
Posts: 580
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA

Re: Custom QML components: Handling events of child controls

I'm surprised there hasn't been any reply to this question -- this seems like a fairly fundamental thing to need to be able to do.

 

Anyone?

 

I need to know how to do this to move forward with the development of my app...

Developer
Posts: 580
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA

Re: Custom QML components: Handling events of child controls

Retired
Posts: 499
Registered: ‎05-07-2012
My Device: developer
My Carrier: developer

Re: Custom QML components: Handling events of child controls

Our apologies!  Thanks for pinging.

 

Can you expound a bit on this, with a simple concrete example?

 

Stuart

Retired
Posts: 499
Registered: ‎05-07-2012
My Device: developer
My Carrier: developer

Re: Custom QML components: Handling events of child controls

[ Edited ]

See:

http://supportforums.blackberry.com/t5/Cascades-Development/How-to-signal-a-TabbedPane-page-has-been...

 

vaguely related:

http://supportforums.blackberry.com/t5/Cascades-Development/How-to-connect-Button-Click-event-to-Nav...

http://supportforums.blackberry.com/t5/Cascades-Development/How-to-connect-slot-to-cascades-Button/m...

 

This sounds like a job for C++ (at the moment at least).

 

If A contains B and C (which is an implementation detail) but you want to expose the B-click signal to users of A, then we need to define an appropriate signal on A and emit that signal when B is clicked.

 

I don't see a way to define a new signal in QML (in Beta1) but I do see several approaches:

 

1. Define the component in C++.  Connect the B clicked signal to A's BClicked signal (yes you can connect to signal, not just to a slot)

Note that this component could just be a wrapper around a component defined in QML.

 

2. in some cases it might be enough to use variables to represent events.   It might take some imagination to make this approach beyond reproach.

 

3. Patience.

    Request a feature of supporting Qt's QML signal (to define a new signal in a QML object that can be emitted from QML) in Issue Tracker: http://supportforums.blackberry.com/t5/Java-Development/Developer-Issue-Tracker/td-p/271768.

 

(I tried this in Beta1 but have not fully investigated Beta2 yet)

 

Hope this helps

 

Stuart

Retired
Posts: 2,559
Registered: ‎10-16-2009
My Device: BlackBerry Z10
My Carrier: Bell

Re: Custom QML components: Handling events of child controls

Signals can be fairly easily created in QML and exposed from one custom QML file to be listend for in another. The following article explains the basic process:

https://developer.blackberry.com/cascades/documentation/ui/signals_slots/index.html

 

In its simplest form a signal is created in QML using the following format:

signal signalName (variableType variable1, ...)

 

In the QML file implementing this custom control you will now have an onSignalName signal handler created automatically for you.

 

I covered this in my last webcast and created a sample file which does this as well:

https://developer.blackberry.com/cascades/documentation/videos/index.html

 

Beta 1: Astonishing UIs using the new BlackBerry 10 framework - part 2

 

The sample was created against Beta 1 of the NDK for BlackBerry 10 but the actual QML file (TaskControl.qml) should work fine in Beta 2. If you experience any difficulties please post back here and I will investigate.

 

Regards,

Garett
@garettBeuk
--
Goodbye everybody!
Highlighted
Developer
Posts: 52
Registered: ‎03-29-2012
My Device: Playbook, Dev Alpha
My Carrier: Telus

Re: Custom QML components: Handling events of child controls

[ Edited ]

Not sure if this helps. Here's a JavaScripty™ (Smiley Happy) way to do what I think you're trying to do. 

 

CustomControl.qml 

import bb.cascades 1.0

Container {
    SegmentedControl {
        id: segControl
        
        Option {
            text: "option1"
            selected: true
        }
        Option {
            text: "option2"
        }
        Option {
            text: "option3"
        }
        
        onSelectedIndexChanged: 
        {
            parent.onSelectionChanged(segControl.selectedIndex)
        }
    }
    // some other stuff
}

 Now when you use it, you need to add a onSelectionChanged function to that control. 

Main.qml

 

import bb.cascades 1.0

Container {
    
    //add custom control
    CustomControl {
        
        //this get called from the SegmentedControl in the CustomControl.qml
        function onSelectionChanged(index) {
            console.log("Segmented control changed to: " + index)
        }
    }
}

 

Developer
Posts: 580
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA

Re: Custom QML components: Handling events of child controls

Hi Garett,

 

Thanks for your reply -- your webcast hit the nail on the head, and what you demonstrated is exactly what I was looking for.