Cascades Development

[anta40]

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?

[strobejb]

give it an objectName property, and use the findChild function in C++ to get a pointer to the Page* object.

[anta40]

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/

[dishooom]

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

[anta40]

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

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

[26filip]

---

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.