¿Necesita acceder a sus datos 4D desde una página web pero no tiene un diseñador en su equipo? ¿Se siente incómodo diseñando las páginas usted mismo porque en el fondo cree que está lleno de reglas complicadas y no escritas? Bueno, ¿has pensado alguna vez en Bootstrap?
En esta entrada del blog, veremos cómo aprovechar el marco de trabajo de Bootstrap para diseñar páginas web en poco tiempo. También le proporcionaremos un ejemplo de base de datos para ver cómo se puede combinar con las etiquetas de transformación 4D.
HDI: Bootstrap y las etiquetas de transformación 4D
Etiquetas de transformación 4D
Nota: Si ya sabes cómo utilizar las etiquetas de transformación y sólo quieres aprender cómo hacer que se vean mejor, sáltate este capítulo. O siga leyendo para refrescar su memoria…
Existen múltiples etiquetas específicas de 4 D que le permiten insertar referencias a variables, expresiones o diferentes tipos de transformación de 4D en páginas HTML estáticas enviadas por el servidor web. Estas páginas se llaman páginas semi-dinámicas.
Las etiquetas se insertan como comentarios de tipo HTML: <!–#4D…–> para ser procesadas por 4D.
Tenga en cuenta estos principios cuando utilice las etiquetas:
- Debe añadir el sufijo «.shtm» o «.shtml» para forzar el análisis de las páginas HTML.
- La ejecución de un método 4D con 4DTEXT, 4DHTML, 4DEVAL, 4DSCRIPT, 4DIF, 4DELSEIF, o 4DLOOP desde una petición web está sujeta al valor del atributo«Disponible a través de etiquetas y URLs 4D (4DACTION …) » que se define en las propiedades del método. En el ejemplo siguiente, el método sendEmployeesData está configurado para ser accedido a través de la web:
Para saber más sobre las etiquetas 4D, consulta este vídeo del 4D Summit 2016.
En nuestro ejemplo, enviaremos una lista de empleados a nuestra página SHTML. Y gracias a la etiqueta <!–#4DLOOP…–> , podemos iterar por nuestra matriz de empleados. Luego se pueden mostrar con la etiqueta <! –#4dtext…–>. El código final se verá así:
<!--#4dscript/sendEmployeesData--> //Execute the 4D method
<tabla>
<tr><th>Nombre</th>
...
<th>Correo electrónico</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 su servidor web y ejecute el código para ver los resultados:
No está mal, pero no es genial. No hay que preocuparse. Veamos cómo Bootstrap puede ayudar a embellecer este …., especialmente porque las tablas existen en la mayoría de los programas y son un elemento esencial para presentar los datos a los usuarios finales.
Tablas de Bootstrap
Utilizar Bootstrap con 4D es sencillo: descargue la versión compilada, cópiela en la carpeta web de su base de datos y luego incluya los archivos JS y CSS en su archivo SHTML .
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
Ten en cuenta que hay muchas versiones de Bootstrap (la versión 4 es la más reciente). En esta entrada del blog, estamos usando la versión 4.
Para ver el poder de Bootstrap, vamos a mejorar visualmente nuestra tabla.
Es muy fácil hacerla más atractiva: basta con añadir la clase .table a la etiqueta <table> para aplicar algo de formato visual. Incluso mejor, si eres fan del modo oscuro, Bootstrap tiene una clase .table-dark para ti. Incluso hay una clase .table-striped para añadir un estilo de rayas de cebra. Y todas estas clases pueden combinarse dependiendo de lo que quieras conseguir. Abra su archivo SHTML, añada estas clases, y seleccione Ejecutar/Probar Servidor Web desde 4D:
<table class="table table-dark table-striped">
Muy bien.
Bootstrap tiene una interesante lista de estilos de tabla. Revise la documentación y vea lo que funciona para usted.
Puedes ahorrar mucho tiempo utilizando las plantillas y clases de diseño predefinidas de Bootstrap. En este post, sólo hemos arañado la superficie de lo que se puede hacer con el framework. Vea la documentación completa y descubra cómo Bootstrap, combinado con la poderosa función de etiquetas 4D, puede ayudarle a darle vida a sus diseños de aplicaciones web 4D.