Um template é um modelo ou estrutura predefinida que serve como base para criar ou formatar algo de forma consistente e eficiente. Ele pode ser usado em diversos contextos permitindo personalização sem a necessidade de criar algo do zero. Templates ajudam a padronizar processos e economizar tempo, fornecendo diretrizes ou formatos reutilizáveis.

Um template de markdown é um arquivo pré-formatado que serve como um modelo base para criar documentos com cabeçalhos, listas, tabelas e outros elementos de formatação, permitindo que os usuários preencham apenas os dados necessários sem precisar reformatar o texto. Neste tutorial, será apresentada uma solução para a criação de templates para markdown utilizando o componente Editor de Texto Rico funções de blocos de programação.

Pré-requisitos

Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.

1. Projeto do tipo web e mobile criado. Caso haja dúvidas de como criar esse tipo de projeto, acesse a documentação Criar projeto.
2. Utilizar as funcionalidades do diagrama, como criar classes e gerar persistência. Caso haja dúvidas, acesse a documentação Diagrama.
3. Criar blocos de programação. Caso haja dúvidas, acesse as documentações Bloco de programação e Criando blocos cliente customizados.

Passos

Configurando o diagrama

Vamos dar início ao nosso tutorial criando duas novas classes no Diagrama de dados, que será utilizada para armazenar o template no formato de texto rico (HTML), juntamente com os campos disponíveis que poderão ser utilizados diretamente no Editor de Texto Rico. Para começar, siga essas etapas: primeiro expanda o menu do tópico Diagrama de Dados e clique duas vezes no arquivo app (destaque 1 da Figura 1).

Criaremos duas classes com os seguintes atributos: a classe Template deve conter os atributos id, name e templateHTML, todos do tipo Texto, enquanto a classe TemplateField deve conter os atributos, id, name e fieldName, também do tipo Texto. Após a criação das classes, gere a camada de persistência (destaque 2).

Figura 1 - Classes "Template" e "TemplateField" no Diagrama de Dados

Criando as views

Agora vamos criar as views dessas classes clicando com o botão direito do mouse sobre cada uma delas e selecionando a opção "Criar visão para a entidade" (destaque 3 da Figura 1). Ao gerar a view da classe Template, na tela "Campos da Grid" selecione apenas o campo name e, na tela "Campos do Formulário", marque os campos name e templateHTML. Já para a classe TemplateField, em ambas as telas, selecione os campos name e fieldName.

Após a criar a visão da classe "Template", realizaremos algumas edições na view criada. Inicialmente adicione, abaixo do componente entrada de texto "Name" (destaque 1 da Figura 2), o Editor de Texto Rico (destaque 2). Em seguida, ajuste a propriedade "Valor" do Editor para Template.active.templateHTML (3). Este componente permitirá a criação e edição dos templates de forma personalizada.

Por fim, adicione um componente Grade (4) acima do Editor de Texto Rico. Essa grade deve estar vinculada à fonte de dados "TemplateField" e configurada para exibir apenas o campo name, que pode ser renomeado para "Campos". Além disso, a grade deve conter um botão de ação personalizado, que será responsável por inserir o campo markdown desejado diretamente no Editor de Texto Rico. Para esse botão, utilize a função e a descrição apresentada na Figura 2.1.

Figura 2 - Edição da view "template"

Criando os blocos de programação

No botão customizada da grade apresentada no destaque 4 da Figura 2, utilizamos a função da imagem abaixo (Figura 3).  

Figura 3 - Função utilizada no botão "Adicionar campo" da Grade