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
- Add the slider control and center it.
- Insert an image control within the slider control
- Add a label on top of the image control
- Add a button outside the label control
Add code to main page
- Add the variable dogs that holds the list of dogs
- Add an event handler to capture swipe events
- Add an event to capture button click event
- 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 about 6 years ago