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
peter_strange
Posts: 19,610
Registered: ‎07-14-2008
My Device: Not Specified
Accepted Solution

Sheet doesn't work properly in a System Menu

[ Edited ]

I am trying to use a Sheet in the pull down menu for my application.  By this I mean the menu items you can use when you pull down from the top - typically you will find Information and Settings in there. 

But when I add a sheet to this menu, it works once, then the next time I pull down the menu button appears and does nothing, then after that, pulling down from the top does nothing at all.

 

To recreate this, all you need to do is create a standard Cascades project with a Navigation Pane.  Then update the QML for the initial screen (main.qml) to that below.  The idea is that the pull down menu will display a 'Help page' with information on the application.  All the user can do on that page is close it.  So the only changes are the addition of the MenuItem and the attached 'sheet' object. 

 

I can't see what I have done wrong, but then I am pretty new to all this stuff.  So any help would be appreciated.

 

Thanks. 

 

// Navigation pane project template
import bb.cascades 1.0

NavigationPane {
    id: navigationPane
    //! Add pull down menu item to push info screen
	Menu.definition: MenuDefinition {
	    helpAction: HelpActionItem {
	        onTriggered : {
	            console.log("NavigationPane - info.open()");
	            infoSheet.open();
	        }
	    }
	}
    Page {
        // page with a picture thumbnail
        Container {
            background: Color.Black
            layout: DockLayout {
            }
            Button {
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                text: qsTr("Show detail")
                imageSource: "asset:///images/picture1thumb.png"
                onClicked: {
                    // show detail page when the button is clicked
                    var page = getSecondPage();
                    console.debug("pushing detail " + page)
                    navigationPane.push(page);
                }
                property Page secondPage
                function getSecondPage() {
                    if (! secondPage) {
                        secondPage = secondPageDefinition.createObject();
                    }
                    return secondPage;
                }
                attachedObjects: [
                    ComponentDefinition {
                        id: secondPageDefinition
                        source: "DetailsPage.qml"
                    }
                ]
            }
        }
    }
    //! Add Info sheet as attached item
    attachedObjects: [
		Sheet {
		    id: infoSheet
		    Page {
		        titleBar: TitleBar {
		            title: "Info"
		            visibility: ChromeVisibility.Visible
		            dismissAction: ActionItem {
		                title: "Back"
		                onTriggered: {
		                    // Hide the Sheet.
		                    console.log("infoSheet - infoSheet.close()");
		                    infoSheet.close();
		                }
		            }
		        }
		        Container {
		            layout: DockLayout {
		            }
		            Container {
		                TextArea {
		                    text: "Information on Application"
		                }
		            }// Text Area Container
		        }// Edit pane Container
		    }// Page
		}// Sheet
    ]
    onCreationCompleted: {
        // this slot is called when declarative scene is created
        // write post creation initialization here
        console.log("NavigationPane - onCreationCompleted()");

        // enable layout to adapt to the device rotation
        // don't forget to enable screen rotation in bar-bescriptor.xml (Application->Orientation->Auto-orient)
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
    }
}

 

Developer
strobejb
Posts: 282
Registered: ‎10-15-2012
My Device: bb10 developer

Re: Sheet doesn't work properly in a System Menu

Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Sheet doesn't work properly in a System Menu

I just tested similar code as well and can confirm it's an issue.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
strobejb
Posts: 282
Registered: ‎10-15-2012
My Device: bb10 developer

Re: Sheet doesn't work properly in a System Menu

I might have found a workaround for this issue. Try putting your Sheet in a ComponentDefinition, and then dynamically creating the sheet whenever you want to view it. Something like:

 

/* define the sheet */

attachedObjects: [

 

 ComponentDefinition {

    id: mySheetDefinition

    Sheet {

            // your content here

     }

 

  }

]

 

 

/* display the sheet */

var mySheet = mySheetDefinition.createObject();

 

mySheet.open();

 

 

I'm still testing some other issues, but it appears to work OK, and my application menu remains functional this way

Developer
peter_strange
Posts: 19,610
Registered: ‎07-14-2008
My Device: Not Specified

Re: Sheet doesn't work properly in a System Menu

Thanks, I iwll check out your workaround myself, though I have just changed all my sheets to Pages!!!!

Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Sheet doesn't work properly in a System Menu

Page is probably the more appropriate thing to use anyway. If you're not using the Sheet to collect data from the user, I think it's probably a misuse of that component. Also you get the nice Back button at the bottom with Page, whereas with Sheet you're presumably forcing the user to tap way up at the top of the screen to close the sheet.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
peter_strange
Posts: 19,610
Registered: ‎07-14-2008
My Device: Not Specified

Re: Sheet doesn't work properly in a System Menu

Can confirm that the workaround does indeed work for me.  Thanks.  But I will be sticking with Pages. 

 

Peter,

 

I appreciate your comment regarding the back button, but is it not a waste of real estate at times?  You can stick the 'Back' button in the Sheet titleBar and effectively gain another row.....

Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Sheet doesn't work properly in a System Menu

If you always have a title bar there, then it certainly uses up more space to have Back than not. In this case, however, I might rely on the usability benefits from having the Back button down the button where the user will be very used to it being.

In the end, however, I feel it's to soon for me to really know what I think is "best"... I'll need to have the final device, play with the system apps (partly to understand the TAT designers' thought processes better), and experiment some more.

My comments about when to use Sheet come from the UI Guidelines and such things, so if you haven't read that you should, and if you have then your gut feeling about these things is probably at least as good as mine...

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
peter_strange
Posts: 19,610
Registered: ‎07-14-2008
My Device: Not Specified

Re: Sheet doesn't work properly in a System Menu

"...  so if you haven't read that you should,"  Good point! 

 

"your gut feeling about these things is probably at least as good as mine..."  I'd rate yours above mine, you have played with this much more than me!  

 

Thanks to all.

New Contributor
mayakamath
Posts: 2
Registered: ‎12-31-2012
My Device: BB10 Dev Alpha

It works!

Thanks ! The solution works for me... Still needs testing out in all cases though.