Cascades Development

[dbigham]

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.

[dbigham]

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...

[dbigham]

I've been stuck on this for two weeks now... still no help from the RIM folk?

[smacmartin]

Our apologies!  Thanks for pinging.

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

Stuart

[smacmartin]

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

[gbeukeboom · Accepted solution]

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,

[level32]

Not sure if this helps. Here's a JavaScripty™ () 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)
        }
    }
}

[dbigham]

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.