Наследование при разработке Web-страниц
Рассмотрим типовую задачу: необходимо создать приложение, все страницы которого оформлены единообразно, но имеют ряд отличий. Например, каждая страница должна иметь свой заголовок. В разных средствах разработки данная задача решается по-разному. Как правило, страницы компонуются из набора повторно-используемых шаблонов или компонент. Библиотека Wicket позволяет решить данную задачу с применением наследования. Создадим файл разметки для абстрактной базовой страницы приложения BasicPage.html
|
<html xmlns:wicket="http://wicket.sourceforge.net/"> <head> <title><span wicket:id="pageTitle">Page title</span></title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <wicket:child/> </body> </html> |
Данный пример предельно упрощен, BasicPage всего лишь подключает ко всем страницам таблицу каскадных стилей и позволяет менять заголовок страницы динамически. Интерес представляет только специальный тег <wicket:child/>, при помощи которого указывается, каким образом дочерние страницы будут расширять разметку BasicPage. Создадим контроллер страницы:
|
public class BasicPage extends WebPage { public BasicPage() { Label title = new Label("pageTitle", new StringResourceModel("pageTitle", this, null)); title.setRenderBodyOnly(true); add(title); } } |
Значение компонента Label берется из ресурсного файла, для доступа к которому используется модель StringResourceModel. Ресурсный файл BasicPage.properties, должен содержать константу pageTitle.
|
pageTitle=Базовая страница |
Теперь мы снова вернемся к странице AddPersonPage и переделаем ее таким образом, чтобы она расширяла базовую страницу BasicPage. Во-первых, класс-контроллер данной страницы должен расширять класс BasicPage.
|
public class AddPersonPage extends BasicPage { ... } |
Во-вторых, необходимо изменить файл AddPersonPage.html:
|
<html xmlns:wicket="http://wicket.sourceforge.net/"> <body> <wicket:extend> <div wicket:id="border"> <form wicket:id="form"> <span wicket:id="feedback"/> <div>Имя: <input wicket:id="name" type="text" /></div> <div>Адрес: <input wicket:id="email" type="text" /></div> <input type="submit" name="submit" value="Сохранить"/> </form> </div> </wicket:extend> </body> </html> |
В примере появился новый специальный тег <wicket:extend>. Он указывает, какая часть разметки будет использована для расширения разметки базовой страницы.
Поскольку заголовок для страницы AddPersonPage должен отличаться от заголовка базовой страницы, добавим в файл AddPersonPage.properties соответствующую константу.
|
pageTitle=Ввод персональных данных |
После запуска приложения будет сгенерирована страница, похожая на ту, что представлена ниже.
|
<html> <head> <title>Basic page</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <span> Пример приложения Wicket <hr/> </span> <div align="center" style="border:1px solid #000000"> <span style="font-weight: bold">Введите данные</span> <form action="/wdemo/app?path=0:border:form&interface=IFormSubmitListener" method="post"> <span></span> <div>Имя: <input value="" type="text" name="name"/></div> <div>Адрес: <input value="" type="text" name="email"/></div> <input type="submit" name="submit" value="Сохранить"/> </form> </div> </body> </html> |
Подведем итог: страница AddPersonPage унаследовала от BasicPage не только Java-код, но и разметку страницы. Если бы в файле AddPersonPage.properties не существовало константы pageTitle, то использовалось бы значение из ресурсного файла базового класса.