वादिन - थीम्स

इस अध्याय में वैडिन की एक अन्य विशेषता के बारे में विस्तार से चर्चा की गई है, जिसे थीम के रूप में जाना जाता है। सामान्य तौर पर, थीम का मतलब एक फ्रेमवर्क है जो रनटाइम के दौरान अनुकूलन योग्य है। सर्वर अंत में प्राप्त प्रतिक्रिया के आधार पर सामग्री गतिशील होगी।

वाडिन अपने जावा आधारित एसएएएस संकलक की मदद से एक दूसरे के साथ एक विषय का उपयोग करने के लिए एक शांत इंटरफ़ेस प्रदान करता है। कस्टमाइज़्ड स्टाइल और एप्लिकेशन को देखने के लिए वाडिन को थीम फीचर दिया जाता है। थीम एक पूर्व-निर्मित टेम्पलेट है और डेवलपर्स को अपने स्वयं के एप्लिकेशन को बनाने के लिए इसे अनुकूलित करने की आवश्यकता होती है जो उनके समय को बचाता है।

आप वाडिन में सभी विषयों को पा सकते हैं themeफ़ोल्डर और प्रत्येक उप फ़ोल्डर स्व-विवरण योग्य हैं। इसलिए, कोड को बदलना और उसी को कस्टमाइज़ करना भी बहुत आसान है। किसी भी विषय में दो प्रकार की CSS फाइलें हो सकती हैं -.saas टाइप करें और .cssप्रकार। हालांकि वाडिन को फ़ोल्डर नाम पर कोई प्रतिबंध नहीं है, लेकिन हमेशा फ़ोल्डर नाम का उपयोग करने की सिफारिश की जाती है, जैसा कि आप ऊपर की छवि से देख सकते हैं।

दो प्रकार के विषय उपलब्ध हैं - Inbuilt तथा Custom। यह खंड उन पर विस्तार से चर्चा करता है।

थीम में निर्मित

थीम में निर्मित वाडिन को नीचे दिखाए गए थीम नाम के साथ एनोटेट करके प्रदान किया गया है।

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

वाडिन एप्लिकेशन को चलाने के दौरान सभी ग्रे कलर बैक ग्राउंड इनबिल्ट से आते हैं cssफ़ाइलें। हम उन फ़ाइलों को एक कस्टम विषय के रूप में बनाने के लिए बदल सकते हैं जो एक अन्य प्रकार की थीम है। विषयों में निर्मित वादिन के बारे में हम कुछ भी नहीं सीख सकते हैं। उपर्युक्त सभी घटक वाडिन थीम का हिस्सा हैं।

कस्टम विषय - थीम्स बनाना और उपयोग करना

कस्टम थीम में रखा गया है VAADIN/themes वेब एप्लिकेशन का फ़ोल्डर, एक ग्रहण परियोजना के अंतर्गत WebContent फ़ोल्डर या src/main/webappमावेन परियोजनाओं में। इन स्थानों को निर्धारित किया जाता है और किसी भी प्रकार की आवश्यकता के लिए नहीं बदलने की सिफारिश की जाती है। नाम के साथ SAAS थीम को परिभाषित करनाmytheme, आप फ़ाइल को विषय फ़ोल्डर के तहत mytheme फ़ोल्डर में रखें और फिर अपनी परियोजना का पुनर्निर्माण करें। ब्राउज़र द्वारा अनुरोध किए जाने पर वाडिन स्वचालित रूप से अपनी .css फ़ाइल को मक्खी पर बनाएगा।

आप अपनी आवश्यकता के अनुसार स्टाइल सामग्री को css फ़ाइल में बदल सकते हैं। हालांकि, एक बार फिर से परियोजना का निर्माण करना याद रखें और यह प्रगति में परिलक्षित होने लगेगा।

उत्तरदायी विषय

वाडिन उत्तरदायी विषय का भी समर्थन करता है। उत्तरदायी वेब पेज स्क्रीन आकार के अनुसार स्वचालित रूप से फ़ॉन्ट आकार सेट कर सकता है। वाडिन एप्लिकेशन में, हमें पूरे एप्लिकेशन को उत्तरदायी बनाने के लिए कोड की एक पंक्ति को जोड़ने की आवश्यकता है।

आइए हम वादिन के बारे में और जानने के लिए निम्नलिखित उदाहरण पर विचार करें। नीचे दिखाए अनुसार MyUI.java वर्ग में परिवर्तन करें।

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 {}
}

जब आप ऊपर दिए गए कोड को चलाते हैं, तो आप ब्राउज़र में निम्नलिखित आउटपुट देख सकते हैं।

लेआउट की जवाबदेही का परीक्षण करने के लिए, ब्राउज़र को कम करें और आप देख सकते हैं कि पैनल और लेआउट घटक अपने आकार और आकार को तदनुसार बदल देंगे।