// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= Введение в веб-платформу Wicket
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Введение в веб-платформу Wicket - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Введение в веб-платформу Wicket

В этом документе описаны основы создания повторно используемых компонентов и их сборки в веб-приложение. Каждый компонент состоит из класса Java и файла HTML. Платформа, которая позволяет разрабатывать приложения таким способом, называется Wicket. Помимо основанного на компонентах подхода, отличительной чертой Wicket является отсутствие XML-файлов конфигурации. Для общих настроек приложения, таких как идентификация главной страницы, вместо XML-файла конфигурации используется класс Java.

Каждый виджет веб-приложения создается в классе Java и представляется в виде страницы HTML. Класс Java и страница HTML должны иметь одно и то же имя и находиться в одной и той же исходной структуре. Эти компоненты связаны друг с другом идентификатором Wicket. Из данного руководства вы узнаете, как обеспечивается поддержка разработки приложений Wicket в среде IDE, и научитесь быстро и эффективно создавать повторно используемые компоненты, которые придадут вашему веб-приложению единый облик без лишних усилий с вашей стороны.


image::images/netbeans-stamp-80-74-73.png[title="Содержимое этой страницы применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0"]


*Для работы с этим учебным курсом требуется следующее программное обеспечение и ресурсы.*

|===
|Программное обеспечение или ресурс |Требуемая версия 

|link:https://netbeans.org/downloads/index.html[+IDE NetBeans+] |7.2, 7.3, 7.4, 8.0, Java EE 

|Комплект для разработчика на языке Java (JDK) |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+версия 7+] или более поздние 

|Подключаемый модуль Wicket для IDE NetBeans |link:http://plugins.netbeans.org/plugin/3586/wicket-support[+Страница подключаемого модуля Wicket для NetBeans+] 

|GlassFish Server Open Source Edition 
_или_ 
Контейнер сервлетов Tomcat |3.1.x или более поздние 
_ _ 
версия 7.x или более поздние 
|===

*Примечания.*

* Вспомогательный подключаемый модуль Wicket для NetBeans состоит из следующих компонентов:
* *org-netbeans-modules-web-wicket.nbm.* Предоставляет функциональность Wicket, описанную в данном учебном курсе.
* *org-netbeans-modules-wicket-templates.nbm.* Предоставляет шаблоны файлов Wicket для создания типичных артефактов Wicket, таких как страницы и панели.
* *org-netbeans-modules-wicket-library.nbm.* Предоставляет файлы Wicket JAR и устанавливает их в Диспетчере библиотек IDE. Таким образом, вам не потребуется загружать дистрибутив Wicket с веб-сайта Wicket, так как все необходимые компоненты содержатся в подключаемом модуле.
* Чтобы установить вспомогательный подключаемый модуль Wicket в среде IDE, перейдите в Диспетчер расширений (выберите Сервис > Подключаемые модули в главном меню), затем перейдите на вкладку 'Загруженные' и установите модуль. Подробные инструкции по установке подключаемого модуля платформы в среде см. в разделе link:framework-adding-support.html[+Реализация поддержки веб-платформ+].
* Дополнительную информацию о платформе Wicket можно найти на веб-сайте по адресу link:http://wicket.sourceforge.net/[+http://wicket.sourceforge.net/+]. Информацию о поддержке Wicket в IDE NetBeans для разработчиков можно найти на веб-сайте по адресу link:http://java.net/projects/NbWicketSupport[+http://java.net/projects/NbWicketSupport+]. Если у вас есть опыт работы с Wicket, вы можете дополнить код подключаемого модуля Wicket для IDE NetBeans.


== Установка среды

Перед созданием приложения Wicket убедитесь, что у вас есть все необходимое программное обеспечение и установлены правильные настройки проекта. После установки вспомогательного подключаемого модуля Wicket для IDE NetBeans по вышеприведенной инструкции откроется мастер, который выполнит настройку всех основных файлов, требуемых для приложения Wicket.


=== Создание исходной структуры приложения Wicket

Исходная структура приложения должна включать в себя файлы Wicket JAR, регистрацию сервлета Wicket в файле  ``web.xml`` , а также некоторые стандартные артефакты, такие как класс приложения и главная страница. Поскольку вы работаете в среде IDE, создавать все эти файлы вручную не требуется. Вместо этого можно воспользоваться мастерами.

Выберите сценарий, который больше всего соответствует вашим потребностям:

* <<create-1,Сценарий 1. Создание приложения Wicket на основе Ant с нуля>>
* <<create-2,Сценарий 2. Создание приложения Wicket на основе Maven с нуля>>
* <<create-3,Сценарий 3. Создание приложения Wicket на основе Maven с использованием архетипа>>
* <<create-4,Сценарий 4. Реализация поддержки Wicket в существующем приложении>>


==== Сценарий 1. Создание приложения Wicket на основе Ant с нуля

При создании нового веб-приложения в среде IDE на последней панели мастера веб-приложений вы найдете ряд настроек, которые будут очень полезны в контексте приложения Wicket.

1. Выберите команду "Файл" > "Новый проект". В области "Категории" выберите "Web". В области "Projects" выберите "Web Application". Нажмите 'Далее'.
2. На панели 'Имя и расположение' в поле 'Имя проекта' введите  ``MyFirstWicketApp`` . В поле "Местоположение проекта" укажите любой каталог на компьютере. Нажмите 'Далее'.
3. Оставьте все настройки без изменений. Но если хотите, вы можете их изменить. Wicket поддерживает все версии Java EE. Приложение Wicket можно развернуть на любом сервере. Нажмите 'Далее'.
4. 
На панели 'Платформы' выберите Wicket, как показано на рисунке:

image::https://blogs.oracle.com/geertjan_images/resource/wicket-160-nb.png[]

*Примечание.* В зависимости от того, какие модули установлены в среде IDE, набор доступных элементов в списке 'Платформы' может отличаться от изображенного на снимке экрана.

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

* *Имя фильтра Wicket.* Имя фильтра, заданного в файле  ``web.xml`` .
* *Шаблон URL-адреса Wicket.* Шаблон относительного URL-адреса, добавляемый в файл  ``web.xml`` .
* *Класс приложения Wicket.* Имя класса, определяющего общие параметры приложения, такие как настройки главной страницы.
* *Главная страница Wicket.* Имя главной страницы, которая состоит из файлов  ``xxx.java``  и  ``xxx.html`` .
* *Основной пакет.* Пакет Java, в который среда IDE помещает все созданные артефакты.
* *Версия.* Версия Wicket. В вышеуказанном списке 'Версия' будут отображаться все библиотеки с префиксом 'Wicket', доступные в Диспетчере библиотек. По умолчанию в списке отображается только версия 1.6.0, так как именно эта версия предоставляется подключаемым модулем.


. Нажмите 'Готово'.

Среда IDE создает проект  ``MyFirstWicketApp `` . Проект содержит все исходные файлы и метаданные проекта, например сценарий построения Ant. Проект откроется в среде IDE. Логическую структуру можно просмотреть в окне 'Проекты' (Ctrl-1):

image::https://blogs.oracle.com/geertjan_images/resource/wicket-160-nb-2.png[]


==== Сценарий 2. Создание приложения Wicket на основе Maven с нуля

Если у вас уже есть приложение на основе Ant, вы можете реализовать в нем поддержку Wicket с помощью среды IDE.

1. Выберите команду "Файл" > "Новый проект". В Categories ("Категории) выберите Maven. В области "Projects" выберите "Web Application".

image::images/maven-1.png[]

Нажмите 'Далее'.


. На панели 'Имя и расположение' в поле 'Имя проекта' введите  ``MyFirstWicketApp`` . Измените значения в поле 'Местоположение проекта' и параметры Maven как требуется.

image::images/maven-3.png[]

Нажмите 'Далее'.


. Выберите нужный сервер. В качестве версии Java EE укажите 'Java EE 6 Web'.

image::images/maven-4.png[]

Нажмите 'Готово'. Среда IDE создает исходную структуру, как показано на рисунке:

image::images/maven-5.png[]


. Поскольку мы реализовали поддержку Java EE 6, на предыдущем этапе не создается файл  ``web.xml`` . Однако Wicket требует, чтобы в файле  ``web.xml``  был зарегистрирован фильтр приложения Wicket. Поэтому прежде чем продолжить, необходимо добавить в приложение новый файл  ``web.xml`` .

Щелкните приложение правой кнопкой мыши и выберите Создать > Другие, затем выберите Веб > Стандартный дескриптор развертывания (web.xml). Нажмите кнопку "Далее", а затем нажмите кнопку "Готово".


. Теперь можно реализовать поддержку Wicket в приложении. Щелкните правой кнопкой узел проекта и выберите команду "Свойства". В диалоговом окне 'Свойства проекта' выберите 'Платформы' и 'Wicket'. Используя информацию из предыдущих сценариев, заполните поля в разделе 'Конфигурация Wicket' диалогового окна. Нажмите OK.

Среда IDE все файлы Wicket, необходимые для начала работы:

image::images/maven-6.png[]


==== Сценарий 3. Создание приложения Wicket на основе Maven с использованием архетипа

В репозиториях Maven имеются артефакты для настройки приложений Wicket.

1. Выберите команду "Файл" > "Новый проект". В Categories ("Категории) выберите Maven. Выберите 'Проект' из списка 'Архетип' в разделе 'Проекты'.

image::images/maven-7.png[]

Нажмите 'Далее'.


. В поле 'Поиск' введите 'wicket', затем выберите архетип, который вы хотите использовать.

image::images/maven-8.png[]

Заполните поля на экране мастера необходимыми данными. Нажмите 'Готово'.

Среда IDE добавляет поддержку Wicket в приложение, созданное с использованием архетипа.


==== Сценарий 4. Реализация поддержки Wicket в существующем приложении

Если у вас уже есть приложение на основе Ant или Maven, вы можете реализовать в нем поддержку Wicket с помощью среды IDE.

1. Щелкните приложение правой кнопкой мыши и выберите 'Свойства'.
2. В диалоговом окне 'Свойства проекта' выберите панель 'Платформы' и нажмите 'Добавить'. Выберите 'Wicket'. Нажмите OK.
3. Используя информацию из предыдущего раздела, заполните поля в разделе 'Конфигурация Wicket' на панели 'Платформы'.
4. Для подтверждения нажмите OK .

Среда IDE добавляет поддержку Wicket в существующее приложение.

В следующем разделе подробно рассматриваются все созданные файлы.


=== Обеспечение поддержки альтернативных версий Wicket

Возможно, вам потребуется версия Wicket, отличная от той, что входит в состав подключаемого модуля Wicket для NetBeans. Чтобы зарегистрировать и использовать альтернативную версию Wicket, выполните следующие действия.

1. Перейдите в раздел Сервис | Библиотеки Ant. Обратите внимание на файлы Wicket JAR, зарегистрированные подключаемым модулем Wicket для NetBeans:

image::images/maven-9.png[]


. В диалоговом окне, показанном на рисунке, нажмите 'Создать библиотеку' и создайте новую библиотеку, имя которой должно иметь префикс 'Wicket'. Добавьте файлы JAR в созданную библиотеку (другими словами, зарегистрируйте файлы JAR предпочтительной версии Wicket в этой библиотеке).


. 
Впоследствии при создании очередного веб-приложения или добавлении поддержки Wicket в существующее приложение на панели 'Платформы' будет отображаться библиотека, которую вы только что зарегистрировали (если имя библиотеки имеет префикс 'Wicket'):

image::images/maven-91.png[]

После заполнения полей мастера файлы JAR, зарегистрированные в выбранной библиотеке, будут размещены на пути класса вашего приложения.

*Примечание.* Вышеописанный подход применяется только к приложениям Wicket на основе Ant. Если требуется использовать альтернативную версию Wicket в приложении на основе Maven, измените соответствующий файл POM.


=== Рассмотрение исходной структуры приложения, созданного на платформе Wicket

Мастер создания веб-приложений IDE создал множество файлов. Посмотрите на эти файлы и определите, как они связаны друг с другом в контексте разработки на платформе Wicket.

1. Перейдем к обзору созданных файлов.

* *Веб-дескриптор.* Начнем с файла  ``web.xml`` . Это обычный дескриптор развертывания, общий для всех веб-приложений, соответствующих серверной спецификации. Разверните структуру папки  ``WEB-INF``  или папки 'Файлы конфигурации', откройте файл в исходном формате XML и обратите внимание на определение фильтра Wicket:


[source,xml]
----

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
         http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <filter>
        <filter-name>WicketApplication</filter-name>
        <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
        <init-param>
            <param-name>applicationClassName</param-name>
            <param-value>com.myapp.wicket.Application</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>WicketApplication</filter-name>
        <url-pattern>/wicket/*</url-pattern>
    </filter-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file/>
    </welcome-file-list>
</web-app>
----

*Примечание.* Имя класса приложения имеет значение  ``com.myapp.wicket.Application`` . Теперь откройте файл класса приложения и рассмотрите его содержимое.

* *Класс приложения Wicket.* Откройте пакет  ``com.myapp.wicket``  в папке 'Исходные пакеты', затем откройте файл  ``Application.java`` . Он выглядит следующим образом:


[source,java]
----

package com.myapp.wicket;           

import org.apache.wicket.protocol.http.WebApplication;

public class Application extends WebApplication {

    public Application() {
    }

    @Override
    public Class getHomePage() {
        return HomePage.class;
    }

}
----

Этот файл Java содержит общие настройки приложения и сравним с файлом  ``struts-config.xml``  платформы Struts и файлом  ``faces-config.xml``  платформы JSF. Обратите внимание на определение метода  ``getHomePage()`` . Это метод является минимальным требованием для общего класса приложения. Он указывает первую (главную) страницу, которая отобразится после развертывания приложения. Обратите внимание на возвращаемый класс  ``HomePage.class`` . Далее откройте файл  ``HomePage.java``  и изучите его содержимое.

* *Главная страница Wicket.* Откройте файл  ``HomePage.java`` . Он выглядит следующим образом:


[source,java]
----

package com.myapp.wicket;           

public class HomePage extends BasePage {

    public HomePage() {
        add(new Label("message", "Hello, World!"));
    }

}
----

Этот файл добавляет метку на главную страницу. Представление виджетов Wicket, созданных в этом файле, осуществляется в файле с таким же именем и в той же исходной структуре. Это может быть только файл  ``HomePage.html`` , который в данном случае выглядит так:


[source,xml]
----

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd"  
      xml:lang="en"  
      lang="en"> 
    <head> 
        <wicket:head> 
            <title>Wicket Example</title> 
        </wicket:head> 
    </head> 
    <body> 
        <wicket:extend> 
            <h1 wicket:id="message">This gets replaced</h1>
        </wicket:extend> 
    </body> 
</html>
----

Обратите внимание, что в файле  ``HomePage.java``  расширяется элемент  ``BasePage`` . Файл  ``HomePage.html``  содержит атрибут  ``wicket:id`` , который указывает на то, что это заместитель определенного объекта, созданного файлом Java. Также здесь есть ссылка на таблицу стилей CSS, сгенерированную средой IDE. Эта таблица находится в папке 'Веб-страницы' в окне 'Проекты'. Далее откройте файл  ``BasePage``  и рассмотрите его содержимое.

* *Базовая страница.* Откройте файл  ``BasePage.java`` . Вот как он выглядит:


[source,java]
----

package com.myapp.wicket;           

import org.apache.wicket.markup.html.WebPage;

public abstract class BasePage extends WebPage {

    public BasePage() { 
        super(); 
        add(new HeaderPanel("headerpanel", "Welcome To Wicket")); 
        add(new FooterPanel("footerpanel", "Powered by Wicket and the NetBeans Wicket Plugin"));
    } 

}
----

Это класс, который будут расширять наши веб-страницы. Каждый класс, расширяющий  ``BasePage`` , наследует экземпляр  ``HeaderPanel``  и  ``FooterPanel`` . Это нужно для того, чтобы у всех веб-страниц были одинаковые верхние и нижние колонтитулы. Вид базовой страницы в представлении HTML:


[source,xml]
----

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd"  
      xml:lang="en"  
      lang="en"> 
    <head> 
        <wicket:head> 
            <wicket:link> 
                <link rel="stylesheet" type="text/css" href="style.css"/> 
            </wicket:link> 
        </wicket:head> 
    </head> 
    <body> 
        <header wicket:id="headerpanel" />
        <section class="content_container"> 
            <wicket:child/> 
        </section> 
        <footer wicket:id="footerpanel" /> 
    </body> 
</html>
----

Далее откройте файл  ``HeaderPanel.java``  и изучите его содержимое.

* *Панель верхнего колонтитула.* Откройте файл  ``HeaderPanel.java`` . Вот как он выглядит:


[source,java]
----

package com.myapp.wicket;           

import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.panel.Panel;

public class HeaderPanel extends Panel {

    public HeaderPanel(String componentName, String exampleTitle)
    {
        super(componentName);
        *add(new Label("exampleTitle", exampleTitle));*
    }

}
----

Обратите внимание на строку, выделенную жирным шрифтом. Здесь создается виджет Wicket Label. HeaderPanel является повторно используемым компонентом. Это представление Java, где создаются виджеты. Теперь рассмотрим представление HTML, где должен быть представлен виджет Wicket Label. Теперь откройте файл  ``HeaderPanel.html``  и изучите его содержимое.

Измените второй аргумент на 'My Very First Component Based Application', чтобы определение элемента Label приняло следующий вид:


[source,java]
----

add(new Label("exampleTitle", "My Very First Component Based Application"));
----

Откройте файл  ``HeaderPanel.html`` . Обратите внимание на то, что этот файл имеет такое же имя, как файл Java, который мы только что рассматривали. Этот файл находится в той же исходной структуре. Вот как он выглядит:


[source,xml]
----

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd"  
      xml:lang="en"  
      lang="en"> 
    <head><title>Wicket Example</title></head>
    <body>
        <wicket:panel>
            <h1>Wicket Example</h1>
            <p id="titleblock">
                <b><font size="+1">Start of <span wicket:id="exampleTitle">Example Title Goes Here</span></font></b>
            </p>
        </wicket:panel>
    </body>
</html>
----

Обратите внимание на строку, выделенную жирным шрифтом. Здесь указывается, где должен быть представлен виджет на странице в представлении HTML. Удерживая клавишу Ctrl, наведите указатель мыши на значение атрибута  ``wicket:id``  в теге  ``span`` . Как видите, значение превращается в гиперссылку:

image::images/hyperlink-1.png[]

Щелкните эту гиперссылку. В результате откроется веб-страница в представлении Java.

Теперь щелкните стрелку влево в верхней части редактора исходного кода, чтобы вернуться на страницу HTML:

image::images/hyperlink-2.png[]

Таким образом можно быстро переключаться между двумя представлениями компонентов Wicket.

* *Панель нижнего колонтитула.* Панель нижнего колонтитула имеет такую же структуру, как и панель верхнего колонтитула, которая была описана ранее в этом разделе.


. 
Щелкните проект правой кнопкой мыши и запустите его выполнение. Среда IDE выполняет сборку приложения, создает файл WAR, отправляет его на сервер развертывания, открывает стандартный браузер IDE и отображает приложение:

image::images/deploy-1.png[]

*Примечание.* Убедитесь, что URL-адрес заканчивается на '/wicket', как указано на рисунке выше. Это необходимо для сопоставления URL-адреса с фильтром Wicket, зарегистрированным в файле  ``web.xml`` .


== Использование компонентов Wicket

В следующих разделах содержится информация о трех ключевых компонентах Wicket и о том, как подключаемый модуль Wicket для NetBeans обеспечивает поддержку этих компонентов в среде IDE NetBeans.

* <<widget,Виджет>>
* <<component,Повторно используемый компонент>>
* <<ajax,Поддержка AJAX>>

В последующих разделах также описываются различные вспомогательные компоненты, предоставляемые подключаемым модулем Wicket для NetBeans.


=== Добавление виджета

Из этого раздела вы узнаете, как создать первый виджет Wicket. Как и большинство других артефактов Wicket, виджет имеет два представления: представление Java и представление HTML. В представлении Java виджет создается. В представлении HTML он отображается. Как упоминалось ранее, для перехода от одного представления к другому можно использовать гиперссылку.

1. Откройте файл  ``HomePage.html`` . Если палитра не открывается автоматически, выберите Окно > Палитра (Ctrl-Shift-8).

image::images/widget-2.png[]


. После добавления строки под элементом H1 в файле HTML перетащите элемент Label из палитры в область под элементом H1. Откроется следующее диалоговое окно:

image::images/widget-3.png[]

Измените значения в диалоговом окне следующим образом:

image::images/widget-4.png[]

Нажмите OK. Как видите, в файл был добавлен тег, выделенный полужирным шрифтом:


[source,xml]
----

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd"  
      xml:lang="en"  
      lang="en"> 
    <head> 
        <wicket:head> 
            <title>Wicket Example</title> 
        </wicket:head> 
    </head> 
    <body> 
        <wicket:extend> 
            <h1 wicket:id="message">This gets replaced</h1>
            *<span wicket:id="message1">This gets replaced</span>*
        </wicket:extend> 
    </body> 
</html>
----

Теперь к виджету можно применить стиль, например, используя теги H3:


[source,xml]
----

<h3 wicket:id="message1">This gets replaced</h3>
----

Теперь откройте файл  ``HomePage.java`` . Как видите, в него была добавлена метка с таким же идентификатором, как в файле HTML (изменения выделены *полужирным шрифтом*):


[source,java]
----

public class HomePage extends BasePage {

    public HomePage() {
        add(new Label("message", "Hello, World!"));
        *add(new Label("message1", "Hello again, World!"));*
    }

}
----


. 
Сохраните файлы. Обновите страницу в браузере. В результате отобразится виджет Wicket Label, представленный в файле  ``HomePage.html`` :

image::images/deploy-2.png[]

Вы можете создать заполнители точно так же, как создавали теги в файле  ``HomePage.html`` , и передать файл HTML веб-дизайнеру. Пока веб-дизайнер занимается проектированием страницы, вы можете независимо от него работать в представлении Java и создавать виджеты. Поскольку теги HTML не встраиваются в файл Java, вы, как и ваш веб-дизайнер, сможете оценить основное преимущество Wicket - разделение обязанностей.

Откройте Навигатор (Окно > Навигация > Навигатор), предварительно выбрав файл HTML в редакторе. Навигатор отображает обзор тегов в списке 'Теги Wicket':

image::images/wicket-navigator.png[]

Если на странице HTML есть непарные теги, в файле Java отображается предупреждение:

image::images/widget-1.png[]


=== Добавление повторно используемого компонента

Одно из преимуществ Wicket заключается в повторно используемых компонентах. В этом разделе показано, как с помощью матера создать панель, которая снова имеет два представления: представление Java и представление HTML. Панель будет создана таким образом, чтобы можно было повторно использовать баннер на веб-страницах и обеспечить одинаковый вид баннера на всем веб-сайте. Добавить панель на веб-страницу совсем не сложно.

1. Щелкните правой кнопкой мыши узел пакета  ``com.myapp.wicket``  и выберите Создать > Другие. В разделе 'Категории' выберите 'Веб'. В разделе 'Типы файлов' обратите внимание на следующие шаблоны:

image::images/panel-1.png[]

Выберите 'Панель Wicket' и нажмите 'Далее'.


. В поле 'Имя файла' введите  ``BannerPanel`` . На экране должны быть представлены следующие параметры:

image::images/panel-2.png[]

Нажмите 'Готово'.

В результате в пакете будет создано два новых файла:  ``BannerPanel.html``  и  ``BannerPanel.java`` .


. Откройте файл  ``BannerPanel.html``  и обратите внимание на содержимое этого файла:


[source,xml]
----

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:wicket>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>BannerPanel</title>
    </head>
    <body>
        <wicket:panel>
            <!-- TODO - add components here, ala
            
            <span wicket:id="title">title here</span>
            
            -->
        </wicket:panel>
    </body>
</html
----

Между тегами  ``wicket:panel``  находится заполнитель Wicket. Удалите строки над и под тегом SPAN, чтобы строка с тегом SPAN не была закомментирована. Удерживая клавишу Ctrl, наведите указатель мыши на значение идентификатора Wicket и щелкните отображенную гиперссылку. Откроется файл  ``BannerPanel.java`` :


[source,java]
----

package com.myapp.wicket;

import org.apache.wicket.markup.html.panel.Panel;

public final class BannerPanel extends Panel {
    BannerPanel(String id) {
        super (id);
    }
}
----

Добавьте метку так же, как в файле  ``HomePage.java``  (изменения выделены полужирным шрифтом):


[source,java]
----

package com.myapp.wicket;

*import org.apache.wicket.markup.html.basic.Label;*
import org.apache.wicket.markup.html.panel.Panel;

public final class BannerPanel extends Panel {
    BannerPanel(String id) {
        super (id);
        *add(new Label("title","I am a reusable component!"));*
    }
}
----


. Простая панель почти готова. Добавим ее на главную страницу. Откройте файл  ``HomePage.java``  и создайте новый экземпляр элемента BannerPanel, добавив следующую строку в конечный сегмент конструктора:


[source,java]
----

add(new BannerPanel("bannerPanel"));
----


. Теперь нужно отобразить панель. Откройте файл  ``HomePage.html``  и добавьте тег-заполнитель сразу над закрывающим тегом BODY. Обязательно используйте такой же идентификатор Wicket, как и в файле Java:


[source,java]
----

<span wicket:id='bannerPanel'/>
----


. 
Выполните проект еще раз. Панель отображается на странице точно в том месте, которое указано в файле HTML:

image::images/result-3.png[]

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


=== Добавление компонентов AJAX

Вместо использования JavaScript для добавления в приложение Wicket асинхронных веб-компонентов (по технологии link:http://en.wikipedia.org/wiki/Ajax_(programming)[+AJAX+]) можно использовать модель компонента Java со встроенными компонентами AJAX. Далее показано, как изменить элемент BannerPanel и включить в него виджет автозаполнения AJAX вместо виджета метки, который вы создавали ранее.

1. В представлении HTML класса  ``BannerPanel``  перетащите элемент AJAX Text Input из палитры (Ctrl-Shift-8), как показано на рисунке:

image::images/drag-1.png[]

Поместите элемент под существующим заполнителем Wicket, как показано ниже:


[source,xml]
----

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:wicket>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>BannerPanel</title>
    </head>

    <body>
        
        <wicket:panel>

            <span wicket:id="title">title here</span>

            *<input type="text" wicket:id="countries" size="50"/>*

        </wicket:panel>

    </body>
    
</html>
----


. В соответствующем представлении Java будут автоматически добавлены следующие элементы:


[source,java]
----

final AutoCompleteTextField field = new AutoCompleteTextField("countries", new Model("")) {
    @Override
    protected Iterator getChoices(String input) {
        if (Strings.isEmpty(input)) {
            return Collections.EMPTY_LIST.iterator();
        }
        List choices = new ArrayList(10);
        Locale[] locales = Locale.getAvailableLocales();
        for (int i = 0; i < locales.length; i++) {
            final Locale locale = locales[i];
            final String country = locale.getDisplayCountry();
            if (country.toUpperCase().startsWith(input.toUpperCase())) {
                choices.add(country);
                if (choices.size() == 10) {
                    break;
                }
            }
        }
        return choices.iterator();
    }
};
----


. Нажмите Ctrl-Shift-I и выберите корректные операторы импорта:

image::images/imports-1.png[]

Нажмите ОК и убедитесь, что в классе  ``BannerPanel``  используются следующие операторы импорта:


[source,java]
----

import java.util.ArrayList;
import java.util.Collections;
import java.util.Iterator;
import java.util.List;
import java.util.Locale;
import org.apache.wicket.extensions.ajax.markup.html.autocomplete.AutoCompleteTextField;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.Model;
import org.apache.wicket.util.string.Strings;
----


. 
Обновите страницу в браузере еще раз. На странице появится автоматически заполняемое поле AJAX. При вводе символов в поле будет подставляться название страны, соответствующее введенному тексту.

image::images/result-4.png[]


== Что дальше?

На этом вводная часть курса по разработке на платформе Wicket в среде IDE NetBeans завершена. Рекомендуем вам продолжить знакомство с платформой Wicket и поработать с образцом приложения Pizza Application Sample, описанным в книге link:http://www.ensode.net/wicket_first_look.html[+A First Look at the Wicket Framework+] Дэвида Р. Хеффельфингера (David R. Heffelfinger). Напоминаем, что результат работы, выполненной в рамках этого учебного курса, доступен в качестве образца в мастере создания проектов наряду с остальными образцами. См. рисунок ниже:

image::images/samples.png[] 

link:/about/contact_form.html?to=3&subject=Feedback: Introduction to the Wicket Framework in 7.2[+Мы ждем ваших отзывов+]


== См. также

Похожие и расширенные учебные курсы представлены на следующих ресурсах:

* link:../../docs/web/quickstart-webapps.html[+Введение в разработку веб-приложений+]
* link:../../docs/web/quickstart-webapps-struts.html[+Введение в веб-платформу Grails+]
* link:quickstart-webapps-spring.html[+Введение в веб-платформу Spring+].