Cascades Development

[anta40]

I'm now studying filepicker example.

What I'd like to do is display the thumbnail/preview of the choosen picture on a screen.

attachedObjects: [
        FilePicker {
            id: picker

            property string selectedFile

            title: qsTr ("File Picker")
            mode: FilePicker.Picker
            type: FilePicker.Picture
            viewMode: pickerViewMode.selectedValue
            sortBy: pickerSortBy.selectedValue
            sortOrder: pickerSortOrder.selectedValue

            onFileSelected: {
                // what to do??
            }
        }
    ]

 I'm still figuring out how to do that in cascades.

On the other hand, I'm still used to BlackBerry Java programming, so obviously I'd do something like this:

// Load bitmap from file
Bitmap bmp = BitmapUtil.loadBitmap("file:///SDCard/BlackBerry/pictures/pic01.jpg");

// Resize the bitmap into half
Bitmap resized = BitmapUtil.resized(bmp, 2);

// Preview it on another screen
PreviewScreen ps = new PreviewScreen(resized);
UiApplication.getUiApplication.pushScreen(ps);

 Another question is how to let the chosen file accessible from C++? My intention is to do apply some image processing techniques to it.

[anta40]

Here are the codes, so far

main.qml (the main page)

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: [
            FilePicker {
                id: picker

                property string selectedFile
                
                title: qsTr ("Browse for file")
                mode: FilePicker.Picker
                type: FilePicker.Picture
                viewMode: pickerViewMode.selectedValue
                sortBy: pickerSortBy.selectedValue
                sortOrder: pickerSortOrder.selectedValue
                
             
                onFileSelected: {
                    selectedFile = selectedFiles[0]
                    secondPage.imagePath = selectedFile
                    navigaton.pushPage(secondPage)
                }
            }
        ]
        
      
    }
      
   
} // end of NavigationPane

DetailsPage.qml (for previewing the image)

// Navigation pane project template
import bb.cascades 1.0

Page {
    // page with a picture detail
     property alias imagePath : imgView.imageSource
    
    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 {
            text: qsTr("Picture description")
            horizontalAlignment: HorizontalAlignment.Center
        }
    }
}

Doesn't work, though, because of this error:

bb::cascades::QmlDocument: error when loading QML from:   QUrl( "file:///apps/com.example.

ExiView.testDev_ple_ExiViewfc22aca_/native/assets//main.qml" ) 
  --- errors:  (file:///apps/com.example.ExiView.testDev_ple_ExiViewfc22aca_/native/assets//main.qml:169:18: Cannot assign to non-existent property "attachedObjects"
                     attachedObjects: [
                     ^)

[borceg]

FilePicker and other should be registered in your main.cpp file as shown in samples

#include <bb/cascades/AbstractPane>
#include <bb/cascades/Application>
#include <bb/cascades/pickers/FilePicker>
#include <bb/cascades/pickers/FilePickerMode>
#include <bb/cascades/pickers/FilePickerSortFlag>
#include <bb/cascades/pickers/FilePickerSortOrder>
#include <bb/cascades/pickers/FilePickerViewMode>
#include <bb/cascades/pickers/FileType>
#include <bb/cascades/QmlDocument>


//! [0]
    qmlRegisterType<pickers::FilePicker>("bb.cascades.pickers", 1, 0, "FilePicker");
    qmlRegisterUncreatableType<pickers::FilePickerMode>("bb.cascades.pickers", 1, 0, "FilePickerMode", "");
    qmlRegisterUncreatableType<pickers::FilePickerSortFlag>("bb.cascades.pickers", 1, 0, "FilePickerSortFlag", "");
    qmlRegisterUncreatableType<pickers::FilePickerSortOrder>("bb.cascades.pickers", 1, 0, "FilePickerSortOrder", "");
    qmlRegisterUncreatableType<pickers::FileType>("bb.cascades.pickers", 1, 0, "FileType", "");
    qmlRegisterUncreatableType<pickers::FilePickerViewMode>("bb.cascades.pickers", 1, 0, "FilePickerViewMode", "");

and on first look seems that your main.qml is misplacing some oppening/closing braces. I can't try it right now, my dev pc in not around.

[kunal_one]

I think if you use QDesktopService,it should open selected image in image viewer.

QDesktopServices::openUrl ( const QUrl & url )

[anta40]

Hi kunal_one,

I still prefer QML to C++ for most of GUI handling.

The FilePicker in main.qml works fine. I can browse for picture.

The problem is I don't know how to display it in DetailsPage.qml

As you can see, there is the "attachedObjects" error.

I'm still figuring this out because my JavaScript knowledge is lousy at best.

[kunal_one]

It seems you are putting attachedObjects in side page, can you try putting attachedObjects inside container ?

[anta40]

Which container? There are several containers in main.qml

Maybe you could provide a working example?

[kunal_one]

Problem seems that page can not have attached objects. its property of container.

So you need to move your attachedObject code to some container. Probalby to your main container.

Page {
titleBar: TitleBar {
title: qsTr ("ExiView")
}

Container {
layout: DockLayout {}
move attached object here..
}

[kunal_one]

you can check out this blogpot
http://kunalmaemo.blogspot.kr/2013/01/signal-slot-connection-with-c-object.html

I have used attached object in sample code in port.

[anta40]

I made a minor adjustment on main.qml. Almost correct, I think.

At least the UI is displayed properly (not dark blank screen):

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

                property string selectedFile
                
                title: qsTr ("Browse for file")
                mode: FilePicker.Picker
                type: FilePicker.Picture
                viewMode: pickerViewMode.selectedValue
                sortBy: pickerSortBy.selectedValue
                sortOrder: pickerSortOrder.selectedValue
                
             
                onFileSelected: {
                    selectedFile = selectedFiles[0]
                    secondPage = secondPageDefinition.createObject()
                    secondPage.imagePath = selectedFile
                    navigaton.pushPage(secondPage)
                }
            }
        ]

 You can browse for pictures, but after a picture is chosen, secondPage is still not pushed.