Стандартные компоненты
В нашем примере использовались стандартные компоненты Wicket: FeedbackPanel и TextField. Ниже приводится список основных компонентов, предоставляемых библиотекой, и HTML-теги, с которыми они обычно используются.
|
Название компонента |
Назначение |
Тег HTML |
|
FeedbackPanel |
Отображение ошибок пользователя |
<span> |
|
Image |
Изображение |
<img> |
|
Label |
Динамически изменяемая текстовая метка |
<span>, <td> |
|
MultilineLabel |
Многострочная текстовая метка |
<span>, <td> |
|
Link |
Ссылка |
<a> |
|
TextArea |
Область ввода текста |
<textarea> |
|
TextField |
Поле ввода текста |
<input type=”text”> |
|
PasswordTextField |
Поле ввода пароля |
<input type=”password”> |
|
CheckBox |
Флажок |
<input type=”checkbox”> |
|
RadioChoice |
Переключатель |
<input type=”radio”> |
|
Button |
Кнопка |
<input type=”submit”> |
|
DropDownChoice |
Выпадающий список |
<select> |
|
ListChoice |
Список |
<select> |
Это далеко не полный список. Помимо перечисленных базовых компонентов, Wicket предоставляет средства для организации табличного просмотра данных (классы DataView, DataTable, GridView), организации постраничного просмотра таблиц (PagingNavigator), просмотра данных в виде деревьев (Tree), генерации динамических изображений (RenderedDynamicImageResource). В данной статье возможности этих классов не рассматриваются.
Рассмотрим пример использования некоторых стандартных компонентов. Создадим страницу, которая позволяет пользователю выбрать цвет из списка и отображает результаты выбора. Файл разметки SelectionPage.html приведен ниже.
|
<html xmlns:wicket="http://wicket.sourceforge.net/"> <head> <title>Выбор цвета</title> </head> <body> <form wicket:id="form"> Ваш предыдущий выбор: <span wicket:id="colorLabel">нет</span><br/> Выберите цвет: <select wicket:id="color"> <option>Красный</option> <option>Желтый</option> <option>Зеленый</option> </select> <input wicket:id="submitButton" type="submit" value="Выбор"/><br/> <a wicket:id="selectLink" href="#">Выход</a> </form> </body> </html> |
Соответствующий класс-контроллер использует компоненты Label, DropDownChoice, Link и Button.
|
public class SelectionPage extends WebPage { private final static List COLORS = Arrays.asList(new String[]{"красный", "желтый", "зеленый"});
public final class SelectionForm extends Form { private String selectedColor = "нет";
public String getSelectedColor() { return selectedColor; }
public void setSelectedColor(String selectedColor) { this.selectedColor = selectedColor; }
public SelectionForm(String s) { super(s); add(new Label("colorLabel", new PropertyModel(this, "selectedColor"))); add(new DropDownChoice("color", new PropertyModel(this, "selectedColor"), COLORS)); add(new Link("selectLink") { public void onClick() { redirectTo(newPage(NextPage.class)); } }); add(new Button("submitButton") { protected void onSubmit() { System.out.println("Selected color: " + getSelectedColor()); } }); }
} public SelectionPage() { add(new SelectionForm("form")); } } |
В данном примере использована модель PropertyModel, посредством которой атрибут selectedColor класса SelectionForm связывается с классами Label и DropDownChoice. Компонент Link имеет собственный обработчик события onClick(), передающий управление другой странице. Компонент Button позволяет получить выбранное пользователем значение с помощью обработчика onSubmit().