Vaadin - Thành phần giao diện người dùng

Vaadin được sử dụng để xây dựng các thành phần giao diện người dùng phong phú trong một trang web. Trong chương này, bạn sẽ tìm hiểu về các thành phần giao diện người dùng khác nhau đã được Vaadin giới thiệu để duy trì một trang web chất lượng tốt. Phần đầu tiên của chương thảo luận về các thành phần web cơ bản và cách sử dụng của chúng, trong khi phần thứ hai nói về việc ràng buộc các thành phần trong phần phụ trợ.

Thành phần trường

Trường là các thành phần web mà người dùng có thể thao tác thông qua các hoạt động IO. Vaadin dựa trên JAVA, do đó trong Vaadin tất cả các thành phần web đều có một lớp được triển khai cùng với các chức năng của thư viện Vaadin. Hình ảnh hiển thị bên dưới cho thấy cách các thành phần trường khác nhau được kế thừa từ lớp cơ sở có tênAbstractField<T>.

Lưu ý rằng tất cả các mô-đun này tương tự như các mô-đun trong phát triển giao diện người dùng. Trong Vaadin, chúng tôi có các lớp riêng biệt để triển khai từng lớp. Bạn sẽ tìm hiểu chi tiết về những điều này trong các chương tới.

Nhãn

Nhãn được sử dụng để đề cập đến bất kỳ văn bản không thể chỉnh sửa nào trong trang web. Ví dụ dưới đây cho thấy cách sử dụng nhãn trong ứng dụng của chúng tôi. Lưu ý rằng trong ví dụ đã cho, chúng tôi đã tạo một lớp JAVA và đặt tên nó làLabelExam.javanterface và chúng tôi sẽ ghi đè lên init() phương pháp để chạy nó.

package com.MyTutorials.MyFirstApp;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;

//extending UI
public class LabelExam extends UI {
   @Override
   protected void init(VaadinRequest request) {
      final HorizontalLayout hLayout = new HorizontalLayout(); //creating a Layout
      Label l1 = new Label(" Welcome to the World of Vaadin Tutorials.");
      Label l2 = new Label("\n Happy Learning .." ,ContentMode.PREFORMATTED); // Content Mode tells JVM to interpret the String mentioned in the label. Hence label2 will be printed in next line because of “\n”.
      hLayout.addComponents(l1,l2); // adding labels to layout
      setContent(hLayout); // setting the layout as a content of the web page.
   }
   // Code to control URL
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   
   @VaadinServletConfiguration(ui = LabelExam.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Trong ví dụ trên, chúng tôi đã tạo hai nhãn và cuối cùng chúng tôi đã thêm nhãn đó vào bố cục của mình. Bạn sẽ tìm hiểu thêm về bố cục trong các chương sắp tới. CácVaadinServletđã được triển khai để kiểm soát URL. Tuy nhiên, trong các dự án đời thực, bạn không cần phải định nghĩa servlet trong mọi ứng dụng java vì nó sẽ được liên kết với nhau. Chọn tệp và nhấp vàoRun on Server và mã được đưa ra ở trên sẽ mang lại kết quả như hình dưới đây.

Liên kết

Liên kết hữu ích để triển khai các liên kết bên ngoài đến trang web khác. Lớp này hoạt động hoàn toàn tương tự như thẻ siêu liên kết của HTML. Trong ví dụ được đưa ra bên dưới, chúng tôi sẽ sử dụng Liên kết để chuyển hướng người dùng của chúng tôi đến một trang web khác tùy thuộc vào sự kiện được gọi làClick here. Bây giờ, hãy sửa đổiMyUI.java lớp như hình bên dưới.

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.ExternalResource;
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.Link;
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) {
      final VerticalLayout layout = new VerticalLayout();
      
      final HorizontalLayout hLayout = new HorizontalLayout();
      
      Link link = new Link("Click Me",new ExternalResource("https://www.tutorialspoint.com/"));
      hLayout.addComponent(link);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Trong ví dụ trên, chúng tôi đã tạo một siêu liên kết bên ngoài đến một trang web khác. Nó sẽ cung cấp cho chúng ta kết quả sau trong trình duyệt.

Khi người dùng nhấp vào liên kết, họ sẽ được chuyển hướng đến www.tutorialspoint.com

Trương Văn bản

Phần này nói về cách tạo trường văn bản bằng cách sử dụng bản dựng Vaadin trong lớp. Đối với điều này, hãy cập nhật lớp MyUI.java của bạn như được hiển thị bên dưới.

package com.example.myapplication;

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.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) {
      final VerticalLayout layout = new VerticalLayout();
      Label l1 = new Label("Example of TextField--\n ",ContentMode.PREFORMATTED);
      TextField text = new TextField();
      text.setValue("----");
      layout.addComponents(l1,text);
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Bây giờ, làm mới dự án của bạn và xây dựng nó. Bạn có thể quan sát kết quả hiển thị bên dưới trong trình duyệt của mình. Hãy nhớ khởi động lại trình duyệt của bạn để nhận các thay đổi gần đây.

Vùng văn bản

Phần này giải thích cho bạn cách tạo vùng văn bản trong trình duyệt bằng cách sử dụng lớp được xác định trước Vaadin. Hãy quan sát đoạn mã được đưa ra dưới đây chẳng hạn.

package com.example.myapplication;

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.ui.Alignment;
import com.vaadin.ui.TextArea;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();
      final VerticalLayout hLayout = new VerticalLayout();
      TextArea text = new TextArea();
      text.setValue(" I am the example of Text Area in Vaadin");
      hLayout.addComponent(text);
      hLayout.setComponentAlignment(text,Alignment.BOTTOM_CENTER);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Đoạn mã trên sẽ mang lại đầu ra bên dưới trong trình duyệt -

Ngày và giờ

Bạn có thể sử dụng công cụ chọn ngày để điền ngày và giờ trong trình duyệt. Hãy quan sát mã ví dụ dưới đây. Ở đây chúng tôi đã sử dụng lớp Ngày được xác định trước của Vaadin để điền ngày và giờ trong trình duyệt. 
package com.example.myapplication;

import java.time.LocalDate;
import java.util.Locale;
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.Alignment;
import com.vaadin.ui.DateField;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();
      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 {
}

Trong ví dụ trên, chúng tôi đã sử dụng hàm ngày được xác định trước của Vaadin để điền thành phần ngày vào trang web. Mã này sẽ cung cấp cho bạn kết quả như trong ảnh chụp màn hình bên dưới -

Cái nút

Đoạn mã dưới đây sẽ giải thích cho bạn cách áp dụng một nút trong trang web. Ở đây, chúng tôi đã sử dụng một nút có tênClick Me.

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.ExternalResource;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;

import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Link;
import com.vaadin.ui.TextArea;
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) {
      final VerticalLayout layout = new VerticalLayout();
      final VerticalLayout hLayout = new VerticalLayout();
      TextArea text = new TextArea();
      text.setValue("Please enter some Value");
      Button b = new Button("Click Me");
      hLayout.addComponent(text);
      hLayout.addComponent(b);
      hLayout.setComponentAlignment(text,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(b,Alignment.BOTTOM_CENTER);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}
Đoạn mã trên sẽ cho kết quả như hình dưới đây.

Hộp kiểm tra

Vaadin cũng cung cấp lớp có sẵn để tạo hộp kiểm trong trang web. Trong ví dụ dưới đây, chúng tôi sẽ tạo một hộp kiểm bằng cách sử dụng thành phần web phong phú của Vaadin.

package com.example.myapplication;

import java.time.LocalDate;
import java.util.Locale;
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.Alignment;

import com.vaadin.ui.CheckBox;
import com.vaadin.ui.DateField;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();
      final VerticalLayout hLayout = new VerticalLayout();
      Label l1 = new Label("Example of Check Box\n",ContentMode.PREFORMATTED);
      CheckBox chk1 = new CheckBox("Option1");
      CheckBox chk2 = new CheckBox("Option2");
      CheckBox chk3 = new CheckBox("Option3");
      hLayout.addComponents(l1,chk1,chk2,chk3);
      hLayout.setComponentAlignment(l1,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(chk1,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(chk2,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(chk3,Alignment.BOTTOM_CENTER);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Đoạn mã được đưa ra ở trên sẽ mang lại kết quả đầu ra trong trình duyệt như hình dưới đây. Bạn cũng có thể tạo bất kỳ số hộp kiểm nào cho người dùng. Trong các chương tiếp theo, bạn sẽ tìm hiểu về các cách khác nhau để điền Hộp kiểm vào trang web.

Liên kết dữ liệu

Phần này giải thích cho bạn cách liên kết dữ liệu từ giao diện người dùng đến giao diện người dùng bằng cách sử dụng Vaadin làm khuôn khổ. Lưu ý rằng mã được hiển thị bên dưới nhận đầu vào từ giao diện người dùng với trường dữ liệu. Hãy để chúng tôi tạo một lớp bean để liên kết trường dữ liệu. Tạo một lớp java và đặt tên làEmployee.java.

package com.example.myapplication;

public class EmployeeBean {
   
   private String name = "";
   private String Email = " ";
   public EmployeeBean() {
      super();
      // TODO Auto-generated constructor stub
   }
   public EmployeeBean(String name, String email) {
      super();
      this.name = name;
      Email = email;
   }
   public String getName() {
      return name;
   }
   public void setName(String name) {
      System.out.println("asdassd");
      this.name = name;
   }
   public String getEmail() {
      return Email;
   }
   public void setEmail(String email) {
      Email = email; 
   }
}

Chúng tôi phải sửa đổi MyUI.javađể liên kết trường dữ liệu của lớp nhân viên. Quan sát mã sau cho lớp đã sửa đổi.

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.PropertyId;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.Binder;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
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.FormLayout;
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) {
      EmployeeBean bean = new EmployeeBean("TutorialsPoint","[email protected]");
      Binder<EmployeeBean> binder = new Binder  <EmployeeBean>();
      final FormLayout form = new FormLayout();
      Label l1 = new Label("Please fill Below Form");
      Label labelName = new Label("Name--");
      TextField name = new TextField();
      binder.bind(name,EmployeeBean::getName,EmployeeBean::setName);
      Label labelEmail = new Label("Email---");
      TextField email = new TextField();
      binder.bind(email,EmployeeBean::getEmail,EmployeeBean::setEmail);
      Button button = new Button("Process..");
      form.addComponents(l1,labelName,name,labelEmail,email,button);
      setContent(form);
      binder.setBean(bean); //auto binding using in built method
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {
   }
}

Đoạn mã được đưa ra ở trên sẽ mang lại kết quả sau trong trình duyệt.

Bàn

Bảng là một trong những tính năng hữu dụng nhất của Vaadin. Các ô trong bảng có thể bao gồm bất kỳ loại dữ liệu nào. Thành phần bảng được phát triển để hiển thị tất cả dữ liệu ở định dạng bảng được tổ chức thành cấu trúc hàng và cột. Tuy nhiên, vì tính năng bảng phát hành Vaadin 8 là tuyệt đối và tính năng tương tự đã được sửa đổi với thành phần Grid. Nếu bạn vẫn đang sử dụng phiên bản Vaadin cũ hơn, thì bạn có thể sử dụng bảng như được hiển thị ở định dạng bên dưới.

/* Create the table with a caption. */
Table table = new Table("This is my Table");
/* Define the names and data types of columns.
* The "default value" parameter is meaningless here. */

table.addContainerProperty("First Name", String.class, null);
table.addContainerProperty("Last Name", String.class, null);
table.addContainerProperty("Year", Integer.class, null);

/* Add a few items in the table. */
table.addItem(new Object[] {"Nicolaus","Copernicus",new Integer(1473)}, new Integer(1));
table.addItem(new Object[] {"Tycho", "Brahe", new Integer(1546)}, new Integer(2));
table.addItem(new Object[] {"Giordano","Bruno", new Integer(1548)}, new Integer(3));
table.addItem(new Object[] {"Galileo", "Galilei", new Integer(1564)}, new Integer(4));
table.addItem(new Object[] {"Johannes","Kepler", new Integer(1571)}, new Integer(5));
table.addItem(new Object[] {"Isaac", "Newton", new Integer(1643)}, new Integer(6));

Trong chương sắp tới trên GRID, bạn sẽ tìm hiểu thêm về cách tạo Lưới và điền dữ liệu bằng cách sử dụng tương tự.

Cây

Thành phần cây được sử dụng để điền cấu trúc thư mục trong trang web. Trong phần này, bạn sẽ học cách điền một cái cây vào trang web bằng cách sử dụng Vaadin framework. Cập nhật yêu cầuMyUI lớp như hình bên dưới.

package com.example.myapplication;

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.Component;
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();
      Tree<String> tree = new Tree<>();
      TreeData<String> treeData =tree.getTreeData();

      // Couple of childless root items
      treeData.addItem(null, "Option1");
      treeData.addItem("Option1", "Child1");
      treeData.addItem(null, "Option2");
      treeData.addItem("Option2", "Child2");

      // Items with hierarchy
      treeData.addItem(null, "Option3");
      treeData.addItem("Option3", "Child3");
      layout.addComponent(tree);
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Đoạn mã trên sẽ tạo ra kết quả sau trong trình duyệt.

Thanh menu

Thành phần Menu Bar giúp chúng ta tạo menu trong trang web. Nó có thể là động cũng như có thể được lồng vào nhau. Tìm ví dụ dưới đây, nơi chúng tôi đã tạo một thanh menu lồng nhau bằng cách sử dụng thành phần Vaadin Menu Bar. Hãy tiếp tục và sửa đổi lớp của chúng ta như bên dưới.

package com.example.myapplication;

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.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();
      MenuBar barmenu = new MenuBar();
      layout.addComponent(barmenu);

      // A feedback component
      final Label selection = new Label("-");
      layout.addComponent(selection);

      // Define a common menu command for all the menu items.
      MenuBar.Command mycommand = new MenuBar.Command() {
         public void menuSelected(MenuItem selectedItem) {
            selection.setValue("Ordered a " +
            selectedItem.getText() +
            " from menu.");
         }
      };
      
      // Put some items in the menu hierarchically
      MenuBar.MenuItem beverages =
      barmenu.addItem("Beverages", null, null);
      MenuBar.MenuItem hot_beverages =
      beverages.addItem("Hot", null, null);
      hot_beverages.addItem("Tea", null, mycommand);
      hot_beverages.addItem("Coffee", null, mycommand);
      MenuBar.MenuItem cold_beverages =
      beverages.addItem("Cold", null, null);
      cold_beverages.addItem("Milk", null, mycommand);
      cold_beverages.addItem("Weissbier", null, mycommand);
      
      // Another top-level item
      MenuBar.MenuItem snacks =
      barmenu.addItem("Snacks", null, null);
      snacks.addItem("Weisswurst", null, mycommand);
      snacks.addItem("Bratwurst", null, mycommand);
      snacks.addItem("Currywurst", null, mycommand);
      
      // Yet another top-level item
      MenuBar.MenuItem services =
      barmenu.addItem("Services", null, null);
      services.addItem("Car Service", null, mycommand);
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Trong ví dụ được thảo luận ở trên, chúng ta đã tạo một thanh menu lồng nhau. Chạy đoạn mã trên và bạn có thể quan sát đầu ra trong trình duyệt của mình như hình dưới đây:

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved