Page container control

SCADE 2.0 - April 2021 Page container in Cross Platform Swift

📘

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

Overview

Drag and drop the page container onto the page. You can dynamically inject any other page in there

import ScadeKit

class MainPageAdapter: SCDLatticePageAdapter {

	let page1 : Page1PageAdapter = Page1PageAdapter()
	let page2 : Page2PageAdapter = Page2PageAdapter()
	let page3 : Page3PageAdapter = Page3PageAdapter()
	
	// 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 to the buttons
		self.btnPage1.onClick{_ in self.showPage(self.page1)}
		
		self.btnPage2.onClick{_ in self.showPage(self.page2)}
		
		self.btnPage3.onClick{_ in self.showPage(self.page3)}
				
		// Now, lets display page1 in pagecontainer
		self.page1.show(view: self.pagecontainer1)
	}
	
	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(view: self.pagecontainer1)
	}
}