वादिन - लेआउट घटक

लेआउट घटक सामने के अंत में डेटा को रखने और उसका प्रतिनिधित्व करने के लिए एक स्थान धारक के रूप में काम करता है। इस अध्याय में, हम VAADIN के विभिन्न प्रकार के लेआउट घटक के बारे में जानेंगे।

ऊर्ध्वाधर और क्षैतिज लेआउट

ऊर्ध्वाधर और क्षैतिज लेआउट आदेशित लेआउट हैं जो उपयोगकर्ताओं को डेटा को ऊर्ध्वाधर या क्षैतिज तरीके से प्रस्तुत करने में मदद करते हैं। हमने इस अवधारणा का उपयोग पिछले कई उदाहरणों में किया है जो हमने अब तक देखे हैं। निम्नलिखित उदाहरण आपको दिखाएगा कि वाडिन एप्लिकेशन में समान का उपयोग कैसे करें।

package com.TutorialsMy.myApp;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.Button;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      Label l1 = new Label("Your Name-\n",ContentMode.PREFORMATTED);
      Label l2 = new Label("Your Address-\n",ContentMode.PREFORMATTED);
      Label l3 = new Label("Your Postal code-\n",ContentMode.PREFORMATTED);
      final VerticalLayout vLayout = new VerticalLayout();
      final HorizontalLayout hLayout = new HorizontalLayout();
      vLayout.setDescription("This is a example of vertical layout");
      vLayout.addComponents(l1,l2,l3);;
      //hLayout.setDescription("This is example of Horizontal layout");
      // hLayout.addComponents(l1,l2,l3);
      setContent(vLayout);
      //setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

यह कोड ब्राउज़र में आउटपुट से नीचे जाएगा।

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

ग्रिड

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

पहले "व्यक्ति" नाम से एक वर्ग बनाएं।

package com.TutorialsMy.myApp;

public class Person {
   private String name;
   private int number;
   public Person(){}
   public Person(String string, int i) {
      
      // TODO Auto-generated constructor stub
      this.name = string;
      this.number =i;
   }
   public String getName() {
      return name;
   }
   public void setName(String name) {
      this.name = name;
   }
   public int getNumber() {
      return number;
   }
   public void setNumber(int number) {
      this.number = number;
   }
}

अब, निम्नलिखित कोड को MyUI.java वर्ग में जोड़ें -

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.Button;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      HorizontalLayout hLayout = new HorizontalLayout();
      
      // Have some data
      List<Person> people = Arrays.asList(
      new Person("First Boy", 98),
      new Person("Second Boy", 99),
      new Person("Thired Boy", 57));
      
      // Create a grid bound to the list
      Grid<Person> grid = new Grid<>();
      grid.setItems(people);
      grid.addColumn(Person::getName).setCaption("Name");
      grid.addColumn(Person::getNumber).setCaption("Number in Examination");
      hLayout.addComponent(grid);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

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

फॉर्म लेआउट

फॉर्म लेआउट वाडिन का एक अन्य घटक है जो हमें दो अलग-अलग कॉलम प्रारूप में डेटा का प्रतिनिधित्व करने में मदद करता है। यह सिर्फ एक रूप की तरह दिखेगा। इस अनुभाग में, आप इस लेआउट के बारे में अधिक जानेंगे।

अपनी MyUI.java फ़ाइल को नीचे दिखाए अनुसार संपादित करें -

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
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.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      FormLayout form = new FormLayout();
      TextField tf1 = new TextField("Name");
      tf1.setIcon(VaadinIcons.USER);
      tf1.setRequiredIndicatorVisible(true);
      form.addComponent(tf1);
      TextField tf2 = new TextField("Street address");
      tf2.setIcon(VaadinIcons.ROAD);
      form.addComponent(tf2);
      TextField tf3 = new TextField("Postal code");
      tf3.setIcon(VaadinIcons.ENVELOPE);
      form.addComponent(tf3);
      
      // normally comes from validation by Binder
      tf3.setComponentError(new UserError("Doh!"));
      setContent(form);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

जब आप उपरोक्त कोड को संकलित और चलाएंगे, तो यह ब्राउज़र में निम्न आउटपुट को प्रस्तुत करेगा -

पैनल

पैनल एक एकल घटक कंटेनर है जिसमें एक रूपरेखा होती है। यह फ़ॉर्म लेआउट को अधिक सुविधाएँ देता है। निम्नलिखित उदाहरण में, हम समझेंगे कि वाडिन में पैनल का उपयोग कैसे करें।

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
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.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      HorizontalLayout layout = new HorizontalLayout();
      Panel panel = new Panel("Panel Example ");
      panel.addStyleName("mypanelexample");
      panel.setSizeUndefined(); // Shrink to fit content
      layout.addComponent(panel);
      
      // Create the content
      FormLayout content = new FormLayout();
      content.addStyleName("mypanelcontent");
      content.addComponent(new TextField("Name"));
      content.addComponent(new TextField("Password"));
      content.setSizeUndefined(); // Shrink to fit
      content.setMargin(true);
      panel.setContent(content);
      setContent(panel);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

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

उप विंडो

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

नीचे दिखाए गए अनुसार अपना MYUI कोड बदलें।

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
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.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      setContent(new Label("Sub Window"));

      // Create a sub-window and set the content
      Window subWindow = new Window("~~~~~~~~Sub-window Example~~~~~~~");
      VerticalLayout subContent = new VerticalLayout();
      subWindow.setContent(subContent);
      
      // Put some components in it
      subContent.addComponent(new Label("This is a new label inside the window"));
      subContent.addComponent(new Button("Click Me :)"));
      
      // Center it in the browser window
      subWindow.center();
      
      // Open it in the UI
      addWindow(subWindow);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

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

टैब-शीट

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

कृपया नीचे दिखाए गए अनुसार अपने MyUI.java वर्ग को संशोधित करें।

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;import com.vaadin.annotations.Theme;

import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
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.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      TabSheet tabsheet = new TabSheet();
      VerticalLayout layout = new VerticalLayout();
      layout.addComponent(tabsheet);
      
      // Create the first tab
      VerticalLayout tab1 = new VerticalLayout();
      tab1.addComponent(new Label("Eaxmple of Train"));
      tab1.setCaption("Train");
      tabsheet.addTab(tab1).setIcon(VaadinIcons.TRAIN);;
      
      // This tab gets its caption from the component caption
      VerticalLayout tab2 = new VerticalLayout();
      tab2.addComponent(new Label("Example of Plane"));
      tab2.setCaption("Plane");
      tabsheet.addTab(tab2).setIcon(VaadinIcons.AIRPLANE);
      setContent(layout);
   } 
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

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

पूर्ण लेआउट

निरपेक्ष लेआउट आपको सामग्री का चयन मनमाने ढंग से करने के लिए करता है। निम्नलिखित कोड निरपेक्ष के उपयोग का एक उदाहरण है।

नीचे दिखाए अनुसार MyUI.java क्लास को अपडेट करें।

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
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.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      
      // A 400x250 pixels size layout
      AbsoluteLayout layout = new AbsoluteLayout();
      layout.setWidth("400px");
      layout.setHeight("200px");
      
      // A component with coordinates for its top-left corner
      TextField text = new TextField("Example of Absolute Layout");
      layout.addComponent(text, "left: 50px; top: 50px;");
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

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

कस्टम लेआउट

एक कस्टम लेआउट एक लेआउट है जिसे आप अपनी आवश्यकताओं के अनुसार अनुकूलित कर सकते हैं, और इसलिए नाम। निम्नलिखित उदाहरण से पता चलता है कि हमारे आवेदन के लिए एक कस्टम लेआउट कैसे बनाया जाए।

नीचे दिखाए अनुसार MyUI.java वर्ग बदलें -

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
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.Button;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      
      // A 400x250 pixels size layout
      Panel loginPanel = new Panel("Login");
      CustomLayout content = new CustomLayout("layoutname");
      content.setSizeUndefined();
      loginPanel.setContent(content);
      loginPanel.setSizeUndefined();
      
      // No captions for fields is they are provided in the template
      content.addComponent(new TextField(), "username");
      content.addComponent(new TextField(), "password");
      content.addComponent(new Button("Login"), "okbutton");
      
      //content.addComponent(loginPanel
      setContent(loginPanel);
      setContent(content);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

जब आप उपरोक्त कोड को चलाते हैं तो आप अपने ब्राउज़र में निम्न आउटपुट देख सकते हैं -