📘

Sourcecode

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

Introduction

The page is the core UI component within SCADE. Each mobile application consists of a set of pages.

• A page represents the screen content of a mobile device
• It contains multiple other controls
• A page is represented in two forms
  • a file pagename.page that provides a visual presentation editable by the page editor
  • a file pagename.page.swift that provides a Swift class that represents the page where you add the behaviour and logic
• Controls within a page are layout using a layout manager
• SCADE supports two layout manager, grid layout and autolayout manager
• The default layout manager is autolayout
• You set the page size when you create the page. You can choose among different iPhone sizes/resolutions

Project Main Page and Page Creation

The default application already consists of a registered page, the main page

To add additional pages, the developer has to

• create a new page
• register it and
• navigate to it

Lets build a very simple example application that navigates between two different pages, main.page and settings.page

Create a new project and add a new settings page

1. Create new project (not shown)
2. Create a new page under the Sources/PROJECTNAME folder

3. Select the layout manager that you want to use for this page.

SCADE offers two layout managers. Choose AutoLayout for beginners.

4. Select the device format size you want to use for designing the app
   We recommend iPhone6 Plus.

Register the settings page

Each page inherits page specific functionality from the SCDLatticePageAdapter class. Each page must be known to the SCADE mobile application. A page is registered by calling the load method in the - for instance - the SCDApplication application start file:

1. Open the start.swift file
2. add property settingspage of type SettingsPageAdapter and make it optional
3. instantiate settingspage and register the page using .load("settings.page")

🚧

Case sensitivity - Watch out and use case sensitive spelling always

Please be aware that the name of the page used in .load() is case sensitive, even if you OSX file system is configured to NOT be case sensitive.

Case sensitivity differs across different platforms, and therefore always needs to be case sensitive.

import ScadeKit

class SampleApp :  SCDApplication {

    let window = SCDLatticeWindow()
    let mainAdapter = MainPageAdapter()
    let settingspage = SettingsPageAdapter()
     
    override func onFinishLaunching() {
 
        mainAdapter.load("main.page")
        mainAdapter.show(window)

	    // loading the page registers the page as part of SCDApplication
	    settingspage.load("settings.page")
    }
}

Using the load method

The load method happens only once, when the page is loaded. You want to use the load method to

• setup and initialize data structures
• create references to UI objects
• setup events
• you may want to code data loading logic. Alternatively leave this to the enter event

The following sample page implementation illustrates the use of the load method. It add event logic that defines what happens when the page's button is clicked:

import ScadeKit

class SamplePageAdapter: SCDLatticePageAdapter {

	// page adapter initialization
	override func load(_ path: String) {		
		super.load(path)
		
		// We configure the page to add logic to the button **btnButton1**
		self.page!.btnButton1.onClick{  _ in print("do sth")} )
	}
}

Understanding auto generated control reference variables

SCADE page editor autogenerates code that makes it easy to access controls on your page using code:

• For each control element you put on the page using the visual page editor, SCADE extends the page's swift class with a variable name of the control.

Example
You put a button called btnOne on the page using the page editor (use the name field to name the control

The page editor autogenerated code in the Extensions folder and assigns it a type.

This allows you to access the control from the page easily in a type safe manner

Add logic to nagivate between the pages

Go and GoWith methods

1. add a button to the main page called btnSettingsPage

2. use the self.navigation!.go() method to switch between pages

• Open the code portion of the main page (main.page.swift)
• Goto a page using an animation effect. Default animation is FORWARD_PUSH

self.btnSettingsPage.onClick {
    _ in self.navigation!.go(page: "settings.page",
         transition: SCDLatticeTransition.fromLeft) }

3. Alternatively, use the goWith method to pass data

self.btnSettingsPage.onClick {
     _ in self.navigation!.goWith(page: "settings.page", 
        	 data: "myData",  transition: SCDLatticeTransition.fromLeft) }

Below the code for switching to the settings page from the main page when clicking the button

import ScadeKit

class MainPageAdapter: SCDLatticePageAdapter {

	// page adapter initialization
	override func load(_ path: String) {		
	       super.load(path)
              self.btnSettingsPage.onClick { _ in self.navigation!.go(page: "settings.page",
                transition: SCDLatticeTransition.fromLeft) }
	}
}

Page events

Page events occur when you enter or exit a page.

• onEnter event is triggered when the user is entering the page using the navigation.go method
• onExit event is triggered when the user leaves the page
• onClick event is triggered when the user taps/clicks on the page

Page Enter Event

• is triggered when the user is entering the page using the navigation.go method
• the event is of type SCDWidgetsEnterEvent
• contains an attribute data (autocompletion works once you unwrap it) called data

import ScadeKit
  
class MainPageAdapter: SCDLatticePageAdapter {
  
  // page adapter initialization
  override func load(_ path: String) {
    super.load(path)
    
    self.btnOne.onClick { _ in print("nice and easy control access")}
    
    // Add logic  when a page enter event happens
    self.page!.onEnter.append(SCDWidgetsEnterEventHandler{
    		(enterPageEvent:SCDWidgetsEnterEvent?) in print("entering page")
    		let eventData = enterPageEvent!.data as! String
    		print(eventData)
    	})
    
    // Add logic when a page exit event happens
    self.page!.onExit.append(SCDWidgetsExitEventHandler{
    		(exitPageEvent:SCDWidgetsExitEvent?) in print("leaving page")
    	})
    
  }
}

Page Exit Event

• is triggered when the user is leaving the page caused by the navigation.go method
• the event is of type SCDWidgetsExitEvent

Page Click Event

A page click event is triggered when clicking on a page. To process a click event on a page, use onClick

• use SCDWidgetsEventHandler
• use SCDWidgetsEvent (if necessary) to type the event

// React to onClick events
self.page!.onClick.append( SCDWidgetsEventHandler { (event:SCDWidgetsEvent?) in print(event) })

// this version might be shorter, as the event itself doesnt hold much useful information
self.page!.onClick.append( SCDWidgetsEventHandler { _ in print("page clicked") })