Kuika’nın Slider elementiyle seçilen bilete ait gidiş ve dönüş uçuş sürelerini, veritabanından gelen varsayılan değerlerle iki ayrı sürgü üzerinde gösteren bir ekran oluşturmayı adım adım öğrenin.
“Slider” elementi, kullanıcıların belirli bir aralıkta tek bir değeri görsel ve etkileşimli bir şekilde seçmesini sağlayan bir input elementidir. Sürgü yani slider mekanizması sayesinde kullanıcılar, minimum ve maksimum değerler arasında kaydırma yaparak istedikleri değeri hızlıca ayarlayabilir.
Bu videoda “Seçilen Bilete Göre Uçuş Süresi Ayarlama” senaryosu üzerinden örnek “Slider” elementi kullanımını inceleyeceğiz. Öncelikle “Data Sources” modülü içerisindeki “Actions” alanından “GetDurationsDefaults” aksiyonunu oluşturun.
“UI Design” modülüne basın ve sayfanıza “Label” elementini ekleyip “Value” alanına “Flight Duration” yazın. “Styling” panelindeki “Style” alanından “Heading 2” olarak fontu ayarlayın. Bir “Label” elementi daha ekleyin. Onun altına ise “Slider” elementi sürükleyin. Bu işlemi tekrarlayın. Sayfanıza “Initial Action” alanından daha önce yazmış olduğunuz aksiyonu bağlayın. İlk “Label” elementine “Value” alanından “Action Result”, “GetDurationDefaults”, “First” adımını izleyerek “FlightType” seçimini yapın. “Slider” elementi üzerine tıklayın, aynı adımları takip edip “DefaultValue” tanımlayın. Ardından “Min”, “Max” ve “Step” alanları için de tanımlamaları “First” olarak yapın. İkinci “Label” elementinde ise “Value” alanında “FlightType” seçimini “Last” olarak yapın. “Slider” elementi için “Max”, “Min”, “Step” alanlarını da “Last” olarak uygun eşleştirmelerle tanımlayın. Uçuş süresi değerini göstermek için her iki Slider elementinde de “TooltipVisible” alanını açık olarak ayarlayın.
Uygulama test edildiğinde, seçilen uçuş biletine ait gidiş ve dönüş süreleri “Uçuş Süresi” başlığı altında iki ayrı slider üzerinde varsayılan değerler olarak görüntülenir. Gidiş uçuşu için San Francisco (SFO) ve dönüş uçuşu için New York (NYC) sürelerinin slider konumlarına yansıtıldığı bir ekran görüntüleyeceksiniz.
