| // |
| // 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. |
| 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): |
| |
| 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. |
| |
| 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. |
| |
| image::images/maven-3.png[] |
| |
| 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. |
| |
| image::images/maven-4.png[] |
| |
| Clique em Finalizar. O IDE cria a estrutura de origem mostrada abaixo: |
| |
| image::images/maven-5.png[] |
| |
| 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: |
| |
| 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. |
| |
| 2. 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[] |
| |
| 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": |
| |
| 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. |
| 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: |
| |
| 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[] |
| |
| 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: |
| |
| 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!"));* |
| } |
| |
| } |
| ---- |
| 3. |
| 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. |
| |
| 2. 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`` . |
| |
| 3. 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!"));* |
| } |
| } |
| ---- |
| 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: |
| |
| |
| [source,java] |
| ---- |
| |
| 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: |
| |
| |
| [source,java] |
| ---- |
| |
| <span wicket:id='bannerPanel'/> |
| ---- |
| 6. |
| 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> |
| ---- |
| 2. 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(); |
| } |
| }; |
| ---- |
| 3. 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; |
| ---- |
| 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. |
| |
| 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+] |