Vaadin Müşteri Uygulaması - 2

    Selamün Aleyküm,
     Bir önceki yazımızda vaadin ile yapmış olduğumuz projeye giriş ve ilk sekmesini anlatmaya çalışmıştık. Bu yazımızda ise 2.sekmesini yani tablo kısmını inceleyeceğiz. Burada veri tabanından çekmiş olduğumuz alanları göstereceğiz. İstersek üzerinde değişiklikler yapıp tekrar kaydedebilir veya her hangi bir kaydı silebiliriz. Şimdi başlayalım.

    Table table = new Table();//tablomuzu oluşturuyoruz
    table.addContainerProperty("ID", Integer.class, "");
    table.addContainerProperty("NAME", String.class, "");
    //burada kolonlarımızı belirliyoruz. biz sadece 2 satırı aldık.

    VerticalLayout myTabRoot2 = new VerticalLayout();
    //2.inci tabımızı da oluşturuyoruz.
    myTabRoot2.addComponent(table);
    // tablomuzu bu sekmemizin içine yerleştiriyoruz
     tabsheet.addTab(myTabRoot2);
     // sekmemizi de ana tab yapımıza ekliyoruz.  Önceki yazıda da dediğimiz gibi bu eklemeler yapılmazsa yaptığımız bu işlemler gözükmeyecektir. Bunu daha önceki yazımızda da belirtmiştik. Dikkat edelim.
      tabsheet.getTab(myTabRoot2).setCaption("Second Tab");
       //sekmemize de isim veriyoruz

Resim-1

  Tablonun bir kısmını gösterdik burada, fakat diğer kolonlar da mevcuttur. Her hangi bir kayda tıklamadığımızda güncel ve delete bağlantıları gözükmemektedir. Her hangi bir kayda tıklayınca onuna ilgili işlem yapabiliriz. Şimdi de bu seçilen satırı nasıl belirlediğmizi ve güncelle,silme işlemlerini değineceğiz.

      table.addListener(new ItemClickEvent.ItemClickListener() {

public void itemClick(ItemClickEvent event) {

if (event.getButton() == ItemClickEvent.BUTTON_LEFT) {

// mouse sol tıkladığımızda olacak şeyler

myTabRoot2.addComponent(popupDelete);

myTabRoot2.addComponent(popupGuncel);

                                        //oluşturduğumuz güncelle ve sil'leri gösteriyoruz

idNumber = event.getItemId().toString();

                                        //tıkladığımız satırın numarasını alıyoruz

Id = (Integer) table.getContainerProperty(

event.getItemId(), "ID").getValue();

                                        //burada tıklanan satırdaki ID kolonundaki id  alınır.

listUpdate();

                                        //id'si veri tabanında eşlenen veriler getirilir.

                                        // listUpdate metodumuz burada yer vermedik.

                                        

}

}

});

Resim-2

    

     Veriler çekildikten sonra Resim-2 deki ekran karşımıza çıkmaktadır. Tüm alanlar otomatik olarak gelmektedir. Tarih alanında bir sıkıntı yaşamıştık belki daha sonra düzeltme imkanı bulabilirim. Ya da github üzerinden sizler de düzeltebilirsiniz. Herkese açık kaynaklı paylaştığım için değişiklik yapılabilir. Konumuza dönecek olursak burada istediğimiz bir alanı değiştirip "ok" düğmesine tıkladığımızda kaydımız başarıyla kaydedilmiş olacaktır.

   

    

Resim-3

     Güncelleme ekranıyla birlikte silme tuşuna tıkladığımızda karşımıza böyle bir popup açılıyor ve bize kaydı sileceğimizden emin miyiz diye soruyor. Emin değilsek fare imlecini üzerinden çekmemiz yeterli. Popup kapanıyor. Eğer eminsek işlemi onaylıyoruz ve işlem başarıyla tabloya yansıyor. Silme ve güncelleme işlemlerinin içerikleri üzerinde durmadım. Çünkü benzer örnekler çok rahatlıkla hem Türkçe hem İngilizce bulunabilir. 

    deleteButton.addListener(new Button.ClickListener() {

public void buttonClick(ClickEvent event) {

delete();

list();

}

});

      

    Silme ve güncelle bağlantılarına tıkladığımızda bu tanımlamalar belirtmek zorundayız. Delete ve list metodlarını çağırıyoruz. Güncelle işleminde de benzer adımlar mevcut. Metodlarımız proje mevcut. Github üzerinden projenin tamamını indirip daha ayrıntılı inceleyebilirsiniz. 2.sekmemizi de burada bitiyoruz. 3.üncü ve son sekme de diğer yazımıza kalsın. İyi çalışmalar