# Vaadin `TextArea`教程 > 原文： [http://zetcode.com/vaadin/textarea/](http://zetcode.com/vaadin/textarea/) 在 Vaadin `TextArea`教程中，我們學習 Vaadin `TextArea`組件的基礎。 Vaadin `TextArea`示例顯示`TextArea`組件中網頁的內容。 該示例使用 Jsoup 庫讀取網頁內容。 ## Vaadin Vaadin 是一種流行的 Java Web 開發框架，用于構建單頁 Web 應用。 ## Vaadin `TextArea` `TextArea`是顯示純文本的多行文本區域組件。 ## Vaadin `TextArea`示例 以下程序演示了 Vaadin `TextArea`組件的用法。 它從網頁中讀取 HTML 內容，該內容在附近的`TextField`組件中指定。 ```java <dependency> <groupId>org.jsoup</groupId> <artifactId>jsoup</artifactId> <version>1.9.2</version> </dependency> ``` 我們需要將`jsoup`依賴項添加到 Maven POM 文件中。 Jsoup 是一種流行的 Java HTML 解析器。 `MyUI.java` ```java package com.zetcode.main; 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.Button; import com.vaadin.ui.TextArea; import com.vaadin.ui.TextField; import com.vaadin.ui.UI; import com.vaadin.ui.VerticalLayout; import com.zetcode.service.ReadPage; @Theme("mytheme") public class MyUI extends UI { @Override protected void init(VaadinRequest vaadinRequest) { VerticalLayout layout = new VerticalLayout(); TextArea area = new TextArea(); area.setWidth("650"); area.setHeight("350"); TextField field = new TextField("Enter an URL"); field.setWidth("350"); Button button = new Button("Submit"); button.addClickListener(e -> { String content = ReadPage.read(field.getValue()); area.setValue(content); }); layout.addComponents(area, field, button); layout.setMargin(true); layout.setSpacing(true); setContent(layout); } @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet { } } ``` 在代碼示例中，我們具有三個組件：`TextArea`，`TextField`和`Button`。 ```java VerticalLayout layout = new VerticalLayout(); ``` 在我們的示例中，我們在`VerticalLayout`列中顯示三個組件。 ```java TextArea area = new TextArea(); area.setWidth("650"); area.setHeight("350"); ``` 創建了`TextArea`組件； 它的高度增加了。 ```java TextField field = new TextField("Enter an URL"); ``` 創建了`TextField`組件； 在這里，我們提供要讀取的網頁的名稱。 ```java Button button = new Button("Submit"); button.addClickListener(e -> { String content = ReadPage.read(field.getValue()); area.setValue(content); }); ``` 在按鈕事件處理器中，我們使用`ReadPage.read()`方法讀取網頁，并使用`setValue()`方法將 HTML 數據設置為`TextArea`。 ```java layout.addComponents(area, field, button); ``` 使用`addComponents()`將這三個組件添加到垂直布局中。 `ReadPage.java` ```java package com.zetcode.service; import java.io.IOException; import java.util.logging.Level; import java.util.logging.Logger; import org.jsoup.Jsoup; public class ReadPage { public static String read(String webPage) { String html = ""; try { html = Jsoup.connect(webPage).get().html(); } catch (IOException ex) { Logger.getLogger(ReadPage.class.getName()).log( Level.WARNING, null, ex); } return html; } } ``` `read()`方法使用 Jsoup 讀取給定網頁的內容。  圖：Vaadin `TextArea` 在本教程中，我們展示了 Vaadin TextArea 組件的基礎知識。 您可能也對相關教程感興趣： [Jsoup 教程](/java/jsoup/)， [Vaadin `ComboBox`教程](/vaadin/combobox/)， [Vaadin `Grid`教程](/vaadin/grid/)， [Vaadin `Button`教程](/vaadin/button/)， [Vaadin 滑塊教程](/vaadin/slider/)， [Vaadin `CheckBox`教程](/vaadin/checkbox/)， [Java 教程](/lang/java/)。