Warning: ksort() expects parameter 1 to be array, object given in /homepages/3/d382450142/htdocs/BLOG BLANGGO/wp-content/plugins/bbpress/includes/core/template-functions.php on line 316
¿Cómo utilizar HTML Dinámico? | Blog | Blanggo.com

¿Cómo utilizar 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.

¿Cómo funciona?

Los componentes necesarios para el HTML Dinámico son:
1. Datos de servidor  JSON.
2. Una página HTML.
Los datos del servidor JSON proporciona el contenido que se mostrará en la página, por lo general se solicita de un servidor.
La solicitud puede ser específica para un usuario o un lugar.
La plantilla HTML proporcionará la estructura y 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 “[%for-each pics%]<img src=”/[%=.%]” />[%end for-each%]”)
Páginas HTML locales también se pueden actualizar mediante el módulo de sincronización y no son estáticas, estas se completarán con los datos del servidor de forma dinámica y 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 del origen del servidor de 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 la 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 anteriormente se reemplazarán con los datos de la respuesta JSON que resulta en un HTML temporal que se representa 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>
 
NOTA:  Este tipo de representación de los datos permite a los usuarios rellenar dinámicamente el contenido de páginas HTML  sin ningún cambio de diseño.  Esta función ofrece la posibilidad de interconectar la aplicación con la base de datos desde su propio servidor y hacerlo más interactivo.

Blanggo.com