Vaadin Web Framework ile Form Uygulaması

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

 

Merhaba arkadaşlar bu yazıda sizlere web yazılımları geliştirme framework'u olan Vaadin'den bahsedeceğim. Vaadin ile bilgi girişi yapılabilen bir form tasarlanacaktır. Vaadin ile ilgili temel bilgilerden ve ipuçlarından bahsedilecektir. 

Vaadin Framework ?

Vaadin, web yazılımları geliştirmek için hazırlanmış bir frameworktur. Sunduğu alt yapı sayesinde, masaüstü uygulamaları geliştirircesine, güçlü, performanslı ve hızlı  web yazılımlarının ortaya çıkarılmasını sağlar. Vaadin ile Javascript ve HTML ile ilgili detay birçok detaydan kurtulmayı sağlar. Fakat, bu Javascript ve HTML kullanılamaz anlamına gelmemelidir. Zira, Vaadin ile bir çok Javascript kütüphanesi entegre etme şansına sahipsiniz. Özellikle, Google Web Toolkit'inin (GWT) sunduğu imkanlar ile client-side ve server-side entegrasyonu tam olarak sağlanmış uygulamalar meydana getirilebilir. 

 

Belkide en önemli özelliği unutmamak gereklidir. Vaadin tamamen açık kaynak kodlu olan bir üründür. Kendine ait dökümanları ve developer ağı bulunmaktadır.

Vaadin için Eclipse Market'ten gerekli paketleri yükleme şansına sahipsiniz. Ardından File >> New Project yolunu takip ederek yeni bir Vaadin projesi yaratabilirsiniz.

 

Yukarıda görüldüğü gibi yeni bir Vaadin projesi açılır.

 

Vaadin projesi açıldıktan sonra “Application” sınıfından kalıtım alan sınıf uygulamayı çalıştıracak olan sınıf yapısıdır. “Application” sınıfından kalıtım alan her sınıf Vaadin web uygulamasını çalıştırabilir. Fakat, hangi Application sınıfının projeyi çalıştıracağı “web.xml” içinde belirtilir. Aşağıda örneği verilmiştir. 

<init-param>

                                               <description>

                                               Vaadin application class to start</description>

                                               <param-name>application</param-name>

                                               <param-value>com.vformsample.VformsampleApplication</param-value>

</init-param> 

Yukarıdaki  “<param-value>” etiketi arasında yer alan sınıf, Vaadin uygulamasını çalıştıracak olan ve “Application” sınıfından kalıtım almış olan sınıftır.

VformsampleApplication  sınıfı aşağıdaki gibi kodlanmıştır.

package com.vformsample; 

import com.vaadin.Application;

import com.vaadin.data.util.HierarchicalContainer;

import com.vaadin.ui.Alignment;

import com.vaadin.ui.Button;

import com.vaadin.ui.Button.ClickEvent;

import com.vaadin.ui.CheckBox;

import com.vaadin.ui.ComboBox;

import com.vaadin.ui.GridLayout;

import com.vaadin.ui.HorizontalLayout;

import com.vaadin.ui.Label;

import com.vaadin.ui.NativeSelect;

import com.vaadin.ui.TextField;

import com.vaadin.ui.VerticalLayout;

import com.vaadin.ui.Window;

import com.vaadin.ui.Window.Notification;

/*

 * Vaadin Web uygulamaları geliştirmek için hazırlanmış bir frameworktür.

 * Web uygulamaları ve kurumsal düzeyde projeler için en uygun altyapılardan biridir.

 * Özellikle Javascript ve HTML ile ilgili bir çok detaydan programcıları kurtarır.

 * Masaüstü uygulamaları geliştirircesine web yazılımı geliştirme imkanı tanır.

 */ 

// "Application" sınıfından kalıtım alan her sınıf uygulamanın başlatıldığı noktadır.

// Java'daki console uygulamalarında "main" metodu içeren sınıflar başlangıç noktası ise, Vaadin'de

// "Application" sınıfının "init" metodu uygulamanın başlama noktasıdır.

@SuppressWarnings("serial")

public class VformsampleApplication extends Application {          

                private Label lblAdi;

                private Label lblSoyadi;

                private Label lblMeslek;

                private Label lblCinsiyet;

                private TextField txtAdi;

                private TextField txtSoyadi;               

                private ComboBox cmbMeslek;

                private CheckBox male;

                private CheckBox female;

                private Button btnSubmit;

                // "init" metodu ile web uygulaması çalıştırılır.

                @Override

                public void init() {

                               // "Window" sınıfından yeni bir nesne oluşturarak yeni bir web sayfası elde edilmiş olunur.

                               // Bu nesne "setMainWindow" metodu ile tarayıcıda görüntülenmesi istenen sayfayı ekrana koyar.

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

                               mainWindow.setHeight("100%");

                               mainWindow.setWidth("100%");

                               /*

                                * Aşağıda basit bir form örneği hazırlanacaktır.

                                * Label, TextField, Combobox ve Button sınıfları kullanılacaktır.

                                */                              

                               // GridLayout sınıfı ile ekran üzerinde grid şeklinde bir yapı hazırlanır.

                               // GridLayout üzerindeki her gözenek matris biçimindeki gibi satır ve sütun indeksi verilerek doldurulur.

                               GridLayout formContent = new GridLayout();

                               // İki sütunlu olacağı belirtilir.

                               formContent.setColumns(2);

                               // Beş satırlı olacağı belirtilir.

                               formContent.setRows(5);

                               // "setSpacing" metoduyla Gride eklenen bileşenler arasında 4-5 px boyuntunda boşluk bırakılır.

                               formContent.setSpacing(true);

                               // Vaadin Label'lerın kullanımı biraz farklıdır.

                               // Vaadin'de Label'ler normal karakter katarı olarak algılanır.

                               // Bu sebepten ötürü bir layout içine alınıp kullanılması ile bir çok sorun çözüme kavuşur.

                               HorizontalLayout hlAdi = new HorizontalLayout();

                               // Yatay layout'un genişliği ekran genişliğinin %20'si kadardır.

                               hlAdi.setWidth("20%");                              

                               // Vaadin Label oluşturulur.

                               lblAdi = new Label();

                               lblAdi.setWidth("20%");

                               // Label içinde yer alacak olan yazı setlenir.

                               lblAdi.setCaption("Adınız : ");

                               // Label nesnesi yatay layout içine yerleştirilir.

                               hlAdi.addComponent(lblAdi);

                               // Grid layout'un sıfırıncı sütununa ve sıfırıncı satırına yerleştirilir.

                               formContent.addComponent(hlAdi,0,0);

                               // Gride bileşen eklemesi yapıldıktan sonra sağa yaslanmış şekilde konumlanacağı belirtilir.

                               // "lblAdi" nesnesi layout üzerine eklenmeden sağa, sola veya ortala gibi konumlandırma işlemleri yapılamaz.

                               formContent.setComponentAlignment(hlAdi, Alignment.MIDDLE_RIGHT);

                               /*

                                *  Diğer Labeller içinde aynı şeyler tekrarlanır.

                                */

                               HorizontalLayout hlSoyadi = new HorizontalLayout();

                               hlSoyadi.setWidth("20%");

                              

                               lblSoyadi = new Label();

                               lblSoyadi.setWidth("20%");

                               lblSoyadi.setCaption("Soyadınız : ");

                               hlSoyadi.addComponent(lblSoyadi);

                               formContent.addComponent(hlSoyadi,0,1);

                               formContent.setComponentAlignment(hlSoyadi, Alignment.MIDDLE_RIGHT);

                              

                               HorizontalLayout hlMeslek = new HorizontalLayout();

                               hlMeslek.setWidth("20%");

                              

                               lblMeslek = new Label();

                               lblMeslek.setWidth("20%");

                               lblMeslek.setCaption("Mesleğiniz : ");

                               hlMeslek.addComponent(lblMeslek);

                               formContent.addComponent(hlMeslek, 0, 2);

                               formContent.setComponentAlignment(hlMeslek, Alignment.MIDDLE_RIGHT);

                              

                               HorizontalLayout hlCinsiyet = new HorizontalLayout();

                               hlCinsiyet.setWidth("20%");

 

                               lblCinsiyet = new Label();

                               lblCinsiyet.setWidth("20%");

                               lblCinsiyet.setCaption("Cinsiyetiniz : ");

                               hlCinsiyet.addComponent(lblCinsiyet);

                               formContent.addComponent(hlCinsiyet, 0, 3);

                               formContent.setComponentAlignment(hlCinsiyet, Alignment.MIDDLE_RIGHT);

                              

                               // Vaadin'de yazı alanı olarak TextField'lar kullanılır.

                               txtAdi = new TextField();

                               txtAdi.setWidth("60%");

                               formContent.addComponent(txtAdi, 1, 0);

                               formContent.setComponentAlignment(txtAdi, Alignment.MIDDLE_LEFT);

                              

                               txtSoyadi = new TextField();

                               txtSoyadi.setWidth("60%");

                               formContent.addComponent(txtSoyadi, 1, 1);

                               formContent.setComponentAlignment(txtSoyadi, Alignment.MIDDLE_LEFT);

                              

                               // Vaadin'de veri kaynağı olarak "HierarchicalContainer" sınıfından nesneler kullanılır.

                               // "HierarchicalContainer" ile ComboBox, ListBox veya Table gibi veri kaynağına ihtiyaç duyan bileşenlere veri kaynağı olarak kullanılır.

                               HierarchicalContainer meslekContainer = new HierarchicalContainer();

                               // HierarchicalContainer üzerinde yer alacak olan özellikler (sütunlar) belirtilir.

                               // Her özellik (sütun) için anahtar sözcük, ilgili alanın veri tipi ve varsayılan değeri belirtilir.

                               meslekContainer.addContainerProperty("id", Long.class, null);

                               meslekContainer.addContainerProperty("meslek", String.class, null);

                               // "HierarchicalContainer" verilerle doldurulur.

                               fillMeslek(meslekContainer);                              

                               // Vaadin ComboBox doldurulur.

                               cmbMeslek = new ComboBox();

                               cmbMeslek.setWidth("60%");

                               // ComboBox'ın HierarchicalContainer tipindeki veri kaynağı setlenir.

                               cmbMeslek.setContainerDataSource(meslekContainer);

                               cmbMeslek.setItemCaptionMode(NativeSelect.ITEM_CAPTION_MODE_ITEM);

                               // HierarchicalContainer üzerinde yer alan hangi alanın ComboBox'ta gösterileceği belirtilir.

                               cmbMeslek.setItemCaptionPropertyId("meslek");

                               cmbMeslek.setImmediate(true);

                               cmbMeslek.setNullSelectionAllowed(false);

                               formContent.addComponent(cmbMeslek, 1, 2);

                               formContent.setComponentAlignment(cmbMeslek, Alignment.MIDDLE_LEFT);

                               

                               HorizontalLayout hlCheckboxGroup = new HorizontalLayout();

                               hlCheckboxGroup.setSpacing(true);

                               hlCheckboxGroup.setWidth("100%");

                               

                               // CheckBox bileşenleri hazırlanır ve HorizontalLayout içine yerleştirilir.

                               male = new CheckBox();

                               male.setCaption("Bay ");

                               hlCheckboxGroup.addComponent(male);

                               

                               female = new CheckBox();

                               female.setCaption("Bayan ");

                               hlCheckboxGroup.addComponent(female);

                               formContent.addComponent(hlCheckboxGroup,1,3);

                               formContent.setComponentAlignment(hlCheckboxGroup, Alignment.MIDDLE_CENTER);

                              

                               // Button nesnesi oluşturulur. Bu buton işlemlerin onaylanacağı butondur.

                               btnSubmit = new Button();

                               // Buton üzerinde görüntülenecek olan yazı setlenir.

                               btnSubmit.setCaption("Submit");

                               btnSubmit.setWidth("50%");

                               // Butona tıklama işlemi gerçekleştirildiğinde çalışacak olan Click Listener setlenir.

                               btnSubmit.addListener(submitListener);

                               // Button nesnesi Grid üzerindeki 0 ve 1 indeksli sütunların birleştirilmesiyle oluşan alan içine yerleştirilir.

                               formContent.addComponent(btnSubmit, 0, 4, 1, 4);

                               formContent.setComponentAlignment(btnSubmit, Alignment.MIDDLE_CENTER);

                              

                               VerticalLayout windowContent = new VerticalLayout();

                               windowContent.setSizeFull();

                               windowContent.addComponent(formContent);

                               windowContent.setComponentAlignment(formContent, Alignment.MIDDLE_CENTER);

                              

                               mainWindow.addComponent(windowContent);

                               setMainWindow(mainWindow);

                }                

                // HierarchicalContainer'a veri dolduran metoddur.

                private void fillMeslek(HierarchicalContainer meslekContainer) {

                               String[] meslekler = {

                                                                                                                             "Bilgisayar Mühendisi",

                                                                                                                              "Endüstri Mühendisi"

                                                                                                                             "Yazılım Mühendisi",

                                                                                                                             "Elektronik Mühendisi",

                                                                                                                             "Makine Mühendisi"

                                                                                                               };

                              

                               for (int i = 0; i < meslekler.length; i++) {

                                               // Yeni bir Container bileşeni eklenir ve onun ID değeri alınır..

                                               Object itemId = meslekContainer.addItem();

                                               // Yeni bileşenin "id" ve "meslek" alanları doldurulur.

                                               meslekContainer.getItem(itemId).getItemProperty("id").setValue(i);

                                               meslekContainer.getItem(itemId).getItemProperty("meslek").setValue(meslekler[i]);

                               }

                }

                public Application get() {

                               return this;

                }               

                private Button.ClickListener submitListener = new Button.ClickListener() {             

                               public void buttonClick(ClickEvent event) {

                                               // Butona tıklandığında form üzerindeki bilgiler mesaj olarak hazırlanır.

                                               // Bu mesaj ekranda gösterilecektir.

                                               String msg = "";

                                               msg += txtAdi.getValue().toString() + ",  ";

                                               msg += txtSoyadi.getValue() + ",  ";

                                               Object id = cmbMeslek.getValue();

                                               msg += cmbMeslek.getItem(id).getItemProperty("meslek").getValue().toString() + ",  ";

                                              

                                               if(male.getValue() != null) {

                                                               msg += male.getValue().toString();

                                               }

                                               else if(female.getValue() != null) {

                                                               msg += female.getValue().toString();

                                               }

                                               // "showNotification" metoduyla ekrana ilgili mesaj yansıtılır.

                                               get().getMainWindow().showNotification("== Sonuçlar ==",msg,Notification.TYPE_HUMANIZED_MESSAGE);

                               }

                };

}

Yukarıdaki kodu bölüm bölüm incelemek gerekirse ilk olarak önyüzü meydana getiren kodlardan başlanmalıdır. 

Görsel Bileşenler ve Yerleşimi

“init” metodu içinde yer alan “TextField”, “ComboBox”, “CheckBox” ve “Button” gibi bileşenler Vaadin görsel arayüz bileşenleridir. Bu bileşenler ile kullanıcı yazılım ile iletişim halinde olur. 

HorizontalLayout”, “GridLayout”, “VerticalLayout” gibi bileşenler ise görsel arayüz bileşenlerinin web sayfası üzerinde yerleşimini düzenler.

HorizontalLayout : Görsel bileşenlerin yatay bir hizada eklenmesini sağlar. Görsel bileşenleri yanyana dizerek yerleştirir. 

VerticalLayout : Görsel bileşenlerin dikey hizada alt alta eklenmesini sağlar.

GridLayout : Verilen satır ve sütun sayısına göre ekran üzerinde bir grid yapısı oluşturur. Bu grid üzerinde  bileşenleri ilgili satır ve sütun indeksindeki konuma yerleştirilmesini sağlar. 

Görsel bileşenler ve yerleşim için gerekli olan yapılar hakkında detaylı bilgi kod üzerinde mevcuttur.


Görsel Bileşenler ve Veri Kaynakları 

Bazı görsel bileşenler üzerlerinde belli miktarda bir veri kaynağı barındırırlar. Örneğin : Table, ListBox ve ComboBox gibi bileşenler üzerlerinde liste halinde veya tablo halinde veri tutarlar. Vaadin' de bu tip bileşenlere veri kaynağı olma görevini  “HierarchicalContainer” üstlenir. Çeşitli şekildeki veri paketleri ve yığınları HierarchicalContainer şekline dönüştürülür ve bu bileşenlere “Data Source” olarak verilir.

Örneğin aşağıdaki kod bloğu buna örnek verilebilir. 

// HierarchicalContainer'a veri dolduran metoddur.

                private void fillMeslek(HierarchicalContainer meslekContainer) {

                               String[] meslekler = {

                                                                                                                             "Bilgisayar Mühendisi",

                                                                                                                             "Endüstri Mühendisi",

                                                                                                                             "Yazılım Mühendisi"

                                                                                                                             "Elektronik Mühendisi",

                                                                                                                             "Makine Mühendisi"

                                                                                                               };

                               for (int i = 0; i < meslekler.length; i++) {

                                               // Yeni bir Container bileşeni eklenir ve onun ID değeri alınır..

                                               Object itemId = meslekContainer.addItem();

                                               // Yeni bileşenin "id" ve "meslek" alanları doldurulur.

                                               meslekContainer.getItem(itemId).getItemProperty("id").setValue(i);

                                               meslekContainer.getItem(itemId).getItemProperty("meslek").setValue(meslekler[i]);

                               }

                } 

Görsel Bileşen ve Event Sistemi

Görsel bileşenlerden bazıları yapılan işlemi onaylama veya herhangi bir aksiyon almak için kullanılırlar. Örneğin : Button tıklama işlemini yerine getirir. Vaadin' de bu tarz tıklama, değer değiştirme aksiyonları  Listener aracılığıyla yapılır. Listenerlar ile tetiklenen kod bloğu çalıştırılır ve sonuçlar oluşturulur. 

Aşağıda örneği aşağıdaki gibidir.

private Button.ClickListener submitListener = new Button.ClickListener() {                              

                               public void buttonClick(ClickEvent event) {

                                               // Butona tıklandığında form üzerindeki bilgiler mesaj olarak hazırlanır.

                                               // Bu mesaj ekranda gösterilecektir.

                                               String msg = "";

                                               msg += txtAdi.getValue().toString() + ",  ";

                                               msg += txtSoyadi.getValue() + ",  ";

                                               Object id = cmbMeslek.getValue();

                                               msg += cmbMeslek.getItem(id).getItemProperty("meslek").getValue().toString() + ",  ";

                                              

                                               if(male.getValue() != null) {

                                               }

 

                                                               msg += male.getValue().toString();

                                               }

                                               else if(female.getValue() != null) {

                                                               msg += female.getValue().toString();

                                               // "showNotification" metoduyla ekrana ilgili mesaj yansıtılır.

                                               get().getMainWindow().showNotification("== Sonuçlar ==",msg,Notification.TYPE_HUMANIZED_MESSAGE);

                               }

                };

Hazırlanmış olan proje çalıştırıldığında aşağıdaki gibi bir ekran görüntüsü elde edilir. Vaadin web projelerini çalıştırabilmek için Tomcat, GlassFish gibi web uygulama sunucularından birini lokal olarak Eclipse üzerinde çalıştırmanız ve hazırlamanız gerekir. 

 

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

<<  September 2018  >>
MoTuWeThFrSaSu
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

Yazıları geniş takvimde göster