Como conectar Base de datos, HTML dinámico.

The APP Maker
  • Actualización
Seguir

Conectar base de datos a tu aplicación.

Esta función ofrece la posibilidad de interconectar la aplicación con la base de datos desde tu propio servidor y hacerlo más interactivo.

Este tipo de representación de datos permite que los usuarios puedan rellenar dinámicamente el contenido de páginas HTML/Nativas sin necesidad de realizar ningún cambio de diseño. 

 

 

HTML dinámico

El HTML dinámico es un mecanismo que permite el mapeo de los valores de algunos datos JSON en un código HTML definido en un archivo específico. El resultado será un HTML muy bien diseñado con algunos datos personalizados de JSON.

 

Los componentes necesarios para el HTML dinámico son:

- Datos de JSON

- Función / Pagina HTML.

Los datos JSON proporcionan el contenido que se mostrará en la página. Por lo general, se solicitan de un servidor. La solicitud puede ser específica para un usuario o un lugar.

La función HTML proporcionará la estructura y el diseño del contenido. Esto suele ser un archivo que ya existe en el dispositivo. El HTML contiene bloques específicos de texto que actúan ya sea como marcadores de posición de algunos datos (como “[% = first_name%]“) o introducir una lógica de procesamiento para los datos (como “[% para cada pics%] <img src =” / [% =.%] “/> [% end for-each%]“)

Las páginas HTML locales también se pueden actualizar mediante la función de sincronización. Las páginas HTML no son estáticas. Ellos se rellenarán con los datos del servidor de forma dinámica. Su funcionamiento es muy similar a las transformaciones XSLT.

 

Ejemplo de un archivo HTML con nuestras etiquetas especiales:

<html>
<head>
<title>[%=profile.pagetitle%]</title>
</head>
<body>
<div>[%=profile.pagesubtitle%]</div>
<img src=”/[%=profile.imgsrc%]“><br>
Messages:<br>
<table>
[%for-each profile.messages%]
<tr>
   <td>[%=messagetext%]</td>
   <td>[%=messagedate%]</td>
</tr>
[%end for-each%]
</table>
</body>
</html>
 
En el archivo “app.xml” para la etiqueta de página correspondiente se debe especificar la URL de origen de los datos JSON, es el atributo “jsonurl” para la “página” de etiquetas y puede ser cualquier url.
La respuesta esperada en el cuerpo debe contener el siguiente JSON:
 
{“profile”:{
pagetitle : “atitle”,
pagesubtitle : “asubtitle”,
imgsrc : “http://dine.com/images/image123.png”,
messages: [
{messagedate:”1/5/2011″, messagetext:”text1″},
{messagedate:”3/5/2011″, messagetext:”text2″},
{messagedate:”6/5/2011″, messagetext:”text3″}
]
}}
 
Las etiquetas personalizadas en el código HTML de arriba se reemplazarán con los datos de la respuesta JSON que resulta en un HTML temporal que se mostrara en la pantalla del dispositivo.
 
<html>
<head>
<title>atitle</title>
</head>
<body>
<div>asubtitle</div>
<img src=”http://dine.com/images/image123.png”><br>
Messages:<br>
<table>
<tr>
   <td>text1</td>
   <td>1/5/2011</td>
</tr>
<tr>
   <td>text2</td>
   <td>3/5/2011</td>
</tr>
<tr>
   <td>text3</td>
   <td>6/5/2011</td>
</tr>
</table>
</body>
</html>
 
 
---------------------------------------------------------------------------------------------

 

Como crear-una-app-gratis

Artículos relacionados

Comentarios

0 comentarios

El artículo está cerrado para comentarios.