webstencils demo

Demoção WebStoncys

A Delphi 12.2 introduziu o WebStoncys, uma maneira baseada em scripts de processar texto semelhante à tecnologia ASP.NET RAZOR. Seu uso principal é gerar HTML dinâmico a partir de um aplicativo de servidor WebBroker, mas pode ser usado de outras maneiras para gerar XML, JSON ou qualquer tipo de saída textual a partir de um modelo.

Este repositório contém alguns aplicativos muito simples do Delphi 12.2 WebBroker (executado como programas Windows VCL que lançam um navegador da web) para comparar modelos feitos com as tags de estilo HTML usadas nos componentes TWebStencilsProcessor TPageProducer Todos os arquivos do projeto e HTML estão em uma pasta e os dois projetos compartilham um módulo de dados para acessar o banco de dados SQLite Chinook (não incluído).

Existem cinco páginas em cada aplicativo, feitas para parecer idênticas, para que você possa se concentrar na tecnologia de modelo:

1. Índice (apresenta uma página de login)
2. Erro de login
3. Lista de clientes (lista os clientes em uma tabela)
4. Editar do cliente (apresenta uma página de edição para o cliente selecionado)
5. Uma página de erro (para prevenir o acesso não autorizado)

Os arquivos HTML mencionados pelos dois projetos são nomeados para deixar claro com qual projeto/tecnologia eles trabalham:

Modelo PageProducedor tradicional Arquivos HTML:

• index-wbroker.html
• loginfailed-wbroker.html
• custlist-wbroker.html
• custedit-wbroker.html
• accessdenied-wbroker.html

Novos arquivos HTML de modelo de webstomncils:

• index-wStencils.html
• login-failed-wStencils.html
• custlist-wStencils.html
• custedit-wStencils.html
• accessdenied-wStencils.html
• custlistframework1.html

Observe que há mais um arquivo na coleção WebStoncys, é um modelo de estrutura para cada página da web gerada a partir das ações da WebStoncys e é combinada das cordas de cabeçalho e rodapé incorporadas nos produtores de página usados no projeto tradicional do WebBroker.

Construindo os projetos

Antes de tentar compilar ou executar, você deve baixar o banco de dados de amostra Chinook. Este é um banco de dados popular usado para tutoriais e demos e pode ser encontrado em muitos lugares diferentes. Eu uso o DBeaver, uma ferramenta de banco de dados gratuita e encontrei que ela é enviada com isso.

Depois de ter o chinook.db na mesma pasta que o projeto, você precisa abrir o módulo de dados (usado por ambos os projetos), udmCust e modificar o componente TFDConnection para especificar o local do arquivo de banco de dados. Eu também sugeriria o uso de uma ferramenta de banco de dados ou o Data Explorer da Delphi para visualizar as tabelas no banco de dados.

O Delphi 12.2 foi usado para criar e testar esses programas (que não usam componentes de terceiros).

Executando as demos

Ambas as demos são criadas como programas de GUI do Web Server Windows, o que significa que eles são executados como um pequeno programa do Windows VCL que abre uma porta para ouvir solicitações da Web com um botão para iniciar seu navegador da Web padrão. A versão PageProduces ouve na porta 8081 e a versão webstegishs ouve na porta 8082 para que você possa executar as duas coisas simultaneamente, se quiser.

A primeira página listada é uma página de login. Um login válido deve ser inserido antes de levá -lo à lista de clientes. Um login válido é qualquer usuário na tabela de funcionários onde:

• O nome de usuário é o FirstName , insensível ao caso;
• A senha é uma concatenação do EmployeeId e do LastName , sensível ao caso.

Por exemplo, a primeira entrada no banco de dados de amostra que eu baixei teve o seguinte primeiro funcionário:

• ID : 1
• FirstName : Andrew
• LastName : Adams

Portanto, para fazer login com este funcionário:

• Nome de usuário: ANDREW (caixa superior ou inferior ou mista)
• Senha: 1Adams (exatamente)

Depois de conectado, a lista de clientes é mostrada. O ID de cada cliente (coluna mais à esquerda) é um link que o leva a uma tela "Editar" que lista todos os campos de clientes em caixas de edição. O botão Enviar não salva alterações ou faz outra coisa senão levá -lo de volta à lista de clientes.

Nomes de tabela

Eu usei dois bancos de dados de amostra "Chinook" diferentes, um tinha nomes de mesa singulares (por exemplo, "cliente" e "funcionário"), enquanto o outro tinha plural (por exemplo, " clientes " e " funcionários "); Se o que você recebe for diferente do que neste repositório, basta alterar os nomes e consultas da tabela para corresponder.

Por que tabelas html?

A lista de clientes foi criada usando as tags de tabela HTML antigas ( <table> , <tr> , <td> , etc.), porque essa é a maneira simples e padrão que os aplicativos antigos do servidor WebBroker criados usando os componentes do TDataSetTableProducer foram realizados. A nova versão do WebStoncys cria o mesmo resultado HTML para que você possa comparar como é feito e as páginas da web resultantes serão quase idênticas. Os sites modernos normalmente constroem tabelas de estilo CSS, um benefício que pode ser realizado mudando de DataSettableProducers para WebStoncys.

Blog

Leia meu blog "Apresentando WebStoncys" para saber mais sobre a tecnologia por trás desses programas e por que o WebStoncys é legal!