Bootstrap e etiquetas de transformação 4D

Precisa de aceder aos seus dados 4D a partir de uma página web, mas não tem um designer na sua equipa? Sente-se desconfortável a desenhar as páginas por si próprio porque no fundo acredita que está cheio de regras complicadas e não escritas? Bem, já pensou em Bootstrap?
Neste post do blogue, veremos como tirar partido da estrutura do Bootstrap para desenhar páginas web num instante! Também lhe forneceremos um exemplo de base de dados para ver como pode ser combinada com etiquetas de transformação 4D.

HDI: Bootstrap e etiquetas de transformação 4D

Etiquetas de transformação 4D

Nota: Se já sabe como usar etiquetas de transformação e só quer aprender a fazê-las parecer melhor, salte este capítulo. Ou continue a ler para refrescar a sua memória…

Estão disponíveis múltiplas etiquetas específicas 4D para permitir a inserção de referências a variáveis 4D, expressões, ou diferentes tipos de processamento em páginas HTML estáticas enviadas pelo servidor Web. Estas páginas são chamadas páginas semi-dinâmicas.

As etiquetas são inseridas como comentários do tipo HTML: <!–#4D…–> a fim de serem processadas por 4D.

Tenha estes princípios em mente quando usar as tags:

• Deve acrescentar o sufixo “.shtm ” ou “.shtml” para forçar a análise das páginas HTML.
• A execução de um método 4D com 4DTEXT, 4DHTML, 4DEVAL, 4DSCRIPT, 4DIF, 4DELSEIF, ou 4DLOOP a partir de um pedido web está sujeito ao valor do atributo“Disponível através de tags e URLs 4D (4DACTION …)” que é definido nas propriedades do método. No exemplo abaixo o método sendEmployeesData está definido para ser acedido através da web:

Para saber mais sobre as etiquetas 4D, consulte este vídeo da Cimeira 4D 2016.

No nosso exemplo, vamos enviar uma lista de empregados para a nossa página SHTML. E graças à tag <!–#4DLOOP…–> , podemos iterar através da nossa gama de empregados. Depois podem ser exibidos com a tag <!–#4dtext …–>. O código final terá este aspecto:

<!--#4dscript/sendEmployeesData--> //Execute the 4D method
<table>
<tr><th>First Name</th>
...
<th>Email</th></tr>
<!--#4dloop empID--> //Loop through the array of employees
<tr>> <td><!--#4dtext empFname{empID}--></td> //Display the employee first name

<td><<!--#4dtext empEmail{empID}--></td> </tr>
<!--#4dendloop-->
</table>

Inicie o seu servidor web e execute o código para ver os resultados:

Nada mau, mas não óptimo. Não se preocupe. Vamos ver como o Bootstrap pode ajudar a embelezar isto …., especialmente porque existem tabelas na maioria dos programas e são um elemento essencial para apresentar dados aos utilizadores finais.

tabelas de bootstrap

Utilizar Bootstrap com 4D é simples: descarregue a versão compilada, copie-a para a pasta web da sua base de dados, e depois inclua os ficheiros JS e CSS no seu ficheiro SHTML .

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>

Tenha em mente que existem muitas versões de Bootstrap (a versão 4 é a mais recente). Neste post do blogue, estamos a utilizar a versão 4.

Para ver o poder do Bootstrap, vamos melhorar visualmente a nossa tabela.

É muito fácil torná-la mais atraente: basta adicionar a classe .table à <table> tag para aplicar alguma formatação visual. Melhor ainda, se for fã do modo escuro, Bootstrap tem uma classe .table-dark para si. Há até uma classe .table-striped para adicionar um estilo de riscas de zebra. E todas estas classes podem ser combinadas, dependendo do que se pretende alcançar. Abra o seu ficheiro SHTML, adicione estas classes, e seleccione Run/Test Web Server a partir de 4D:

<table class="table table-dark table-striped">


Boa!

Bootstrap tem uma lista interessante de estilos de mesa. Consulte a documentação e veja o que funciona para si.

Pode poupar muito tempo usando os modelos e classes de desenho pré-definidos de Bootstrap. Neste post, apenas riscamos a superfície do que pode ser feito com a estrutura. Veja a documentação completa e descubra como o Bootstrap, combinado com a poderosa funcionalidade das etiquetas 4D, pode ajudá-lo a apimentar os seus designs de aplicações baseadas na web 4D.