Conheça o Apache Click

Escreva aplicativos da Web rapidamente usando um modelo leve livre de estruturas pesadas

Conheça o Apache Click, uma estrutura de aplicativo da Web da plataforma Java™, Enterprise Edition (Java EE) que possibilita a criação de aplicativos da Web sem usar padrões Model-View-Controller (MVC) ou JavaServer Pages (JSP). Este artigo fornece exemplos da exibição de uma página da Web simples e da criação de um formulário da Web que envia dados que são exibidos em uma página da Web diferente.

Nathan A. Good, Senior Information Engineer, Freelance Developer

Nathan GoodNathan A. Good vive na área de Twin Cities em Minnesota. Profissionalmente, ele realiza desenvolvimento de software, arquitetura de software e administração de sistemas. Quando não está gravando software, ele gosta de construir PCs e servidores, ler sobre e trabalhar com novas tecnologias e tentar convencer seus amigos de migrar para software livre. Ele escreveu e foi co-autor de muitos livros e artigos, incluindo Professional Red Hat Enterprise Linux 3, Regular Expression Recipes: A Problem-Solution Approach e Foundations of PEAR: Rapid PHP Development.



10/Mar/2010

Os exemplos mostrados neste artigo exigem que você tenha o Eclipse instalado, bem como um servidor de aplicativo da Web. Os exemplos usam especificamente o Tomcat 6.0, mas outros servidores de aplicativo da Web, como o WebSphere® Application Server Community Edition, Jetty ou versões anteriores do Tomcat também devem funcionar. Se você não possui um servidor de aplicativo da Web instalado, consulte Recursos para fazer download e instalar o Apache Tomcat 6.0 ou o WebSphere Application Server Community Edition.

Visão geral do Apache Click

O Apache Click é uma estrutura de aplicativo da Web que permite criar aplicativos da Web em Java rapidamente. O objetivo do Apache Click é fornecer um método para criar aplicativos da Web sem usar JSPs ou estruturas MVC, o que pode ser difícil para alguns aplicativos da Web. O Apache Click é licenciado com a Apache License (consulte Recursos).

Em vez de uma estrutura pesada, o Apache Click usa modelos HTML e plain old Java objects (POJOs). Os modelos HTML são processados pelo mecanismo de modelo Apache Velocity (consulte Recursos para saber mais sobre o Apache Velocity), que tem como objetivo tornar os modelos o mais próximo possível de HTML padrão sem exigir tags especiais. Modelos do Velocity não exigem uma forte curva de aprendizado para sintaxe e permitem aos desenvolvedores da Web aproveitar habilidades de HTML existentes.

Os POJOs herdam das classes de base fornecidas pela distribuição do Apache Click. O Apache Click inclui uma Page e classes de componente para as quais você escreve subclasses para implementar o código que realiza o processamento para cada página. Esses componentes fornecem funções prontas para uso que permitem criar controles HTML e responder a eventos.

O Apache Click também inclui uma API para teste simulado, que possibilita um melhor teste da unidade, construções de integração contínua e test-driven development (TDD). Consulte Recursos para saber mais sobre a Mock API.


Componentes do Apache Click e manipulação de evento

A classe org.apache.click.Page é a classe de base para cada componente da página. A classe de base Page contém métodos que permitem manipular eventos quando a página é iniciaizada (onInit()), renderizada (onRender()) e para segurança da página (onSecurityCheck()). Nas suas classes que ampliam Page, é possível substituir esses métodos para fornecer funções personalizadas. Cada classe que amplia Page também pode conter métodos que manipulam eventos na página.

É possível criar páginas stateful implementando a interface java.io.Serializable e chamando o método setStateful() da classe de base Page no construtor (consulte a Listagem 1).

Listagem 1. Configurando a propriedade stateful no construtor
    public WelcomePage() {
        setStateful(true);
    }

O Apache Click vem com diversos componentes de controle que correspondem a elementos HTML. Esses componentes de controle permitem configurar programaticamente formulários adicionando controles dinamicamente. Usando esses controles, é possível obter e configurar dados de controle HTML programaticamente no seu código Java.

Usando o método setEventListener() de controles de campo (ou seja, TextField, Select), é possível definir um método na classe Page estendida que executa durante o processamento do formulário, se a entrada nos campos for válida.

Botões e links também fornecem manipulação de evento. Você pode criar um novo botão enviar em um formulário e vincular o botão a um método na classe Page usando a declaração mostrada na Listagem 2.

Listagem 2. Criando um botão enviar com o manipulador de evento onClick
Submit submitButton = new Submit("Submit Me", this, "onClick");

Quando o botão é clicado, o evento é enviado para a o método onClick() da classe Page customizada. Qualquer código que esteja no método onClick() é executado, incluindo código para salvar os dados para um banco de dados ou para encaminhar para uma nova página.

Para ler mais sobre a API, consulte Recursos.


Modelos do Apache Click

Por padrão, o Apache Click usa o mecanismo de criação de modelos Apache Velocity. Esses modelos são combinados automaticamente com as classes que estendem Page no seu aplicativo usando algumas regras de mapeamento padrão. Por exemplo, uma classe page chamada HelloPage automaticamente mapeia o arquivo HTML chamado hello.html no seu projeto da Web. Uma página chamada HelloWorldPage automaticamente mapeia para uma página chamada helloWorld.html ou hello-world.html.

Se você não gosta do mapeamento de página padrão, é possível alterá-lo modificando o arquivo click.xml para adicionar seu próprio mapeamento personalizado.

Junto com o mapeamento de página que o Velocity usa, é possível decidir não usar o Velocity como seu mecanismo de criação de modelo. O Apache Click permite usar JSPs para renderizar, o que pode ajudar a usar os JSPs existentes.


Fazendo download do Apache Click.

Faça download do Apache Click a partir do Web site (consulte Resources). Após o download, extrai o arquivo compactado (.zip) para um local fácil de lembrar.

Se você deseja ver os exemplos que vem com o Apache Click, é possível implementar o arquivo click-examples.war a partir da pasta dist do servidor de aplicativo da Web. Os exemplos incluem muitos cenários diferentes, como construção de tabelas, uso de diferentes controles e uso de diferentes modelos.

Após o download e extração dos arquivos, você está pronto para criar um aplicativo da Web que inclua as bibliotecas Apache Click.


Importando o Apache Click.

Instale o Apache Click colocando os arquivos Java Archive (JAR) necessários no seu projeto da Web. Após incluí-los no projeto da Web, implemente seu projeto para servidor de aplicativo da Web.

Para criar um aplicativo da Web que use o Apache Click usando o Eclipse, siga estas etapas:

  1. Selecione New > Other no menu do Eclipse.
  2. Em Select a Wizard, selecione Web / Dynamic Web Project e clique em Next.
  3. Digite um nome para Project Name (por exemplo, MyFirstClick).
  4. Selecione um Target Runtime, como Apache Tomcat 6.0. Consulte Recursos para saber mais sobre a configuração de tempos de execução para o Eclipse.
  5. Clique em Finish—é possível deixar os valores padrão os campos restantes.

Após concluir essas etapas, você deve ter um novo projeto da Web vazio no Eclipse (consulte a Figura 1).

Figura 1. O projeto da Web vazio
Screenshot showing the directories in the empty web project.

Agora é possível importar as bibliotecas Apache Click. Use as seguintes etapas para importar as bibliotecas:

  1. Clique em File > Import.
  2. Selecione General / File System a partir da lista e clique em Next.
  3. Navegue para o diretório no qual extraiu os arquivos Apache Click e selecione o diretório dist.
  4. A partir da lista de arquivos, selecione os arquivos click-{version}.jar e click-{version}-extras.jar (consulte a Figura 2).
    Figura 2. Importando os arquivos JAR
    Window showing click-2.0.1-incubating.jar and click-extras-2.0.1-incubating.jar selected.
  5. Certifique-se de que a pasta WebContent/WEB-INF/lib está selecionada no campo Into folder antes de clicar em Finish.

Agora que você tem os arquivos JAR no diretório WEB-INF, modifique o arquivo web.xml do aplicativoda Web para incluir ClickServlet, que é o único servlet usado pelo Apache Click para despachar eventos. Depois da configuração desse servlet, não será mais necessário modificar o arquivo web.xml para usar os exemplos mostrados neste artigo. Os conteúdos do web.xml são mostrados na Listagem 3.

Listagem 3. O arquivo web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" 
		xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
		http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">
    <display-name>MyFirstClick</display-name>

    <servlet>
        <servlet-name>ClickServlet</servlet-name>
        <servlet-class>org.apache.click.ClickServlet</servlet-class>
        <load-on-startup>0</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>ClickServlet</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>welcome.html</welcome-file>
    </welcome-file-list>

</web-app>

Agora crie um pacote no qual irão suas classes page (por exemplo, com.example.myfirstclick.pages). Após a criação do pacote, crie um novo arquivo chamado click.xml na pasta WEB-INF do seu projeto da Web. Coloque o nome do pacote que acaba de criar no arquivo click.xml, como mostrado na Listagem 4.

Listagem 4. O arquivo click.xml
<?xml version="1.0" encoding="UTF-8"?>
<click-app>
    <pages package="com.example.myfirstclick.pages" />
</click-app>

Construindo um aplicativo de amostra

Agora que seu projeto está configurado, você está pronto para começar a escrever classes que estendem as classes do Apache Click. Sua primeira classe estende a partir de Page, que é a classe de base para todos os seus componentes page. Crie a nova classe no pacote criado selecionando File > New > Other e selecionando Java / Class. Certifique-se de inserir org.apache.click.Page como Superclass.

Adicione os conteúdos mostrados na Listagem 5 à sua nova classe.

Listagem 5. A classe WelcomePage
package com.example.myfirstclick.pages;

import org.apache.click.Page;

public class WelcomePage extends Page {

    // Initialize the value to something
    protected String theMessage = "Welcome!";

    public WelcomePage() {
        // Add the value to the map ("message" = "$message")
        addModel("message", theMessage);
    }
}

Agora que você criou a classe WelcomePage, é necessário criar uma página HTML que seja o modelo para a saída para o navegador. Porque o mecanismo de modelo padrão para o Apache Click é o Apache Velocity, o arquivo HTML será similar a uma página HTML estática normal.

Crie a nova página HTML—called welcome.html—na pasta WebContent do seu projeto da Web e adicione o conteúdo como mostrado na Listagem 6.

Listagem 6. O arquivo welcome.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MyFirstClick Welcome</title>
</head>
<body>
<p>$message</p>
</body>
</html>

Observe a variável $message no novo arquivo HTML. Essa é uma variável que é substituída pelo mecanismo de modelo Velocity quando a página é gerada. O ClickServlet combina a classe WelcomePage com o arquivo welcome.html. A classe WelcomePage inicializa seu campo de mensagem para um valor (Welcome), então, no construtor, adiciona-a ao modelo usando o método addModel() enviando o nome da variável (message mapeia para $message) e o valor (o campo theMessage). O valor atribuído ao campo é exibido no navegador.


Executando o mesmo aplicativo

Agora que os arquivos foram criados, é possível testar o aplicativo exportando os arquivos como um Web Archive (WAR) para a pasta webapps do Tomcat. A maneira mais fácil de fazer isso é seguir estas etapas usando o Eclipse:

  1. Clique no projeto e selecione File > Export.
  2. Selecione o arquivo Web / WAR e clique em Next.
  3. No campo Destination, navegue para a pasta webapps do Tomcat.
  4. Certifique-se de que Overwrite existing files está selecionado e clique em Finish (consulte a Figura 3).
    Figura 3. Exportando o projeto como um WAR
    Window showing MyFirstClick as the Web project.

Depois de exportar o arquivo WAR para o diretório webapps do Tomcat, é possível navegar para a nova página direcionando o navegador para http://localhost:8080/MyFirstClick/welcome.html (URL pode varia se o servidor de aplicativo da Web estiver ligado a uma porta diferente ou se você escolher um nome diferente para o aplicativo da Web).

Experimente com essa amostra modificando o valor do campo de mensagem em WelcomePage e reimplementando-o no servidor do aplicativo da Web. Quando vir o valor mudar, você está pronto para um exemplo mais dinâmico.


Construindo um formulário

Agora que você realizou uma página de boas-vindas simples, está pronto para fazer algo um pouco mais complicado. Poucos Web sites dinâmicos consistem em apenas dados somente leitura—a maioria deles requer entrada do usuário em algum ponto e fazer algo com essa entrada do usuário. Um exemplo típico é um formulário que aceita entrada e então mostra ao usuário uma página da Web diferente com a entrada exibida.

Para ver esse exemplo, crie outra classe que estenda Page. Chame essa nova classe de InputPage (consulte a Listagem 7).

Listagem 7. A classe InputPage
package com.example.myfirstclick.pages;

import org.apache.click.Page;
import org.apache.click.control.Form;
import org.apache.click.control.Submit;
import org.apache.click.control.TextField;

public class InputPage extends Page {

    public Form form = new Form();

    private TextField nameField;

    public InputPage() {

        form.setLabelsPosition(Form.POSITION_TOP);

        nameField = new TextField("Enter your name");

        form.add(nameField);
        form.add(new Submit("Submit", this, "onSubmitClick"));

    }
    
    public boolean onSubmitClick()
    {
        SayHelloPage nextPage = (SayHelloPage)getContext().createPage("/sayHello.html");
        nextPage.setName(nameField.getValue());
        
        setForward(nextPage);
        
        return false;
    }

}

A nova classe configura um objeto Form no construtor e adiciona um campo a ele para entrada. Então a classe adiciona um botão enviar HTML com um manipulador (o método onSubmitClick()). O manipulador executa quando o botão enviar é pressionado, assim, no manipulador, a classe deve configurar a próxima página. Até que a próxima página seja adicionada (ou seja, SayHelloPage), o código não irá compilar.

Agora crie um novo arquivo HTML e chame-o de input.html na pasta WebContent do seu projeto da Web. Coloque uma variável $form na página, que será substituída pela saída HTML do campo de formulário na classe InputPage. Quando terminar, o arquivo input.html deve ser semelhante à Listagem 8.

Listagem 8. O arquivo input.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MyFirstClick Input Sample</title>
</head>
<body>
$form
</body>
</html>

Agora adicione a página que exibe a entrada como outra classe chamada SayHelloPage, garantindo que também estende a partir de org.apache.click.Page. A nova classe deve ser semelhante àquela na Listagem 9.

Listagem 9. A classe SayHelloPage
package com.example.myfirstclick.pages;

import org.apache.click.Page;

public class SayHelloPage extends Page {

    private String name;
    
    @Override
    public void onInit()
    {
        super.onInit();
        
        if (name != null)
        {
            addModel("name", name);
        }

    }
    
    public void setName(String name) {
        this.name = name;
    }    
    
}

Essa classe substitui o método onInit() da classe de base Page para configurar os valores que são exibidos na página. Lembre-se de adicionar verificações para nulo para qualquer valor que adicionar ao modelo com o método addModel()—se você tentar adicionar um valor nulo, ele lança uma IllegalArgumentException. Isso o força a certificar-se de que escreveu código que exibe a página adequadamente se os valores forem nulos.

O campo de nome em SayHelloPage é exposto com um getter público, setName(). Esse acessador é chamado de volta no método de manipulador de evento onSubmitClick() na InputPage após obter uma nova instância da página.

Erros com "No path configured..."

Quando executei meu código pela primeira vez, obtive um erro do ClickServlet que disse "No path configured for Page class: com.example.myfirstclick.pages.SayHelloPage." O problema era que eu estava enviando SayHelloPage.class para createPage() sem ter a página configurada no click.xml. Quando alterei para /sayHello.html, funcionou bem. Isso acontece porque o Apache Click por padrão mapeia para arquivos com extensões .jsp e .htm, e escolhi .html como minha extensão.

O método onSubmitClick() define o nome usando o valor do controle nameField (nameField.getValue()). Então o encaminho para a página usando o método setForward(). O resultado é que o campo de nome em SayHelloPage é preenchido com o valor da caixa de entrada e colocado em $name.

Agora adicione um arquivo HTML, chamado sayHello.html, que contenha a variável $name. Os conteúdos do sayHello.html são mostrados na Listagem 10.

Listagem 10. A página sayHello.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Results</title>
</head>
<body>
<p>Hello, $name!</p>
</body>
</html>

Para executar esse exemplo, direcione seu navegador da Web para http://localhost:8080/MyFirstClick/input.html. Insira um valor na caixa de texto e aperte Submit. Seu valor agora é exibido no navegador.


Resumo

Usando o Apache Click, é possível escrever aplicativos da Web rapidamente usando um modelo leve livre de estruturas pesadas. A simplicidade do Apache Click possibilita-lhe usar as suas próprias práticas e padrões de programação orientada a objeto. O mecanismo de criação de modelo padrão, o Velocity, permite que o código HTML permaneça mais fiel a especificações HTML não exigindo tags customizadas.

O modelo de evento e componente no Apache Click fornece um método de criação de controles HTML e manipulação de eventos que possui uma baixa curva de aprendizado.

Recursos

Aprender

Obter produtos e tecnologias

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre, Tecnologia Java
ArticleID=473623
ArticleTitle=Conheça o Apache Click
publish-date=03102010