Учебники

Ваадин — Основные элементы

Декабрь 13, 2018

До сих пор вы узнали о различных компонентах Vaadin. В этой главе вы узнаете о различных основных компонентах, которые Vaadin предоставляет в составе своей библиотеки. Основные компоненты Vaadin просты в использовании, понятны и совместимы с любыми современными браузерами.

Поле со списком

Поле со списком — это компонент выбора, который помогает пользователю выбрать из выпадающего меню, а также помогает разработчику создать раскрывающийся список для определенного поля. Пример, показанный ниже, объясняет, как создать поле со списком. Здесь мы будем заполнять историю Планеты, используя поле со списком Vaadin. 

package com.example.myapplication;

public class Planet {
   
   private int id;
   private String name;
   
   public Planet(){}
   public Planet(int i, String name){
      this.id = i;
      this.name = name;
   }
   public int getId() {
      return id;
   }
   public void setId(int id) {
      this.id = id;
   }
   public String getName() {
      return name;
   }
   public void setName(String name) {
      this.name = name; 6. Vaadin – Core Elements
   }
}

Обратите внимание на фрагмент кода, показанный ниже, и обновите класс MyUI.java соответствующим образом. 

package com.example.myapplication;

import java.util.ArrayList;
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.data.TreeData;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.ComboBox;
import com.vaadin.ui.Component;
import com.vaadin.ui.Label;
import com.vaadin.ui.MenuBar;
import com.vaadin.ui.MenuBar.MenuItem;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      
      //VerticalLayout layout = new VerticalLayout();
      // List of planets
      List<Planet> planets = new ArrayList();
      planets.add(new Planet(1, "Mercury"));
      planets.add(new Planet(2, "Venus"));
      planets.add(new Planet(3, "Earth"));
      ComboBox<Planet> select =
      new ComboBox<>("Select or Add a Planet");
      select.setItems(planets);
      
      // Use the name property for item captions
      select.setItemCaptionGenerator(Planet::getName);
      
      //layout.addComponent(select);
      setContent(select);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Приведенный выше код выдаст следующий вывод в браузере.

Vaadin

Контекстное меню

Контекстное меню — это функция, которая помогает разработчику представить зависимый список в браузере. Однако эта функция устарела в последней версии Vaadin 8. Обратите внимание, что вы можете сделать то же самое, используя опцию панели меню . Если вы хотите использовать то же самое в своем приложении, вы можете использовать код, как показано ниже. Обратите внимание, что вам нужно установить полимер с помощью каталога npm и использовать его в своем HTML-коде. 

<vaadin-context-menu>
   <template>
      <vaadin-list-box>
         <vaadin-item>First menu item</vaadin-item>
         <vaadin-item>Second menu item</vaadin-item>
      </vaadin-list-box>
   </template>
   
   <p>This paragraph has the context menu provided in the above template.</p>
   <p>Another paragraph with the context menu that can be opened with <b>right click</b> or with <b>long touch.</b></p>
</vaadin-context-menu>

Поскольку это учебник на основе Java, мы рекомендуем вам использовать опцию строки меню для изучения контекстного меню Vaadin.

Выбор даты

Выбор даты — это еще один компонент, поддерживаемый Vaadin, который помогает разработчику легко создать веб-сайт. Следующий код показывает, как создать средство выбора даты в пользовательском интерфейсе Vaadin. Обратите внимание, что это устарело в последней версии Vaadin 8, и, следовательно, нам нужно использовать объект даты Java для заполнения поля даты. Но если вы используете веб-проект Vaadin, вы все равно можете его использовать. 

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.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);
      setContent(hLayout); 
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Когда вы запустите приведенный выше код, вы можете найти следующий вывод, как показано ниже:

Vaadin Date Picker

Вы также можете использовать класс выбора Vaadin непосредственно из Java, как показано ниже, что также даст тот же результат в браузере. 

DatePicker datePicker = new DatePicker();

Обратите внимание, что для использования класса DatePicker вам необходимо использовать Vaadin V 3.0, но мы используем Vaadin 8.

Сетка данных

Сетка данных означает передачу списка данных. Он действует аналогично дереву в браузере. В следующем примере показано, как работает сетка.

Создайте класс, как показано ниже, и назовите его MyCharArray.java. 

package com.TutorialsMy.myApp;

public class MyCharArray { 
   private String c;
   
   public String getC() {
      return c;
   }
   public void setC(String c) {
      this.c = c;
   }
   
   public MyCharArray(){} 
   public MyCharArray(String ch){
      this.c = ch;
   }
}

Затем измените класс MyUI.java, как показано ниже — 

package com.TutorialsMy.myApp;

import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
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.data.TreeData;

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.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) {
      VerticalLayout layout = new VerticalLayout();
      
      List<MyCharArray> values = Arrays.asList(
      new MyCharArray("First Value"),
      new MyCharArray("Second Value"),
      new MyCharArray("thired Value"));
      
      final Grid<MyCharArray> grid = new Grid<>("My Table");
      grid.setItems(values);
      grid.addColumn(MyCharArray::getC).setCaption("Value");
      layout.addComponent(grid);
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Теперь запустите приведенный выше фрагмент кода, и вы увидите следующий вывод в браузере.

Vaadin Data Grid

Разделить макет

Vaadin предоставляет множество инструментов для разработки веб-страницы в соответствии с выбором разработчика. Используя раскладку, мы можем настроить весь экран в соответствии с нашим выбором. В следующем примере показаны различные варианты разделения макета с помощью основного компонента Vaadin.

Измените MyUI.java, как показано ниже — 

package com.TutorialsMy.myApp;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
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.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) {
      
      // A 400x250 pixels size layout
      Panel panel = new Panel("Split Panel example");
      Panel ex = new Panel("My Splitpanel- horizontal ");
      
      // Have a horizontal split panel as its content
      HorizontalSplitPanel hsplit = new HorizontalSplitPanel();
      hsplit.addComponent(ex);
      panel.setContent(hsplit);
      setContent(hsplit);
      
      /* Panel ex1 = new Panel("My Splitpanel- vertical ");
      // Have a horizontal split panel as its content
      VerticalSplitPanel vsplit = new VerticalSplitPanel();
      hsplit.addComponent(ex1);
      panel.setContent(vsplit);
      setContent(vsplit);*/
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Таким же образом вы можете разбить окно по вертикали. Когда вы запустите указанный выше фрагмент кода, он выдаст следующий вывод в браузере.

Vaadin Split Layout

Загрузить

Загружаемый контент поможет пользователю загрузить файлы на сервер. Он имеет два разных режима: немедленный и не немедленный режим, управляемый ядром Vaadin. В непосредственном режиме при загрузке отображается поле ввода имени файла и кнопка для выбора файла. В не немедленном режиме пользователю необходимо запустить загрузку с помощью кнопки загрузки.

В следующем примере показаны эти два режима загрузки:

Vaadin Два режима загрузки

ЗНАЧОК

Ваадин имеет встроенные иконки, которые можно использовать в качестве общего назначения. Эти значки имеют много преимуществ по сравнению с изображениями. Они уменьшают размер кода и ускоряют компиляцию. В следующем примере показано, как использовать это в Vaadin.

Обновите ваш класс MyUI.java, как показано ниже. 

package com.TutorialsMy.myApp;

import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
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.Notification;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
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.Window;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      
      // A 400x250 pixels size layout
      VerticalLayout content = new VerticalLayout();
      Panel p = new Panel("Example of Vaadin Upload-");
      TextField name = new TextField("Name");
      name.setIcon(VaadinIcons.USER);
      content.addComponent(name);
      
      // Button allows specifying icon resource in constructor
      Button ok = new Button("OK", VaadinIcons.CHECK);
      content.addComponent(ok);
      setContent(content);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Этот кусок кода будет запущен в браузере, и он будет выдавать результат ниже, чем в браузере —

57
Share: