Better way of adding a Sheet

ssSheetI am making some more updates to my Meetup for BlackBerry 10 app and wanted to add a page for Settings, which is accessible from the pull down app menu.   Screens in Cascades are either a Page or Sheet contained by themselves or in a Tab or Navigation panes.  My application is already setup using a TabbedPane, so in order to add something that isn’t a Tab, I need to display a Sheet.  Previously, I added a sheet to a photo album page to show a single photo.  After you define the sheet on the Page, to display it, you simple call “open()”.  The issues is that the Sheet definition is part of the attached objects for the Page.  And within that Sheet definition is a Page in order to “close” the sheet.


 attachedObjects: [
	Sheet {
		id: photoSheet
		content: 
		Page {
			WebImageView {
				id:singleImg
				url: ListItemData.photo_link
				horizontalAlignment: HorizontalAlignment.Center
				verticalAlignment: VerticalAlignment.Center
				// visible: (img.loading == 1.0)
				scalingMethod: ScalingMethod.AspectFit
				//preferredWidth: Qt.mainTab.width
				//preferredHeight: Qt.mainTab.height
			}
			onCreationCompleted: { 
				singleImg.url = selectPhotoURL; 
				console.debug("selectPhotoURL: " + selectPhotoURL);
			}
			actions: [
				ActionItem {
					id: actionClose
					title: "Close"
					imageSource: "asset:///images/previous.png"
					ActionBar.placement: ActionBarPlacement.OnBar
					onTriggered: {
						photoSheet.close()
					}
				}
			]
		}
		
	}
]

While this is fine for a simple Sheet, if you want your sheet do to more, the code gets a little crowded on the initial page.  Also, if you wanted to call that Sheet elsewhere in the app, you would have to rewrite the code.

The fix is fairly simple, but it just took me a few times to wrap my head around it.  Previously when I did a component definition, I added the Page or Content like you would call a function.  Well, you can do a Sheet in the same method.  However,  you still need the Page action available, so instead of creating a Sheet and then adding it to the definition, I created a Container (SettingsContainer) for all the things the sheet needed to handle and called the Container inside of the Sheet definition.


attachedObjects: [
	Sheet {
		id: settingsSheet
		Page {
			id: settingsPage
			objectName: "settingsPage"
			SettingsContainer {}
			actions: [
				ActionItem {
					id: actionClose
					title: "Close"
					imageSource: "asset:///images/previous.png"
					ActionBar.placement: ActionBarPlacement.OnBar
					onTriggered: {
						settingsSheet.close()
					}
				}
			]
		}
	}
]

 

I did try to create a component definition and add a Sheet as the content, but it only allows for a Page.  Doing it this way does allow for the core of the sheet to be available in other areas and the actions to open it and close it left on the calling Page.

About DeanLogic
Dean has been playing around with programming ever since his family got an IBM PC back in the early 80's. Things have changed since BASICA and Dean has dabbled in HTML, JavaScript, Action Script, Flex, Flash, PHP, C#, C++, J2ME and SQL. On this site Dean likes to share his adventures in coding. And since programming isn't enough of a time killer, Dean has also picked up the hobby of short film creation.

About DeanLogic

Dean has been playing around with programming ever since his family got an IBM PC back in the early 80's. Things have changed since BASICA and Dean has dabbled in HTML, JavaScript, Action Script, Flex, Flash, PHP, C#, C++, J2ME and SQL. On this site Dean likes to share his adventures in coding. And since programming isn't enough of a time killer, Dean has also picked up the hobby of short film creation.