APP INVENTOR DERS-5

Image ve ListPicker Kullanımı

ListPicker, görüntüsü buton ile aynı, işlevi ise tıkladığınızda seçim yapmanız için bir liste açmaktır. Bu dersimizde 1 adet ListPicker, 1 adet Label, 8 adet Image(Sayıyı isteğinize göre değiştirebilirsiniz) kullanıyoruz.Proje akışımız basit: ListPicker'a tıklandığında bizim ayarladığımız(nasıl ayarlandığı aşağıda ki resimde gösteriliyor) şehirler listesinden seçtiğimiz şehrin plaka kodunu Label'a yazdırmak ve o şehirle alakalı bir görseli ekranda göstermek.Benim seçtiğim iller: İstanbul, Ankara, İzmir, Adana, Rize, Kayseri, Malatya, Diyarbakır .Her şehir için birer tane görsel indirmeyi unutmayın.

ListPicker'a Liste Elemanı Ekleme

1. ElementsFromString(String Elemanlar) yazısının altında ki textbox'a aralarına virgül koyarak yazdığınız her şey liste elemanına dönüşür.
2. İndirdiğiniz resimleri  Media altındaki "Upload File..." yazısına tıklayıp kaydettiğiniz dosya konumundan projenize yükleyebilirsiniz.

Bileşenlerimizi isimlendirmeyi unutmayalım.

• ListPicker1 = lspSehirSec , Text özelliği: "Bir Şehir Seçiniz"
• Label1 = lblPlakaYaz        , Text özelliği: " "
• Image1 = imgIstanbul
• Image2 = imgAnkara
• Image3 = imgIzmir
• Image4 = imgAdana
• Image5 = imgRize
• Image6 = imgKayseri
• Image7 = imgMalatya
• Image8 = imgDiyarbakir

1. Her bir Image bileşenimizin Picture özelliğinin altındaki textbox'a tıkladığımızda Media kısmına yüklediğimiz görsellerin seçilebilir olduğunu görebiliriz.
2. Eğer bu kutuyu işaretlerseniz görselin orijinal boyutunu yok sayacak ve telefonun ekranına görseli sıkıştıracaktır.
3. Projenizin telefon ekranının resimdeki gibi görünmesi için bütün Image'lerin visible (görünürlük) özelliklerini false(yanlış/kapalı) yapmanız gerekli.

Değişken oluşturmayı ve liste yapmayı önceki dersimizde görmüştük.Şekilde gördüğünüz gibi listeleri ve değişkeni oluşturalım.Şehirlerin isimleri ile plaka kodlarının aynı sırada olması önemli.

Dersin daha anlaşılır olması için kullanıcının İzmir'i seçtiğini varsayarak devam ediyoruz

1. (when "lspSehirSec" .AfterPicking yani "lspSehirSec" ile seçim yapıldıktan sonra aşağıdaki kodları çalıştır) "lblPlakaYaz" ın text özelliğini,
2.  "Seçtiğiniz ilin plaka kodu:"+ "35" şeklinde set et.(İzmir'i seçtiğimizi varsaydığımız için 35 i kullandık.)
3. Lists kısmından alınan bu kod bloğu,
4. Buraya konulan listede,
5. Buraya konulan elemanı arar ve indexini bulur.("lspSehirSec".Selection=Seçilen "lspSehirSec" elemanı)(İzmir seçildiğini varsaydığımız için index numarası 3 olarak dönecektir.)
6. List kısmından alınan bu kod bloğu,
7. Buraya konulan listeden, aşağıdan gelen index numarasına sahip elemanını seçer.(İndex numaramız 3 olduğundan ve "plakaKodlari" listesinin 3 numaralı elemanı da 35 olduğundan belirttiğimiz şekilde "Seçtiğiniz ilin plaka kodu:35" yazdırdık.)
8. Kullanıcının seçtiği ilin liste index numarasını "secilenVeri" değişkenine atıyoruz.
9. Projemiz büyüdükçe kod bloklarımız da büyüyor ve çalışma ekranımıza sığmaz hale gelmeye başlıyor.Daha kolay çalışmak için: Ctrl ye basılı tutarken farenizin kaydırağını kullandığınızda kod bloklarının boyutlarını ayarlayabilirsiniz veya kod bloklarına sağ tıklandığında açılan menüyü kullanabilirsiniz.En sık kullanılan sağ click özelliklerini açıklayarak devam edelim.

• Duplicate: Hangi bloğun üzerindeyken sağ tıkladıysanız o blok ve altındaki bütün kod bloklarını kopyalar.
• Collapse Block: Benim listelere uyguladığım gibi, kodlamayı bitirdiğiniz blokları collapse ederek(sıkıştırarak) daha az yer kaplamasını sağlayabilirsiniz.
• Expand Block: Sıkıştırdığınız herhangi bir bloğu açmak için kullanabilirsiniz.
• Disable Block: Yazdığınız bir bloğu silmek istemiyorsunuz ama işlevselliğini/ulaşılabilirliğini kapatmak istiyorsanız kullanabilirsiniz.
• Add to Backpack:Yazdığınız herhangi bir kodu başka projelerinizde veya ekranlarda kullanacağınızı düşünüyorsanız, bu seçeneği kullanarak üzerindeyken sağ tıkladığınız o blok ve altındaki bütün kod bloklarını çantaya eklemiş olursunuz.Bu işlemi yaptığınızda çalışma ekranınızın sağ üst köşesindeki çantanın açıldığını göreceksiniz.Çantaya tıklayıp eklediğiniz bütün kodları görebilirsiniz.

Buraya kadar kullanıcının hangi ili seçtiğini öğrenip plaka kodunu ekrana yazdırdık.Şimdi seçilen ilin index numarasını "secilenVeri" değişkeni sayesinde bildiğimize göre buna uygun görseli görünür kılabiliriz.Bunu: eğer "secilenVeri=3" ise "imgIzmir" in visible özelliğini true(doğru/açık) olarak set et diyerek yapabiliriz.Yani if-then bloğu kullanmamız gerekiyor. Her il için bir tane if-then bloğu kullanarak da yapabiliriz fakat blokların sol üst köşelerinden çentik sayılarını artırabildiğimizi unutmayalım.Üstelik ayrı ayrı if-then blokları kullanmak programımızı daha ağır bir hale getirecektir.

Bu işlemde kullanıcının bir il seçiminden sonra gerçekleşeceği için bu kodları da "AfterSelection" bloğunun en altına yerleştiriyoruz. Kod bloklarının son halini aşağıda görebilirsiniz.

Soru1: Zaten Image'lerin visible özelliği false'iken neden tekrar kod içerisinde false yapmamız gerekti?

Soru2: Projede yapmak istediklerimizi daha az, hızlı çalışan kod blokları ile yapabilir miyiz? Yapabiliyorsak Nasıl?

(Cevaplarınızı yorum olarak bekliyorum.)

 İYİ ÇALIŞMALAR😁