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: 262
Registered: ‎07-13-2012
My Device: PlayBook, DA B, DA C, LE Z10 #102, Q10, Z30
My Carrier: T-Mobile
Accepted Solution

Running C++ script using QML UI?

[ Edited ]

First I'd like to say I am still very much learning C++ and QML but I've come to a virtual dead end on a few types of apps I want to create. Perhaps the solution is easy or perhaps everyone will tell me I still need to read way more before I can tackle this. Either way I've set up a simple scenerio that I am trying to solve.

 

Basically I to use QML for the inputs (in this case dropdowns), and run C++ script when the user changes the value of the drop down and have the output show as a label below.  My example involves a user inputs two things to read a table then get the output of the table:

 

Ex. Vertical 2, Horizontal 3 = "F"

 

So first I created a C++ script (just like my beginners C++ book taught me so I'm sure some of this stuff is not necessary for what I am trying to do and/or not the fastest way), file named TableEx.cpp:

#include <iostream>
using namespace std;

int main()
{
    char ans;
    double in1, in2;

    do
    {  
    cout << "Vertical Value?" << endl;
    cin >> in1;
    cout << endl;
    
    cout << "Horizontal Value?" << endl;
    cin >> in2;
    cout << endl;
    
    
    
    if (in1 == 1 && in2 == 1)
        cout << "A"; 
    else if (in1 == 1 && in2 == 2)
        cout << "B"; 
    else if (in1 == 1 && in2 == 3)
        cout << "C";
    else if (in1 == 2 && in2 == 1)
        cout << "D";
    else if (in1 == 2 && in2 == 2)
        cout << "E";
    else if (in1 == 2 && in2 == 3)
        cout << "F";
    else if (in1 == 3 && in2 == 1)
        cout << "G";
    else if (in1 == 3 && in2 == 2)
        cout << "H";    
    else if (in1 == 3 && in2 == 3)
        cout << "I";                                    
    
    
    
   
    cout << endl << endl << "Would you like to repeat the program?\n";
    cout << "Press y for yes or n for no.\n";
    cin >> ans;
    cout << endl;
               
    } while (ans == 'y' || ans == 'Y');
           
    return 0;
}

 

 

Then I created the QML main.qml:

import bb.cascades 1.0

Page {
    content: Container {
        layout: StackLayout {
        }
        
        DropDown {
            id: in1 
            title: "Vertical Value?"
            selectedIndex: 0
            onSelectedIndexChanged: {
            }  //have my C++ run here
            Option {
                text: "1"
                value: 1
            }
            Option {
                text: "2"
                value: 2
            }
            Option {
                text: "3"
                value: 3
            }
        
        }
        
                DropDown {
                    id: in2
                    title: "Horizontal Value?"
            selectedIndex: 0
            onSelectedIndexChanged: {
            }  //have my C++ run here
            Option {
                        text: "1"
                        value: 1
                    }
                    Option {
                        text: "2"
                        value: 2
                    }
                    Option {
                        text: "3"
                        value: 3
                    }
                }
                Label{
                    text: "Output goes here"
                    }
    }
}

 

 

Now how do I combine them? Is it simple? I think this would make a great tutorial if somebody wants to walk through it for me (and I'm sure a lot of other newbie C++ "coders" would benefit from it too).

 

---
Check out my BB10 Cascades Coding site: BBcascades.com & Cascades Blog: bbcascadescode.tumblr.com

My Built for BlackBerry app: The Dive Plan
Developer
Posts: 224
Registered: ‎03-29-2012
My Device: 9900
My Carrier: Wind

Re: Running C++ script using QML UI?

I am also getting the hang of this but I believe you want to link the c++ and QML, the best way I found is to have UI interactions in QML signal C++ functions and do your logic there then return the values to the QML to be displayed. You don't need a main() function doing things, just have it link to the QML.

Developer
Posts: 262
Registered: ‎07-13-2012
My Device: PlayBook, DA B, DA C, LE Z10 #102, Q10, Z30
My Carrier: T-Mobile

Re: Running C++ script using QML UI?

Yeah I figured the main() wasnt needed because the QML would handle that.  I guess my big questions are how do I reference between the QML and C++?  I cant find any examples where the UI is entirely in QML and whenever a user presses a button, changes a box, or changes a dropdown calls a C++ script to run.

---
Check out my BB10 Cascades Coding site: BBcascades.com & Cascades Blog: bbcascadescode.tumblr.com

My Built for BlackBerry app: The Dive Plan
Developer
Posts: 224
Registered: ‎03-29-2012
My Device: 9900
My Carrier: Wind

Re: Running C++ script using QML UI?

[ Edited ]

I also had to figure that out, it is great to be able to help someone by the way, usually I am doing the asking aha. So to do so, you need to have your c++ function defined in a header file such as:

 

class App: public QObject {

 

public: 

 

Q_INVOKABLE

void clickedButton();

 

}

 

now the class is App and it has the function clickedButton which because it is Q_INVOKABLE can be called within QML by using contextProperty.clickedButton(); any function is prefaced with contextProperty.

 

Then just in the App.cpp file, that is if the header is App.h, include the right imports and then define what you want clickedButton to do:

 

App::clickedButton() {

}

 

And that links them.

 

Developer
Posts: 849
Registered: ‎03-03-2011
My Device: Z10

Re: Running C++ script using QML UI?

In such way you can call C++ code from QML.

To set new value of QML UI component, use root pointer to get proper subcomponent (e.g., label) and set the value of the label.
--------------------------------------------------------------------------------------
Leader of Ljubljana BlackBerry Developer Group
BlackBerry Certified Builder for Native Application Development
Developer
Posts: 262
Registered: ‎07-13-2012
My Device: PlayBook, DA B, DA C, LE Z10 #102, Q10, Z30
My Carrier: T-Mobile

Re: Running C++ script using QML UI?

I tried doing what you suggested but I get errors when i try to build... by chance could you look at what I have (attached) and let me know the changes I need to make?  I think I'm just not getting some basic part, but once I see it everything will make sense...

 

Thanks.

---
Check out my BB10 Cascades Coding site: BBcascades.com & Cascades Blog: bbcascadescode.tumblr.com

My Built for BlackBerry app: The Dive Plan
Developer
Posts: 224
Registered: ‎03-29-2012
My Device: 9900
My Carrier: Wind

Re: Running C++ script using QML UI?

you declared a contextproperty called "cs" in your app.cpp I believe, to access clickedButton in the qml, put cs.clickedButton() not just clickedButton(). Good luck Smiley Happy

Developer
Posts: 262
Registered: ‎07-13-2012
My Device: PlayBook, DA B, DA C, LE Z10 #102, Q10, Z30
My Carrier: T-Mobile

Re: Running C++ script using QML UI?

That was automatically put in by Cascades (Beta1). The extent of my C++ knowledge is writing simple scripts so I don't know what most other functions do. I guess when they say tying the QML and C++ is really easy they only meant that if you know C++ really well. It's a shame there's no really basic example (like mine) explaining what all the pieces that are required to tie them together. Thanks for your help anyway... :-/

---
Check out my BB10 Cascades Coding site: BBcascades.com & Cascades Blog: bbcascadescode.tumblr.com

My Built for BlackBerry app: The Dive Plan
Developer
Posts: 224
Registered: ‎03-29-2012
My Device: 9900
My Carrier: Wind

Re: Running C++ script using QML UI?

I am sorry, so did it work?

Developer
Posts: 262
Registered: ‎07-13-2012
My Device: PlayBook, DA B, DA C, LE Z10 #102, Q10, Z30
My Carrier: T-Mobile

Re: Running C++ script using QML UI?

Nope, I'll keep trying stuff though.
---
Check out my BB10 Cascades Coding site: BBcascades.com & Cascades Blog: bbcascadescode.tumblr.com

My Built for BlackBerry app: The Dive Plan