Vaadin - Temalar

Bu bölüm, Vaadin'in Tema olarak bilinen başka bir özelliği hakkında ayrıntılı olarak tartışır. Genel olarak tema, çalışma zamanında özelleştirilebilen bir çerçeve anlamına gelir. İçerik, sunucu tarafında alınan yanıta bağlı olarak dinamik olacaktır.

Vaadin, kendi Java tabanlı SAAS derleyicisinin yardımıyla bir temayı bir saniyede kullanmak için harika bir arayüz sağlar. Vaadin'e özelleştirilebilir stil ve uygulamaya bakılması için tema özelliği verilmiştir. Tema önceden hazırlanmış bir şablondur ve geliştiricilerin zamandan tasarruf ettiren kendi uygulamalarını oluşturmak için onu özelleştirmeleri gerekir.

Vaadin'deki tüm temaları şu altında bulabilirsiniz themeklasör ve alt klasörlerin her biri kendi kendine tanımlanabilir. Dolayısıyla, kodu değiştirmek ve özelleştirmek de çok kolaydır. Herhangi bir temanın içinde iki tür CSS dosyası olabilir -.saas yazın ve .cssyazın. Vaadin'in klasör adıyla ilgili herhangi bir kısıtlaması olmamasına rağmen, yukarıda verilen görüntüden de görebileceğiniz gibi her zaman klasör adını kullanmanız önerilir.

Kullanılabilir iki tür tema vardır - Inbuilt ve Custom. Bu bölüm bunları ayrıntılı olarak tartışmaktadır.

Dahili Tema

Vaadin yerleşik teması, aşağıda gösterildiği gibi bir tema adıyla açıklanarak sağlanır.

@Theme("mytheme")
public class MyUI extends UI {

Bir Vaadin uygulamasını çalıştırırken tüm gri renkli arka plan, dahili uygulamadan gelir cssDosyalar. Başka bir tür tema olan özel tema haline getirmek için bu dosyaları değiştirebiliriz. Vaadin yerleşik temaları hakkında öğrenebileceğimiz hiçbir şey yok. Yukarıda belirtilen tüm bileşenler Vaadin Temasının bir parçasıdır.

Özel tema - Tema Oluşturma ve Kullanma

Özel temalar, VAADIN/themes web uygulamasının klasörünün altındaki Eclipse projesinde WebContent klasör veya src/main/webappMaven projelerinde. Bu yerler sabittir ve herhangi bir gereksinim için değiştirilmemesi önerilir. Adıyla bir SAAS teması tanımlamak içinmytheme, dosyayı tema klasörünün altındaki miteme klasörüne yerleştirmeli ve ardından projenizi yeniden oluşturmalısınız. Vaadin, tarayıcı tarafından her talep edildiğinde anında kendi .css dosyasını otomatik olarak oluşturur.

Css dosyasındaki stil içeriğini ihtiyacınıza göre değiştirebilirsiniz. Bununla birlikte, projeyi bir kez daha inşa etmeyi unutmayın ve devam eden yansımaya başlayacaktır.

Duyarlı Tema

Vaadin de duyarlı temayı destekler. Responsive web sayfası, yazı tipi boyutunu ekran boyutuna göre otomatik olarak ayarlayabilir. Vaadin uygulamasında, tüm uygulamayı duyarlı hale getirmek için tek bir kod satırı eklememiz gerekir.

Vaadin hakkında daha fazla bilgi edinmek için aşağıdaki örneği ele alalım. MyUI.java sınıfında aşağıda gösterildiği gibi değişiklikler yapın.

package com.TutorialsMy.myApp;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.time.LocalDate;
import java.util.Arrays;
import java.util.List;
import java.util.Locale;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.TreeData;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.Responsive;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.DateField;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.HorizontalSplitPanel;

import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.Upload;
import com.vaadin.ui.Upload.Receiver;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.VerticalSplitPanel;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout hLayout = new VerticalLayout();
      Label l1 = new Label("Enter today's Date\n",ContentMode.PREFORMATTED);
      DateField date = new DateField();
      date.setValue(LocalDate.now());
      date.setLocale(new Locale("en","IND"));
      hLayout.addComponents(l1,date);
      hLayout.setComponentAlignment(l1,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(date,Alignment.BOTTOM_CENTER);
      Responsive.makeResponsive(hLayout);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Yukarıda verilen kodu çalıştırdığınızda, aşağıdaki çıktıyı tarayıcıda gözlemleyebilirsiniz.

Düzenin yanıt verebilirliğini test etmek için tarayıcıyı küçültün; panel ve düzen bileşeninin boyutlarını ve şekillerini buna göre değiştireceğini gözlemleyebilirsiniz.