1 Mart 2018 Perşembe

Firemonkey ListView veri tabanıyla birlikte kullanımı

FMX kütüphanesinin en yararlı elemanlarından birisi ListView'dur.

İlk amacımız şu görüntüdeki bir ana form elde etmek olacaktır.



1-Bunun için öncelikle yeni bir boş MultiDevice Application oluşturup onu diskte bir klasöre kaydedelim.
2-Form üzerine önce bir ClientDataSet ve bir ListView koyalım onu görüntüdeki gibi düzenleyelim.
3-ClientDataset1 üzerinde sağ-klik yapıp <Load from MyBase Table...> seçeneğini tıklayalım ve açılan Open Dialog'da biolife.xml'i seçelim (biolife.xml kurulu Delphi sürümünün Samples\Data klasörü altındadır.).
4-ListView1 üzerinde sağ klik yapıp Toggle Designmode'a tıklayalım.


Bu şekildeki gibi ListView1 görünümü değişecektir. Şimdi bunun üzerine bir Image alanı ve bir de 2. bir Text alanı ekleyelim.
5-ListView1'in ItemAppearance özelliğinin detaylarını açalım.


6-Burada ItemAppearance özelliğini DynamicAppearance olarak değiştirelim. Artık ListViewItem'a istediğimiz kadar metin ve resim ekleyebiliriz.
7-Bu aşamada Item'e yeni alanlar eklemek için üstteki Structure penceresinden Item'i seçelim. Bunun property editor'unde Add new'a tıklayalım ve TTextObjectAppearance 'ı seçelim. Burada bize 2 adet text alanı verecektir (Text1 ve Text2).
8-Yine aynı şekilde Add new'a tıklayıp TImageObjectAppearance'ı seçelim bu kez.
Text1'e Biolife tablosunun CommonName alanını, Text2'ye ise SpeciesName alanını ve Image3'e de aynı tablonun Graphic alanını yazdıracağız. Şimdi bu alanları ekranda düzenleyelim.

9-Yine üstten Item'ın sırayla Image3, Text1 ve Text2'sini seçip yerleştirelim.








Sonuçta şöyle bir görüntü çıkacak.

10-Şimdi ClientDataSet1 ve ListView1'i birbirine bağlayacağız. Bunun için Menu'den View/LiveBindings Designer'i seçelim.
11-Burada ClientDataSet1 ve ListView1 görülecektir. ClientDataSet1'in * alanını ListView1'in Synch alanı ile birleştirelim. (Yani önce * alanının üzerinde tıklayıp parmağımızı kaldırmadan bunu Synch'ya kadar uzatalım. İki alanın bir okla birbirine bağlandığını ve Designer'in otomatik olarak BindSourceDB1 adlı yeni bir nesneyi eklediğini göreceğiz. Şimdi Common_Name'i tutup Item.Text1'le, Species Name'i tutup Item.Text2 ile ve Graphic'i tutup Item.Image3'le birleştirelim.
12-ListView1 üzerinde sağ klik yapıp menüden ToggleDesignMode'ye basalım. Şimdi formumuz şu hale geldi...

13-BindSourceDB1 üzerinde sağ klik yapıp Add Navigator'ı seçelim ve düzgün bir şekilde yerleştirelim...
14-Programı çalıştıralım...





Hiç yorum yok:

Yorum Gönder