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: 145
Registered: ‎12-23-2012
My Device: BB10 Dev Alpha

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

I think reason might be that DetailsPage.qml has some problem.
else your code for creating and pushing second page seems fine
Contributor
Posts: 13
Registered: ‎01-02-2013
My Device: BB10

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

Hello anta40,

can you show me your me y'our main.cpp ?

i created a new project and i used y'our files "main.qml" and "detailsPage.qml" but the FilePicker component might be unknown. i d'ont know if i must have a "FilePiker.cpp" or my File "main.cpp" is missing.

Thks.

Developer
Posts: 224
Registered: ‎07-26-2010
My Device: Z10

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

Hi machdouch250,

 

This is my main.cpp

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

#include <bb/cascades/Application>

#include <QLocale>
#include <QTranslator>
#include <Qt/qdeclarativedebug.h>

using namespace bb::cascades;

void myMessageOutput(QtMsgType type, const char* msg) {
    fprintf(stdout, "%s\n", msg);
    fflush(stdout);
}

Q_DECL_EXPORT int main(int argc, char **argv)
{
    // this is where the server is started etc
    Application app(argc, argv);

    // used for debugging purpose
	#ifndef QT_NO_DEBUG
    	qInstallMsgHandler(myMessageOutput);
    #endif

    // localization support
    QTranslator translator;
    QString locale_string = QLocale().name();
    QString filename = QString( "ExiView_%1" ).arg( locale_string );
    if (translator.load(filename, "app/native/qm")) {
        app.installTranslator( &translator );
    }

    // create the application pane object to init UI etc.
    new ExiView(&app);

    // we complete the transaction started in the app constructor and start the client event loop here
    return Application::exec();
    // when loop is exited the Application deletes the scene which deletes all its children (per qt rules for children)
}

 

Just in case you are wondering, I used the "Navigation pane" template.

Contributor
Posts: 13
Registered: ‎01-02-2013
My Device: BB10

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

thks anta :smileyhappy: , its the same file that a have, i think that i should make a configuration or an use a file configured, because my project find errors in include of file piker , i used a "FILEPIKER API" and it run good and in can change the boot code and any problems, but a cant create my own project file piker, maybe a missing configuration or file.

I have another Problem, if you have an idea or you have do it. i cant read the picture taked from my divise bb10 alpha despite i can read the same picture from assets,thks :smileyhappy:

 

ImageView {
                 id:imag
                 maxHeight: 300
                 minWidth: 300
                 
                 imageSource: "file:///accounts/1000/shared/camera/IMG_00000143.png"
              //   imageSource: "asset:///images/bg.png"
              
            }

Developer
Posts: 224
Registered: ‎07-26-2010
My Device: Z10

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

Hi mahdouch250,

 

I'll send you my zipped code if that's needed.

I spent several hours messing with the code and still could not have the selected picture displayed in DetailsPage.qml

 

>__<

Contributor
Posts: 13
Registered: ‎01-02-2013
My Device: BB10

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

Hi anta40,

you have a problem to have the selected picture in ImageView or any Image readed from your divise can't be in ImageView ?

Developer
Posts: 224
Registered: ‎07-26-2010
My Device: Z10

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

I couldn't display the selected file in the ImageView

 

My expectation is after the user chose the file, then another page/screen which has the ImageView will be pushed, and the picture will be displayed.

Contributor
Posts: 13
Registered: ‎01-02-2013
My Device: BB10

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

Ok, I understand you, 

but try to read your picture taken by giving the direct path in your device, if it works well tray to spend the path of selected picture with global variables :smileyhappy:

Developer
Posts: 224
Registered: ‎07-26-2010
My Device: Z10

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

Hmm... I think I should give up this issue for a while, and change the problem a bit.

Now what I want is after the picture is chosen, then DetailsPage will be pushed.

The picture need not to be displayed.

 

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 = secondPageDefinition.createObject()
                   // secondPage.imagePath = selectedFile
                    navigaton.pushPage(ppp)
                }
            }
        ]
        
      
    }
      
   
} // end of NavigationPane

 I tried that, and got this error:

FilePickerPrivate::smileysurprised:nCardInvokeRequestFinished()  . error= 0

FilePicker destructor called
ERROR: Context: Object name=" "TextStyleData" " [objectId= 6 ] not unrealized
ERROR: Context: Object name=" "Page" " [objectId= 37 ] not unrealized
ERROR: Context: Object name=" "NavigationPaneProperties" " [objectId= 38 ] not unrealized
ERROR: Context: Object name=" "ActionItem" " [objectId= 39 ] not unrealized
ERROR: Context: Object name=" "ActionItem" " [objectId= 40 ] not unrealized
ERROR: Context: Object name=" "TitleBar" " [objectId= 41 ] not unrealized
ERROR: Context: Object name=" "Container" " [objectId= 42 ] not unrealized
ERROR: Context: Object name=" "Label" " [objectId= 43 ] not unrealized
ERROR: Context: Object name=" "ActionSet" " [objectId= 44 ] not unrealized
ERROR: Context: Object name=" "ImageView" " [objectId= 45 ] not unrealized
ERROR: Context: Object name=" "ImageData" " [objectId= 46 ] not unrealized
ERROR: Context: Object name=" "Label" " [objectId= 47 ] not unrealized
ERROR: Context: Object name=" "ActionSet" " [objectId= 48 ] not unrealized
ERROR: Context: Object name=" "TextStyleData" " [objectId= 49 ] not unrealized
BpsEventManagerDependReal::setEventFilter - thread has no event dispatcher

Contributor
Posts: 13
Registered: ‎01-02-2013
My Device: BB10

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

I do not know why your project meets the problems!

try to test this code it is always better now that the errors you encounter and I can move from one page to another.

for the picture on ImageView if i find a solution I will you send we are actually doing the same project almost :smileyhappy:

 

Main.qml

 


import bb.cascades 1.0
import bb.cascades.pickers 1.0
 NavigationPane {
            id: navigationPane
Page {
    titleBar: TitleBar {
        title: qsTr("File Picker")
    }
    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

            //! [0]
            // The file picker mode selector
             Button {
                        text: "click"
                        onClicked: {
                            var newPage = pageDefinition.createObject();
                            navigationPane.push(newPage);
                        }
                        attachedObjects: ComponentDefinition {
                            id: pageDefinition
                            source: "cam.qml"
                        }
                    }
             ImageView {
                 id:imag
                 maxHeight: 300
                 minWidth: 300
                 
                 imageSource: "file:///accounts/1000/shared/camera/IMG_00000143.png"
              //   imageSource: "asset:///images/bg.png"
              
                 
        
                 
                 
             }   
              ContentImage {

                imgSource: "asset:///images/png.png"

              mime: "image/png"
            uri: "file:///accounts/1000/shared/photos/png/sample2.png"
   }

                
       }
    }

}
}

 

 

cam.qml

 

 

/* Copyright (c) 2012 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import bb.cascades 1.0
import bb.cascades.pickers 1.0

Page {
    titleBar: TitleBar {
        title: qsTr ("File Picker")
    }

    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

            //! [0]
            // The file picker mode selector
            DropDown {
                id: pickerMode

                horizontalAlignment: HorizontalAlignment.Center
                topMargin: 50

                title: qsTr ("Mode")

                Option {
                    text: qsTr ("Picker")
                    value: FilePickerMode.Picker
                    selected: true
                }

                
            }
            //! [0]

            // The file picker type selector
            DropDown {
                id: pickerType

                horizontalAlignment: HorizontalAlignment.Center

                title: qsTr ("Type")

                Option {
                    text: qsTr ("Picture")
                    value: FileType.Picture
                    selected: true
                }

               
            }

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

                horizontalAlignment: HorizontalAlignment.Center

                title: qsTr ("View Mode")

                

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

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

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

                horizontalAlignment: HorizontalAlignment.Center

                title: qsTr ("Sort by")

                

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

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

                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 ("Ascending")
                    value: FilePickerSortOrder.Ascending
                }

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

            //! [1]
            // The 'Show' button
            Button {
                horizontalAlignment: HorizontalAlignment.Center
                topMargin: 100

                text: qsTr ("Show")
                onClicked: picker.open()
            }
            //! [1]

            //! [2]
            // 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 != "")
            }
            //! [2]
        }
    }

    //! [3]
    attachedObjects: [
        FilePicker {
            id: picker

            property string selectedFile

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

            onFileSelected: {
                selectedFile = selectedFiles[0]
            
            }
        }
    ]
    //! [3]
}