Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido por Eduzz.com
Dedico este livro à minha família, aos meus amigos e todos que compartilharam um
pouco do seu conhecimento.
E a você, que a partir deste trabalho, busca ampliar seu conhecimento.
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido por Eduzz.com
Agradecimentos
Gostaria de agradecer ao Marcelo Giratto pelos ensinamentos e paciência no
início de minha jornada no desenvolvimento com IntraWeb; ao Chad Z. Hower, pela
confiança e convite para fazer parte de um grupo seleto de programadores que utilizam
e compartilham conhecimento de IntraWeb pelo mundo.
Agradeço também ao Dalton Coberta e ao Francisco Dueñas, pelas inúmeras
vezes que esclareceram minhas dúvidas. E ao Jackson Gomes e o Ederson Selvati por
suas contribuições com a comunidade Delphi, postando vídeos e realizando cursos.
Em especial, agradeço ao José Nilton Pace, por ter aceito meu convite para
participar dessa obra. Obrigado por contribuir com sua experiência e conhecimento na
criação de aplicações utilizando exclusivamente IntraWeb. Agradeço também ao
Eduardo Zanon e a Melissa Gobatti por permitirem o compartilhamento de parte de
seus trabalhos.
Por fim, agradeço a todos que direta ou indiretamente contribuíram para meu
aperfeiçoamento no desenvolvimento com o IntraWeb.
“Quem tem prazer em compartilhar o conhecimento que possui, aprende ainda mais, ao contrário,
mostra-nos aquilo que é obvio; a pessoa que não compartilha ou menospreza o conhecimento é porque
ouviu, mas ainda não aprendeu nada”
Léo Rodrigues (Espírito Santo)
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido por Eduzz.com
Sobre o Autor
Wallace Lara de Oliveira é desenvolvedor apaixonado por Delphi e inovações
tecnológicas. Sempre com o desejo de criar inovações para facilitar o desenvolvimento
e disposto a compartilhar seus conhecimentos com o outro. Iniciou na área de
programação com Delphi no curso técnico em 2005; em 2015 iniciou a graduação em
sistemas de informação, quando teve a oportunidade de ministrar um mini curso Delphi
na faculdade, ainda no segundo período. Essa experiência abriu as portas para o
trabalho em uma empresa pioneira no desenvolvimento de sistemas Delphi para postos
de gasolina, oportunidade que trouxe muito aprendizado para a carreira de
programador. Por suas contribuições e compartilhamento de conhecimento em
IntraWeb, em agosto de 2018, foi convidado por Chad Z. Hower da Atozed, para
participar do TeamZed1.
1
TeamZed é composto por insiders IntraWeb. A adesão é apenas por convite e consiste em longo prazo
e os usuários IntraWeb mais ativos. Atozed TeamZed é semelhante ao programa de MVP da Microsoft
Embarcadero ‘s TeamB.
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido por Eduzz.com
Sumário
Agradecimentos................................................................................................................ 3
Sobre o Autor.................................................................................................................... 4
Introdução ........................................................................................................................ 7
IntraWeb ..................................................................................................................... 9
Bootstrap ........................................................................................................................ 10
Case de sucesso .............................................................................................................. 11
Template Admin Bootstrap ............................................................................................ 18
Componentes Bootstrap ................................................................................................ 21
5.1 – Buttons ............................................................................................................. 21
5.2 – Cards................................................................................................................. 24
5.3 – Inputs ............................................................................................................... 25
5.4 - Form Control Sizeng.......................................................................................... 25
5.5 - Textarea ............................................................................................................ 26
5.6 – Select ................................................................................................................ 27
5.7 - Modal ................................................................................................................ 27
5.8 - Table.................................................................................................................. 29
Estruturação de Pastas ................................................................................................... 31
6.1 Pasta do projeto .................................................................................................. 32
6 .2– Pasta Bin ........................................................................................................... 32
6.3 – Pasta Project .................................................................................................... 34
6.4 – Source .............................................................................................................. 34
Pattern (Arquivos padrão) .............................................................................................. 36
7.1 – Template - Pattern ........................................................................................... 36
7.2 – Source - Pattern ............................................................................................... 36
7.2.1 – Formulário base ............................................................................................ 36
7.2.2 – Formulário Base Lista .................................................................................... 38
Configurando ambiente Front-end................................................................................. 40
8.1 – Configurando pasta templates ........................................................................ 40
8.2 – Configurando arquivo base HTML ................................................................... 41
Configurando o ServerController ................................................................................... 44
Configurando o UserSession........................................................................................... 46
Configurando Ebook.template ....................................................................................... 47
11.1 – Codificando GetLibHeadPage ........................................................................ 48
11.2 – Codificando GetLibFooterPage ...................................................................... 52
Configurando o projeto para utilizar o eBook.Componentes.Templates ...................... 56
12.1 – Configurando UserSession ............................................................................. 56
12.2 – Configurando FrmBase................................................................................... 56
Criando a Tela de Login .................................................................................................. 57
Criando a Tela Dashboard .............................................................................................. 67
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido por Eduzz.com
Criando Lista de Usuários ............................................................................................... 79
Criando Cadastro de Usuários ........................................................................................ 88
Criando API com IntraWeb ............................................................................................. 98
17.1 – Criação de um novo TcontentHandler ........................................................... 98
17.2 – Explicando a implementação ......................................................................... 99
17.2 – Demo ............................................................................................................ 100
Considerações finais ..................................................................................................... 101
Referências bibliográficas ............................................................................................. 102
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido por Eduzz.com
Capítulo 1
Introdução
Com a evolução tecnológica que está acontecendo, em que tudo está indo para
internet, muitos se perguntam “Como vamos fazer?”. Principalmente empresas e
programadores que dominavam o mercado de softwares desktop com sistemas
desenvolvidos em Delphi. Aplicações estas que contêm de sistemas simples às
automações mais complexas e módulos como “frente de loja/PDV”. Com essa evolução
não temos outra escolha, precisamos transformar nossos sistemas desktop em sistema
web.
Sei que existe diversas linguagens web, por isso mesmo alguns vão se perguntar
o porquê de não mudar direto para Angular, Vuejs, React ou até mesmo Php! Eu te
respondo: tempo e curva de aprendizado. Mas com certeza destaco a otimização do
tempo.
Neste livro vou ensinar um pouco do que apreendi nesses dois anos de
programação utilizando IntraWeb, como migrar sua aplicação desktop com o mínimo
esforço possível e aproveitando cerca de 70% do seu código.
“70% do meu código?”
Sim, isso mesmo! O back-end no desenvolvimento com IntraWeb é todo feito em
Delphi como estamos acostumados a fazer. Apenas implementaremos um pouco de
JAVASCRIPT e teremos um front-end que será um template comprado ou desenvolvido
por você, caso tenha conhecimento de Bootstrap, CSS e JAVASCRIPT para criar interfaces
intuitivas e com um belo design.
“Falando dessa forma parece fácil!”
Sim, é fácil mesmo! Basta ter apenas um conhecimento básico de HTML e
JAVASCRIPT. Ah! Uma coisa muito importante na utilização de template: é necessário
entender um pouco de cada classe CSS que for utilizar do template escolhido. Mas se
você não sabe nada sobre isso, esse e-book vai mostrar como trabalhar com template
AdminLTE , pois teremos exemplos práticos passo a passo.
Neste livro não abordarei, instalação do IntraWeb! Partirei do pressuposto que
seu Delphi Community Edition está devidamente com IntraWeb instalado.
7
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
por Eduzz.com
Outro requisito importante é utilizar o IntraWeb atualizado devido às grandes
mudanças já realizadas, por exemplo, os novos callbacks que utilizaremos para a criação
do Datatable server-side.
Temos um mundo de possibilidades com IntraWeb! Esta é a conclusão a que
cheguei a partir da minha experiência com desenvolvimento nessa linguagem. Podemos
fazer o que quiser com IntraWeb, seja um erp, um e-commerce, chat, API ou replicar
qualquer coisa que seja desenvolvida para web. E isso com um desenvolvimento muito
mais rápido e com pouco esforço. Você vai entender a expressão “otimizando o
desenvolvimento em minutos”, com uma base que pode ser utilizada para a criação de
qualquer outra aplicação e que eu ensino nesse e-book. Com a base criada, basta
replicar a tela de listagem e de crud e fazer os ajustes necessários.
8
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
por Eduzz.com
IntraWeb
O IntraWeb, que se encontra na versão 15.2.15, é um framework mantido pela
Atozed Software, e tem como objetivo simplificar o desenvolvimento de aplicações web
com Delphi. Com ele é possível criar sistemas simples ou complexos para web,
integrando frameworks e bibliotecas.
Atualmente são dois valores de licenças pagas, uma de 199 € (cento e noventa e
nove euros), com atualização de 6 meses e outra de 399 € (trezentos e noventa e nove
euros), com atualização de 12 meses.
Site da Atozed - https://www.atozed.com/IntraWeb/
Grupo no Facebook - https://www.facebook.com/groups/IntraWebBR
Grupo no Telegram (Português) - https://t.me/IntraWebPT
Grupo no Telegram (Inglês) - https://t.me/IntraWebEn
9
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
por Eduzz.com
CAPÍTULO 2
Bootstrap
Muitos que já se aventuraram no desenvolvimento com IntraWeb puro sabem
do design rústico. Porém, com o decorrer do tempo os programadores Delphi
conheceram e começaram a utilizar um framework chamado Bootstrap que leva uma
aplicação IntraWeb a outro nível, como veremos em algumas ilustrações de sistemas
feitos em IntraWeb.
“Mas o que é esse Bootstrap?
“
Ele é um framework de código aberto para desenvolvimento de componentes de
interface front-end para sites e aplicações web utilizando HTML, CSS e JAVASCRIPT, se
baseado em modelo de design para tipografia, melhorando a experiência do usuário e
deixando seu site ou aplicação mais amigável e responsivo. O Bootstrap foi lançando em
2011 e atualmente se encontra na versão v4.5.2 de acordo com o site getbootstrap.
Link para documentação do Bootstrap
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Recomendo também a leitura e prática utilizando os exemplos da w3schools
https://www.w3schools.com/bootstrap/bootstrap_ver.asp
E, por fim, recomendo a leitura sobre a nova versão do Bootstrap 5
https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/
10 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 3
Case de sucesso
Como o título mesmo já diz - Um mundo de possibilidades utilizando IntraWeb veremos a seguir sistemas variados, dos mais simples aos complexos, que utilizaram
templates admin para criar aplicações com interfaces intuitivas e economizar tempo na
criação de telas e componentes HTML. E temos a vantagem de criarmos apenas um
formulário totalmente responsivo para atender qualquer tamanho de dispositivo.
Nos cases ilustrados abaixo teremos:
➢ um sistema de helpdesk;
➢ um sistema de gestão para autopeças utilizando comunicação rest para
emissão de notas fiscais com certificado A3;
➢ um sistema de e-commerce;
➢ um API de boletos
➢ um API para download de xml;
➢ um sistema com inumeradas integrações, como mercado livre, receita
federal, correios, viacep, Telegram, Whatsapp e muito mais.
Figura 1 - disponível em: https://www.atozed.com/IntraWeb/nggallery/image/img_5a5930ef1536f
11 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 2 - disponível em : https://www.atozed.com/IntraWeb/nggallery/image/img_5a5930ef1536f
Figura 3 - disponibilizada por Wallace Oliveira
Figura 4 - Disponibilizada por Wallace Oliveira
12 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 5 - Disponibilizada por Wallace Oliveira
Figura 6 -Disponibilizada por Eduardo Zanon
Figura 7 - Disponibilizada por Eduardo Zanon
13 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 8 - Disponibilizada por Eduardo Zanon
Figura 9 - Disponibilizada por Melissa Gobatti
Figura 10 - Disponibilizada por Melissa Gobatti
14 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 11- Disponibilizada por Melissa Gobatti
Figura 12 - Disponibilizada por José Nilton Pace
Figura 13 - Disponibilizada por José Nilton Pace
15 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 14 - Disponibilizada por José Nilton Pace
Como evidenciado nas imagens, podemos criar sistemas com designs incríveis.
Inclusive, no sistema mostrado na Figura 05, além de um design moderno existem duas
integrações simples que foram realizadas para facilitar o dia a dia da empresa que o
utiliza. A primeira interação é passar o CNPJ a ser cadastrado para o webservice da
receita federal, para consumir o resultado via Json e carregar em seu formulário. Já a
segunda, passa o cep correspondente ao cadastro para o webservice da viacep e carrega
os dados. É possível realizar integrações com qualquer serviço de API, na Figura 05 foram
apresentadas duas integrações gratuitas.
Figura 15 - Disponível em: https://www.w3schools.com/bootstrap/bootstrap_ver.asp
16 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
No site w3schools, temos a possibilidade de conhecer como implementar
diversos componentes que utilizamos no dia a dia com Delphi para web.
No Delphi temos o Object Inspector que nos apresenta todas as propriedades
disponíveis do componente, por outro lado na web muitas dessas propriedades são
divididas em classes.
Para declarar um componente no Delphi, simplesmente arrastamos e soltamos
o objeto dentro do formulário. Com isso, conseguimos ver todas as propriedades desse
objeto pelo Object Inspector. No desenvolvimento com IntraWeb também
encontraremos muitas propriedades no Object Inspector, não se apavorem!
Quando falamos em desenvolvimento web com programadores Delphi, muitos
ficam receosos com a complexidade da criação de componentes web e sua utilização.
No entanto, da mesma forma que temos no Delphi o “arrasta e solta”, na web
encontramos centenas de exemplos prontos para implementarmos utilizando “Crtl+C e
Ctrl+V”, alguns desses exemplos estão disponíveis no w3schools e GitHub.
A seguir veremos um pouco sobre templates admin, posteriormente
apresentarei alguns componentes que mais utilizaremos no desenvolvimento com
Delphi e IntraWeb, porém em sua declaração HTML.
Abordarei como declarar os componentes web na criação de uma aplicação. Meu
intuito não é mostrar todos e sim os mais utilizados, para assim tentar quebrar esse
bloqueio que muitos têm quando o assunto é a migração do sistema para web.
17 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 4
Template Admin Bootstrap
Template Admin Bootstrap é um modelo de apresentação visual que contempla
vários componentes criados, facilitando sua implementação, seja ela criada em
IntraWeb ou em outras linguagens web.
Uma das maiores dificuldades dos programadores que utilizam IntraWeb é a
troca de template. Ao meu ver, isto ocorre porque muitos dos programadores Delphi
são receosos em relação a adaptação em uma nova linguagem e não se dispõem a busca
de novos aprendizados em desenvolvimento web. Porém, é necessário reconhecer a
necessidade de evoluirmos e nos adaptarmos a nova tendência de os sistemas serem
disponibilizados nas nuvens.
O template admin nos ajuda com o desenvolvimento de nossas aplicações
IntraWeb, pois ele possui uma infinidade de elementos HTML já pronto para a utilização.
Apresentarei alguns templates admin que possuem interfaces modernas para a criação
de aplicações web. Primeiramente, apresentarei aqueles gratuitos utilizados pela
comunidade IntraWeb.
Admin LTE2 – Bootstrap 3
Figura 16 - Disponível em https://AdminLTE .io/themes/AdminLTE /index2.HTML
18 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Admin LTE3 – Bootstrap 4
Figura 17 - Disponível em https://AdminLTE .io/themes/v3/
Os templates admin apresentados a seguir são pagos.
Admin Color – Bootstrap 4
Figura 18 - Disponível em https://seantheme.com/color-admin/admin/HTML/index.HTML
19 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Nifty – Bootstrap 4
Figura 19 - Disponível em https://themeon.net/nifty/v2.9.1/
Apresentei a vocês quatro templates repletos de recursos que, com pouco
esforço, possibilitam a criação de aplicações incríveis e com visual inovador. Nesses
templates temos tudo que precisamos para montar nossos formulários de cadastros e
listagem de dados, além de diversos elementos para criarmos dashboard de resultados,
impressionando assim nossos clientes.
Um segredo que ninguém te contou: se você não conhecer o seu template, ou
seja, as classes base que irá utilizar nas suas aplicações, você continuará sem saber como
trocar seu template ou mesmo como utilizá-lo. Por isso, vou dar alguns exemplos de
classes que você utilizará.
Para quem ainda não conhece o básico de HTML recomendo que, antes de tentar
implementar um template admin com IntraWeb, visite o site w3schools.com, e conheça
a estrutura e as classes dos componentes que irá utilizar no desenvolvimento de sua
aplicação (seja utilizando Bootstrap 3 ou o 4). Mas se você já tem domínio sobre o
Bootstrap sugiro que utilize a última versão, Bootstrap 5.
20 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 5
Componentes Bootstrap
5.1 – Buttons
O button tanto no Delphi quanto na web é simples de ser implementado. Existe
duas formas de implementar o evento no button utilizando o IntraWeb: click ou
asyncclick.
Na Figura a seguir temos o tipo de controle que representamos pela tag type e a
classe correspondente a implementação do botão:
Existem alguns tipos de controle do botão, para saber a respeito recomendo a
seguinte leitura: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/input
A tag Class= “btn” -> é a classe que define um botão no Bootstrap. Criada para
ser utilizada junto com o elemento <button>. Porém, é possível utilizar com outros
elementos, como as tags <a> e <input>.
A tag Class= “btn-primary” -> é uma classe que define o a cor a ser utilizada.
Conforme esquema representado a seguir.
A tag Class= “btn-lg” -> é a classe que define o tamanho do botão a ser
renderizado conforme o esquema abaixo:
21 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
A tag Class= “Active ou disable” -> é responsável por desabilitar ou não um botão.
Agora exemplificarei como é simples e fácil implementar e exibir um botão
utilizando o IntraWeb, vejamos:
➢ O primeiro passo é adicionar um botão (IWBUTTON) dentro do Delphi como
fazemos dentro de nossas aplicações desktop.
➢ O segundo passo é, no Objector Inspector, alterar a propriedade Caption e
adicionar o nome do botão a ser exibido. Em seguida, na propriedade CSS,
adicionar a classe btn btn-primary.
Se você deseja apenas fazer um teste para saber o resultado em formulário
limpo, conforme vou apresentar na Figura abaixo, siga os seguintes passos:
➢ Definir o Bootstrap a ser utilizado.
➢ Adicionar suas bibliotecas no extrahead do formulário de exemplo.
Lembrando que não estamos utilizando o template, apenas testando os
recursos nativamente.
22 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 20 - Declarando as bibliotecas do BS4 a serem utilizadas
Figura 21 - Adicionando o IWBUTTON no formulário Delphi
Figura 22 - Alterando as duas propriedades para exibir o IWBUTTON no formato web
Figura 23 - Resultado a implementação
23 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Destaco que este é um teste para o estudo de funcionamento do componente.
Na grande maioria das vezes, apenas adicionaremos a tag “ID”, que receberá o nome do
componente declarado no Delphi em maiúsculo, conforme o esquema a seguir.
A segunda opção é utilizar a {%IWBUTTON%}, desta forma ele herdará todas as
propriedades e eventos adicionados dentro do Object Inspector. Conforme apresentado
no evento de teste.
5.2 – Cards
Em geral, os cards são utilizados no HTML, dentro de container, para exibir algo
para o usuário de forma separada, com cabeçalho, corpo e rodapé.
Figura 24 - Implementação do Card
Implementar um card em IntraWeb é bem simples, como podemos ver o HTML
a seguir:
Para exibir esse card utilizando IntraWeb é necessário adicionar um componente
IWLABEL, alterar a propriedade RAWTEXT para true. Para implementação do exemplo
acima, deve ser adicionado três IWLABEL substituindo as palavras Header, Content e
Footer. Em seguida, no HTML, é preciso trocar os textos pelos nomes dos componentes
implementados
no
Delphi
(IWLABEL),
conforme
a
{%NOMEDOIWLABEL%}.
24 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
tag
de
exemplo
5.3 – Inputs
O input no HTML, nada mais é do que o famoso IWEDIT ou IWDBEDIT.
Figura 25 - Input/IWEdit
Figura 26 - Estrutura HTML dos inputs
No Delphi, adicionamos o componente IWEDIT ou IWDBEDIT e alteramos a
propriedade CSS, que estará vazia para form-control. Para exibirmos o componente no
HTML existe duas formas. A primeira e mais utilizada é adicionar a tag
{%IWEDITNAME%} ou {%IWDBEDITNAME%}. A segunda forma, é adicionar a tag name
e id no input, com o nome declarado no Delphi em maiúsculo, conforme esquema a
seguir.
Figura 27- Implementando ID e Name
5.4 - Form Control Sizeng
A propriedade Sizeng é utilizada para definir o tamanho do input a ser exibido,
conforme a Figura abaixo temos o padrão, sm e lg.
25 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 28 - Definição de tamanho dos inputs
No HTML abaixo é apresentada a forma que se deve declarar a propriedade de
tamanho do input, lembrando que deve ser declarado na propriedade CSS, dentro do
Delphi. Conforme esquema a seguir.
5.5 - Textarea
O Textarea no Delphi é conhecido como memo ou dbmemo. Porém, no IntraWeb
utilizamos o IWMEMO ou IWDBMEMO, devemos adicionar a classe form-control da
mesma forma que implementamos o input.
Para adicionar as linhas ao Textarea devemos incluir a uses IWHTMLTag no
evento OnHTMLTag e adicionar a seguinte linha de comando:
Figura 29- Adicionando Atag
A forma mais utilizada de declarar o IWMEMO no HTML é a inclusão da tag
{%IWMEMO%} ou {%IWDBMEMO%}.
Figura 30 - Exibição do Textarea
26 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 31 - Implementação do Textarea no HTML
5.6 – Select
O Select do mundo web é conhecido no Delphi como IWCOMBOBOX ou
IWDBCOMBOBOX. Para implementarmos podemos fazer da mesma forma que fazemos
no desenvolvimento Delphi, lembrando que temos que alterar a propriedade CSS para
form-control.
Podemos declarar o Select de duas formas. A mais utilizada é a implementação
de tags {%IWCOMBOBOX %} ou {% IWDBCOMBOBOX%}, com o nome do componente
declarado no Delphi. Ou usar o id e name conforme explicamos na implementação do
input. Se tudo estiver certo, o resultado será a Figura a seguir.
Figura 32- Exibição do Select - Combobox
Figura 33 - Implementação do Select no HTML
5.7 - Modal
Podemos utilizar o modal para exibir alertas ou mensagens dentro de nossa
aplicação, conforme veremos no modelo.
Para abrir o modal é preciso adicionar um botão no Delphi e no evento Asyncclick
implementar o código conforme o esquema:
27 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 34 - Exibição do Botão do Modal
Figura 35- Implementação do Botão, inserindo o JAVASCRIPT
Para exibir um modal conforme o modelo abaixo, recomendo criar um IWLABEL
para o título e para o corpo, alterar a propriedade rawtext para true, carregar as
informações desejadas no IWLABEL e fazer as substituições dos textos pelas tags
{%IWLABEL%} correspondente de cada IWLABEL.
Figura 36 - Exibição do modal
O esquema declarado no HTML é apresentado a seguir, em sua implementação
é necessário trocar os textos pelos IWLABEL declarados.
28 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 37 - Implementação do HTML no modal
5.8 - Table
Para utilizarmos tabela no INTRAWEB, podemos utilizar alguns componentes IWGRID, IWDBGRID, e recentemente lançado o IWJQGRID e o IWJQGRID. Ainda não
testei os componentes mais novos, porém recomendo a utilização dos mesmos. Isto
devido a paginação dos dados, para que funcione igual ao Datatable.
Um dos aspectos de maior dificuldade na implementação do CSS no IWDBGRID
que eu encontrei foi é a inclusão das classes CSS, devido a existência de duas
propriedades no Objector Inspector do IWDBGRID. Como estamos acostumados a
trabalhar apenas com a propriedades CSS do Objector Inspector para quase todos os
componentes, não nos atentamos a propriedade innerTableCSS, na qual devemos
declarar as devidas classes CSS.
Vejamos como é implementado a tabela no HTML a seguir.
29 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 38- Estrutura HTML da Tabela - Datatable
Figura 39 - Exibição da tabela - Datatable
Geralmente não utilizo os componentes da Atozed para criar minhas tabelas, ou
gero ele via função e devolvo para IWLABEL que renderiza o HTML gerado por minha
função ou utilizo meu próprio componente de Datatable que está em desenvolvimento
(ele pode ser baixado para teste no link do svn a seguir, utilizando para acesso o usuário:
aluno e a senha: aluno. SVN: https://autopartsbh.com.br:8443/svn/ebook ).
30 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 6
Estruturação de Pastas
Neste e nos próximos capítulos, veremos o quanto é simples trabalhar com
Delphi para web. As mudanças em nossa forma de desenvolver são poucas. Se você não
tem familiaridade com HTML, CSS e JAVASCRIPT, aconselho aprender e compreender o
básico dessas linguagens ou contrate alguém que faça a toda parte de Front-end, ou seja
a aparência de sua aplicação. Enquanto você só se preocupará com o back-end.
Entraremos agora em um assunto que vai mudar a sua forma de desenvolver
com IntraWeb, alguns já podem ter conhecimento, mas para a maioria deve ser
novidade. Irei ensinar como otimizei o desenvolvimento de minhas aplicações e todas
as configurações que não encontramos na internet, como por exemplo, as declarações
das classes nos componentes Bootstrap explicadas anteriormente.
Por muito tempo segui o que aprendi em um curso inicial, porém com percebi
que poderia mudar e desenvolver de forma mais rápida as minhas aplicações, conforme
veremos a seguir. Uma das primeiras etapas é estruturar as pastas da mesma forma que
vemos nas aplicações web.
A maiorias dos sistemas são compostos por mais de 70 % de listas e cruds
simples, com isso cheguei à conclusão que existe um padrão. Ainda que algumas vezes
tenha sua exceção. Com essa análise em mãos comecei a realizar testes de
desenvolvimento criando alguns modelos padrões para serem herdados, agilizando
assim grande parte do desenvolvimento.
Certamente aplicando o que já vimos até o momento e com o que iremos
aprender a partir de agora, seu desempenho com a criação de aplicativos e sistemas
IntraWeb mudará radicalmente.
31 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
6.1 Pasta do projeto
Nosso primeiro passo ao iniciarmos uma nova aplicação IntraWeb é criar três
pastas.
Figura 40 - Estrutura de pastas raiz
6 .2– Pasta Bin
Após criarmos as três pastas, entraremos dentro da pasta Bin e adicionaremos
as seguintes pastas:
Figura 41 - Subpastas da pasta Bin
A pasta Bin possuirá todo o arquivo final que deveremos subir para o cloud ou o
local onde for hospedar sua aplicação. Dentro desta pasta iremos adicionar duas pastas
que são obrigatórias no desenvolvimento com IntraWeb: template e wwwroot.
Inicialmente, não utilizava a pasta files, mas com o passar do tempo adicionei a
pasta files como obrigatória. Nela crio subpastas para organizar melhor todos arquivos
de minha aplicação que não são compartilhados com o usuário, conforme Figura a
seguir.
Figura 42 - Subpastas da pasta files
A pasta Config serve para guardar todos os arquivos de configuração de sua
aplicação. A pasta Clientes guarda tudo que é de clientes, por exemplo, certificado
32 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
digital, banco de dados. A pasta Report contempla todos os arquivos para gerar os
relatórios da aplicação.
Dentro da pasta template, que é obrigatória a criação no desenvolvimento com
IntraWeb, adotei como obrigatório a criação de pelo menos duas novas pastas,
dependendo da aplicação construída.
Figura 43 - Subpastas da pasta templates
Dentro da pasta admin estão todos os HTMLs de formulários de administração
da aplicação, podendo ou não ter novas subdivisões conforme apresentarei na pasta
app.
Figura 44 - Subpastas da pasta app
Na pasta app crio subpastas para dividir e facilitar a manutenção de cada HTML
de minha aplicação.
Descrevemos as pastas files e template, agora vamos falar sobre a pasta
wwwroot. Nesta pasta armazenamos tudo o que iremos compartilhar com nossos
usuários e todas as bibliotecas necessárias em nossa aplicação. Diferente de muitos
desenvolvedores, novamente tenho como padrão criar subpastas como a seguir.
33 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 45 - Subpastas da pasta wwwroot
Nesse caso, coloco na pasta administração, arquivos que disponibilizo para os
usuários que prestam suporte entre outros afins. A pasta cliente por sua vez, contém
arquivos gerados para o usuário e disponibilizado para download. Por fim temos a pasta
template, responsável por todos os arquivos compostos por nosso template, tendo por
sua vez as subdivisões necessárias para facilitar a manutenção e disponibilidade dos
arquivos.
Figura 46 - Subpastas da pasta template
6.3 – Pasta Project
A pasta Project armazena o projeto Delphi que, por sua vez, gera as pastas win32
ou win64, dependo de sua compilação do projeto. Nada a mais deve ser adicionado à
pasta Project.
6.4 – Source
A pasta Source armazena todos os fontes (.pas e .dfm) de cada formulário na
mesma estrutura utilizada na criação da pasta template, conforme podemos ver na
Figura abaixo.
34 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 47- Subpasta da pasta Source
35 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 7
Pattern (Arquivos padrão)
Atualmente, em meus desenvolvimentos crio a pasta Pattern, nela adiciono o
que é comum em toda a minha aplicação.
7.1 – Template - Pattern
Na pasta Pattern, dentro de template, eu crio dois arquivos que utilizo em todos
os formulários. Um arquivo master, responsável por toda a visão HTML e utilizando o
mínimo de biblioteca HTML e JAVASCRIPT, que utilizaremos em formulário de cadastro
ou páginas comuns que não dependem de outras bibliotecas. O arquivo masterlista
contém todos as bibliotecas do master, porém, adicionamos as bibliotecas do Datatable.
Figura 48 - Arquivos HTML padrão
Para facilitar a mudança de template, já com o master e masterlista prontos,
aconselho você a criar uma unit chamada de templates com uma função onde você
retorna os head e JAVASCRIPT que será adicionada no footer no HTML.
7.2 – Source - Pattern
Na pasta Pattern dentro de Source criaremos um formulário base e um
formulário base lista herdado de base.
Figura 49 - Formulários base
7.2.1 – Formulário base
O formulário base é responsável por conter todas as variáveis que vamos exibir
em toda a aplicação.
Para que possamos trabalhar com templates em nossas aplicações iremos
adicionar um componente TIWTEMPLATEPROCESSORHTML, o qual renomeamos para
36 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
TPS e vamos alterar as seguintes propriedades: MasterFromTag para FALSE e
RenderStyles para FALSE. Com essa alteração nossa aplicação estará pronta para
utilizarmos o admin template.
Depois de adicionar e configurar o TIWTEMPLATEPROCESSORHTML é necessário
ir na LayoutMgr do form e “linkar” o template conforme esquema a seguir.
Figura 50 - Linkando template ao formulário
Dentro do evento TPsUnknownTag, no formulário base, devem ser adicionadas
as seguintes tags:
Figura 51- Tags formulário base
Pode ser que exista outras formas de declarar tags, no entanto, o mais
importante é chegar a um resultado gastando o mínimo de esforço e criando uma base
que possa ser reaproveitada para a construção de qualquer outra aplicação.
As tags AppName, AppVersion, AppDataUpdate e PageTitle são variáveis globais
do tipo strings, declaradas no UserSession. Observação diferente do Delphi para
desktop: devemos criar todas as variáveis globais no UserSession.
37 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Analisando o código anterior, vemos que fiz referência apenas a algumas
variáveis globais que necessito utilizar em todos ou quase todos os formulários. Mas
podemos ter dezenas de variáveis, facilitando assim o nosso desenvolvimento.
Como já citado, adotei um padrão de criar tudo separado para facilitar a
manutenção. Então, além de criar pastas dividindo todo o projeto, crio units com
funções de responsabilidade, como por exemplo, a unit ebook.templates que possui a
função GetLibHeadPage () e GetLibFooterPage (). As funções devolvem as bibliotecas
utilizadas no head e footer das páginas HTML. Nessas funções passamos por parâmetro
o nome do template e o tipo de página. Temos alguns tipos de página: Blank, Login, Lista,
Crud). De acordo com cada tipo de página é carregado apenas os CSS e JAVASCRIPT
utilizado neste tipo de página, otimizando assim o carregamento da página. Quando
necessária a utilização de qualquer outra biblioteca, seja ela CSS ou JAVASCRIPT,
adiciono no HTML da página. Caso esteja utilizando um HTML Pattern, recomendo criar
um HTML específico para o formulário em desenvolvimento.
Uma dica super importante, apesar de utilizar um template admin, quando for
criar seus formulários foque em utilizar componentes nativos do Bootstrap, a não ser
que seja muito necessário utilizar uma classe ou algo personalizado do template.
Fazendo isso você terá uma aplicação em que a única tarefa a ser feita é adicionar as
bibliotecas na unit de templates.
Da mesma forma que temos problemas com a alteração de templates, podemos
ter com a troca de bibliotecas. Por isso crio units com funções para devolver as
bibliotecas conforme utilizamos na função GetHeadSweetAlert2. Assim facilitamos as
manutenções e implementação de futuras novas bibliotecas a serem utilizadas dentro
da aplicação.
Outro detalhe que nos deparamos é na hora de criarmos o nosso menu, pois
cada template tem uma formatação diferente. O ideal é criar, dentro da unit templates,
uma função que retorne os menus de acordo com os templates utilizados na aplicação.
7.2.2 – Formulário Base Lista
O formulário base lista é herdado do formulário base, nele é adicionado um
botão com o nome BTNEXCLUIR, que será herdado por todos os formulários de lista da
aplicação, e assim reduzindo a nossa codificação com o botão BTNEXCLUIR em todas as
telas de listagem.
38 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Para facilitar esse processo é necessário que você declare em UserSession duas
variáveis: a primeira com o nome da tabela utilizada no formulário corrente e a segunda
que recebe a chave primária da tabela, como apresentado na Figura a seguir.
Figura 52 - Implementação do botão excluir
Uma observação a qual devemos nos atentar nesse código é que em minhas
tabelas utilizo o sufixo “COD_” mais o nome da tabela para formação das chaves
primárias e generators no Firebird.
39 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 8
Configurando ambiente Front-end
8.1 – Configurando pasta templates
Neste capítulo faremos o download do template admin LTE e iremos preparar os
arquivos base - master e masterlista. Além disso, vamos adicionar dentro da pasta
wwwroot todos os arquivos de configuração do template.
Para realizar o download do template Admin LTE acesse gratuitamente o link:
https://github.com/ColorlibHQ/AdminLTE /archive/v3.0.5.zip. Após fazer o download é necessário
extrair os arquivos e depois copiar as pastas build, dist e plugins para dentro da pasta
“wwwroot/templates/AdminLTE”.
Figura 53 - Arquivos do template AdminLTE
40 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
A seguir apresentamos a pasta AdminLTE (wwwroot/templates/AdminLTE)
apenas com os arquivos necessários para que a aplicação funcione, sem gastar espaço
com arquivos desnecessários.
Figura 54 - Pastas necessárias do template AdminLTE
8.2 – Configurando arquivo base HTML
Realizada as configurações acima é necessário voltar na pasta do template
AdminLTE para pegar o HTML base. O arquivo que vamos utilizar como base encontrase dentro da pasta (Pages/examples/Blank.HTML).
Ao abrir a página Blank em seu navegador ela deve aparecer de acordo com a
Figura 44. Os templates admin possuem uma infinidade de recursos e configurações que
você pode utilizar da forma que preferir, de acordo com sua imaginação.
Figura 55 - Apresentação da página Blank
Como podemos ver na Figura 56, existem diversas personalizações que você
pode usar de acordo com seu gosto e conveniência.
41 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 56 - Apresentação das personalizações do template AdminLTE
Outro arquivo utilizado é o login.HTML, que encontra se dentro da pasta
(Pages/examples/login.HTML).
Figura 57 - Apresentação da tela de login.HTML
Após conhecer e saber a localização desses arquivos, eles devem ser copiados
para as suas respectivas pastas. O arquivo blank.HTML deve ser copiado para dentro da
pasta (bin/templates/app/Pattern), e ele será renomeado para master.HTML, conforme
Figura a seguir.
42 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 58 - HTML master
Agora vamos fazer o mesmo com o arquivo login.HTML que deve ser copiado da
pasta (Pages/examples/login.HTML) para a (bin/templates/app/login).
Figura 59 - HTML login
Com as pastas de arquivos configuradas a criação de todos nossos formulários
pode ser iniciada, pois já temos toda base necessária.
43 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 9
Configurando o ServerController
O ServerController é o núcleo de nossa aplicação, ele é responsável por criar
todos as sessões solicitadas de forma síncrona. Enquanto a aplicação IntraWeb é
assíncrona, baseada em threads.
Uma dica importante: nunca crie nada de processamento dentro do
ServerController que possa parar a fila de solicitações de sessão.
No ServerController temos algumas propriedades que podem ser configuradas
para a publicação de sua aplicação.
➢ AppName - Nome da aplicação que será exibida na sua barra de tarefas.
Figura 60 – Nome da aplicação na barra de tarefa
➢ Description – Descrição de exibição.
Figura 61 - Descrição de exibição
44 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
➢ DisplayName – Descrição de exibição.
Figura 62 - Exibição do nome na barra de navegação
➢ Port -> Diferente do IIS/Apache
➢ RestartExpiredSession -> True: Reinicia a sessão expirada automaticamente.
➢ SessionTimeOut -> 30: Tempo de acesso da sessão de usuário inativo.
➢ SecurityOptions -> CheckSameIp -> False: Libera a execução das páginas por
vários IP's diferentes ao mesmo tempo.
45 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 10
Configurando o UserSession
O UserSession é responsável por criar uma sessão para cada usuário
isoladamente, e pode ser utilizado também como um data module, pois ele é herdado
de TDataModule do Delphi.
Com base no modelo que será disponibilizado para download, iremos adicionar
a unit eBook.Componentes.Template, responsável pelo controle do template que será
utilizado na aplicação. No UserSession declaramos todas as variáveis globais conforme
a Figura a seguir.
Figura 63 - Unit UserSession
46 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 11
Configurando Ebook.template
Ebook.Templates é uma unit responsável por devolver as bibliotecas JAVASCRIPT
e CSS de acordo com a página e o template escolhido. Isso facilita a mudança de
template em minutos, pois será necessário apenas adicionar as bibliotecas.
Mas pode ser que o template utilize classes diferentes, necessitando fazer
pequenos ajustes. Lembrando sempre de utilizar componentes com sua estrutura nativa
do Bootstrap para facilitar a alteração.
Esta unit inicialmente será composta por dois types - TTemplatesPage, em que
teremos os tipos de páginas de nossa aplicação; e o TTemplateName, no qual teremos
todos os templates disponíveis para utilização em nossa aplicação.
Podemos observar que essa unit possui duas funções – GetLibHeadPage, a qual
tem a função de retornar as bibliotecas que serão adicionadas no head do HTML, no
carregamento da página; e a GetLibFooterPage, função que retorna as bibliotecas que
serão adicionadas ao final do HTML antes de fechar a tag </body>.
Figura 64 - Unit eBook.Componentes.Templates
47 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
11.1 – Codificando GetLibHeadPage
A estrutura da função receberá dois parâmetros de entrada, e seu objetivo é
devolver as bibliotecas utilizadas em cada tipo de página. É bom lembrar que algumas
bibliotecas são comuns a todos os tipos páginas.
Figura 65 - Estrutura base da função GetLibHeadPage
48 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Com a estrutura montada é o momento de abrir o HTML da página Blank.
Figura 66 - Estrutura base do HTML Blank
Na estrutura head da página Blank temos quatro bibliotecas que declararemos
no back-end conforme Figura a seguir.
Figura 67 - Adicionando bibliotecas na função GetLibHeadPage
Observe a simplicidade de implementação do código: abrimos o HTML,
localizamos as bibliotecas e as adicionamos dentro de um stringlist, que ao final devolve
seu conteúdo para o result da função. Poderia ter criado apenas uma função e
adicionado o footer, porém acho a forma implementada mais organizado. Mas fica a
critério de cada programador.
Agora vamos fazer o mesmo com o head da página login. Abrindo o HTML da
página login, podemos observar que ele utiliza as mesmas bibliotecas head. Porém, se
observarmos, existe uma biblioteca que não é comum para ambas as páginas. Conforme
Figura a seguir.
49 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 68 - Identificação das bibliotecas head do login.HTML
Quando todas as bibliotecas forem padrões e existir uma exceção na
implementação dos tipos de páginas do template, é necessário implementar conforme
É necessário adicionar todas as bibliotecas comuns e tirar do case de verificação
Figura 69 - Implementação do padrão e exceção dos tipos de página
do tipo de página, deixando assim somente as bibliotecas exclusivas. Confome podemos
observar no tipo de página login.
Para finalizar as configurações da função, é preciso abrir uma página do template
que contém as bibliotecas de Datatable. Recomendo também muito estudo sobre
Datatable, pois com ele é possível criar listas interessantes. Vamos abrir o arquivo
Data.HTML ele esta localizado dentro da pasta (Pages/tables/data.HTML).
50 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 70 - Bibliotecas Datatable no data.HTML
Ao abrir o arquivo data.HTML podemos ver que existem duas bibliotecas
exclusivas para as páginas que utilizam Datatables. Então vamos implementar essas
duas bibliotecas excluivas em nossa função conforme Figura a seguir.
Figura 71 - Implementação do tipo de lista adicionando as bibliotecas Datatable
Com a implementação acima finalizamos a parte de configuração
GetLibHeadPage. Observe na Figura a seguir como ficou a implementação.
Figura 72 - Implementação final da GetlibHeadPage
51 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
de
11.2 – Codificando GetLibFooterPage
A estrutura da função GetLibFooterPage é idêntica a GetLibHeadPage. Ela
receberá dois parâmetros de entrada e seu objetivo é devolver as bibliotecas utilizadas
em cada tipo de página. Apenas uma observação: somente será adicionada nessa função
as bibliotecas que ficam antes de fecharmos a tag </body>. Vejamos sua estrutura
conforme Figura a seguir.
Figura 73 - Estrutura da função GetLibFooterPage
É possível observar que não há mudanças na estrutura da função, apenas dividi
a estrutura em duas funções para facilitar a manutenção do código. Poderíamos ter feito
tudo em uma única função. Iniciemos então a codificação abrindo o arquivo blank.HTML
para vermos quais as bibliotecas encontraremos para implementação.
52 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 74 - Scripts do template da página blank.HTML
É necessário localizar todas as bibliotecas antes de fecharmos a tag </body>,
conforme a Figura 74, e implementar as bibliotecas em nosso back-end conforme a
Figura a seguir.
Figura 75 - Implementação das bibliotecas Footer no tipo da página blank
De forma análoga, vamos abrir o login.HTML para ver as bibliotecas que
necessitamos declarar.
Figura 76 - Bibliotecas Footer da página login
A biblioteca demo.js que tem em Blank, ao contrário do que vimos na função
GetLibHeadPage, é comum a todas as páginas. Possivelmente ela será exclusiva a todas
que contêm o componente menu, mas é necessário analisar qual é a responsabilidade
dos JAVASCRIPT implementados nela. Agora, vamos implementar o back-end conforme
a Figura a seguir.
53 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 77 - Implementação do Footer login tipo blank
Acima temos implementado as bibliotecas dos HTMLs Blank e Login, faltando
apenas implementarmos as bibliotecas do data.HTML. Então basta abrir o arquivo
data.HTML e ver as bibliotecas que devemos implementar conforme a Figura a seguir.
Figura 78 - Bibliotecas Footer Datatable
Com isso, surgiram quatro novas bibliotecas da classe Datatable e voltamos a ver
a biblioteca demo.js. Implementemos as novas bibliotecas conforme a Figura a seguir.
54 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 79 - Implementação das bibliotecas Footer
Com a derradeira implementação do arquivo data.HTML finalizamos a
configuração da unit eBook.componentes.templates. Você pode estar se perguntando
o motivo pelo qual não implementei alguns tipos de página. O motivo pelo qual não
implementei alguns modelos é que você agora pode utilizar à sua maneira. Como por
exemplo, você poderia ter criado e implementado a página de dashboard, porém se
analisar o HTML que vem no template verá a quantidade de bibliotecas que eles
utilizam. Se você for utilizar tudo, é simples! Basta adicionar tpDashboard e as
bibliotecas como fizemos. Outra dúvida que pode surgir é o motivo pelo qual não
implementei o tpCrud. Simplesmente porque vou ter telas que utilizarei o que é padrão
e outras que precisarei utilizar novas bibliotecas. Com isso tenho duas possibilidades ou crio mais um tipo exemplo tpCrudExemplo ou declaro a biblioteca dentro do HTML
referente ao formulário que for utilizar, por exemplo, frmcrudpessoa.HTML.
55 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 12
Configurando o projeto para utilizar o
eBook.Componentes.Templates
12.1 – Configurando UserSession
No evento oncreate vamos adicionar essa linha de código responsável pelo
template a ser carregado.
Figura 80 - Implementação da variável responsável pela seleção de templates
12.2 – Configurando FrmBase
Com nossa unit de eBook.Componentes.Templates devidamente configurada,
vamos fazer alguns pequenos ajustes antes de começar a criar os formulários.
A primeira configuração é adicionar em FrmBase, dentro da procedure
TPsUnknownTag, duas variáveis que serão responsáveis por adicionar as variáveis no
HTML, conforme a Figura a seguir.
Figura 81 - Variáveis utilizadas no eBook.Componentes.Templates
56 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 13
Criando a Tela de Login
Para criar a tela de login iremos criar um novo formulário herdado de base e
adicionaremos dois IWEDIT e um IWBUTTON que utilizaremos para fazermos a
autenticação.
Outro detalhe importante, quando trabalhamos o IntraWeb utilizando template
não importa a posição onde os componentes foram adicionados no formulário, pois as
posições serão formatadas no HTML.
Vamos fazer algumas configurações nos componentes, o primeiro passo é
renomeá-los. Em seguida, recomendo adicionar a propriedade CSS a classe form-control.
E, por fim, se você está utilizando uma versão desatualiza do IntraWeb, pode existir a
necessidade de desmarcar todas as propriedades de renderização da propriedade
StyleRenderOptions localizada no Object Inspector, conforme Figura a seguir
Figura 82 - Configuração do StyleRenderOptions
Adicione à uses IWHTMLTag, para que possamos personalizar nosso IWEDITS. Na Figura
a seguir faço a personalização dos campos de login e senha.
57 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 83 - Personalização dos inputs
Você deve estar se perguntando como faremos para que o campo de senha exiba
como password. O IntraWeb vem ganhando atualizações fantásticas e uma delas é a
propriedade datatype com alguns types disponíveis para a utilização conforme a Figura
a seguir.
Figura 84 - Tipos de datatype
Depois de adicionar os componentes o resultado deve ser a Figura a seguir.
Porém, ainda devemos codificar o botão login, que pode ser feito de várias maneiras.
Prefiro trabalhar utilizando o máximo de funções possíveis, criando todos os
componentes em run-time.
Figura 85 - Formulário de login
58 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Agora vamos criar um Data Module. Parta isso basta ir em file->new->other. Irá
exibir uma janela chamada New Item, do lado esquerdo iremos selecionar Database e
do lado direito selecionaremos Data Module, conforme a Figura a seguir.
Figura 86 - Criando Data Module
Com o formulário aberto adicionaremos um TFDConnection e três TFDQuery
conforme Figura a seguir.
Figura 87 - DM da aplicação
Para concluir a implementação do DM, devemos abrir o UserSession e ir até uses,
declarar uDm. Mais abaixo, em private FDm: TDm; public declaramos property Dm: TDm
read FDm write SetDm; e para finalizar precisamos criar o componente Dm no evento
BaseCreate Dm := TDm.Create(nil).
No UserSession iremos criar uma procedure conforme Figura abaixo,
responsável por validar se o usuário está logado na mudança de página. Conforme
Figura a seguir.
59 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 88 - Implementação da procedure purl
Para finalizar implementaremos o código de autenticação de usuário no evento
onAsyncClick, conforme Figura a seguir.
Figura 89 - Implementação da autenticação do usuário
Atualmente, opto por trabalhar com funções, em que recebo as variáveis de
entrada, variável de conexão e as variáveis de resultado. Dentro da função, crio o que é
necessário em tempo de execução e após realizar seu processo libero da memória os
objetos criados.
Na Figura 89, se os dados passados por parâmetros forem verdadeiros dentro da
função, preencheremos o ID e o nome do usuário. Caso o usuário seja incorreto,
limpamos as variáveis e preenchemos apenas a variável de erro.
Para utilizar o sweetalert, você tem duas formas: uma é conforme a Figura 89,
utilizando a unit com os scripts do sweetalert, sendo devolvido; a outra forma é criar os
scripts manualmente. A unit está disponível no SVN do e-book.
E por fim, adicionamos esse trecho de código informando que este formulário
será o primeiro a ser inicializado na aplicação.
Figura 90 - Inicialização do formulário login
60 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Chegou a hora tão esperada por todos: implementaremos o visual do formulário
login. Estando prontas as definições citadas anteriormente, vamos implementar mais
algumas linhas de código, conforme a Figura a seguir.
Figura 91 - Configurando template formulário login
Vamos executar o projeto e vermos qual será o resultado, lembrando que ainda
não implementamos o HTML do formulário login, apenas exibiremos o HTML do
template AdminLTE da tela de login. Resultado apesentado conforme Figura a seguir.
Figura 92 - Renderização do login.HTML do AdminLTE
Vamos ajustar o HTML substituindo o Titulo pela tag {%Title%}, as bibliotecas
dentro da tag Head por {%LibHeadPage%} e as bibliotecas antes de fechamos o body por
{%LibFooterPage%}. Veja o HTML alterado nas duas imagens a seguir.
Figura 93 - Novo head
61 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 94 - Novo Footer
Compilemos nossa aplicação novamente para vermos o resultado apresentado.
Figura 95 - Renderização da tela login aplicando as configurações do template
O título que implementamos apareceu na janela do browser, porém o visual
Bootstrap ainda não. O que podemos fazer é clicar no F12 do teclado, com o browser
aberto e conferir se existe algum erro no console. Conforme a Figura a seguir.
62 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 96 - Erro de implementação de bibliotecas
Como podemos ver na Figura 96, nenhuma das bibliotecas foram encontradas.
Utilizando o Google Chrome, se você clicar com o botão direito do mouse sobre a linha
do erro irá abrir uma janela em que deverá ser selecionado Open in new tab. Em seguida,
abrirá uma janela conforme a Figura a seguir.
Figura 97 - Janela com o caminho do arquivo CSS
A Figura 82 mostra a tentativa de abrir o arquivo dentro da pasta plugin, porém,
essa pasta agora encontra-se dentro da pasta (templates/AdminLTE/plugin). Assim,
63 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
devemos abrir a unit eBook.Componentes.Templates e ajustar o caminho do arquivo.
Com a unit aberta basta ir no menu search/replace e fazer a alteração conforme a Figura
a seguir.
Figura 98 - Correção do caminho da biblioteca do template
Após realizar a alteração salve o projeto e recompile. O resultado deve ser como
o da Figura a seguir.
Figura 99 - Exibição da tela de login após as correções e implementação
Porém, na Figura 99 existem alguns componentes a mais do que no formulário
de login no Delphi. Na Figura a seguir veremos a exibição da tela de login conforme o
formulário Delphi, mais abaixo veremos passo a passo como realizamos as alterações.
64 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 100 - Tela de login da aplicação
Foram removidos os botões que não vamos utilizar. Fiz uma alteração na cor do
CSS do botão Entrar e adicionei a logo do livro, como podemos ver na Figura 85. Para
entender como isso foi feito, vamos ver as alterações realizadas.
1º) Alteração que encontraremos em head e alteração da cor do botão Entrar conforme
a Figura 100.
Figura 101 - Mudança de cor do botão login
2º) Alteração para inclusão da Figura do e-book, implementaremos o código conforme
a Figura 102.
Figura 102 - Inclusão da Figura do livro
Eu declarei o código da Figura 102 desse jeito apenas para facilitar a exibição
para você. Mas você pode implementar todas as propriedades em apenas uma linha.
Conforme a implementação do frmlogin na Figura 103.
65 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 103 - Implementação do HTML da tela login
66 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 14
Criando a Tela Dashboard
Para criar a tela de Dashboard devemos herdar do formulário base. Para isso,
bastar ir em file->new->other->, após o clique irá abrir uma tela conforme a Figura
abaixo. Clique em inheritable Items, e do lado direito selecione o Frmbase.
Figura 104 - Tela New Items
Após esse passo, será criado um formulário herdado de nosso formulário base.
É necessário fazer algumas configurações: a primeira é renomear o formulário e salvar,
e a segunda é adicionar a uses uServerController, eBook.Componentes.Template.
Depois de fazermos as configurações acima devemos adicionar no evento
onCreate do formulário algumas linhas de código para carregamento do template e
adicionarmos o título da página conforme Figura a seguir.
67 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 105 - Preenchimento do evento onCreate
A primeira linha é o título que iremos apresenta no Browser. Na segunda linha
passamos quais as bibliotecas do template que queremos carregar. A terceira e a quarta
linhas são responsáveis por alimentar o componente TIWTemplateProcessorHTML,
passando qual é o HTML master que iremos usar e qual será o HTML do formulário.
Outra configuração que devemos fazer é localizar na estrutura HTML onde
iremos declarar o conteúdo da página. Como podemos ver na Figura abaixo.
Figura 106 - Localizando a classe responsável pelo corpo do HTML
Como podemos ver na Figura 106, o corpo da página começa em contentewrapper, logo abaixo vemos o contente-header, que é responsável por adicionar na
página o título do formulário que estamos. Na Figura 107, do lado direito, temos a
identificação da página anterior e a página atual, como podemos ver a seguir.
68 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 107 - Estrutura HTML do cabeçalho do formulário
Figura 108 - Resultado do HTML da Figura 92
Após a classe content-header, vem a classe content conforme podemos ver na
Figura a seguir.
Figura 109 - Implementação do card dentro da classe Content
Devemos localizar no master.HTML a classe content onde faremos a seguinte
alteração conforme a Figura 110.
69 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 110 - Adicionando tag $body no formulário master
Com o master.HTML inicialmente configurado, vamos criar o HTML
FrmDashboard.HTML, que será implementado conforme a Figura 96. Devemos salvar o
arquivo na pasta templates/app/dashboard.
Figura 111 - Estrutura HTML do FrmDashboard.HTML
Para finalizarmos a implementação são necessárias algumas implementações no
ServerController.
Como vamos utilizar Handlers, é preciso declarar as uses necessárias para sua
utilização, conforme a Figura a seguir.
Figura 112 - Uses para a utilização de Handlers
Para verificarmos se toda a implementação está correta devemos compilar o
projeto. Estando devidamente implementado, o resultado corresponde a Figura 113.
70 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 113 - Tela Dashboard
O dashboard foi carregado, porém como alteramos o caminho das bibliotecas
para templates/AdminLTE precisamos ajustar o caminho das imagens. Para isso, vamos
abrir o HTML master e fazer um replace de (../../) para (templates/AdminLTE /),
recompilando ou dando F5, caso a aplicação esteja em execução. Veremos que as
imagens agora foram carregadas como apresentado na Figura 114. Porém, por algum
motivo os ícones não exibiram.
71 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 114 - Exibição das imagens no formulário após a correção
Para tentar encontrar o problema podemos dar um F12 e ver se existe algum
erro no console de biblioteca ou JAVASCRIPT, conforme veremos na Figura a seguir.
Figura 115 - Localizando o erro no console do navegador
72 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Como podemos ver, no console do navegador a biblioteca responsável pela
inclusão dos ícones em nossa página não está sendo carregada. Podemos clicar com o
botão direito do mouse, ir até new in open tab e mandar abrir o arquivo no navegador
para vermos se o caminho do arquivo está correto. Caso seja apresentado o arquivo
conforme a Figura a seguir, podemos ver que o caminho da biblioteca está errado.
Figura 116 - Localização do arquivo all.min.CSS
Nesse caso, é preciso voltar a unit responsável pelo controle de template e ver
se por algum motivo erramos o caminho ou esquecemos de implementar. A Figura 117
mostra que a biblioteca não foi alterada, por isso é necessário corrigir a linha indicada
pela seta.
Figura 117 - Biblioteca do template
Para fazer a correção basta substituir (../../) por (template/AdminLTE /) e o
problema é resolvido, como mostrado na Figura a seguir.
73 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 118 - Correção da biblioteca de ícones
Para finalizar o dashboard, vamos substituir o nome Alexandre Pierce para o
nome do usuário logado. Para fazer isso, o primeiro passo é adicionar uma variável do
tipo string na unit UserSession com o nome de UserName. Em seguida, voltar ao
formulário base e adicionar a seguinte linha no evento TPsUnknownTag.
Para concluirmos a exibição do nome do usuário, o próximo passo é localizar em
nosso master.HTML o nome Alexandre Pierce e mudar para {%usuario%}.
Figura 119 - HTML original
Figura 120 - HTML alterado
Em seguida, recompilar a aplicação e assim obter o resultado final da figura 121.
Figura 121 - Exibição do nome do usuário
Nesse e-book não implementaremos o menu vindo da base de dados, pois cada
um pode implementar à sua maneira. Deixarei a função montada, explicando o que é
necessário fazer. Uma observação importante, no exemplo em questão estou utilizando
a class nav-item para implementar o menu. Para implementar os níveis no menu
74 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
recomendo abrir o demo e verificar o EXEMPLO MULT LEVEL contido no template
AdminLTE.
Iremos fazer a seguinte alteração no master HTML: localizar a classe “nav
class="mt-2” e substituir toda a classe pela a tag {%menuprincipal%} que vamos criar no
evento TPsUnknownTag em nosso formulário base, conforme a Figura 123.
Figura 122 - Declaração da tag menu principal
Figura 123 - Visualização da implementação da tag no HTML
O modelo de função que deixarei de exemplo para implementação é a função
Gerar_Menu_ByUser, que recebe como parâmetro de entrada o id do usuario e devolve
uma String com o menu, conforme a Figura 124.
75 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 124 - Implementação da função de menu principal
Como explicado anteriormente, é necessário conhecer a estrutura de níveis para
saber quais classes implementar na criação de seu menu com níveis e subníveis.
Após as implementações devemos compilar nossa aplicação e obter o resultado
apresentado conforme Figura a seguir.
Figura 125 - Exibição do menu implementado
Clicando no menu usuários podemos observar que o mesmo está sendo
redirecionado para a url correta. Conforme mostrado na Figura 126, precisamos agora
implementar a tela de listagem de usuários que veremos no capítulo a seguir.
76 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 126 - Url da tela de listagem de usuários a ser implementado
Com nossos master praticamente finalizado podemos alimentar as variáveis
nome da aplicação, data de compilação e versão no nosso UserSession. Para
alimentarmos essas variáveis vamos até a unit uUserSession, no evento BaseCreate
vamos implementar o seguinte código.
Figura 127 - Alimentação das variáveis globais
No HTML master a seguinte alteração deve ser realizada.
Figura 128 - Código do HTML original do template AdminLTE
Figura 129 - Código do HTML alterado do template AdminLTE com as tag do IntraWeb
77 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
A seguir é exibido a barra <footer> após as alterações.
Figura 130 - Exibição das implementações IntraWeb no HTML
78 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 15
Criando Lista de Usuários
Para criar a tela de Lista de usuários devemos herdar do formulário BaseLista ao
contrário de nosso dashboard. Isto porque nessa tela utilizaremos as bibliotecas de
Datatable para que possamos fazer uma tabela bem apresentável.
Para criar a tela herdada de BaseLista basta ir em file->new->other->, então irá
aparecer uma tela conforme a Figura 131. Clique em inheritable Items e do lado direito
selecione o FrmbaseLista.
Figura 131 - Tela New Items
Da mesma forma que implementamos nos formulários anteriores, devemos
alimentar as variáveis responsáveis pelo carregamento visual da aplicação e as variáveis
responsáveis pela identificação do nome da página no browser.
Figura 132 - Alimentação das variáveis globais obrigatórias do formulário
79 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Após
a
implementação,
uServerController,
é
necessário
System.StrUtils,
adicionar
as seguintes uses:
eBook.Componentes.Template,
e
eBook.Functions.Firedac.
Para implementar o Datatable server-side iremos declarar a procedure
GerarJson(aParams: TStrings; out aResult: String). Ela é responsável por gerar Json de
acordo com o parâmetro vindo da tela de listagem. Você pode otimizar criando uma
função genérica que receba parâmetros como Fields e devolva resultado em Json. Mas
como meu foco é ensinar o máximo de pessoas e mostrar como é simples criar o
Datatable server-side, vou dividir o código em duas partes conforme a Figura 133 e 134.
Figura 133 - Estruturado código – parte 1
Na primeira parte do código fazemos apenas um select da tabela usuário,
passando os parâmetros vindos do front-end, que está contido em nossa variável
aParams conforme demonstrado na Figura 133.
A segunda parte do código é responsável por gerar o Json de resposta de acordo
com os dados encontrados a partir dos parâmetros vindos do front-end e executado na
primeira parte do código.
80 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 134 - Estrutura do código – parte 2
Dando continuidade na segunda parte do código, montamos o cabeçalho do
Json, e logo abaixo faremos a leitura do resultado pela query para devolvermos um array
de objetos.
Resumindo, precisamos devolver um array Json com os seguintes dados [código,
descrição, botões de ação]. Assim, devolver os resultados como código e descrição é
simples. É necessário maior atenção quando formos devolver componentes HTML,
como demonstrado na Figura 134:
➢ antes de uma dupla aspas adicionar a \
➢ antes de fechar as aspas duplas, adicionar a \
➢ declarar a função JAVASCRIPT e seus parâmetros, não esquecer das aspas
Para finalizar, verificamos se o Json precisa de alguma correção. Caso contrário,
seu resultado é devolvido para o Datatable.
Como vimos na segunda parte do código, na criação do Json declaramos um
componente button que possui uma função JAVASCRIPT. Esta tem o objetivo de chamar
uma procedure dentro do Delphi.
Todavia, antes de implementar a procedure
responsável pelas ações de crud, vamos criar as variáveis responsáveis pela exibição do
Datatable e seu JAVASCRIPT. Para isso, deve ser declarado no evento TPsUnknownTag
a implementação da Figura 135.
81 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 135 - Implementação das tags script e Datatable
Com o intuito de simplificar ao máximo o desenvolvimento, disponibilizarei
algumas unit no SVN do e-book.
Como trabalharemos com chaves primárias simples, vamos criar uma variável
com o nome GLBPK do tipo integer. Outra variável que criaremos é a TableCrudName
do tipo String, para adicionarmos o nome da tabela que estamos trabalhando no crud.
Relembrando que todas as variáveis globais devem ser declaradas no UserSession.
Primeiramente, devemos criar uma procedure com o nome de prc_crud, ou seja,
abreviando a procedure e o objetivo dela.
Novamente vou dividir o código em duas partes. Na primeira recebemos os
parâmetros de entrada: a ação a ser executada e a chave primária a ser localizada na
base de dados. Observe a Figura a seguir.
Figura 136 - Implementação da separação da ação e chave primária
82 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Na segunda parte do código implementaremos as ações cruds de alteração,
exclusão e inclusão. Irei fazer a inclusão da uses da unit do sweetalert2, que também
está no svn do e-book. Observe a Figura a seguir.
Figura 137 - Implementação das ações de crud
A diferença desse código para o que implementamos corriqueiramente no Delphi
é a excursão de um JAVASCRIPT que exibirá uma aleta perguntando se confirmamos a
exclusão do registro. Podemos observar que na função swalConfirm temos alguns
parâmetros:
➢ o título da notificação;
➢ a mensagem da notificação;
➢ a cor do botão;
➢ a descrição do botão de ação a ser executada;
➢ a descrição a ser exibida de o botão cancelar;
➢ o name em caixa alta do botão que será executado.
A seguir observe a implementação do botão de ação excluir no formulário
BaseLista.
83 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 138 - Implementação do botão de exclusão
Existe também, dentro da ação de inclusão e alteração, a chamada da procedure
UserSession.pUrl, que faz o direcionamento para página que dever ser carregada.
Observe que é necessário declarar a unit do sweetalert2, basta adicionar em uses
eBook.Componentes.SweetAlert2. Outro detalhe muito importante que não podemos
esquecer é declarar o botão excluir ocultamente no masterlista, conforme a Figura 139.
Figura 139 - Declarando o botão excluir ocultamente
Voltando ao formulário de listagem de usuários precisamos fazer mais alguns
ajustes no evento IWAppFormCreate. É necessário informar a tabela que usaremos no
crud alimentando a variável TableCrudName criada. Precisamos também registrar a
procedure responsável pelo crud e a responsável pela criação de Json do Datatable.
Observe isso na Figura 140.
Figura 140 - Inclusão dos registros das procedures
84 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Para finalizar a tela de listagem de usuário precisamos apenas implementar o
HTML padraolista.HTML, que utilizaremos para toda tela de pesquisa da aplicação.
Evidentemente haverá telas de listagem personalizadas. Nesse caso, utilize a base criada
e altere o caminho do TPs.Templates.Default para que seja utilizado seu HTML
personalizado.
Observe o código front-end da tela de listagem de usuários na Figura 141.
Figura 141 - HTML da base padraolista.HTML
Ao compilar a aplicação o resultado deve ser o apresentado na Figura 157.
Figura 142 - Exibição da tela de lista de usuário com o Datatable
Um detalhe que pode ser acrescentado é a possibilidade de criação de novas
variáveis no Delphi para a manipulação do nome do formulário que estamos. Também
podemos criar variáveis para manipular a navegação entre páginas, conforme podemos
ver nos links Home e Dashboard, localizados do lado direito na Figura 142. Porém, não
implementaremos isso nesse e-book. Lembrando que na web não podemos repetir os
nomes dos objetos, então recomento criar variáveis para cada objeto HTML que forem
criar.
Ao clicar no botão excluir deve ser exibido uma notificação, como podemos ver
na Figura 143.
85 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 142 - Exibição do sweetalert2
Se tentarmos executar o botão editar veremos que a página está sendo
direcionada. Porém, como não implementamos o cadastro, nos deparamos com o
seguinte erro.
Figura 143 - Erro ao tentar editar o cadastro
Para finalizar devemos implementar o botão Novo registro e alterar a variável
minha lista pela variável global TitleCard, conforme a Figura 145.
Figura 144 - Implementação da variável TitleCard e botão de inclusão
O resultado após a inclusão da nova variável e do botão para inclusão, é
apresentado na Figura 146.
86 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 145 - Exibição do TitleCard e do botão de Novo Registro
87 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 16
Criando Cadastro de Usuários
Para criar a tela de Cadastro de usuários devemos herdar do formulário Base, da
mesma forma que fizemos no formulário de dashboard. Bastar ir em file->new->other>,
clicar em inheritable Items e depois, do lado direito, selecione o Frmbase.
Figura 146 - Tela New items
Com isso, será criado um formulário herdado do formulário base, necessitamos
fazer algumas configurações. A primeira é renomear o formulário e salvar. A segunda é
adicionar as uses: uServerController, e Book.Functions.Firedac,
eBook.Componentes.Template. A terceira configuração é adicionar no evento onCreate
algumas linhas de código para carregamento do template e inclusão do título. Observe
esses detalhes na Figura 148.
Figura 147 - Configurações iniciais da tela de cadastro
88 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
No evento IWAppFormShow, vamos verificar o estado da query e alimentar a
variável TitleCard, que será responsável por exibir a descrição do título de ação do
formulário da aplicação.
Figura 148 - Implementação da descrição do título de ação
Para que a variável fique acessível precisamos voltar no formulário base e
implementar o código a seguir.
Figura 149 - Inclusão de título do formulário
Depois de implementar a variável TitleCard, devemos voltar nos formulários
anteriores e adicionar o título do formulário em utilização.
Para finalizar o back-end, é preciso fazer o mesmo processo realizado no
formulário de listagem de usuário, criando a procedure responsável pelas funções crud
na tela de cadastro.
Assim como criamos uma procedure prc_crud na tela de listagem, criaremos
agora uma procedure com o mesmo nome para a tela de cadastro. Essa procedure
executará as ações de gravação e cancelamento do cadastro de usuários. Em minhas
aplicações mantenho como padrão o prc_crud para todas as ações de crud.
Antes de implementar todo o código da procedure vamos registrá-la no evento
onCreate do formulário. Como já implementamos alguns códigos neste evento, após a
alteração, ele deve apresentar o código conforme a Figura 151.
89 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 150 - Inclusão do registro de callback
Como visto anteriormente, a procedure prc_crud poder ser dividida em: entrada
de parâmetro, onde irei separar o que é ação e o que é a chave primária; e o que deve
ser executado a partir do parâmetro ação.
Na Figura a seguir veremos a implementação da ação de cadastro e
cancelamento do formulário.
Figura 151 - Implementação das ações
90 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
O que temos de diferente na procedure de crud é uma função que está na unit
ebook.Database.Firedac, que será disponibilizada no SVN. Esta função retorna o
próximo número do generator. Existe também, uma procedure responsável pelo
redirecionamento da página, o restante do código e o que o programador Delphi está
acostumado a trabalhar.
Para testar o formulário, após concluirmos as implementações, é necessário
adicionar
a
unit
do
formulário
no
ServerController.
E
na
procedure
IWServerControllerBaseCreate implementar sua inclusão conforme apresentado na
Figura 153.
Figura 152 - Implementação da utilização de Handlers
Com o nosso back-end todo configurado, podemos ver os campos em nossa base
de dados que podemos disponibilizar para o usuário, de acordo com a Figura a seguir.
Figura 153 - Campos no banco de dados
Adicione no formulário quatro IWDBEDIT para exibir e cadastrar os campos
acima. Adicione também um TDataSource para ligar a query de cadastro. Uma
observação, no IWDBEDIT responsável pelo cod_usuario, devemos desabilitar sua
91 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
propriedade, deixando disponível apenas para leitura. Para facilitar vou dar aos
IWDBEDITS os mesmos nomes dos campos na base de dados.
Como fizemos no Login, iremos alterar o datatype do IWDBEDIT que está com o
nome USU_SENHA para o datatype password. A visualização do formulário deve estar
conforme Figura 155.
Figura 154 - Formulário Cadastro do usuário
Entramos na parte final na criação do formulário, falta apenas criar o front-end
da aplicação.
No onCreate do formulário definimos que vamos usar o
FrmCadastroUsuario.HTML. Abra seu editor de HTML, crie a estrutura base do HTML
conforme
a
Figura
156
e
salve
na
pasta
cadastro
com
o
nome
FrmCadastroUsuario.HTML.
Figura 155 - Estrutura base HTML
Para facilitar seu entendimento de como funciona a estrutura HTML vou
desenhar primeiramente como desejo visualizar o meu formulário de cadastro no paint.
Observe a Figura 157.
92 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 156 - Desenho do formulário de cadastro
Com o formulário desenhado, recomendo a você analisar quantas linhas vai
precisar e quais componentes vai utilizar. Analisando a Figura 157 podemos ver que são
utilizadas 4 linhas, sendo:
➢ a primeira para o código;
➢ a segunda para o usuário e senha;
➢ a terceira para o e-mail; e
➢ a quarta para os botões.
A linha preta abaixo do e-mail é um componente web que usaremos. Ele é
declarado com a tag <hr>. Para facilitar o entendimento de como funciona grids
Bootstrap, recomendo que leia o material do link:
https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp.
Para deixar a aplicação com o visual mais moderno e apresentável vamos
adicionar um componente card conforme a Figura a seguir.
Figura 157 - Componente card
93 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Vamos alterar a descrição minha lista para a variável que criamos no formulário
base com o nome de {%TitleCard%}. Dentro de body, adicionaremos nossa primeira
linha e implementaremos o primeiro input.
Observação importante: é necessário adicionar a class form-control na
propriedade CSS no Object inspector do Delphi.
A Figura a seguir mostra a primeira linha e a alteração da descrição minha lista.
Figura 158 - Inclusão do título e implementação da primeira linha do formulário
O que temos no código da Figura 159 é a declaração de uma linha utilizando a
classe Row. Na linha seguinte, informamos o tamanho da coluna. Na próxima linha,
como vimos no capítulo Bootstrap, é a forma correta de implementar um input.
94 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 159 - Resultado da implementação do input cod_usuario
Implementemos a segunda linha. A partir do desenho do formulário (Figura 157),
é possível identificar que utilizaremos duas colunas - uma para o nome e a outra para o
password. Observe como implementar as colunas na Figura a seguir.
Figura 160 - Implementação da segunda linha do formulário
95 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Figura 161 - Resultado da implementação da segunda linha do formulário
Agora implementaremos a 3 linha e a tag <hr> para separar os campos de
cadastros e os botões, conforme o código na Figura a seguir.
Figura 162 - Implementação da terceira linha do formulário
Figura 163 - Resultado da implementação da terceira linha do formulário
96 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Para implementar a quarta e última linha do formulário de cadastro vamos
adicionar uma linha e dois componentes botões, conforme Figura a seguir.
Figura 164 - Implementação da quarta linha do formulário
Podemos observar que na declaração do componente botão existe uma
chamada a uma função JAVASCRIPT, na qual iremos passar o parâmetro ação e a chave
primária. Vamos declarar como chave o valor zero porque utilizaremos o valor que está
anexado à variável global internamente no formulário. Assim, aproveitaremos apenas a
ação a ser executada. Para finalizarmos, vejamos então se o resultado do HTML ficou
idêntico ao que apresentamos na Figura 157.
Figura 165 - Figura final do formulário de cadastro de usuário
97 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 17
Criando API com IntraWeb
(Jose Nilton Pace)
O IntraWeb XIV introduziu um novo recurso chamado "Content Handlers".
Usando content handlers, você pode redirecionar uma solicitação para uma classe
descendente TContentBase. Essa classe é responsável por fornecer o conteúdo real da
resposta. Content handlers não são componentes. Eles são classes leves e devem ser
criados em tempo de execução.
17.1 – Criação de um novo TcontentHandler
Criar uma nova classe TContentHandler é muito simples. Este tutorial mostrará
como criar um novo manipulador de conteúdo para responder com um documento XML.
➢ Crie um novo servidor IntraWeb Stand Alone usando o assistente de projeto
IntraWeb. Em seguida, crie uma nova unidade, denomine IW.Content.XML e
adicione este código a ela:
Figura 166 - Criação do IW.Content.XML
98 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
➢ No ServerController, adicione este código à seção de inicialização:
Figura 167 - Adicionando a chamada GiveMeSomeXML
E no Uses do ServerController adicione este:
Figura 168 - Adicionando uses obrigatória
➢ Agora crie e execute seu aplicativo. Abra seu navegador e digite este URL:
http://127.0.0.1:8888/GiveMeSomeXML (observe que a porta pode ser
diferente). Você verá algo assim:
Figura 169- Resultado da Implementação
17.2 – Explicando a implementação
Primeiro, criamos uma nova classe descendente TContentBase. Cada content
handler customizado deve descender desta classe. Dentro do método Create(), devemos
definir mFileMustExist como FALSE. Quando TRUE, o método TContentBase.Execute()
irá procurar por este arquivo e se não for encontrado irá responder com o código HTTP
404.
99 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Então, tudo o que temos que fazer aqui é substituir o método
TContentBase.Execute() e escrever diretamente na instância do objeto aReply. A
primeira coisa que fizemos foi definir a propriedade aReply.ContentType. Na verdade,
isso altera o campo de cabeçalho Content-Type HTTP em nossa resposta. Neste caso,
queremos responder com um XML real (e não uma string XML dentro de um HTML),
então usamos uma das constantes predefinidas na unit IWMimeTypes.
Então, escrevemos um XML diretamente para a instância aReply, usando um
de seus métodos, e pronto!
Quão poderoso é isso? Você pode criar descendentes de TContentBase para
lidar com qualquer tipo de solicitação. Você também pode criar um cliente Indy para
postar solicitações para seu aplicativo IntraWeb implementando um protocolo
personalizado
e
sistema
de
mensagens.
As
possibilidades
são
infinitas.
17.2 – Demo
Uma demonstração totalmente funcional contendo este código pode ser
encontrada neste link:
https://github.com/Atozed/IntraWeb/tree/master/XIV/Delphi/CustomContentHandlers
100 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
CAPÍTULO 18
Considerações finais
Nos capítulos iniciais apresentei alguns aspectos do IntraWeb e do Bootstrap. No
capítulo três mostrei alguns cases de sucesso, que evidenciam um mundo de
possibilidades quando trabalhamos com o IntraWeb.
Nos capítulos seguintes ensinei como criar a base necessária para iniciar o estudo
ou até mesmo a migração de uma aplicação. Mais adiante, expliquei um pouco sobre
front-end e back-end para facilitar seu entendimento acerca da criação de aplicações
com o IntraWeb.
No capítulo dezessete, José Nilton Pace ensina como construir um API utilizando
o IntraWeb, mostrando a versatilidade dessa ferramenta.
O IntraWeb é fantástico, mas ainda temos muito o que estudar e apreender, pois
existe uma infinidade de recursos não abordados neste e-book e que exigem uma base
mais consolidada sobre HTML, CSS e JAVASCRIPT. Nesse material prestigiamos o ensino
da base necessária para que qualquer pessoa possa criar uma aplicação utilizando o
IntraWeb. Ensinei a criação passo a passo de:
➢ Tela de Login;
➢ Tela de Dashboard;
➢ Utilização de Templates admin
➢ Tela de Consulta de usuários utilizando Datatable Serve-Side;
➢ Tela de Cadastro de usuários;
➢ Utilização de url amigável;
➢ Navegação utilizando ajaxCall; e
➢ Implementação de API com IntraWeb.
Espero que este livro seja capaz de abrir novas possibilidades e que ajude você,
programador Delphi, a migrar ou criar sua aplicação web.
101 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido
Referências bibliográficas
Atozed. Disponível em: https://www.atozed.com/
Bootstrap 4. Disponível em: https://getbootstrap.com/
Input. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/input
GitHub. Disponível em: https://github.com/
Template AdminLTE. Disponível em: https://github.com/ColorlibHQ/AdminLTE
/archive/v3.0.5.zip
Tutorialrepublic. Disponível em: https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/
w3schools. Disponível em: https://www.w3schools.com/bootstrap
102 por Eduzz.com
Licenciado para - Marcelo Tavares Lima - 92469108004 - Protegido