Slider control

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