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.

Conteúdo

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
NetBeans IDE Java EE 7.2, 7.3, 7.4, 8.0
Java Development Kit (JDK) versão 7 ou superior
Plug-in de Wicket para NetBeans IDE 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: Adicionando Suporte Para um Framework da Web.
  • Para obter mais informações sobre Wicket, consulte http://wicket.sourceforge.net/. Para a página de desenvolvimento do Wicket no NetBeans IDE, consulte 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:

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:

    frameworks 1

    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.
  5. 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):

Janela Projetos Iniciais.

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.

    HTML do hiperlink.

    Clique em Próximo.

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

    HTML do hiperlink.

    Clique em Próximo.

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

    HTML do hiperlink.

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

    HTML do hiperlink.

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

  5. 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:

    HTML do hiperlink.

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.

    HTML do hiperlink.

    Clique em Próximo.

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

    HTML do hiperlink.

    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:

    Bibliotecas Ant

  2. 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.
  3. 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":

    Bibliotecas Ant

    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:

      <?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:

      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:

      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:

      <!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:

      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:

      <!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:

      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:

      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:

      <!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:

      HTML do hiperlink.

      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:

      Parte Java do hiperlink.

      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.
  2. 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:

    primeira implantação.

    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:

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

    Parte Java do hiperlink.

  2. 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:

    Parte Java do hiperlink.

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

    Parte Java do hiperlink.

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

    <!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:

    <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):

    public class HomePage extends BasePage {
    
        public HomePage() {
            add(new Label("message", "Hello, World!"));
            add(new Label("message1", "Hello again, World!"));
        }
    
    }
  3. Salve os arquivos. Altere o browser e você verá o Label do Wicket, convertido no arquivo HomePage.html:

    paleta.

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:

navegador de wicket

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

A instrução de importação do label exibida clicando-se no ícone de lâmpada na margem esquerda.

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:

    modelos de arquivo

    Escolha Painel Wicket e clique em Próximo.

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

    modelos de arquivo

    Clique em Finalizar.

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

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

    <?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:

    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:

    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!"));
        }
    }
  4. 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:

    add(new BannerPanel("bannerPanel"));
  5. 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:

    <span wicket:id='bannerPanel'/>
  6. Execute o projeto novamente. Observe que o painel é exibido, exatamente onde o arquivo HTML especificado deve ser convertido:

    nova implantação

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

    modelos de arquivo

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

    <?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>
  2. Na parte Java correspondente, observe que o seguinte foi adicionado automaticamente:

    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();
        }
    };
  3. Pressione Ctrl-Shift-I e, em seguida, certifique-se de selecionar as instruções de importação corretas:

    modelos de arquivo

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

    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;
  4. 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.

    modelos de arquivo

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

modelos de arquivo


Consulte Também

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

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2018, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo