2.6 How to use Dynamic HTML?

Dynamic HTML” is a mechanism that allows mapping the values from some JSON data onto an HTML defined in a specific file. The result will be a nicely designed HTML with some custom data from JSON.

How it works

The required components for the dynamic HTML are:

1-32 JSON data

2-32 template HTML file.

The JSON data provides the content that will be displayed on the page. It is usually requested from a server. The request can be specific to a user or a place. 

The HTML template will provide the structure and design for the content. This is usually a file that already exists on the device. The HTML contains specific blocks of text which act either as placeholders for some data (like “[%=first_name %]”) or introduce some processing logic for the data (like “[%for-each pics%][%end for-each%]”)

Local HTML pages can also be updated using Sync Module. HTML pages are not static. They will be populated with server side data dynamically. It works very similar to XSLT transformations.

Example of an HTML file with our special tags:

<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>

In “app.xml” file for the appropriate page tag needs to be specified JSON datasource url, it’s the “jsonurl” attribute for the “page” tag and it can be any url  like for example http://creatusapps.net/getuserprofilexample.ashx

Expected response in the body should contain the following JSON:

{"profile":{
    pagetitle : "atitle",
    pagesubtitle : "asubtitle",
    imgsrc : "http://creatusapps.net/images/image123.png",
    messages: [
    {messagedate:"1/5/2011", messagetext:"text1"},
    {messagedate:"3/5/2011", messagetext:"text2"},
    {messagedate:"6/5/2011", messagetext:"text3"}
    ]
}}

Custom tags in the html above will be replaced with data from JSON response resulting in a temporary html which will be rendered on the device’s screen.

<html>
<head>
<title>atitle</title>
</head>
<body>
<div>asubtitle</div>
<img src="http://creatusapps.net/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>

NOTE: This type of data representation allow users to populate dynamically content of HTML/native pages without any design changes. This feature offers a possibility to interconnect iPhone app with database from your own server and make it more interactive.

 

Avatar of CreaTusApps

CreaTusApps has written 103 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>