GuidesDownload
Guides

Page container control

Suggest Edits

The page container control is available in versions BETA4 and higher

📘

SourceCode

Please see the UgMasterPageDemo project for the source code created in this chapter. See Installing examples for information on how to download the examples.

Introduction

The page container control brings usability and code reuse to SCADE. Prior to the page control, the SCADE developer had to repeat certain elements, making page development a little cumbersome. Now, with the new page control, navigation elements such as a toolbar or navigation bar can be reused across pages.

To achieve this, we introduced the page container control (short page control) which allows for the embedding of pages in other pages.

Minimal Page Container App

The following app demonstrates the loading of pages. By default, we load page1 on startup, and use the toolbar to switch to page2 and page3. The demo app itself is kept very minimalistic

Steps

  1. Create new app
  2. Add toolbar control and on top of that, insert Page control pageContainer1
  1. Uncheck, as always, the vertical Fill Space setting of toolbar1
  2. Create 3 new pages page1, page2 and page3 with a simple label
  3. Load the page1 with in the load method of the main page

We use the load method to load a page, and we use the show method to display the page. Please understand that the show method is on the page itself and requires the pageContainer object as its parameter

import ScadeKit

class MainPageAdapter: SCDLatticePageAdapter {

	let page1 : Page1PageAdapter = Page1PageAdapter()
	let page2 : Page2PageAdapter = Page2PageAdapter()
	let page3 : Page3PageAdapter = Page3PageAdapter()
	var pageContainer : SCDLatticePageContainer?
	
	// page adapter initialization
	override func load(_ path: String) {		
		super.load(path)
		
		// pages could either be loaded on demand
		// or in advance. We load all pages in advance here
		self.page1.load("page1.page")
		self.page2.load("page2.page")
		self.page3.load("page3.page")
		
		// lets add event handlers
		let tbItem1 = self.page!.getWidgetByName("item1") as! SCDWidgetsClickable
		tbItem1.onClick.append(SCDWidgetsEventHandler{ _ in self.showPage(self.page1)})
		
		let tbItem2 = self.page!.getWidgetByName("item2") as! SCDWidgetsClickable
		tbItem2.onClick.append(SCDWidgetsEventHandler{ _ in self.showPage(self.page2)})
		
		let tbItem3 = self.page!.getWidgetByName("item3") as! SCDWidgetsClickable
		tbItem3.onClick.append(SCDWidgetsEventHandler{ _ in self.showPage(self.page3)})
		
		// Now,we get a reference to the page container
		self.pageContainer = self.page!.getWidgetByName("pagecontainer1") as? SCDLatticePageContainer 
		
		// Finally, we use the page container to show page1
		self.page1.show(self.pageContainer)
	}
	
	func showPage(_ page:SCDLatticePageAdapter) {
		// our syntax is the other way round
		// we tell the page to display itself in container X
		// we don't tell the container to show a page
		page.show(self.pageContainer)
	}
}

Updated over 7 years ago