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
Trusted Contributor
anta40
Posts: 223
Registered: ‎07-26-2010
My Carrier: Telkomsel
Accepted Solution

How to display a picture after chosen via FilePicker?

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.

Please use plain text.
Trusted Contributor
anta40
Posts: 223
Registered: ‎07-26-2010
My Carrier: Telkomsel

Re: How to display a picture after chosen via FilePicker?

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: [
                     ^)
Please use plain text.
Developer
borceg
Posts: 670
Registered: ‎03-21-2012
My Carrier: Vip

Re: How to display a picture after chosen via FilePicker?

[ Edited ]

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.

Please use plain text.
Trusted Contributor
kunal_one
Posts: 125
Registered: ‎12-23-2012
My Carrier: wifi

Re: How to display a picture after chosen via FilePicker?

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

 

QDesktopServices::openUrl ( const QUrl & url )

Please use plain text.
Trusted Contributor
anta40
Posts: 223
Registered: ‎07-26-2010
My Carrier: Telkomsel

Re: How to display a picture after chosen via FilePicker?

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.

Please use plain text.
Trusted Contributor
kunal_one
Posts: 125
Registered: ‎12-23-2012
My Carrier: wifi

Re: How to display a picture after chosen via FilePicker?

It seems you are putting attachedObjects in side page, can you try putting attachedObjects inside container ?
Please use plain text.
Trusted Contributor
anta40
Posts: 223
Registered: ‎07-26-2010
My Carrier: Telkomsel

Re: How to display a picture after chosen via FilePicker?

Which container? There are several containers in main.qml :Wacko:

Maybe you could provide a working example? :Yes:

 

Please use plain text.
Trusted Contributor
kunal_one
Posts: 125
Registered: ‎12-23-2012
My Carrier: wifi

Re: How to display a picture after chosen via FilePicker?

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..
}
Please use plain text.
Trusted Contributor
kunal_one
Posts: 125
Registered: ‎12-23-2012
My Carrier: wifi

Re: How to display a picture after chosen via FilePicker?

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.
Please use plain text.
Trusted Contributor
anta40
Posts: 223
Registered: ‎07-26-2010
My Carrier: Telkomsel

Re: How to display a picture after chosen via FilePicker?

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.

Please use plain text.