Aplicações Web com Webbroker – Parte II

No primeiro artigo aprendemos a listar dados utilizando o componente DataSetTableProducer que produziu um código HTML automaticamente, para exibir os dados da tabela Country do banco de dados DBDemos.

Nesse artigo criaremos uma lista de dados, que servirá como a página principal de nossa aplicação e conterá links para a página de inserção de registro, de alteração e exclusão.

Abra a aplicação feita no artigo anterior. Clique no botão View Form (Shift+F12) e escolha o form WebModule1. Adicione um componente PageProducer da paleta de componentes Internet e mude sua propriedade Name para pgpLista. Esse componente serve para auxiliar na produção de um conteúdo HTML, partindo de um código HTML já existente, disposto em sua propriedade HtmlDoc, ou através da leitura de um arquivo HTML externo, conforme configuração da propriedade HtmlFile.

Para nosso artigo, vamos utilizar o HtmlFile que é o que normalmente acontece quando desenvolvemos para a web e possibilita que um webdesigner de profissão crie os leiautes das páginas e você, programador, faça efetivamente a programação da aplicação.

Para criar a página, utilize o software Dreamweaver, mas você pode utilizar seu editor HTML preferido. O leiaute da página deverá ficar igual a Figura 1.

Figura 1. Leiaute da Página Inicial

Note <#tabela> que significa uma Tag que o Delphi irá reconhecer e poderá colocar um conteúdo nesse lugar, substituindo-a. Para colocar essa Tag, se estiver usando o Dreamweaver, é necessário ir no editor de código senão os caracteres serão trocados para caracteres HTML, ficando “<#tabela>” e impedindo que o Delphi reconheça a Tag.

Salve o arquivo com o nome de lista.htm no mesmo diretório de sua aplicação.No Delphi, com o pgpLista selecionado, altere a propriedade HtmlFile selecionando o arquivo lista.htm, salvo anteriormente.

Agora, para o componente responder a página criada é necessário codificar o evento OnHtmlTag do componente pgpLista, verificando qual é a Tag e definindo seu conteúdo. Clique duas vezes no componente pgpLista para abrir o editor de código no evento citado e coloque o seguinte código:

Explicando o código

Como esse evento é chamado toda a vez que o Delphi encontrar uma Tag reconhecida por ele (<#nometag>) precisa-se, em primeiro lugar, verificar qual a Tag que foi encontrada. Para isso temos o If TagString. Pense nas possibilidades: pode-se ter vários locais na página que serão alterados pela aplicação Delphi, todas identificadas pelas Tags e com nomes diferentes.

Para colocar um conteúdo Html no local da Tag utilizamos a variável ReplaceText que, como o nome diz, substitui o texto pelo seu conteúdo. Como essa variável e do tipo String, estamos passando textos com conteúdos Html. Como às vezes é necessário fechar a linha de comando, na próxima linha temos que lembrar de adicionar o conteúdo, somando com o que já existe (ReplaceText:=ReplaceText+).

O While serve para ir do início ao fim da tabela, criando uma linha na tabela Html para cada registro. Não pense que sou um profundo conhecedor de código Html... Vou contar um truque para vocês: criei uma tabela no Dreamweaver e copiei seu código fonte para o Delphi, fazendo as alterações necessárias para apresentar as informações do cdsCountry.

Na coluna de ações criaram-se dois links: um para alterar e outro para excluir (criaremos essas ações nos próximos artigos).

Para continuar o desenvolvimento clique duas vezes no WebModule e adicione uma nova ação, clicando no botão Add New ou simplesmente pressionando a tecla Insert. Mude a propriedade Default para True e PathInfo para /inicial. Vá aos eventos e no OnAction codifique o seguinte:

Response.Content := pgpLista.Content;

Compile com o CTRL+F9 e teste sua aplicação. Para finalizar, vamos fazer os links Inicial e Incluir. Abra o arquivo lista.htm no seu editor Html, selecione o texto Inicial e coloque o link inicial. Selecione o texto Incluir e coloque o link incluir. Salve e de um Refresh no Browse, provando mais uma vez, que é possível alterar a página sem ter que recompilar a aplicação no Delphi.

Pronto, agora tem-se a página inicial de nossa aplicação funcionando. No próximo artigo, criaremos a alteração dos registros.

Figura 2. Página inicial da aplicação pronta