Raphael Monroe.com » Tutoriais

Como criar repeating views no Wicket

Raphael Monroe — Tue, 20 Apr 2010 17:41:14 +0000

Muitas vezes desejamos criar uma tabela/lista para melhor visualizarmos informações relevantes para nosso negócio. Seja via banco de dados, seja via listas criadas dinamicamente, podemos construir facilmente essas tabelas utilizando o Wicket.

Portanto, nosso artigo de hoje mostrará como uma tarefa relativamente custosa em alguns frameworks, se torna de fácil execução ao desenvolvermos com o Wicket.

Imaginemos então, a simples situação:

Uma empresa possui uma base de dados na qual grava informações a respeito de seus clientes. Há a necessidade de criar uma interface web para listagem de todos os clientes da base.

Para isso, consideramos a classe Cliente, como segue:

Client.java

public class Client implements Serializable {
 
    private String name;
    private String gender;
    private int age;
 
    public Client(String name, String gender, int age) {
        this.name = name;
        this.gender = gender;
        this.age = age;
    }  
 
    public int getAge() {
        return age;
    }
 
    public void setAge(int age) {
        this.age = age;
    }
 
    public String getGender() {
        return gender;
    }
 
    public void setGender(String gender) {
        this.gender = gender;
    }
 
    public String getName() {
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }

A lógica de execução do nosso “aplicativo” estará dentro do nosso index, como segue:

Jindex.java

public final class JIndex extends WebPage {
 
    private List<Client> clients;
 
    public JIndex() {
        super ();
        clients = new ArrayList<Client>();
        loadClients();
        fillTable();
    }
 
    /**
     * Responsável por preencher uma lista de objetos Cliente.
     * Normalmente, essa lista é formada por objetos do BD. No nosso exemplo,
     * preencheremos livremente.
     */
    private void loadClients(){
        //Adicionando 4 clientes à lista...
        clients.add(new Client("Raphael", "male", 23));
        clients.add(new Client("Adriana", "female", 23));
        clients.add(new Client("Romualdo", "male", 42));
        clients.add(new Client("Josefina", "female", 37));
    }
 
    /**
     * Responsável por criar o dataview utilizando elementos de uma lista.
     * No caso a lista antes preenchida "clients".
     */
    private void fillTable(){
        //Cria um dataview com id "clientsList", recebendo os elementos de clients...
        DataView dataview = new DataView("clientsList", new ListDataProvider(clients)){
 
            @Override
            protected void populateItem(Item item) {
                //Objeto client que será representado por cada linha...
                Client client = (Client) item.getModelObject();
                //Insere na linha o nome do cliente...
                item.add(new Label("clientName", client.getName()));
                //Insere na linha o sexo do cliente...
                item.add(new Label("clientGender", client.getGender()));
                //Insere na linha a idade do cliente...
                item.add(new Label("clientAge", String.valueOf(client.getAge())));
            }
 
        };
 
        //Adiciona o dataview à webpage...
        add(dataview);
    }
}

No Wicket, quando criamos uma classe ( que herda de WebPage ), devemos criar o html correspondente. Caso ainda não saiba os conceitos principais sobre o framework, acesse o artigo “Bem-vindo(a) ao Wicket – Framework Java WEB“.

Segue o html correspondente:

JIndex.html




    
        
        Teste Dataview
        
    
    
        
            
                Name
                Gender
                Age

Repare nas linhas 16,17,18,19. É nelas que referenciamos nossos componentes adicionados no .java. Além disso, atente-se para os tipos de tags html usados, isto é, referenciamos o dataview na tag tr(linha) e os Labels dentro das td’s (colunas) através da tag span.

Basta rodar agora a sua aplicação para conferir o resultado. Lembrando que para o JIndex seja chamado na execução do programa, devemos possuir o Application conforme segue:

JApplication.java

public class JApplication extends WebApplication{
 
    public Class getHomePage() {
        return JIndex.class;
    }
 
}

Não esqueça de deixar seu comentário em caso de dúvida!

[]s

Bem-vindo(a) ao Wicket: Framework JAVA Web.

Raphael Monroe — Wed, 14 Oct 2009 22:08:19 +0000

Inicio aqui, uma série de tutoriais sobre o Wicket, este maravilhoso framework com o qual venho tendo enorme prazer em trabalhar. Fornecendo incríveis facilidades para o desenvolvimento Web em JAVA, o Wicket vem se tornando um dos melhores da categoria.

Minha idéia é seguir a linha de raciocínio que utilizei durante a minha aprendizagem. Entretanto, isso não significa que sou um expert, intocável e mestre Wicket. Ainda estudo e aprendo dia após dia. Portanto, ao constatarem erros, fiquem à vontade para comentar sobre eles. Assim, juntos buscaremos sempre as melhores soluções.

A motivação inicial pra a série de tutoriais foi a falta de documentação, pois o Wicket é relativamente novo e, portanto, ainda carece de tutoriais, exemplos e discussões. Espero, com os artigos, difundir um pouco mais as informações sobre o framework porque “tudo que é bonito é pra se mostrar” .

Pois bem, antes de fazermos uma breve introdução sobre o Wicket, gostaria de citar as referências mais utilizadas por desenvolvedores que utilizam o framework atualmente.

Apache Wicket: Site oficial do projeto. Apresenta introdução, documentação sobre alguns componentes e exemplos de utilização.

Reference Library: Pertence ao site oficial. Explica como fazer várias coisas com o Wicket. Uma boa pedida para os iniciantes. Vale a pena conferir.

Wicket in Action: Ótimo livro para quem deseja inicar os estudos. Apresenta uma boa didática. com vários exemplos. O autor vai, durante o livro, construindo um aplicativo para venda de queijos online. Com este exemplo, os leitores aprendem fácil e rapidamente os conceitos importantes do framework.

Wicket Stuff: Possui exemplos e vários projetos relacionados ao Wicket. Podemos encontrar alguns bons componentes para utilizarmos em conjunto com o framework.

Atualmente, existem diversos frameworks para programação JAVA Web, cada qual possuindo prós e contras. Assim, no princípio de um novo projeto, vários programadores chegam a ficar um tanto quanto preocupados no momento da escolha do melhor framework, dadas as inúmeras alternativas, conforme podemos ver na figura a seguir:

Figura 1: Frameworks Web

Uma possível pergunta pode surgir: “Bom Raphael, se existem tantas opções, porque escolher o Wicket?”

Peço a permissão de responder essa pergunta explicando alguns termos como stateful, stateless e também sobre clareza de código e separação coerente entre os “dois mundos”, no caso, HTML e JAVA.

Creio que todos os interessados em programação já pararam pra pensar em como é fácil (leia-se menos difícil) se programar em Java, visando o desenvolvimento de aplicativos Desktop. A facilidade a que me refiro diz respeito ao controle de componentes/variáveis existentes no projeto. Podemos criar vários painéis/frames/modais sem a necessidade de controlar requisições entre elas. Isso porque, todo esse controle do estado da conexão é “automático”, ou seja, o estado da conexão é sempre mantido. Tal fato, caracteriza Statefull Programming.

Muitas vezes ao utilizarmos aplicações web, imaginamos que a programação é feita igualmente à Desktop. Ao contrário, o protocolo HTTP não fornece nenhuma facilidade “embutida” para continuar interações entre as páginas, ou seja, ele não possui nenhuma informação sobre o estado da aplicação (stateless). Tal tarefa fica a cargo do desenvolvedor.

A técnica comumente utilizada para controlar o estado é passar informações diretamente pela URL, por exemplo:

http://www.raphaelmonroe.com/index.php?page_id=3&opentab=5

O simples código acima ilustra a passagem de parâmetros visando um controle da aplicação. No caso, foi solicitada a página com ID=3 e nela, deve-se abrir a aba 5.

Mas como tudo apresenta falhas, passar informações pela URL possui vários questionamentos à respeito de segurança/autenticação e, nos dias de hoje, é difícil imaginar uma aplicação web, na qual todos os estados são controlados por parâmetros no endereço.

Creio que quase todos os desenvolvedores JAVA Web, iniciaram seus estudos e projetos (e ainda continuam) seguindo o caminho : Servlets, JSP, JSF, Facelets, RichFaces e por ae vai. Um dos motivos que levam os desenvolvedores para essa estrada, é a quantidade de informações/documentação/exemplos existentes na web. Evidencia-se aqui, um grande problema para os desenvolvedores : a falta de conhecimento teórico.

Em muitos fóruns que frequento, me deparo com inúmeras dúvidas que poderiam ser respondidas com um mínimo de conhecimento teórico. Assim, desenvolvedores vêm utilizando exemplos da net para “aplicações sérias” no âmbito corporativo, sem ao menos se preocuparem com o que estão fazendo, “remendando” e “arresorvendo na gambiarra”, literalmente. Não estou aqui crucificando frameworks e/ou programadores, só estou alertando para o fato de que “teoria é preciso”.

Como falei em JSF, gostaria de indicar um dos melhores posts que já vi à respeito: “O que todo bom desenvolvedor JSF deveria saber”

Bom, mas porque falar em clareza de código? No site oficial do Wicket, encontramos a seguinte frase à respeito do desenvolvimento em JSP, tendo em vista a presença de código JAVA + HTML :

JSP is by far the worst offender, allowing the embedding of Java code directly in web pages, but to some degree almost all of the frameworks from the list (except Tapestry) above introduce some kind of special syntax to your HTML code.

A evolução das empresas de TI contribui para maiores “divisões” em projetos. A idéia de Webmasters, os quais faziam design, código, etc já está ultrapassada. Hoje, encontramos designers, coders, testers, dentre outros. Aqui, evidencia-se um importante requisito: organização e clareza em todas as partes do projeto, visto que muitas empresas até mesmo terceirizam serviços de design. Portanto, quanto maior a separação entre HTML + CSS e JAVA, maior o rendimento e sucesso de um projeto.

Ao se programar com o Wicket, você esquece que está desenvolvendo um aplicativo web. Isso porque o desenvolvedor está livre para programar em JAVA com todos os conceitos de orientação a objeto, o qual é stateful. Ou seja, você estará desenvolvendo componentes stateful para um ambiente stateless!! WTF!!!
Essa é a grande “sacada” do Wicket. O controle do estado da aplicação é automático.

Um outro aspecto importantíssimo que me ajudou muito, é possibilidade de herança, tanto no JAVA quanto no HTML!!! Basta utilizarmos namespaces pré-definidos e compatíveis com xhtml.

Com o Wicket o controle é feito orientado à componentes e não à páginas. Tal fato visa facilitar os programadores desktop acostumados com o Swing e awt. Vale ressaltar também o fato de que você nunca verá “códigos lógicos” em páginas HTML, as quais apresentarão somente códigos estáticos, sendo a lógica totalmente desenvolvida em JAVA. Por exemplo, se você deseja imprimir na tela uma lista de clientes, basta o seguinte código HTML, ficando a definição do dataview para o código JAVA:

Para terminar e não deixar o post muito extenso, uma frase que resume bem os conceitos do Wicket, retirada do site oficial:

Wicket is all about simplicity. There are no configuration files to learn in Wicket. Wicket is a simple class library with a consistent approach to component structure. In Wicket, your web applications will more closely resemble a Swing application than a JSP application. If you know Java (and especially if you know Swing), you already know a lot about Wicket.

“Wicket é simplicidade. Não é necessário aprender a criar arquivos de configuração (como aqueles imensos xml’s de outros frameworks, pois com o wicket é tudo automático). Wicket é uma biblioteca que permite uma programação muito próxima á programação por componentes, pois com este framework, sua aplicação será mais parecida com uma aplicação Swing do que uma mesma JSP. Se você conhece Java (especificamente o Swing), você já possui grande conhecimento sobre o Wicket.”

Em próximos posts, iniciaremos nossos estudos através de exemplos práticos, abordando desde a configuração da IDE até a criação de suas primeiras aplicações utilizando o Wicket.

Até Mais,

[]’s

Vídeo Tutorial Windows 7 – Detalhes Visuais e Funcionalidades

Raphael Monroe — Tue, 19 May 2009 22:21:19 +0000

Boa tarde leitores,

Hoje, estou postando o seguinte vídeo tutorial, mostrando as novas funcionalidades do Windows 7. Tentei abordar as características pelas quais mais me interessei. Espero que através do vídeo, vocês tenham uma idéia sobre essa nova versão lançada recentemente pela Microsoft.

OBS: Essa versão instalada é a Release Candidate (RC) liberada pela Microsoft para livre download.

Tutorial PHP 5 – Construção de Layout – Parte 2

Raphael Monroe — Sun, 01 Jun 2008 23:45:20 +0000

Requisitos: Artigo “Tutorial PHP5 – Construção de Layout“.

Olá pessoal,

Seguindo com nosso tutorial de criação de layouts utilizando o php 5, iremos criar a classe “header”, a qual será responsável pela criação do cabeçalho do site(topo,imagem do topo, título e descrição).

Utilizarei CSS para o design. Se surgir alguma dúvida a respeito das regras utilizadas, poste seu comentário ou visite o site do maujor. Lá, você encontrará diversos artigos relacionados à criação e utilização de regras css.

Vamos ao código comentado:


 

 
//Criado por : Raphael Monroe Marcondes
// BLOG : www.raphaelmonroe.com
 
class head
{
	//construtor da classe...
	function __construct()
	{
	   //Chama a função de inclusão de início de código HTML...
	   $this->inclui_HTML();
	   //Chama a função de criação do topo...
	   $this->cria_topo();
	   //"Fecha" as tags HTML que foram abertas...
	   $this->fecha_tags();
	}
 
	function inclui_HTML()
	{
	    //HTML...
	   echo "\"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
	   echo "\"http://www.w3.org/1999/xhtml\">";
	   echo "";
	   echo "\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />";
	   //Título da página (será melhorado posteriormente a forma de dar títulos á suas paginas)...
	   echo "MINHA PÁGINA";
	   echo "";
	   echo "";	
	}
 
	function cria_topo()
	{
	   //Cria dois boxes, um que engloba todo o site e o outro sendo o topo.
	   echo "\"tudo\">";
	   echo "\"topo\">
";
	}
 
	function fecha_tags()
	{
	    //Fecha a a div "tudo"...
	    echo "
";
            echo "";
	    echo "";
	}
 
}	
?>

Salve o código acima como “head.class.php”.
Com essa nova classe, já podemos obter nossa primeira visualização de página!
Basta criar o index:


 
$index = new index();
 
class index
{
	function __construct()
	{
	  //Inclui as classes necessárias...
	  $this->inclui_classes();
	  //Criando a página index...
	  $this->constroi_index();
	}
 
	function inclui_classes()
	{
	    //Incluindo a classe layout...
	    include_once("layout.class.php");
	}
 
	function constroi_index()
	{
	    //Criando uma nova página através de layout...
	    $this->layout = new layout();
	}
}
?>

Salve o código acima como “index.php”.

Portanto, só para lembrá-los, até agora possuímos 3 arquivos : “layout.class.php”, “head.class.php” e “index.php”.

Basta agora, salvá-los na mesma pasta e abrir o index. Você obterá a primeira visualização da página!

OBS:Para conseguir “rodar” o index sem erros, é necessário comentar, na classe “layout”, as linhas que incluem as classes que ainda não foram feitas, como por exemplo, “menu_nav.class.php”.

Para facilitar, você pode baixar todas as classes(inclusive o “layout.class.php” com as linhas comentadas).
Lembrando à todos que estou tentando ser o mais direto possível. Qualquer dúvida é só postar seu comentário!

[]`s

Tutorial PHP 5 – Construção de Layout.

Raphael Monroe — Thu, 22 May 2008 21:14:17 +0000

Olá caros leitores,

Hoje abordarei como construir aplicações em php, utilizandoa idéia de classes e objetos.

Não vou, entretanto, abordar aspectos teóricos sobre classes e objetos nesse tutorial. Meu objetivo, neste primeiro tutorial da série, é mostrar os primeiros passos para construção de layouts utilizando orientação à objeto.

Então, mãos à obra! Nosso “desenho final” será um layout de três colunas, com menu de navegação, header e rodapé, como mostra a figura a seguir :

Layout que será construído

Iremos desenvolver, portanto, 7 classes : “layout”, “header”, “menu_nav”, “barra_esq”, “corpo”, “barra_dir”, “rodape”. Percebam que a classe “layout” será utilizada para “unir” todas as outras. Hoje, começaremos a desenvolver o código da classe layout.

 

 
//Criado por : Raphael Monroe Marcondes
// BLOG : www.raphaelmonroe.com
class layout
{
	//construtor da classe...
	function __construct()
	{
		//Chama a função de inclusão de classes necessárias...
		$this->inclui_classes();
		//Chama a função de inicialização de variáveis...
		$this->inicializa_variaveis();
	}
 
	//Função pra incluir todas as classes que precisaremos para o desenvolvimento 
	//do layout...
	function inclui_classes()
	{
		include_once("head.class.php");
		include_once("menu_nav.class.php");
		include_once("barra_esq.class.php");
		include_once("corpo.class.php");
		include_once("barra_dir.class.php");
		include_once("rodape.class.php");				
	}
 
	//Função responsável por criar objetos(instâncias) daquelas classes adicionais.
	//A partir de uma linha "$var = new objeto();", você cria um objeto que será
	//representado por $var.
	function inicializa_variaveis()
	{
		$this->head = new head();
		$this->menu_nav = new menu_nav();
		$this->barra_esq = new barra_esq();		
		$this->corpo = new corpo();
		$this->barra_dir = new barra_dir();
		$this->rodape = new rodape();
	}
}	
?>

Salve o código acima como “layout.class.php” utilizando o seu editor favorito.

O arquivo fonte pode ser baixado aqui.

Lembrando que se você rodar o código, nada acontecerá ainda. Estamos iniciando nossos trabalhos!

Aguardem os próximos posts!

Abraço.