Delphi com Mustache {{ }}

Bom dia

Todos os dias programadores Delphi estão procurando formas de usar codigo delphi dentro do HTML.

hoje mostrarei como utilizar uma de templates com Mustache,

O Mustache (https://mustache.github.io), é uma implementação das marcações {{ }} que podem ser usado para trabalhamos arquivos HTML, e configuração, código-fonte ou  qualquer coisa. Ele funciona expandindo tags em um modelo usando valores fornecidos em um hash ou objeto.

É chamado de  “logic-less” (sem lógica) porque não há afirmações if, senão cláusulas ou para loops. Em vez disso, existem apenas tags. Algumas tags são substituídas por um valor, alguns nada e outros uma série de valores. (Fonte: Maual do Mustache5)

Mais de 40 linguagens de programação diferentes implementam  MUSTACHE.
Em Delphi  essa implementação foi feita dentro do projeto dmustache com parte de um projeto maior chamamdo Synopse’s mORMot (https://github.com/synopse).

O ponto forte de usarmos essa implementação é que conseguimos incluir facimenite objetos Delphi dentro de códigos HTML, veja este exemplo:

Template HTML

<html>
  <body>
    <p>Código:{{Pessoa.Id}} Nome:{{Pessoa.Nome}}</p>
</body>
</html>

Entidade Pessoa.Entity.pas

unit Pessoa.Entity;

interface
type
TPessoaEntity = class
private
FId: integer;
FNome: String;
public
property Id: integer read FId write FId;
property Nome: String read FNome write FNome;
end;

implementation

end.

Exemplo usando o DMVCFramework:

//
uses
Pessoa.Entity

procedure TControle.Pesssoa;
var
PessoaEntity: TPessoaEntity;
begin
PessoaEntity := TPessoaEntity.Create;
PessoaEntity.id := 1;
PessoaEntity.Nome := ‘Marcos J O Nielsen’;
PushObjectToView(‘Pessoa’, PessoaEntity);
LoadView([‘model_index’]);
RenderResponseStream;
end;

Ao executar a URL o sistema exibirá no lugar de

Código:{{Pessoa.Id}} Nome:{{Pessoa.Nome}}

Os valores

Código:1 Nome:Marcos J O Nielsen

Com pouco esforço e Misturando (Delphi+ HTML+ JS+ CSS) conseguimos fazer facilmente implementação ricas!

como essa:

datatable

https://datatables.net/examples/advanced_init/object_dom_read.html

Até a próxima

 

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

WordPress.com.

Acima ↑

%d blogueiros gostam disto: