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
anta40
Posts: 224
Registered: ‎07-26-2010
My Device: Z10

Handling several QMLs via C++?

I have 2 QML files in my app:

main.qml (the main page), and DetailsPage.qml

 

main.qml

import bb.cascades 1.0
import bb.cascades.pickers 1.0
  
NavigationPane {
    id: navigationPane
      
    // The initial page
    Page {
        titleBar: TitleBar {
            title: qsTr ("ExiView")
        }

        Container {
            layout: DockLayout {}

            // The background image
            ImageView {
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Fill

                imageSource: "asset:///images/background.png"
            }

            Container {
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Fill

                topPadding: 50
                leftPadding: 30
                rightPadding: 30

                // The file picker mode selector
       
                // The file picker view mode selector
                DropDown {
                    id: pickerViewMode

                    horizontalAlignment: HorizontalAlignment.Center

                    title: qsTr ("View Mode")

                    Option {
                        text: qsTr ("Default")
                        value: FilePickerViewMode.Default
                        selected: true
                    }

                    Option {
                        text: qsTr ("List View")
                        value: FilePickerViewMode.ListView
                    }

                    Option {
                        text: qsTr ("Grid View")
                        value: FilePickerViewMode.GridView
                    }
                }

                // The file picker sort criterion selector
                DropDown {
                    id: pickerSortBy

                    horizontalAlignment: HorizontalAlignment.Center

                    title: qsTr ("Sort by")

                    Option {
                        text: qsTr ("Default")
                        value: FilePickerSortFlag.Default
                        selected: true
                    }

                    Option {
                        text: qsTr ("Name")
                        value: FilePickerSortFlag.Name
                    }

                    Option {
                        text: qsTr ("Date")
                        value: FilePickerSortFlag.Date
                    }

                    Option {
                        text: qsTr ("Suffix")
                        value: FilePickerSortFlag.Suffix
                    }

                    Option {
                        text: qsTr ("Size")
                        value: FilePickerSortFlag.Size
                    }
                }

                // The file picker sort order selector
                DropDown {
                    id: pickerSortOrder

                    horizontalAlignment: HorizontalAlignment.Center

                    title: qsTr ("Sort order")

                    Option {
                        text: qsTr ("Default")
                        value: FilePickerSortOrder.Default
                        selected: true
                    }

                    Option {
                        text: qsTr ("Ascending")
                        value: FilePickerSortOrder.Ascending
                    }

                    Option {
                        text: qsTr ("Descending")
                        value: FilePickerSortOrder.Descending
                    }
                }

                // The 'Show' button
                Button {
                    horizontalAlignment: HorizontalAlignment.Center
                    topMargin: 100

                    text: qsTr ("Go")
                    onClicked: picker.open()
                }

                // The result label
                Label {
                    id: resultLabel

                    horizontalAlignment: HorizontalAlignment.Center
                    topMargin: 30

                  //  text: qsTr ("Selected file: %1").arg(picker.selectedFile)

                    textStyle {
                        base: SystemDefaults.TextStyles.BodyText
                        color: Color.White
                    }

                    multiline: true
                    visible: (picker.selectedFile != "")
                }
            }
        }

        attachedObjects: [
            
            ComponentDefinition {
                id: secondPageDefinition
                source: "DetailsPage.qml"
            },
            
            FilePicker {
                id: picker

                property string selectedFile
                property Page secondPage
                
                function getSecondPage(){
                    if (!secondPage){
                        secondPage = secondPageDefinition.createObject()   
                    }
                    return secondPage
                }
                
                
                title: qsTr ("Browse for file")
                mode: FilePicker.Picker
                type: FilePicker.Picture
                viewMode: pickerViewMode.selectedValue
                sortBy: pickerSortBy.selectedValue
                sortOrder: pickerSortOrder.selectedValue
                
             
                onFileSelected: {
                    selectedFile = selectedFiles[0]
                    var ppp = getSecondPage()
                   // secondPage.imagePath = selectedFile
                    navigationPane.push(ppp)
                }
            }
        ]
        
      
    }
      
   
} // end of NavigationPane

 DetailsPage.qml

// Navigation pane project template
import bb.cascades 1.0

Page {
    
     property alias label1_text: label1.text
     property alias label2_text: label2.text
     property alias label3_text: label3.text
    
     titleBar: TitleBar {
                 title: qsTr ("EXIF Information")
             }
    
    id: pgDetail
    actions: [
        // create navigation panel actions here
        ActionItem {
            title: qsTr("Break")
            onTriggered: {
                imgView.imageSource = "asset:///images/picture1br.png"
                //imgView.imageSource = imagePath
            }
        }
    ]
    paneProperties: NavigationPaneProperties {
        backButton: ActionItem {
            onTriggered: {
                // define what happens when back button is pressed here
                // in this case is closed the detail page
                navigationPane.pop()
            }
        }
    }
    Container {
        background: Color.Black
        Label {
            text: qsTr("Page 2")
            horizontalAlignment: HorizontalAlignment.Center
            textStyle {
                base: SystemDefaults.TextStyles.TitleText
                color: Color.Yellow
            }
        }
       // ImageView {
       //     id: imgView
       //     imageSource: "asset:///images/picture1.png"
       //     horizontalAlignment: HorizontalAlignment.Center
       // }
        Label {
            id: label1
            text: qsTr("Picture description")
            horizontalAlignment: HorizontalAlignment.Center
            
            textStyle {
                            base: SystemDefaults.TextStyles.TitleText
                            color: Color.White
                        }
        }
        
        Label {
            id: label2
            text: qsTr("Blah blah")
            horizontalAlignment: HorizontalAlignment.Left
            
            textStyle {
                            base: SystemDefaults.TextStyles.TitleText
                            color: Color.White
                        }
        }
        
         Label {
                    id: label3
                    text: qsTr("")
                    horizontalAlignment: HorizontalAlignment.Left
                    
                    textStyle {
                                    base: SystemDefaults.TextStyles.TitleText
                                    color: Color.White
                                }
                }
    }
}

 

Here's how main.qml is loaded

 

ExiView.cpp

// Navigation pane project template
#include "ExiView.hpp"

#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>

using namespace bb::cascades;

ExiView::ExiView(bb::cascades::Application *app)
: QObject(app)
{
    // create scene document from main.qml asset
    // set parent to created document to ensure it exists for the whole application lifetime
    QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);

    // create root object for the UI
    AbstractPane *root = qml->createRootObject<AbstractPane>();
    // set created root object as a scene
    app->setScene(root);
}

 

Once DetailsPage is pushed, how to load DetailsPage.qml in C++ so further processing can be done?

 

 

 

Please use plain text.
Developer
strobejb
Posts: 282
Registered: ‎10-15-2012
My Device: bb10 developer

Re: Handling several QMLs via C++?

give it an objectName property, and use the findChild function in C++ to get a pointer to the Page* object.
Please use plain text.
Developer
anta40
Posts: 224
Registered: ‎07-26-2010
My Device: Z10

Re: Handling several QMLs via C++?

maybe you could give a specific example?

and btw, what is the proper way to pass selectedFile from main.qml to DetailsPage.qml?

http://www.brazzers.com/scenes/view/id/7092/going-down-on-the-music/

Please use plain text.
Developer
dishooom
Posts: 103
Registered: ‎12-31-2012
My Device: Blackberry 9810

Re: Handling several QMLs via C++?

You can set an objectname for the relevant properties in QML , like this

        Button {
            objectName: "btn11"
            text: "Button"
            
            onClicked: {
             
                 _starshipApp.setBtnName();
                }
        }

 

From the CPP file you can access the concerned object by specifying the objectName in findChild:

 

 QObject *newButton = bb::cascades::Application::instance()->findChild<QObject*>("btn11");
	    if (newButton)
	        newButton->setProperty("text", "Button11 renamed");

 

Reading this would help:

 

http://doc.qt.digia.com/qt/qml-qtobject.html

 

 

- Dishooom

Please use plain text.
Developer
anta40
Posts: 224
Registered: ‎07-26-2010
My Device: Z10

Re: Handling several QMLs via C++?

Yes, I think I've read that (especially about setProperty).

But what about getProperty? I couldn't find such method

Please use plain text.
Developer
26filip
Posts: 232
Registered: ‎01-30-2011
My Device: Dev Alpha C, Z10 LE

Re: Handling several QMLs via C++?


anta40 wrote:

Yes, I think I've read that (especially about setProperty).

But what about getProperty? I couldn't find such method


You must use property:

root->property("smb").toString()

 This code return QString contains actual value of smb property.

All time online :smileyvery-happy:
Please use plain text.