Vaadin Table Kullanımı

Batuhan Düzgün tarafından yayınlanmıştır 27. October 2012 05:08

Merhaba arkadaşlar bu yazıda sizlerle birlikte Vaadin Table kullanımını inceleyeceğiz. Vaadin Web Framework'u en güçlü kılan bileşenlerden biride Table'dır. Table yapısı Vaadin'de çok esnektir. Table içinde salt okunur veriler gösterilebilir veya Table içinde diğer Vaadin bileşenlerini barındıran bir içerikte gösterilebilir. Örneğin : TextField, Combobox vs içeren satırlar şeklinde bir içerik hazırlanır.

Vaadin projesi açılır ve  “Application” sınıfından kalıtım alan  bir sınıf projeye eklenir. Ardından bu sınıf bir önceki makalemde belirttiğim gibi “web.xml” içine eklenir.

Demo verisi olaran kişilik bilgilerinin tutulduğu bir liste verilecektir. Bu listedeki her bir yapı “Person” tipinde bir nesne olacaktır. “Person” nesnelerinden oluşturulmuş liste demo veri kaynağı olacaktır. “Person” sınıfına ait yapı aşağıdaki gibidir.

package com.vaadintablesample;

public class Person {

                private long ID;

                private String name;

                private String lastname;

                private short age;

                private String job;

               

                public long getID() {

                               return ID;

                }

                public void setID(long iD) {

                               ID = iD;

                }

                public String getName() {

                               return name;

                }

                public void setName(String name) {

                               this.name = name;

                }

                public String getLastname() {

                               return lastname;

                }

                public void setLastname(String lastname) {

                               this.lastname = lastname;

                }

                public short getAge() {

                               return age;

                }

                public void setAge(short age) {

                               this.age = age;

                }

                public String getJob() {

                               return job;

                }

                public void setJob(String job) {

                               this.job = job;

                }               

}

İlk olarak web uygulamasının çalışmaya başlayacağı olan “init” metodu aşağıdaki gibi hazırlanır. “init” metodu içinde Table ile ilgili işlemleri yapacak olan metod çağrılacaktır. Ayrıca, uygulamanın “Main Window” u setlenir.

// Vaadin web uygulaması "init" metodu ile çalışmaya başlar.

                @Override

                public void init() {

                               // Gösterilecek olan sayfa üzerinde bulunacak olan içeriği tutan bir Window nesnesi eklenir.

                               Window mainWindow = new Window("Vaadintablesample Application");

                               // Vaadin Table ekran üzerine yerleştirilir.

                               // Vaadin Table için hazırlanmış olan demo verisi yüklenir ve Table üzerinde gösterilir.

                               addTable(mainWindow);

                               setMainWindow(mainWindow);

                }

Ardından Table bileşeninin oluşturulduğu ve veri kaynağının setlendiği metod hazırlanır. Buradaki işlemler Table oluşturulması, demo verisinin hazırlanması, HierarchicalContainer'ın oluşturulması işlemleri yer alır.

                private void addTable(Window mainWindow) {

                              

                               // VerticalLayout tipinde alt alta satırlar halinde ekleme yapılabilen bir layout hazırlanır.

                               // Oluşturulmuş olan layout üzerine Table eklenir.

                               VerticalLayout verticalLayout = new VerticalLayout();

                               // Ekranın genişliği boyunca yer kaplaması sağlanır.

                               verticalLayout.setWidth("100%");

                               // Boyu 190 piksel olarak ayarlanır.

                               verticalLayout.setHeight(190, VerticalLayout.UNITS_PIXELS);

                               mainWindow.addComponent(verticalLayout);

                              

                               // Vaadin Table oluşturulur.

                               Table table = new Table();

                               // Oluşturulmuş olan Table'in eklendiği bileşenin tamamını kaplaması sağlanır.

                               // Not : Genişlik ve uzunluk olarak.

                               table.setSizeFull();

                              

                               // Table içinde gösterilecek olan veri kaynağı HierarchicalContainer tipinde olacaktır.

                               // Oluşturulacak olan HierarchicalContainer üzerinde yer alacak sütunlar tek tek belirtilir.

                               // Her sütunun anahtar sözcüğü, tutacağı verinin tipi ve varsayılan değeri.

                               /*

                                *  Örneğin : "personId" anahtar sözcüğü

                                *                              "String.class" veri tipi

                                *                  "null" varsayılan değeri

                                */

                              

                                HierarchicalContainer hierarchicalContainer = new HierarchicalContainer();

                               hierarchicalContainer.addContainerProperty("personId", Long.class, null);

                               hierarchicalContainer.addContainerProperty("personName", String.class, null);

                               hierarchicalContainer.addContainerProperty("personLastName", String.class, null);

                               hierarchicalContainer.addContainerProperty("personAge", Short.class, null);

                               hierarchicalContainer.addContainerProperty("personJob", String.class, null);

                             

                               // Demo verisi liste halinde alınır.

                               List<Person> records = getDemoList();

                              

                               // Liste halinde "Person" listesi, HierarchicalContainer'e dönüştürülür.

                               // Böylece, Table'ın veri kaynağı olarak kullanabileceği bir kaynak hazırlanmış olur.

                               for (int i = 0; i < records.size(); i++) {

                                               Person person = records.get(i);

                                               // "addItem" metodu ile HierarchicalContainer'a yeni bir satır eklenir.

                                               Object itemId = hierarchicalContainer.addItem();

                                               // Eklenen satır üzerinde yer alan sütunlar tek tek doldurulur.

                                               hierarchicalContainer.getItem(itemId).getItemProperty("personId").setValue(person.getID());

                                               hierarchicalContainer.getItem(itemId).getItemProperty("personName").setValue(person.getName());

                                               hierarchicalContainer.getItem(itemId).getItemProperty("personLastName").setValue(person.getLastname());

                                               hierarchicalContainer.getItem(itemId).getItemProperty("personAge").setValue(person.getAge());

                                               hierarchicalContainer.getItem(itemId).getItemProperty("personJob").setValue(person.getJob());

                               }              

                               // Hazırlanmış olan veri kaynağı table'a "Data Source" olarak verilir.

                               table.setContainerDataSource(hierarchicalContainer);

                               // Table, Layout içine eklenir.

                               verticalLayout.addComponent(table);

                               // Table sayfa üzerinde ortalanır.

                               verticalLayout.setComponentAlignment(table, Alignment.MIDDLE_CENTER);

                }

Demo verisini liste şeklinde hazırlayan metod hazırlanır. Bu demo verisi Table üzerinde salt okunur şekilde gösterilecektir.

// Demo verisi hazırlayan metoddur.

                private List<Person> getDemoList() {

                               List<Person> personList = new ArrayList<Person>();

                              

                               Person person = new Person();

                               person.setID(1L);

                               person.setName("Ahmet");

                               person.setLastname("Kullu");

                               person.setAge((short)25);

                               person.setJob("Harita Mühendisi");

                               personList.add(person);

                              

                               person = new Person();

                               person.setID(2L);

                               person.setName("Mehmet");

                               person.setLastname("Kale");

                               person.setAge((short)29);

                               person.setJob("Bilgisayar Mühendisi");

                               personList.add(person);

                              

                               person = new Person();

                               person.setID(3L);

                               person.setName("Zafer");

                               person.setLastname("Yurt");

                               person.setAge((short)35);

                               person.setJob("Endüstri Mühendisi");

                               personList.add(person);

                              

                               person = new Person();

                               person.setID(4L);

                               person.setName("Jale");

                               person.setLastname("Kurt");

                               person.setAge((short)39);

                               person.setJob("Makine Mühendisi");

                               personList.add(person);

                              

                               person = new Person();

                               person.setID(5L);

                               person.setName("Merve");

                               person.setLastname("Selvi");

                               person.setAge((short)22);

                               person.setJob("Gıda Mühendisi");

                               personList.add(person);

                              

                               return personList;

                }

Bütün bu adımlardan sonra Vaadin projesi Tomcat üzerinden çalıştırılır ve sonuç aşağıdaki gibidir. 

 

Umarım yararlı bir yazı olmuştur. Bir sonraki makalemde görüşmek dileğiyle …

Batuhan Düzgün

Bilgisayar Mühendisi

Endüstri Mühendisi 

Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Etiketler:

Vaadin

Comments

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading





Bu site BlogEngine.NET 1.4.5.0 ile oluşturulmuştur. Türkçe çevirisi BlogEngine TR ekibi tarafından yapılmıştır.

Batuhan Düzgün

Sakarya Üniversitesi 

Bilgisayar Mühendisi

Endüstri Mühendisi

Yeditepe Üniversitesi

Bilgisayar Mühendisliği Yüksek Lisans 

 sahibinden.com

   Kıdemli Uzman Yazılım Mühendisi  

E-Mail 

   batuhan.duzgun@sahibinden.com

   batuhan.duzgun@windowslive.com

  github.com/batux

 

Sayfalar

Calendar

<<  November 2018  >>
MoTuWeThFrSaSu
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789

Yazıları geniş takvimde göster