GuidesDownload

Slider control

Suggest Edits

The slider control allows you to implement Carousel like functionality where you can swipe left and right to display different items:

The current naming of Slider control and Slider line control is a bit confusing. We will rename Sliderline control to Slider control, and Slider control to something like Scroll control in the future.

Add list of items to slider control

Let's create three instances of the Dog class and use the list of dogs in the slider control. The Dog class looks like this.

import ScadeKit

class Dog : EObject {
	
	// please make sure you annotate each variable with the type
	// for SCADE to more identify and leverage the type information
	let id : String
	let name : String
	let ageInYears : Int 
	let breed:String 
	let imageUrl : String!
  	let falseValue : Bool = false
	
	init(id:String,name:String,breed:String,ageInYears:Int,imageUrl:String) {
		self.id = id
		self.name = name
		self.breed = breed
		self.ageInYears = ageInYears
		self.imageUrl = imageUrl
	}
}

Setup the page

  1. Add the slider control and center it.
  2. Insert an image control within the slider control
  3. Add a label on top of the image control
  4. Add a button outside the label control

Add code to main page

  1. Add the variable dogs that holds the list of dogs
  2. Add an event handler to capture swipe events
  3. Add an event to capture button click event
  4. Setup the dog array

The slide fires an SCDWidgetsSlideEvent when the slider control is swiped left or right:

a. Create a reference to slider and cast to SCDWidgetsSlider
b. use the .onSlide array to add a SCDWidgetsSlideEventHandler
c. the SCDWidgetsSlideEvent has two attributes, to and from, to indicate the position change

import ScadeKit

class MainPageAdapter: SCDLatticePageAdapter {

	@objc dynamic var dogs: [Dog] = []
	var slider : SCDWidgetsSlider!
 	
	// page adapter initialization
	override func load(_ path: String) {		
		super.load(path)
		setupDogs()
		
		// Listen to slides
		self.slider = self.page!.getWidgetByName("slider1") as! SCDWidgetsSlider
		slider.onSlide.append(SCDWidgetsSlideEventHandler{ ev in self.slideHappened(ev:ev!)})
		
		// listen to button and goto second element starting at 0
		let btnGoto = self.page!.getWidgetByName("btnGotoMiddle") as! SCDWidgetsButton
		btnGoto.onClick.append(SCDWidgetsEventHandler{_ in self.slider.selected = 1})
	}
	
	func slideHappened(ev:SCDWidgetsSlideEvent) {
	  	print(ev.to)
   		print(ev.from)
   		if let ind = ev.to as Int? {
	  		let d = dogs[ind] 
	  		print(d.name)
	  	}
	}
	
	func setupDogs() {
		dogs.append(Dog(id:"d100",name:"Hector",breed:"Boxer",ageInYears:2,imageUrl:"res/dog1.jpg"))
		dogs.append(Dog(id:"d101",name:"Max",breed:"Labrador", ageInYears:3,imageUrl:"res/dog2.jpg"))
		dogs.append(Dog(id:"d102",name:"Bailey",breed:"St.Bernard", ageInYears:3,imageUrl:"res/dog3.jpg"))
	}
}

Bind to slider control using binding tab

a. bind list, name and imageUrl
b. Important! Set the field contentPriority to false

Slide to a specific item

The item count starts at zero, so to goto 2nd item, set .selected = 1

Slider app

Updated over 5 years ago