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
New Developer
scenelebrity
Posts: 8
Registered: ‎09-08-2013
My Device: 9700
Accepted Solution

navigationPane, application menu problem

Hi,

 

I am currently trying to add an about page to my app. The only thing is that when I write the code that I think what's good it won't work.

Here's the code:

 

import bb.cascades 1.0
import bb.data 1.0

NavigationPane {
id: navPane

Menu.definition: MenuDefinition {
actions: [
ActionItem {
title: "About"
imageSource: "images/ic_info.png"

onTriggered: {
navPane.push(infoDS.createObject())
}
}
]
}

... later on in attachedObjects:

 

ComponentDefinition {
         id: infoDS
         source: "aboutDutchscene.qml"
     }

 

 

 

When I remove these codes the app is working fine, when I have this code the app will only load the splash screen. 

 

Is anyone familiar with this? I'm hoping to find a solution!

 

Thanks in advance for your help,

Stanley

Please use plain text.
Developer
LoganSix
Posts: 265
Registered: ‎01-02-2011
My Device: Z30, PlayBook

Re: navigationPane, application menu problem

[ Edited ]

First, rename the aboutDutchscene.qml to AboutDutchscene.qml .

 

Next, try this

NavigationPane {
id:navPane

Page {
id:mainPage
// page components

actions: [
            ActionItem {
                id: aiAboutButton
imageSource: "assets:///images/ic_info.png"
onTriggered {
navPane.push(infoDS.createObject());
}
attachedObjects: [
ComponentDefinition {
id: infoDS
AboutDutchscene { }
}
]
}
]

}
onPopTransitionEnded: {
        // Destroy the popped Page once the back transition has ended.
        page.destroy();
    }
}

 

Edit:  forgot the destroy and had the attachedObjects in the wrong spot

_________________
Meetup for BlackBerry 10
Meetup Search Tool - not available at the moment
Please use plain text.
New Developer
scenelebrity
Posts: 8
Registered: ‎09-08-2013
My Device: 9700

Re: navigationPane, application menu problem

[ Edited ]

Thanks for your reply. This looks better than first, but it stil doesn't work. The app doesn't go further than the Splash Screen. Could it be that there is something wrong with the main.cpp file? I'm trying to search how I can add a second page there but can't find it. Here's the code:

 

#include <bb/cascades/AbstractPane>
#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/data/DataSource>
#include <bb/cascades/HelpActionItem>


using namespace bb::cascades;

Q_DECL_EXPORT int main(int argc, char **argv)
{
    // We want to use DataSource in QML
    bb::data&colon;:DataSource::registerQmlTypes();

    Application app(argc, argv);

    // Load the UI description from main.qml
    QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(&app);
    // Create the application scene
    AbstractPane *appPage = qml->createRootObject<AbstractPane>();
    Application::instance()->setScene(appPage);

    return Application::instance()->exec();
}

 

Please use plain text.
Developer
LoganSix
Posts: 265
Registered: ‎01-02-2011
My Device: Z30, PlayBook

Re: navigationPane, application menu problem

You don't need c++ code to add a 2nd page, unless you plan on building everything in it dynamically.

 

You just push the next page.  Just create a QML Page (with the first letter in caps) and then call it with the action.

 

Here's the documention for NavigationPane.

 

 

data&colon; probably should be data&colon;:

 bb::data&colon;:DataSource::registerQmlTypes();
_________________
Meetup for BlackBerry 10
Meetup Search Tool - not available at the moment
Please use plain text.
New Developer
scenelebrity
Posts: 8
Registered: ‎09-08-2013
My Device: 9700

Re: navigationPane, application menu problem

Thanks. I have followed your steps and got it working now. There is only one problem left: when I click on the about button in the application menu nothing loads. The AboutDutchscene page exists and I won't see why it won't load. The screen where I am on just stays the same. 


The only way to change the 'page' now is to pop the firstscreen, but this wont work since it won't load the About qml then.

 

Do you know a solution maybe? Sorry if I bother you, I am really new into this and  I can't find an answer in the Developer docs.

 

 

Main.qml:

NavigationPane {
    id: navPane
    
    Menu.definition: MenuDefinition {
        actions: [
            ActionItem {
                id: aiAboutButton
                imageSource: "asset:///images/ic_info.png"
                title:"About"
                onTriggered: {
                    navPane.push(infoDS.createObject());
                    }
                
                    attachedObjects: 
                                        ComponentDefinition {
                                            id: infoDS
                                            AboutDutchscene {  }
                                        }
                                    
            }
        ]
    }

 

 

 AboutDutchscene.qml:

import bb.cascades 1.0

NavigationPane {
    Page {
        id:infoDS
        Container {
            
            layout: DockLayout {}
            
            ImageView {
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Fill
                
                imageSource: "asset:///images/background.png"
            }
            
            Container {
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Fill
                
                Container {
                    horizontalAlignment: HorizontalAlignment.Center
                    layout: DockLayout {}
                    
                    ImageView {
                        horizontalAlignment: HorizontalAlignment.Fill
                        verticalAlignment: VerticalAlignment.Fill
                        
                        imageSource: "asset:///images/header_background.png"
                    }
                    
                    Label {
                        horizontalAlignment: HorizontalAlignment.Center
                        
                        text: qsTr ("About")
                        textStyle.base: SystemDefaults.TextStyles.BigText
                        textStyle.color: Color.create("#bb0099CC")
                    }
                
                
                }
                

            }
    }
    }
}

 

Please use plain text.
Developer
LoganSix
Posts: 265
Registered: ‎01-02-2011
My Device: Z30, PlayBook

Re: navigationPane, application menu problem

You are trying to put a NavigationPane into a NavigationPane.  That won't work.

 

Your main.qml page should hold the NavigationPane and your first Page information.

NavigationPane {
    id: mainNavPane
    Page {
        id:mainPage
        Container {
			// Info page components
		}
		
		actions: [
		ActionItem {
			id: aiAboutButton
			imageSource: "asset:///images/ic_info.png"
			title:"About"
			onTriggered: {
				navPane.push(infoDS.createObject());
			}
			
				attachedObjects: [
					ComponentDefinition {
						id: infoDS
						AboutDutchscene {  }
					}
				]	
								
		}
		]
	}
	
	onPopTransitionEnded: {
		// Destroy the popped Page once the back transition has ended.
		page.destroy();
    }
}

 Then the pushed page should only be a Page

 

Page {
	id:aboutDutchscenePage
	Container {	
		layout: DockLayout {}
		
		ImageView {
			horizontalAlignment: HorizontalAlignment.Fill
			verticalAlignment: VerticalAlignment.Fill
			
			imageSource: "asset:///images/background.png"
		}
		
		Container {
			horizontalAlignment: HorizontalAlignment.Fill
			verticalAlignment: VerticalAlignment.Fill
			
			Container {
				horizontalAlignment: HorizontalAlignment.Center
				layout: DockLayout {}
				
				ImageView {
					horizontalAlignment: HorizontalAlignment.Fill
					verticalAlignment: VerticalAlignment.Fill
					
					imageSource: "asset:///images/header_background.png"
				}
				
				Label {
					horizontalAlignment: HorizontalAlignment.Center
					
					text: qsTr ("About")
					textStyle.base: SystemDefaults.TextStyles.BigText
					textStyle.color: Color.create("#bb0099CC")
				}		
			}
		}
	}
}

 

You probably can push a NavigationPane into a NavigationPane, but you first need a Page and then a Container to push it into.

_________________
Meetup for BlackBerry 10
Meetup Search Tool - not available at the moment
Please use plain text.
New Developer
scenelebrity
Posts: 8
Registered: ‎09-08-2013
My Device: 9700

Re: navigationPane, application menu problem

Thank you so much for your help :-).

Please use plain text.