App Inventor'da ListView ile liste göstermek için tasarım ekranına bir ListView ekleyebilir, kitap adlarını bu bileşenin özelliklerinden tanımlayabilirsin. Kullanıcı listedeki bir kitaba dokunduğunda seçilen öğe daha sonra bloklarla bir Label bileşeninde gösterilebilir.
Bu örnekte uygulamamızın adı Okuma listem olsun. Önce ekranda listeyi gösterecek bileşenleri hazırlayalım.
ListView nedir ve ekrana nasıl eklenir?
ListView, birden çok seçeneği ekranda satırlar hâlinde göstermeye yarayan görünür bir bileşendir. Örneğin kitap adlarını ListView içine eklediğinde kullanıcı bu adları ekranda görür ve kitaplardan birine dokunarak seçim yapabilir. ListView bileşeni ekrandaki görünen parçadır, özellikler ise bu parçanın nasıl görüneceğini ve hangi içeriği göstereceğini belirleyen ayarlardır.
App Inventor tasarım ekranında sol taraftaki bileşen listesinden şu parçaları ekle:
- ListView: Kitap adlarını gösterecek liste
- Label: Seçilen kitabı yazdıracağımız metin alanı
- TextBox: Yeni kitap adı girmek için kullanılacak kutu
- Button: Yazılan kitabı listeye eklemek için kullanılacak düğme
ListView bileşenini seçtiğinde sağ taraftaki özellikler bölümünde ElementsFromString alanını bulabilirsin. Bu alan, virgülle ayrılmış bir metni ListView içindeki ayrı liste öğelerine dönüştürür. Örneğin şu metni yazabilirsin:
Küçük Prens,Simyacı,MartıBu giriş, ListView içinde üç ayrı kitap adı oluşturur. Virgüllerden sonra boşluk bırakmamak düzenli bir görünüm sağlar. Kitap adının kendi içindeki boşluklar ise korunur. Bu nedenle Küçük Prens ifadesindeki boşluk kalmalıdır, fakat virgülden sonra Simyacı kelimesinden önce ayrıca boşluk yazılmamalıdır.
ListView'in yüksekliğini ve genişliğini, kitap adlarının rahat okunacağı şekilde ayarlayabilirsin. Label bileşeninin başlangıç metnini Bir kitap seç, Button bileşeninin metnini ise Kitap ekle yapabilirsin. Böylece uygulamanın temel ekran düzeni hazır olur.
Listeyi bloklarla nasıl doldurabilirsin?
Kitapları tasarım ekranındaki ElementsFromString alanına yazmak hızlı bir başlangıç sağlar. Bloklarla liste oluşturmak ise kitapları daha sonra değiştirmeyi, yeni öğeler eklemeyi ve aynı listeyi farklı işlemlerde kullanmayı kolaylaştırır. ListView'in Elements özelliği doğrudan bir liste alır; ElementsFromString ise virgülle ayrılmış metin kullanır.
Bloklar bölümünde önce bir global liste değişkeni oluştur. Değişkenin adı kitaplar olsun ve içine üç kitap ekle:
initialize global kitaplar to
make a list
"Küçük Prens"
"Simyacı"
"Martı"
when Screen1.Initialize
set ListView1.Elements to get global kitaplarBu akışta global kitaplar uygulamanın kullanacağı ana listeyi tutar. Screen1.Initialize olayı uygulama açılırken çalışır. Bu olayın içine ListView'in Elements özelliğini seçip değer olarak get global kitaplar bloğunu bağladığında, listedeki kitap adları ekranda görünür.
Uygulama açıldığında ListView üzerinde Küçük Prens, Simyacı ve Martı adlarını görmelisin. Türkçe arayüzde bazı blok adları farklı çevrilebilir. Böyle bir durumda bloğun görevine, rengine ve simgesine bakarak aynı işlemi yapan bloğu bulabilirsin.
Liste görünmüyorsa kontrol listesi
- Global değişkenin gerçekten bir liste oluşturduğunu kontrol et.
- get global kitaplar bloğunun ListView1.Elements özelliğine bağlandığından emin ol.
- Listeyi Elements özelliğine verirken metin yerine liste oluşturan bloğu kullan.
- ListView bileşeninin görünür olduğuna ve ekranda yeterli yüksekliğe sahip olduğuna bak.
Seçilen kitabı AfterPicking ile etikete nasıl yazdırırsın?
ListView bileşenindeki bir kitaba dokunulduktan sonra çalışacak olay AfterPicking olayıdır. ListView’in Selection özelliği, kullanıcının seçtiği satırdaki metni verir. Böylece seçilen kitabı Label bileşeninde gösterebilirsin.
Önce Blocks bölümünden when ListView1.AfterPicking olayını ekle. Bu olayın içine Label1 bileşeninin Text özelliğini ayarlayan bir blok yerleştir. Metinleri birleştirmek için Text bölümündeki join bloğunu kullan.
when ListView1.AfterPicking
do
set Label1.Text to
join
"Seçtiğin kitap: "
ListView1.SelectionKullanıcı listeden Küçük Prens kitabına dokunduğunda Label1 üzerinde Seçtiğin kitap: Küçük Prens yazısı görünür. Burada ListView1.Selection seçilen kitabın adını, join bloğu ise bu adı açıklama metniyle birleştirir.
Liste seçimini okumak için Button.Click olayını kullanma. Button bileşeni, sonraki adımda TextBox'a yazılan yeni kitabı listeye ekleme işlemini başlatacak.
TextBox ve Button ile listeye yeni kitap nasıl eklenir?
TextBox bileşeninin Text özelliğinde kullanıcının yazdığı kitap adı bulunur. Button tıklandığında bu metni temizleyip global kitaplar listesine ekleyebilir, ardından ListView1.Elements özelliğine güncel listeyi verebilirsin. add items to list bloğu, yeni öğeyi listenin sonuna eklemek için kullanılır.
when Button1.Click
do
if not is empty (trim TextBox1.Text)
then
add items to list global kitaplar
trim TextBox1.Text
set ListView1.Elements to get global kitaplar
set TextBox1.Text to ""Buradaki trim bloğu, kitap adının başındaki ve sonundaki gereksiz boşlukları kaldırır. is empty kontrolü ise TextBox boş bırakıldığında listeye boş bir satır eklenmesini önler. Text bölümündeki trim bloğu, başta ve sonda bulunan boşlukları temizlemek için kullanılır.
Yeni kitap global listeye eklense bile ListView1.Elements özelliğine güncel liste yeniden verilmezse ekrandaki liste güncellenmeyebilir. Bu yüzden ekleme işleminden hemen sonra set ListView1.Elements to get global kitaplar bloğunu çalıştır.
Tasarım ekranında ElementsFromString alanını kullanırken kitap adlarını tek bir metin içinde virgüllerle ayırırsın. Virgülden sonra gereksiz boşluk bırakmak, bazı öğelerin başında boşluk görünmesine yol açabilir. Bloklarla ekleme yaparken ise yeni kitap metni doğrudan global listeye eklenir ve Elements özelliği güncel listeyle yeniden ayarlanır.
- Seçim etikete yazılmıyorsa olayın ListView1.AfterPicking olduğundan emin ol.
- Etiket boş kalıyorsa Label1.Text özelliğini ayarladığını ve join bloğuna ListView1.Selection eklediğini kontrol et.
- Yeni kitap görünmüyorsa add items to list sonrasında ListView1.Elements özelliğini yeniden ayarla.
- Boş satır oluşuyorsa trim ve is empty kontrolünü Button.Click olayının içine yerleştir.
App Inventor arayüzünün diline göre blok adları Türkçe karşılıklarla görünebilir. Mantık aynı kalır: metni kontrol et, listeye ekle, ListView’in göstereceği listeyi güncelle. Kitapların uygulama kapatıldıktan sonra da korunmasını istersen ileride global kitaplar listesini TinyDB ile kaydedip uygulama açılışında geri yükleyebilirsin.
Uygulamayı telefonda veya emülatörde nasıl test edersin?
Telefonla test etmek için MIT AI2 Companion uygulamasını aç, bilgisayarın ve telefonun aynı Wi-Fi ağına bağlı olduğundan emin ol. App Inventor'da Connect menüsünden AI Companion seçeneğini açıp ekrandaki QR kodu okutabilir veya verilen kısa kodu Companion uygulamasına yazabilirsin. Türkçe arayüzde menü adı farklı görünebilir.
Telefon kullanmıyorsan Connect menüsünden Emulator seçeneğini açabilirsin. Emülatörün hazırlanması biraz sürebilir. Bilgisayarda gerekli yardımcı uygulamanın çalıştığını kontrol et ve uygulama emülatör ekranında görünene kadar bağlantının tamamlanmasını bekle.
Bağlantı kurulduktan sonra Okuma listem uygulamasını şu sırayla dene:
- Uygulama açıldığında başlangıç kitaplarının ListView içinde göründüğünü kontrol et.
- Bir kitaba dokun ve seçtiğin kitabın etiket üzerinde görünüp görünmediğine bak.
- TextBox içine yeni bir kitap adı yaz, Button bileşenine dokun ve kitabın listenin sonuna eklenmesini bekle.
- TextBox boşken Button bileşenine dokun. Bu durumda boş bir satır eklenmemeli ve mevcut liste bozulmamalıdır.
Liste güncellenmiyorsa önce kitapları tuttuğun liste değişkeninin gerçekten yeni kitabı içerdiğini kontrol et. Ardından set ListView1.Elements to bloğuyla ListView bileşeninin Elements özelliğini güncel listeye yeniden ata. Etikette seçim görünmüyorsa when ListView1.AfterPicking olayının kullanıldığını ve etiketin ListView1.Selection değerine eşitlendiğini kontrol et. Türkçe arayüzde blok adları farklı çevrilmiş olabilir, ancak bileşen adı, olay adı ve özellik adı aynı mantığı taşır.
Kitap adlarının başında boşluk varsa ElementsFromString içinde virgülden sonra boşluk bırakılmış olabilir. Simyacı,Küçük Prens,Martin Eden biçiminde ayırıcıları kullanabilir veya listeyi doğrudan Elements özelliğine aktarabilirsin.
Verilerin uygulama kapandıktan sonra da korunmasını istersen, kalıcı veri saklama için Berk Akademi'nin TinyDB konusunu anlatan yazısına başvurabilirsin.
Sık Sorulan Sorular
ListView içinde ElementsFromString ile Elements arasındaki fark nedir?
ElementsFromString, virgüllerle ayrılmış tek bir metni listeye dönüştürür; Elements ise bloklar içinde oluşturduğun listeyi doğrudan ListView bileşenine aktarmanı sağlar. Listeye sonradan kitap ekleyeceksen Elements kullanmak daha kontrollü olabilir.
AfterPicking olayı ne zaman çalışır ve Selection değeri nasıl okunur?
AfterPicking olayı, kullanıcı ListView içindeki bir öğeye dokunduktan sonra çalışır ve seçilen metin Selection özelliğinden okunur. Bu değeri etiketin Text özelliğine bağlayarak seçilen kitabı ekranda gösterebilirsin.
Listeye yeni kitap eklediğim hâlde ListView neden güncellenmiyor?
Listeye kitap eklendikten sonra ListView bileşeninin Elements özelliğini güncel listeyle yeniden atamak gerekebilir. Ayrıca kitabın gerçekten liste değişkenine eklendiğini de kontrol et.
Kitap adlarının başında neden boşluk oluşuyor?
ElementsFromString içinde virgülden sonra boşluk bıraktığında, bu boşluk sonraki kitap adının ilk karakteri gibi okunabilir. Virgülleri boşluksuz kullanmak veya Elements özelliğiyle blok listesi göndermek sorunu önler.
App Inventor uygulaması telefonda veya emülatörde nasıl test edilir?
Telefon için MIT AI2 Companion ile Connect > AI Companion seçeneğini, emülatör için Connect > Emulator seçeneğini kullanabilirsin. Telefonda bilgisayar ve cihaz aynı Wi-Fi ağına bağlı olmalı, emülatörde ise bağlantının tamamlanmasını beklemelisin.
Bu kontroller, Okuma listem uygulamasındaki bileşenlerin, olayların ve özelliklerin birlikte doğru çalışıp çalışmadığını görmeni sağlar.
