// 
//     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.
//

= Introdução ao Wicket Web Framework
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Introdução ao Wicket Web Framework - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Introdução ao Wicket Web Framework

Este documento o conduz para os conceitos básicos sobre criação de componentes reutilizáveis e a montagem deles em uma aplicação web. Cada componente consiste em uma classe Java e um arquivo HTML. O framework que permite que você desenvolva sua aplicação desta forma é chamado Wicket. Além de sua abordagem baseada no componente, uma funcionalidade adicional do Wicket é a ausência de arquivos de configuração de XML. Em vez de um arquivo de configuração XML, você usa uma classe Java para definições da aplicação, como identificação de uma home page.

Cada widget em sua aplicação Web é criada em uma classe Java e convertida em uma página HTML. A classe Java e a página HTML devem ter o mesmo nome e estar na mesma estrutura de código-fonte. Elas são vinculadas umas com as outras por meio do identificador de Wicket. Você verá como o IDE suporta o desenvolvimento de aplicações Wicket, de forma que você possa criar de forma rápida e eficiente componentes reutilizáveis que possam fornecer à sua aplicação web uma aparência consistente sem muito trabalho de sua parte.


image::images/netbeans-stamp-80-74-73.png[title="O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0"]


*Para seguir este tutorial, os recursos e softwares a seguir são necessários.*

|===
|Software ou Recurso |Versão Necessária 

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

|Java Development Kit (JDK) |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+versão 7+] ou superior 

|Plug-in de Wicket para NetBeans IDE |link:http://plugins.netbeans.org/plugin/3586/wicket-support[+Página Plug-in de Wicket do NetBeans+] 

|GlassFish Server Open Source Edition 
_ou_ 
Contêiner do servlet Tomcat |3.1.x ou superior 
_ _ 
versão 7.x ou superior 
|===

*Observações:*

* O plug-in de suporte do Wicket para NetBeans consiste dos seguintes módulos:
* *org-netbeans-modules-web-wicket.nbm.* Fornece a funcionalidade específica do Wicket que é usada neste tutorial.
* *org-netbeans-modules-wicket-templates.nbm.* Fornece os modelos em nível de arquivo do Wicket para criar artefatos de Wicket comuns, como págins e painéis.
* *org-netbeans-modules-wicket-library.nbm.* Fornece JARs de Wicket, instala-os no Gerenciador de Bibliotecas do IDE. Portanto, você não precisa fazer download da distribuição de Wicket do site Wicket porque o plug-in fornece tudo que você precisa.
* Para instalar o plug-in de suporte do Wicket no IDE, vá para o Gerenciador de Plug-in (Ferramentas > Plug-ins no menu principal) e instale o plug-in na guia Submetido a Download. Para obter mais instruções detalhadas sobre como instalar um plug-in de framework no IDE, consulte: link:framework-adding-support.html[+Adicionando Suporte Para um Framework da Web+].
* Para obter mais informações sobre Wicket, consulte link:http://wicket.sourceforge.net/[+http://wicket.sourceforge.net/+]. Para a página de desenvolvimento do Wicket no NetBeans IDE, consulte link:http://java.net/projects/NbWicketSupport[+http://java.net/projects/NbWicketSupport+]. Se você estiver familiarizado com o Wicket, sua contribuição com código para o plug-in do Wicket do NetBeans IDE será bem-vinda.


== Configurando o Ambiente

Antes de iniciar a gravação de sua aplicação Wicket, certifique-se de que tem todo o software necessário e que seu projeto foi configurado corretamente. Depois de instalar o plug-in de suporte do Wicket para NetBeans IDE, conforme descrito acima, você terá um assistente que configura todos os arquivos básicos necessários para uma aplicação Wicket.


=== Criando a Estrutura de Código-Fonte de uma Aplicação Wicket

A estrutura do código-fonte de sua aplicação deve incluir os arquivos JAR de Wicket, o registro do servlet de Wicket no arquivo  ``web.xml`` , bem como alguns artefatos padrão, como a classe da aplicação e uma home page. Considerando que você está usando um IDE, não é necessário criar todos esses arquivos. Em vez disso, temos assistentes para fazer isso por nós.

Dependendo de suas necessidades, escolha um dos cenários apropriados abaixo:

* <<create-1,Cenário 1: Criando uma Aplicação Wicket Baseada em Ant do Início>>
* <<create-2,Cenário 2: Criando uma Aplicação Wicket Baseada em Maven do Início>>
* <<create-3,Cenário 3: Criando uma Aplicação Wicket Baseada em Maven do Arquétipo>>
* <<create-4,Cenário 4: Adicionando Suporte de Wicket a uma Aplicação Existente>>


==== Cenário 1: Criando uma Aplicação Wicket Baseada em Ant do Início

Ao criar uma nova aplicação no IDE, o painel final do assistente da Aplicação Web será muito útil no contexto de nossa aplicação Wicket.

1. Escolha Arquivo > Novo Projeto. Em Categorias, selecione Web. Em Projetos, selecione Aplicação Web. Clique em Próximo.
2. No painel Nome e Localização, digite  ``MyFirstWicketApp``  no Nome do Projeto. Altere a Localização do Projeto em qualquer diretório de seu computador. Clique em Próximo.
3. Deixe todas as definições inalteradas. Ou, se quiser, altere-as. O wicket suporta todas as versões de Java EE. Uma aplicação wicket pode ser implantada em qualquer servidor. Clique em Próximo.
4. 
No painel Frameworks, escolha Wicket, conforme mostrado aqui:

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

*Observação:* dependendo dos módulos instalados no IDE, você poderá ver mais ou menos itens na lista de Frameworks mostrada na tela acima.

No painel mostrado acima, deixe todos os defaults inalterados. Os campos no painel acima fornecem o seguinte:

* *Nome do Filtro do Wicket.* Mostra o nome do filtro que será definido no arquivo  ``web.xml`` .
* *Padrão de URL do Wicket.* Adiciona um padrão de URL relativo ao arquivo  ``web.xml`` .
* *Classe da Aplicação Wicket.* Especifica o nome da classe na qual são estabelecidas as definições da aplicação, como home page.
* *Home Page do Wicket.* Especifica o nome da home page que consistira de um arquivo chamado  ``xxx.java``  e  ``xxx.html`` .
* *Pacote Principal.* O pacote Java no qual todos os artefatos gerados serão colocados pelo IDE.
* *Versão.* A versão do Wicket. Qualquer biblioteca no Gerenciador de Bibliotecas com um nome que começa com "Wicket" será listada na lista drop-down Versão acima. Por default, a única versão listada é 1.6.0 porque é a versão fornecida pelo plug-in.


. Clique em Finalizar.

O IDE cria o projeto  ``MyFirstWicketApp`` . O projeto contém todos os códigos-fonte e metadados do projeto, como o script de construção Ant do projeto. O projeto será aberto no IDE. Você pode exibir sua estrutura lógica na janela Projetos (Ctrl-1):

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


==== Cenário 2: Criando uma Aplicação Wicket Baseada em Maven do Início

Quando já tiver uma aplicação baseada em Ant, o IDE poderá ajudá-lo a adicionar suporte ao Wicket.

1. Escolha Arquivo > Novo Projeto. Em Categorias, selecione Maven. Em Projetos, selecione Aplicação Web.

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

Clique em Próximo.


. No painel Nome e Localização, digite  ``MyFirstWicketApp``  no Nome do Projeto. Altere a Localização do Projeto e as definições default de Maven, conforme necessário.

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

Clique em Próximo.


. Escolha o servidor apropriado para suas necessidades, bem como "Java EE 6 Web" para a definição da Versão do Java EE.

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

Clique em Finalizar. O IDE cria a estrutura de origem mostrada abaixo:

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


. Como não adicionamos suporte para Java EE 6, nenhum arquivo  ``web.xml``  foi criado na etapa anterior. No entanto, o Wicket exige que o filtro da aplicação Wicket seja registrado no arquivo  ``web.xml`` . Portanto, antes de continuar, adicionamos um novo arquivo  ``web.xml``  na aplicação.

Clique com o botão direito do mouse na aplicação, escolha Novo > Outro, seguido por Web > Descritor de Implantação Padrão (web.xml). Clique em Próximo e, em seguida, em Finalizar.


. Agora você está pronto para adicionar suporte do Wicket à aplicação. Clique com o botão direito do mouse no nó do projeto e escolha Propriedades. Na caixa de diálogo Propriedades do Projeto, selecione Frameworks e clique em Wicket. Use as descrições das seções anteriores para preencher os detalhes na parte de Configuração de Wicket na caixa de diálogo. Clique em OK.

O IDE cria todos os arquivos do Wicket necessários para começar:

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


==== Cenário 3: Criando uma Aplicação Wicket Baseada em Maven do Arquétipo

Existem arquétipos nos repositórios Maven para configurar aplicações Wicket.

1. Escolha Arquivo > Novo Projeto. Em Categorias, selecione Maven. Em Projetos, selecione Projeto do Arquétipo.

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

Clique em Próximo.


. No campo Pesquisa, digite "wicket" e, em seguida, selecione o arquétipo que você deseja usar.

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

Conclua o assistente com os valores apropriados para suas necessidades. Clique em Finalizar.

O IDE adiciona suporte do Wicket à aplicação criada do arquétipo.


==== Cenário 4: Adicionando Suporte de Wicket a uma Aplicação Existente

Quando já tiver uma aplicação, se criada no Ant ou no Maven, o IDE pode ajudá-lo a adicionar suporte do Wicket.

1. Clique com o botão direito do mouse na aplicação e escolha Propriedades.
2. Na caixa de diálogo Propriedades do Projeto, selecione o painel Frameworks e, em seguida, clique em Adicionar. Em seguida, escolha Wicket. Clique em OK.
3. Use as descrições na seção anterior para preencher a Configuração de Wicket no painel Frameworks.
4. Clique em OK para confirmar.

O IDE adiciona suporta de Wicket à aplicação existente.

Na próxima seção, exploraremos com detalhes, cada um dos arquivos gerados.


=== Fornecendo Suporte para Versões Alternativas de Wicket

A versão do Wicket incluída no plug-in do Wicket do NetBeans talvez não seja a que você precisa. Utilize as etapas abaixo para registrar e usar uma versão alternativo do Wicket.

1. Vá para Ferramentas | Bibliotecas Ant. Observe que os JARs do Wicket registrados pelo plug-in do Wicket do NetBeans estão disponíveis:

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


. Na caixa de diálogo mostrada acima, clique em Nova Biblioteca e crie uma nova biblioteca com um nome começando com "Wicket". Adicione JARs à biblioteca, isto é, registre os JARs de sua versão preferida do Wicket na biblioteca criada.


. 
Na próxima vez que você criar uma nova aplicação web ou quando você adicionar suporte do Wicket a uma aplicação existente, o painel Frameworks exibirá sua biblioteca recém-registrada, se seu nome começar com a palavra "Wicket":

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

Quando você concluir o assistente, os JARs registrados na biblioteca selecionada serão colocados no classpath de sua aplicação.

*Observação:* a abordagem acima aplica-se às aplicações Wicket baseadas em Ant. Se quiser usar uma versão alternativa do Wicket em uma aplicação baseada em Maven, altere o arquivo POM relevante.


=== Examinando a Estrutura do Código-fonte da Aplicação Wicket Gerada

O assistente da Aplicação Web do IDE criou vários arquivos. Verifique os arquivos e veja como eles se relacionam dentro do contexto de um desenvolvimento de Wicket.

1. Vamos começar nosso tour de arquivos gerados.

* *Descritor da Web.* Começamos olhando o arquivo  ``web.xml`` , que é o descritor de implantação geral comum para todas as aplicações web que está de acordo com a especificação do Servlet. Expanda a pasta  ``WEB-INF``  ou a pasta Arquivos de Configuração, abra o arquivo em uma view XML bruta e observe a definição do filtro 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>
----

*Observação:* o valor do nome da classe da aplicação é definido como  ``com.myapp.wicket.Application`` . Na próxima etapa, abriremos o arquivo de classe da aplicação e inspecionaremos seu conteúdo.

* *Classe da Aplicação Wicket.* Abra o pacote  ``com.myapp.wicket``  na pasta Pacotes do Código-fonte e, em seguida, abra o arquivo  ``Application.java`` . Parecerá com este:


[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;
    }

}
----

Este é o arquivo Java que fornece definições da aplicação, comparáveis a  ``struts-config.xml``  no framework Struts e  ``faces-config.xml``  no Framework JSF. Observe a definição do método  ``getHomePage()`` . Este método é o requisito mínimo da classe da aplicação. Ele especifica a primeira página (a home page) que será exibida quando você implantar a aplicação. Observe que  ``HomePage.class``  foi retornada. Na próxima etapa, abriremos o arquivo  ``HomePage.java``  e inspecionaremos seu conteúdo.

* *Home Page do Wicket.* Abra  ``HomePage.java`` . Parecerá com este:


[source,java]
----

package com.myapp.wicket;           

public class HomePage extends BasePage {

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

}
----

O arquivo adiciona um label à home page. A conversão de widgets de Wicket criados neste arquivo é feita em um arquivo com o mesmo nome na mesma estrutura de código-fonte, que somente pode ser  ``HomePage.html`` , que parece com o seguinte, atualmente:


[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>
----

Observe que no  ``HomePage.java``  estamos estendendo  ``BasePage`` . Em  ``HomePage.html``  temos um atributo  ``wicket:id``  que nos informa que ele é um placeholder para algo criado em algum lugar por um arquivo Java. Além disso, temos uma referência para a folha de estilos de CSS que o IDE gerou. Você pode localizá-la na pasta Páginas Web, na janela Projetos. Na próxima etapa, abriremos  ``BasePage``  e examinaremos seu conteúdo.

* *Página Base.* Abra  ``BasePage.java`` . Parecerá com o seguinte:


[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"));
    } 

}
----

Esta é a classe para a qual queremos que nossas páginas web se estendam. Cada classe que se estender para  ``BasePage``  herdará uma instância de  ``HeaderPanel``  e de  ``FooterPanel`` . Isso garante que todas as nossas páginas web terão o mesmo cabeçalho e o mesmo rodapé. O HTML da página base é o seguinte:


[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>
----

Na próxima etapa, abriremos  ``HeaderPanel.java``  e examinaremos seu conteúdo.

* *Painel Cabeçalho.* Abra  ``HeaderPanel.java`` . Parecerá com o seguinte:


[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));*
    }

}
----

Observe a linha em negrito acima. Aqui, criamos um widget Label do Wicket. O Painel Cabeçalho é um componente reutilizável. Esta é a parte do Java na qual os widgets são criados. Em seguida, examinaremos a parte do HTML, que é o local no qual o widget do Label de Wicket pode ser convertido. Na próxima etapa, abriremos o arquivo  ``HeaderPanel.html``  e examinaremos seu conteúdo.

Agora altere o segundo argumento para "Minha Primeira Aplicação Baseada no Componente", de forma que a definição do Label agora seja a seguinte:


[source,java]
----

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

Abra  ``HeaderPanel.html`` . Observe que ele tem o mesmo nome do arquivo Java que acabamos de verificar. É encontrado dentro da mesma estrutura de pacote. Parecerá com o seguinte:


[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>
----

Observe a linha em negrito acima. Esta é a forma como você especifica onde um widget deve ser convertido na parte de HTML de uma página web. Segure a tecla Ctrl e mova seu mouse para o valor do atributo  ``wicket:id``  na tag  ``span`` . Observe que o valor torna-se um hiperlink:

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

Clique no hiperlink e observe que a parte Java da página Web é aberta.

Agora clique na seta esquerda na parte superior do Editor de Código-fonte para voltar à página HTML:

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

Desta forma, você pode navegar de forma rápida e eficiente entre as duas partes dos componentes do Wicket.

* *Painel Rodapé.* A estrutura do painel rodapé é igual à do painel cabeçalho, descrita acima.


. 
Clique com o botão direito do mouse no projeto e execute-o. O IDE compila a aplicação, cria um arquivo WAR, envia-o para o servidor de implantação, abre o browser default do IDE e exibe a aplicação:

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

*Observação:* certifique-se de que "/wicket" foi acrescentado ao URL, conforme mostrado acima, que mapeia o URL para o filtro Wicket registrado no arquivo  ``web.xml`` .


== Usando Funcionalidades do Wicket

Nas próximas seções, você aprenderá sobre as três funcionalidades do Wicket e como o NetBeans IDE as suporta no plug-in do Wicket do NetBeans:

* <<widget,Widget>>
* <<component,Componente Reutilizável>>
* <<ajax,Suporte ao AJAX>>

As seções abaixo também introduzem várias funcionalidades de suporte que o plug-in do Wicket do NetBeans disponibiliza.


=== Adicionando um Widget

Nesta seção, criaremos nosso primeiro widget no Wicket. Como a maioria de outros artefatos no Wicket, um widget tem uma parte Java e uma parte HTML. Na parte Java, o widget é criado. Na parte HTML, ele é convertido. Como mostrado anteriormente, a navegação entre duas partes é possível por meio de um hiperlink.

1. Abra  ``HomePage.html`` . Se a Paleta não for aberta automaticamente, abra-a por meio de Janela > Paleta (Ctrl-Shift-8).

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


. Após adicionar uma linha abaixo do elemento H1 no arquivo HTML, arraste o item Label da Paleta e solte-o abaixo do elemento H1. Você verá a caixa de diálogo abaixo:

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

Altere os valores da caixa de diálogo para o seguinte:

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

Clique em OK. Observe que a tag em negrito abaixo foi adicionada ao arquivo:


[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>
----

Agora você pode preparar o widget recém-adicionado, por exemplo, usando as tags H3:


[source,xml]
----

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

Em seguida, abra  ``HomePage.java``  e observe que um label foi adicionado, com o mesmo identificador do arquivo HTML (alterações em *negrito*):


[source,java]
----

public class HomePage extends BasePage {

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

}
----


. 
Salve os arquivos. Altere o browser e você verá o Label do Wicket, convertido no arquivo  ``HomePage.html`` :

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

Você pode criar placeholders, como a tag criada no arquivo  ``HomePage.html``  e, em seguida, utilizar o arquivo HTML em seu web designer. Enquanto o web designer cria a página web, você pode trabalhar na parte Java e criar os widgets completamente independentes. Como as tags HTML não são incorporadas no arquivo Java, você e o web designer podem obter os benefícios do foco central do Wicket de "separação de interesses".

Abra o Navegador (Janela > Navegação > Navegador), enquanto o arquivo HTML acima é selecionado no editor e, em seguida, você poderá ver uma visão geral das tags, na lista "Tags do Wicket" do Navegador:

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

Se não houver tag correspondente na página HTML correspondente, consulte uma mensagem de erro no arquivo Java:

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


=== Adicionando um Componente Reutilizável

Um dos pontos fortes do Wicket é o conceito de "componentes reutilizáveis". Aqui, nesta seção, usamos um assistente para gerar um painel, que novamente tem uma parte de Java e uma de HTML. Criaremos este painel de forma que teremos um banner que será reutilizado em nossas páginas web, dessa forma o banner fica consistente com nosso site. Veremos como é fácil adicionar um painel a uma página web.

1. Clique com o botão direito do mouse no nó do pacote  ``com.myapp.wicket``  e escolha Novo > Outro. Em Categorias, selecione Web. Em Tipos de Arquivo, observe os seguintes modelos:

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

Escolha Painel Wicket e clique em Próximo.


. Digite  ``BannerPanel``  no Nome do Arquivo. Agora você deverá ver o seguinte:

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

Clique em Finalizar.

Observe que agora teremos dois arquivos novos em nosso pacote,  ``BannerPanel.html``  e  ``BannerPanel.java`` .


. Abra  ``BannerPanel.html``  e observe que o conteúdo do arquivo é o seguinte:


[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
----

Entre as tags  ``wicket:panel``  é encontrado um placeholder de Wicket. Remova a linha acima e abaixo da tag SPAN, de forma que a linha com a tag SPAN não seja mais comentada. Segure a tecla Ctrl, mova o mouse para o valor do id do Wicket e clique no hiperlink que for exibido. O arquivo  ``BannerPanel.java``  é aberto:


[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);
    }
}
----

Adicione um label, como você fez anteriormente no arquivo  ``HomePage.java`` , mostrado em negrito abaixo:


[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!"));*
    }
}
----


. Nosso painel, embora simples, já está concluído. Vamos adicioná-lo à home page. Abra  ``HomePage.java``  e, em seguida, crie uma nova instância de BannerPanel, adicionando a seguinte linha ao fim do Construtor:


[source,java]
----

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


. Em seguida, precisaremos converter o painel. Abra  ``HomePage.html``  e adicione a tag do placeholder direito acima da tag BODY de fechamento, certificando-se de usar o mesmo identificador de Wicket usado no arquivo Java:


[source,java]
----

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


. 
Execute o projeto novamente. Observe que o painel é exibido, exatamente onde o arquivo HTML especificado deve ser convertido:

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

Na terminologia Wicket, um painel é um componente reutilizável. Exatamente como mostrado nesta seção, você pode reutilizar o painel com a frequência que quiser e em quantas páginas web você quiser.


=== Adicionando Recursos AJAX

Em vez de usar JavaScript para adicionar funcionalidade da web assíncronas (por meio de link:http://en.wikipedia.org/wiki/Ajax_(programming)[+tecnologia AJAX+]) para uma aplicação de Wicket, o Wicket disponibiliza um modelo de componente Java que encapsula as funcionalidades do AJAX. A seguir você verá como alterar o BannerPanel para incluir um widget de preenchimento automático do AJAX, em vez do widget do label que você criou anteriormente.

1. Na parte do HTML da classe  ``BannerPanel`` , arraste um item de Entrada de Texto do AJAX da Paleta (Ctrl-Shift-8), conforme mostrado abaixo:

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

Solte o item abaixo do placeholder de Wicket existente, conforme mostrado abaixo:


[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>
----


. Na parte Java correspondente, observe que o seguinte foi adicionado automaticamente:


[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();
    }
};
----


. Pressione Ctrl-Shift-I e, em seguida, certifique-se de selecionar as instruções de importação corretas:

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

Clique em OK e certifique-se de que a classe  ``BannerPanel``  use as seguintes instruções de importação:


[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;
----


. 
Atualize o browser novamente e você terá um campo de preenchimento automático do AJAX. Conforme você digita, o campo será preenchido com países correspondentes ao texto digitado.

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


== Próximas Etapas

Este é o fim da introdução ao desenvolvimento de Wicket no NetBeans IDE. Você é incentivado a continuar sua jornada no framework de Wicket por toda a Amostra da Aplicação Pizza descrita em link:http://www.ensode.net/wicket_first_look.html[+A First Look at the Wicket Framework+] por David R. Heffelfinger. Observe que o resultado desse tutorial fica disponível como uma amostra no assistente Novo Projeto, junto com outras amostras, conforme mostrado aqui:

image::images/samples.png[] 

link:/about/contact_form.html?to=3&subject=Feedback: Introduction to the Wicket Framework in 7.2[+Envie-nos Seu Feedback+]


== Consulte Também

Para tutoriais relacionados ou mais avançados, consulte os seguintes recursos:

* link:../../docs/web/quickstart-webapps.html[+Introdução ao Desenvolvimento de Aplicações Web+]
* link:../../docs/web/quickstart-webapps-struts.html[+Introdução ao Struts Web Framework+]
* link:quickstart-webapps-spring.html[+Introdução ao Spring Web Framework+]